working text selector; text input needs more work

assets/locales/en/terrarum.json

@@ -13,5 +13,7 @@
   "GAME_32BIT_WARNING2": "Please download and install the latest 64-Bit Java at:",
   "GAME_32BIT_WARNING3": "https://www.java.com/en/download/",
   "MENU_OPTION_STREAMERS_LAYOUT": "Chat Overlay Mode",
-  "MENU_LABEL_RESTART_REQUIRED": "Restart Required"
+  "MENU_LABEL_RESTART_REQUIRED": "Restart Required",
+  "MENU_LABEL_KEYBOARD_LAYOUT": "Keyboard Layout",
+  "MENU_LABEL_IME": "IME"
 }

assets/locales/koKR/terrarum.json

@@ -12,5 +12,7 @@
   "GAME_32BIT_WARNING2": "아래 링크에서 최신 64비트 Java를 내려받아 설치해주세요.",
   "GAME_32BIT_WARNING3": "https://www.java.com/ko/download/",
   "MENU_OPTION_STREAMERS_LAYOUT": "스트리머 채팅창 모드",
-  "MENU_LABEL_RESTART_REQUIRED": "재시작 필요"
+  "MENU_LABEL_RESTART_REQUIRED": "재시작 필요",
+  "MENU_LABEL_KEYBOARD_LAYOUT": "자판 배열",
+  "MENU_LABEL_IME": "입력기"
 }

src/net/torvald/terrarum/App.java

@@ -23,6 +23,7 @@ import net.torvald.terrarum.controller.GdxControllerAdapter;
 import net.torvald.terrarum.controller.TerrarumController;
 import net.torvald.terrarum.controller.XinputControllerAdapter;
 import net.torvald.terrarum.gameactors.BlockMarkerActor;
+import net.torvald.terrarum.gamecontroller.IME;
 import net.torvald.terrarum.gamecontroller.KeyToggler;
 import net.torvald.terrarum.gameworld.GameWorld;
 import net.torvald.terrarum.imagefont.TinyAlphNum;
@@ -178,6 +179,7 @@ public class App implements ApplicationListener {
     public static CreateTileAtlas tileMaker;
 
     public static GameFontBase fontGame;
+    public static GameFontBase fontGameFBO;
     public static TinyAlphNum fontSmallNumbers;
 
     /** A gamepad. Multiple gamepads may controll this single virtualised gamepad. */
@@ -491,20 +493,18 @@ public class App implements ApplicationListener {
             environment = RunningEnvironment.PC;
         }*/
 
-
         fontGame = new GameFontBase(FONT_DIR, false, true, false,
                 Texture.TextureFilter.Nearest, Texture.TextureFilter.Nearest, false,
                 256, false, 0.5f, false
         );
+        fontGameFBO = new GameFontBase(FONT_DIR, false, true, false,
+                Texture.TextureFilter.Nearest, Texture.TextureFilter.Nearest, false,
+                64, false, 203f/255f, false
+        );
         Lang.invoke();
 
         // make loading list
         CommonResourcePool.INSTANCE.loadAll();
-
-        // create tile atlas
-        printdbg(this, "Making terrain textures...");
-        tileMaker = new CreateTileAtlas();
-        tileMaker.invoke(false);
     }
 
     @Override
@@ -742,6 +742,7 @@ public class App implements ApplicationListener {
         shapeRender.dispose();
 
         fontGame.dispose();
+        fontGameFBO.dispose();
         fontSmallNumbers.dispose();
         ItemSlotImageFactory.INSTANCE.dispose();
 
@@ -823,6 +824,13 @@ public class App implements ApplicationListener {
      * Init stuffs which needs GL context
      */
     private void postInit() {
+        // create tile atlas
+        printdbg(this, "Making terrain textures...");
+        tileMaker = new CreateTileAtlas();
+        tileMaker.invoke(false);
+
+        IME.INSTANCE.invoke();
+
         Terrarum.initialise();
 
         TextureRegionPack.Companion.setGlobalFlipY(true);

src/net/torvald/terrarum/gamecontroller/IME.kt

@@ -1,6 +1,7 @@
 package net.torvald.terrarum.gamecontroller
 
-import com.badlogic.gdx.Gdx
+import net.torvald.terrarum.App.printdbg
+import java.io.File
 
 data class TerrarumKeyLayout(
         val name: String,
@@ -24,9 +25,9 @@ data class TerrarumKeyLayout(
 object IME {
 
     const val KEYLAYOUT_DIR = "assets/keylayout/"
-    const val KEYLAYOUT_EXTENSION = ".key"
+    const val KEYLAYOUT_EXTENSION = "key"
 
-    private val cached = HashMap<String, TerrarumKeyLayout>()
+    private val lowLayers = HashMap<String, TerrarumKeyLayout>()
 
     private val context = org.graalvm.polyglot.Context.newBuilder("js")
             .allowHostAccess(org.graalvm.polyglot.HostAccess.NONE)
@@ -34,16 +35,28 @@ object IME {
             .allowIO(false)
             .build()
 
+    init {
+        File(KEYLAYOUT_DIR).listFiles { file, s -> s.endsWith(".$KEYLAYOUT_EXTENSION") }.forEach {
+            printdbg(this, "Registering Low layer ${it.nameWithoutExtension.lowercase()}")
+            lowLayers[it.nameWithoutExtension.lowercase()] = parseKeylayoutFile(it)
+        }
+    }
+
+    fun invoke() {}
+
     fun getLowLayerByName(name: String): TerrarumKeyLayout {
-        return cached.getOrPut(name) { parseKeylayoutFile("$KEYLAYOUT_DIR$name$KEYLAYOUT_EXTENSION") }
+        return lowLayers[name.lowercase()]!!
+    }
+
+    fun getAllLowLayers(): List<String> {
+        return lowLayers.keys.toList()
     }
 
 
 
-    private fun parseKeylayoutFile(path: String): TerrarumKeyLayout {
+    private fun parseKeylayoutFile(file: File): TerrarumKeyLayout {
-        val file = Gdx.files.internal(path)
+        val src = file.readText(Charsets.UTF_8)
-        val src = file.readString("UTF-8")
+        val jsval = context.eval("js", "Object.freeze($src)")
-        val jsval = context.eval("js", "let t=$src;Object.freeze(t)")
         val name = jsval.getMember("n").asString()
         val out = Array(256) { Array<String?>(4) { null } }
         for (keycode in 0L until 256L) {

src/net/torvald/terrarum/gamecontroller/IngameController.kt

@@ -289,7 +289,7 @@ class IngameController(val terrarumIngame: TerrarumIngame) : InputAdapter() {
         private var repeatCount = 0
         private var oldKeys = IntArray(N_KEY_ROLLOVER) { 0 }
         /** always Low Layer */
-        private var keymap = IME.getLowLayerByName(App.getConfigString("basekeyboardlayout"))
+//        private var keymap = IME.getLowLayerByName(App.getConfigString("basekeyboardlayout"))
 
         fun resetKeyboardStrobo() {
             stroboStatus = 0
@@ -301,6 +301,7 @@ class IngameController(val terrarumIngame: TerrarumIngame) : InputAdapter() {
             val keys = strobeKeys()
             var keyChanged = !arrayEq(keys, oldKeys)
             val keyDiff = arrayDiff(keys, oldKeys)
+            val keymap = IME.getLowLayerByName(App.getConfigString("basekeyboardlayout"))
 
             if (stroboStatus % 2 == 0 && keys[0] != 0) {
                 stroboStatus += 1
@@ -308,8 +309,8 @@ class IngameController(val terrarumIngame: TerrarumIngame) : InputAdapter() {
                 repeatCount += 1
 
                 val shiftin = keys.contains(Keys.SHIFT_LEFT) || keys.contains(Keys.SHIFT_RIGHT)
-                val keysym0 = keysToStr(keys)
+                val keysym0 = keysToStr(keymap, keys)
-                val newKeysym0 = keysToStr(keyDiff)
+                val newKeysym0 = keysToStr(keymap, keyDiff)
                 val keysym = if (keysym0 == null) null
                 else if (shiftin && keysym0[1]?.isNotBlank() == true) keysym0[1]
                 else keysym0[0]
@@ -342,7 +343,7 @@ class IngameController(val terrarumIngame: TerrarumIngame) : InputAdapter() {
             }
         }
 
-        private fun keysToStr(keys: IntArray): Array<String?>? {
+        private fun keysToStr(keymap: TerrarumKeyLayout, keys: IntArray): Array<String?>? {
             if (keys.size == 0) return null
             val headkey = keys[0]
             return if (keymap.symbols!![headkey] == null) null else keymap.symbols!![headkey]

src/net/torvald/terrarum/modulebasegame/ui/UIKeyboardControlPanel.kt

@@ -6,11 +6,15 @@ import com.badlogic.gdx.graphics.Camera
 import com.badlogic.gdx.graphics.Color
 import com.badlogic.gdx.graphics.g2d.SpriteBatch
 import com.badlogic.gdx.graphics.g2d.TextureRegion
+import net.torvald.EMDASH
 import net.torvald.terrarum.App
 import net.torvald.terrarum.CommonResourcePool
 import net.torvald.terrarum.DefaultConfig
+import net.torvald.terrarum.gamecontroller.IME
 import net.torvald.terrarum.langpack.Lang
+import net.torvald.terrarum.linearSearch
 import net.torvald.terrarum.ui.*
+import net.torvald.terrarum.utils.RandomWordsName
 import net.torvald.terrarumsansbitmap.gdx.TextureRegionPack
 
 /**
@@ -27,14 +31,16 @@ class UIKeyboardControlPanel(remoCon: UIRemoCon?) : UICanvas() {
 
     private val labels = CommonResourcePool.getAsTextureRegionPack("inventory_category")
 
-    override var width = 600
+    override var width = 480
     override var height = 600
     override var openCloseTime = 0f
 
+    private val textSelWidth = 300
+
     private val drawX = (Toolkit.drawWidth - width) / 2
     private val drawY = (App.scr.height - height) / 2
 
-    internal val kbx = drawX + 61
+    internal val kbx = drawX + 1
     internal val kby = drawY + 95
 
     private val oneu = 28
@@ -127,9 +133,25 @@ class UIKeyboardControlPanel(remoCon: UIRemoCon?) : UICanvas() {
 
     private val controlPalette = UIItemControlPaletteBaloon(this, (Toolkit.drawWidth - 480) / 2, kby + 219)
 
-    private val textInputPanel = UIItemTextLineInput(this, drawX, 360, width)
+
+    private val lowLayerCodes = IME.getAllLowLayers()
+    private val lowLayerNames = lowLayerCodes.map { { IME.getLowLayerByName(it).name } }
+    private val keyboardLayoutSelection = UIItemTextSelector(this, drawX + width - textSelWidth - 3, 400, lowLayerNames, lowLayerCodes.linearSearch { it == App.getConfigString("basekeyboardlayout") }!!, textSelWidth)
+
+    private val imeCodes = listOf("null", "ko_kr_2set_standard", "ko_kr_3set_390")
+    private val imeNames = listOf({ "$EMDASH" },{ "표준 두벌식" },{ "세벌식 3-90" })
+    private val imeSelection = UIItemTextSelector(this, drawX + width - textSelWidth - 3, 440, imeNames, 0, textSelWidth)
+
+
+
+    private val keyboardTestPanel = UIItemTextLineInput(this, drawX + (width - 480) / 2 + 3, 480, 474)
+
 
     init {
+        keyboardLayoutSelection.selectionChangeListener = {
+            App.setConfig("basekeyboardlayout", lowLayerCodes[it])
+        }
+
         keycaps.values.forEach { addUIitem(it) }
         updateKeycaps()
 
@@ -139,7 +161,9 @@ class UIKeyboardControlPanel(remoCon: UIRemoCon?) : UICanvas() {
             updateKeycaps()
         }
 
-        addUIitem(textInputPanel)
+        addUIitem(keyboardLayoutSelection)
+        addUIitem(imeSelection)
+        addUIitem(keyboardTestPanel)
     }
 
     private fun resetKeyConfig() {
@@ -210,6 +234,8 @@ class UIKeyboardControlPanel(remoCon: UIRemoCon?) : UICanvas() {
         if (keycapClicked >= 0 && controlSelected < 0) {
             controlPalette.render(batch, camera)
         }
+        App.fontGame.draw(batch, Lang["MENU_LABEL_KEYBOARD_LAYOUT"], kbx + 1, keyboardLayoutSelection.initialY)
+        App.fontGame.draw(batch, Lang["MENU_LABEL_IME"], kbx + 1, imeSelection.initialY)
 
 
         val title = Lang["MENU_CONTROLS_KEYBOARD"]
@@ -282,14 +308,14 @@ class UIItemKeycap(
     var selected = false
 
     private val borderKeyForbidden = Color(0x000000C0)
-    private val borderKeyNormal = Color(0xFFFFFFAA.toInt())
+    private val borderKeyNormal = Toolkit.Theme.COL_INACTIVE
     private val borderMouseUp = Toolkit.Theme.COL_ACTIVE
     private val borderKeyPressed = Toolkit.Theme.COL_HIGHLIGHT
     private val borderKeyPressedAndSelected = Color(0x33FF33FF.toInt())
 
     private val keycapFill = Toolkit.Theme.COL_CELL_FILL
 
-    private val keylabelCol = Color(0xFFFFFF40.toInt())
+    private val keylabelCol = Toolkit.Theme.COL_DISABLED
     private val configuredKeyCol = Color.WHITE
 
     override fun update(delta: Float) {

src/net/torvald/terrarum/ui/UIItem.kt

@@ -87,7 +87,7 @@ abstract class UIItem(var parentUI: UICanvas, val initialX: Int, val initialY: I
 
     /** If mouse is hovering over it */
     open val mouseUp: Boolean
-        get() = relativeMouseX in 0..width - 1 && relativeMouseY in 0..height - 1
+        get() = relativeMouseX in 0 until width && relativeMouseY in 0 until height
     /** If mouse is hovering over it and mouse is down */
     open val mousePushed: Boolean
         get() = mouseUp && Terrarum.mouseDown

src/net/torvald/terrarum/ui/UIItemTextLineInput.kt

@@ -20,16 +20,17 @@ class UIItemTextLineInput(
         parentUI: UICanvas,
         initialX: Int, initialY: Int,
         override val width: Int,
-        override val height: Int = 24,
+        var placeholder: () -> String = { "" },
-        var placeholder: String? = null,
         val enablePasteButton: Boolean = true,
         val enableLanguageButton: Boolean = false
 ) : UIItem(parentUI, initialX, initialY) {
 
+    override val height = 24
+
     companion object {
         val TEXTINPUT_COL_TEXT = Color.WHITE
-        val TEXTINPUT_COL_BORDER = Toolkit.Theme.COL_ACTIVE
+        val TEXTINPUT_COL_TEXT_HALF = Color.WHITE.cpy().mul(1f,1f,1f,0.5f)
-        val TEXTINPUT_COL_BORDER_INACTIVE = Toolkit.Theme.COL_INACTIVE
+        val TEXTINPUT_COL_TEXT_DISABLED = Toolkit.Theme.COL_DISABLED
         val TEXTINPUT_COL_BACKGROUND = Toolkit.Theme.COL_CELL_FILL
         const val CURSOR_BLINK_TIME = 1f / 3f
     }
@@ -37,7 +38,6 @@ class UIItemTextLineInput(
     private val fbo = FrameBuffer(Pixmap.Format.RGBA8888, width - 4, height - 4, true)
 
     var isActive = true
-    var isGreyedOut = false
 
     var cursorX = 0 // 1 per char (not codepoint)
     var cursorCodepoint = 0
@@ -46,10 +46,12 @@ class UIItemTextLineInput(
     var cursorBlinkCounter = 0f
     var cursorOn = true
 
-    val keybuf = StringBuilder()
+    private val textbuf = StringBuilder()
 
     private var fboUpdateLatch = true
 
+    private var currentPlaceholderText = placeholder() // the placeholder text may change every time you call it
+
     override fun update(delta: Float) {
         super.update(delta)
 
@@ -64,22 +66,22 @@ class UIItemTextLineInput(
 
                 if (cursorX > 0 && keycodes.contains(Input.Keys.BACKSPACE)) {
                     cursorCodepoint -= 1
-                    val lastCp = keybuf.codePointAt(cursorCodepoint)
+                    val lastCp = textbuf.codePointAt(cursorCodepoint)
                     val charCount = Character.charCount(lastCp)
                     cursorX -= charCount
-                    keybuf.delete(cursorX, cursorX + charCount)
+                    textbuf.delete(cursorX, cursorX + charCount)
 
                     cursorDrawX -= App.fontGame.getWidth(String(Character.toChars(lastCp))) - 1
                     codepointCount -= 1
                 }
                 else if (cursorX > 0 && keycodes.contains(Input.Keys.LEFT)) {
                     cursorCodepoint -= 1
-                    cursorX -= Character.charCount(keybuf.codePointAt(cursorCodepoint))
+                    cursorX -= Character.charCount(textbuf.codePointAt(cursorCodepoint))
-                    val lastCp = keybuf.codePointAt(cursorCodepoint)
+                    val lastCp = textbuf.codePointAt(cursorCodepoint)
                     cursorDrawX -= App.fontGame.getWidth(String(Character.toChars(lastCp))) - 1
                 }
                 else if (cursorX < codepointCount && keycodes.contains(Input.Keys.RIGHT)) {
-                    val lastCp = keybuf.codePointAt(cursorCodepoint)
+                    val lastCp = textbuf.codePointAt(cursorCodepoint)
                     cursorDrawX += App.fontGame.getWidth(String(Character.toChars(lastCp))) - 1
                     cursorX += Character.charCount(lastCp)
                     cursorCodepoint += 1
@@ -88,7 +90,7 @@ class UIItemTextLineInput(
                 // - literal "<"
                 // - keysymbol that does not start with "<" (not always has length of 1 because UTF-16)
                 else if (char != null && char[0].code >= 32 && (char == "<" || !char.startsWith("<"))) {
-                    keybuf.insert(cursorX, char)
+                    textbuf.insert(cursorX, char)
 
                     cursorDrawX += App.fontGame.getWidth(char) - 1
                     cursorX += char.length
@@ -97,6 +99,10 @@ class UIItemTextLineInput(
                 }
             }
 
+            if (cursorCodepoint == 0) {
+                currentPlaceholderText = placeholder()
+            }
+
             cursorBlinkCounter += delta
 
             while (cursorBlinkCounter >= CURSOR_BLINK_TIME) {
@@ -117,7 +123,7 @@ class UIItemTextLineInput(
                 gdxClearAndSetBlend(0f, 0f, 0f, 0f)
 
                 it.color = Color.WHITE
-                App.fontGame.draw(it, "$keybuf", 0f, 0f)
+                App.fontGameFBO.draw(it, if (textbuf.isEmpty()) currentPlaceholderText else "$textbuf", 0f, 0f)
             } }
         }
 
@@ -126,19 +132,17 @@ class UIItemTextLineInput(
         batch.color = TEXTINPUT_COL_BACKGROUND
         Toolkit.fillArea(batch, posX, posY, width, height)
 
-        batch.color = if (isActive) TEXTINPUT_COL_BORDER else TEXTINPUT_COL_BORDER_INACTIVE
+        batch.color = if (isActive) Toolkit.Theme.COL_HIGHLIGHT else if (mouseUp) Toolkit.Theme.COL_ACTIVE else Toolkit.Theme.COL_INACTIVE
         Toolkit.drawBoxBorder(batch, posX - 1, posY - 1, width + 2, height + 2)
 
-        batch.color = TEXTINPUT_COL_TEXT
+        batch.color = if (textbuf.isEmpty()) TEXTINPUT_COL_TEXT_DISABLED else TEXTINPUT_COL_TEXT
         batch.draw(fbo.colorBufferTexture, posX + 2f, posY + 2f, fbo.width.toFloat(), fbo.height.toFloat())
 
         if (isActive && cursorOn) {
-            val oldBatchCol = batch.color.cpy()
+            batch.color = TEXTINPUT_COL_TEXT_HALF
-
-            batch.color = batch.color.mul(0.5f,0.5f,0.5f,1f)
             Toolkit.fillArea(batch, posX + cursorDrawX + 3, posY, 2, 24)
 
-            batch.color = oldBatchCol
+            batch.color = TEXTINPUT_COL_TEXT
             Toolkit.fillArea(batch, posX + cursorDrawX + 3, posY, 1, 23)
         }
 
@@ -146,6 +150,9 @@ class UIItemTextLineInput(
         super.render(batch, camera)
     }
 
+    fun getText() = textbuf.toString()
+    fun getTextOrPlaceholder() = if (textbuf.isEmpty()) currentPlaceholderText else getText()
+
     override fun dispose() {
         fbo.dispose()
     }

src/net/torvald/terrarum/ui/UIItemTextSelector.kt

@@ -0,0 +1,158 @@
+package net.torvald.terrarum.ui
+
+import com.badlogic.gdx.graphics.Camera
+import com.badlogic.gdx.graphics.Color
+import com.badlogic.gdx.graphics.OrthographicCamera
+import com.badlogic.gdx.graphics.Pixmap
+import com.badlogic.gdx.graphics.g2d.SpriteBatch
+import com.badlogic.gdx.graphics.glutils.FrameBuffer
+import net.torvald.terrarum.*
+import net.torvald.terrarum.gameworld.fmod
+import net.torvald.terrarumsansbitmap.gdx.TextureRegionPack
+
+/**
+ * @param width width of the text input where the text gets drawn, not the entire item
+ * @param height height of the text input where the text gets drawn, not the entire item
+ *
+ * Created by minjaesong on 2021-10-21.
+ */
+class UIItemTextSelector(
+        parentUI: UICanvas,
+        initialX: Int, initialY: Int,
+        val labelfuns: List<() -> String>,
+        intialSelection: Int,
+        override val width: Int,
+        private val drawBorder: Boolean = true
+) : UIItem(parentUI, initialX, initialY) {
+
+    init {
+        CommonResourcePool.addToLoadingList("inventory_category") {
+            TextureRegionPack("assets/graphics/gui/inventory/category.tga", 20, 20)
+        }
+        CommonResourcePool.loadAll()
+    }
+
+    private val labels = CommonResourcePool.getAsTextureRegionPack("inventory_category")
+
+    override val height = 24
+    private val buttonW = 30
+
+    private val fbo = FrameBuffer(Pixmap.Format.RGBA8888, width - 54 - 4, height - 4, true)
+
+    var selection = intialSelection
+    private var fboUpdateLatch = true
+
+    private var mouseOnButton = 0 // 0: nothing, 1: left, 2: right
+
+    var selectionChangeListener: (Int) -> Unit = {}
+
+    override fun update(delta: Float) {
+        super.update(delta)
+
+        mouseOnButton =
+                if (relativeMouseX in 0..buttonW && relativeMouseY in 0..height)
+                    1
+                else if (relativeMouseX in width - buttonW..width && relativeMouseY in 0..height)
+                    2
+                else
+                    0
+
+        if (!mouseLatched && Terrarum.mouseDown && mouseOnButton != 0) {
+            mouseLatched = true
+            selection = (selection + (mouseOnButton * 2) - 3) fmod labelfuns.size
+            fboUpdateLatch = true
+            selectionChangeListener(selection)
+        }
+        else if (!Terrarum.mouseDown) mouseLatched = false
+    }
+
+    override fun render(batch: SpriteBatch, camera: Camera) {
+
+        batch.end()
+
+        if (fboUpdateLatch) {
+            fboUpdateLatch = false
+            fbo.inAction(camera as OrthographicCamera, batch) { batch.inUse {
+                gdxClearAndSetBlend(0f, 0f, 0f, 0f)
+
+                it.color = Color.WHITE
+                val t = labelfuns[selection]()
+                val tw = App.fontGame.getWidth(t)
+                App.fontGameFBO.draw(it, t, (fbo.width - tw) / 2, 0)
+            } }
+        }
+
+        batch.begin()
+
+        if (drawBorder) {
+            batch.color = UIItemTextLineInput.TEXTINPUT_COL_BACKGROUND
+            // left button cell back
+            Toolkit.fillArea(batch, posX, posY, buttonW, height)
+            // text area cell back
+            Toolkit.fillArea(batch, posX + buttonW + 3, posY, width - 2*buttonW - 6, height)
+            // right button cell back
+            Toolkit.fillArea(batch, posX + width - buttonW, posY, buttonW, height)
+
+            // text area border
+            batch.color = Toolkit.Theme.COL_INACTIVE
+            Toolkit.drawBoxBorder(batch, posX + buttonW + 2, posY - 1, width - 2*buttonW - 6 + 2, height + 2)
+
+            // left button border
+            batch.color = if (mouseOnButton == 1 && mousePushed) Toolkit.Theme.COL_HIGHLIGHT
+            else if (mouseOnButton == 1) Toolkit.Theme.COL_ACTIVE else Toolkit.Theme.COL_INACTIVE
+            Toolkit.drawBoxBorder(batch, posX - 1, posY - 1, buttonW + 2, height + 2)
+
+            // right button border
+            batch.color = if (mouseOnButton == 2 && mousePushed) Toolkit.Theme.COL_HIGHLIGHT
+            else if (mouseOnButton == 2) Toolkit.Theme.COL_ACTIVE else Toolkit.Theme.COL_INACTIVE
+            Toolkit.drawBoxBorder(batch, posX + width - buttonW - 1, posY - 1, buttonW + 2, height + 2)
+        }
+
+        // left button icon
+        batch.color = if (mouseOnButton == 1 && mousePushed) Toolkit.Theme.COL_HIGHLIGHT
+        else if (mouseOnButton == 1) Toolkit.Theme.COL_ACTIVE else UIItemTextLineInput.TEXTINPUT_COL_TEXT
+        batch.draw(labels.get(16,0), posX + (buttonW - labels.tileW) / 2f, posY + (height - labels.tileH) / 2f)
+
+        // right button icon
+        batch.color = if (mouseOnButton == 2 && mousePushed) Toolkit.Theme.COL_HIGHLIGHT
+        else if (mouseOnButton == 2) Toolkit.Theme.COL_ACTIVE else UIItemTextLineInput.TEXTINPUT_COL_TEXT
+        batch.draw(labels.get(17,0), posX + width - buttonW + (buttonW - labels.tileW) / 2f, posY + (height - labels.tileH) / 2f)
+
+        // draw text
+        batch.color = UIItemTextLineInput.TEXTINPUT_COL_TEXT
+        batch.draw(fbo.colorBufferTexture, posX + buttonW + 5f, posY + 2f, fbo.width.toFloat(), fbo.height.toFloat())
+
+
+        super.render(batch, camera)
+    }
+
+    override fun dispose() {
+        fbo.dispose()
+    }
+}
+
+class UIItemSpinner(
+        parentUI: UICanvas,
+        initialX: Int, initialY: Int,
+        intialValue: Int,
+        val min: Int,
+        val max: Int,
+        val step: Int,
+        override val width: Int
+) : UIItem(parentUI, initialX, initialY) {
+
+    init {
+        CommonResourcePool.addToLoadingList("inventory_category") {
+            TextureRegionPack("assets/graphics/gui/inventory/category.tga", 20, 20)
+        }
+        CommonResourcePool.loadAll()
+    }
+
+    private val labels = CommonResourcePool.getAsTextureRegionPack("inventory_category")
+
+    override val height = 24
+
+    override fun dispose() {
+
+    }
+}