working text selector; text input needs more work

2026-03-07 20:31:51 +09:00 · 2021-10-21 15:08:39 +09:00
parent 22da01eea0
commit f07be81007
10 changed files with 263 additions and 46 deletions
--- a/assets/locales/en/terrarum.json
+++ b/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"
 }
--- a/assets/locales/koKR/terrarum.json
+++ b/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": "입력기"
 }
--- a/lib/TerrarumSansBitmap.jar
+++ b/lib/TerrarumSansBitmap.jar
--- a/src/net/torvald/terrarum/App.java
+++ b/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);
--- a/src/net/torvald/terrarum/gamecontroller/IME.kt
+++ b/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 {
-        val file = Gdx.files.internal(path)
-        val src = file.readString("UTF-8")
-        val jsval = context.eval("js", "let t=$src;Object.freeze(t)")
+    private fun parseKeylayoutFile(file: File): TerrarumKeyLayout {
+        val src = file.readText(Charsets.UTF_8)
+        val jsval = context.eval("js", "Object.freeze($src)")
        val name = jsval.getMember("n").asString()
        val out = Array(256) { Array<String?>(4) { null } }
        for (keycode in 0L until 256L) {
--- a/src/net/torvald/terrarum/gamecontroller/IngameController.kt
+++ b/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 newKeysym0 = keysToStr(keyDiff)
+                val keysym0 = keysToStr(keymap, keys)
+                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]
--- a/src/net/torvald/terrarum/modulebasegame/ui/UIKeyboardControlPanel.kt
+++ b/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) {
--- a/src/net/torvald/terrarum/ui/UIItem.kt
+++ b/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
--- a/src/net/torvald/terrarum/ui/UIItemTextLineInput.kt
+++ b/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? = null,
+        var placeholder: () -> String = { "" },
        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_BORDER_INACTIVE = Toolkit.Theme.COL_INACTIVE
+        val TEXTINPUT_COL_TEXT_HALF = Color.WHITE.cpy().mul(1f,1f,1f,0.5f)
+        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))
-                    val lastCp = keybuf.codePointAt(cursorCodepoint)
+                    cursorX -= Character.charCount(textbuf.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 = batch.color.mul(0.5f,0.5f,0.5f,1f)
+            batch.color = TEXTINPUT_COL_TEXT_HALF
            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()
    }
--- a/src/net/torvald/terrarum/ui/UIItemTextSelector.kt
+++ b/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() {
+
+    }
+}