UI: Better unit table

android/assets/Skin.json

@@ -1,278 +1,313 @@
 {
-com.badlogic.gdx.graphics.g2d.BitmapFont: {
+    com.badlogic.gdx.graphics.g2d.BitmapFont: {
-    button: "Nativefont"
+        button: "Nativefont"
-    font: "Nativefont"
+        font: "Nativefont"
-    title: "Nativefont"
+        title: "Nativefont"
-}
-com.badlogic.gdx.graphics.Color: {
-    black: {
-        r: 0
-        g: 0
-        b: 0
-        a: 1
     }
-    color: {
+    com.badlogic.gdx.graphics.Color: {
-        r: 0.2
+        black: {
-        g: 0.3
+            r: 0
-        b: 0.5
+            g: 0
-        a: 1
+            b: 0
+            a: 1
+        }
+        color: {
+            r: 0.2
+            g: 0.3
+            b: 0.5
+            a: 1
+        }
+        gray: {
+            r: 0.5
+            g: 0.5
+            b: 0.5
+            a: 1
+        }
+        dark-gray: {
+            a: 1.0,
+            b: 0.25,
+            g: 0.25,
+            r: 0.25
+        }
+        disabled: {
+            a: 1.0,
+            b: 0.24313726,
+            g: 0.16862746,
+            r: 0.14509805
+        }
+        highlight: {
+            a: 1.0,
+            b: 0.44705883,
+            g: 0.8627451,
+            r: 0.39607844
+        }
+        pressed: {
+            r: 0.2529412
+            g: 0.6
+            b: 0.33313715
+            a: 1
+        }
+        selection: {
+            r: 0.22745098
+            g: 0.59607846
+            b: 0.85882354
+            a: 1
+        }
+        white: {
+            r: 1
+            g: 1
+            b: 1
+            a: 1
+        }
+        positive: {
+            a: 1.0,
+            b: 0.21960784,
+            g: 0.49411765,
+            r: 0.12156863
+        }
+        negative: {
+            a: 1.0,
+            b: 0.0,
+            g: 0.03137255,
+            r: 0.5529412
+        }
+        negative-highlight: {
+            a: 1.0,
+            b: 0.050980393,
+            g: 0.078431375,
+            r: 0.8666667
+        }
+        negative-selected: {
+            a: 1.0,
+            b: 0.039215688,
+            g: 0.0627451,
+            r: 0.7764706
+        }
     }
-    gray: {
+    com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
-        r: 0.5
+        button-c: {
-        g: 0.5
+            name: "RoundedEdgeRectangle"
-        b: 0.5
+            color: color
-        a: 1
+        }
+        button-p: {
+            name: "RoundedEdgeRectangle"
+            color: pressed
+        }
+        button-h: {
+            name: "RoundedEdgeRectangle"
+            color: highlight
+        }
+        button-disabled: {
+            name: "RoundedEdgeRectangle"
+            color: disabled
+        }
+        button-positive: {
+            name: "RoundedEdgeRectangle"
+            color: positive
+        }
+        button-negative: {
+            name: "RoundedEdgeRectangle"
+            color: negative
+        }
+        button-negative-pressed: {
+            name: "RoundedEdgeRectangle"
+            color: negative-selected
+        }
+        button-negative-hover: {
+            name: "RoundedEdgeRectangle"
+            color: negative-highlight
+        }
+        checkbox-c: {
+            name: "Checkbox"
+            color: color
+        }
+        checkbox-pressed-c: {
+            name: "Checkbox-pressed"
+            color: color
+        }
+        list-c: {
+            name: "RectangleWithOutline"
+            color: color
+        }
+        scrollbar-c: {
+            name: "Scrollbar"
+            color: color
+        }
+        select-box-c: {
+            name: "Select-box"
+            color: color
+        }
+        select-box-pressed-c: {
+            name: "Select-box-pressed"
+            color: color
+        }
+        select-box-h: {
+            name: "Select-box"
+            color: highlight
+        }
+        slider-knob-c: {
+            name: "Circle"
+            color: color
+        }
+        slider-horizontal-s: {
+            name: "Rectangle"
+            color: selection
+        }
+        slider-vertical-s: {
+            name: "Rectangle"
+            color: selection
+        }
+        slider-knob-h: {
+            name: "Circle"
+            color: highlight
+        }
+        slider-horizontal-p: {
+            name: "Rectangle"
+            color: pressed
+        }
+        slider-vertical-p: {
+            name: "Rectangle"
+            color: pressed
+        }
+        splitpane-horizontal-c: {
+            name: "RectangleWithOutline"
+            color: color
+        }
+        splitpane-vertical-c: {
+            name: "RectangleWithOutline"
+            color: color
+        }
+        textfield-c: {
+            name: "RoundedEdgeRectangle"
+            color: color
+        }
+        selection: {
+            name: "Rectangle"
+            color: selection
+        }
+        white: {
+            name: "Rectangle"
+            color: white
+        }
     }
-    dark-gray: { a: 1.0, b: 0.25, g: 0.25, r: 0.25 }
+    com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
-    disabled: { a: 1.0, b: 0.24313726, g: 0.16862746, r: 0.14509805 }
+        default: {
-    highlight: { a: 1.0, b: 0.44705883, g: 0.8627451, r: 0.39607844 }
+            up: button-c
-    pressed: {
+            down: button-p
-        r: 0.2529412
+            over: button-h
-        g: 0.6
+        }
-        b: 0.33313715
-        a: 1
     }
-    selection: {
+    com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
-        r: 0.22745098
+        default: {
-        g: 0.59607846
+            checkboxOn: checkbox-pressed-c
-        b: 0.85882354
+            checkboxOff: checkbox-c
-        a: 1
+            font: button
+            fontColor: color
+            downFontColor: pressed
+            overFontColor: highlight
+        }
     }
-    white: {
+    com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
-        r: 1
+        default: {
-        g: 1
+            font: font
-        b: 1
+            fontColor: color
-        a: 1
+        }
     }
-    positive: { a: 1.0, b: 0.21960784, g: 0.49411765, r: 0.12156863 }
+    com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
-    negative: { a: 1.0, b: 0.0, g: 0.03137255, r: 0.5529412 }
+        default: {
-    negative-highlight: { a: 1.0, b: 0.050980393, g: 0.078431375, r: 0.8666667 }
+            font: font
-    negative-selected: { a: 1.0, b: 0.039215688, g: 0.0627451, r: 0.7764706 }
+            fontColorSelected: white
-}
+            fontColorUnselected: white
-com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
+            selection: selection
-    button-c: {
+            background: list-c
-        name: "RoundedEdgeRectangle"
+        }
-        color: color
     }
-    button-p: {
+    com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
-        name: "RoundedEdgeRectangle"
+        default: {
-        color: pressed
+            hScrollKnob: scrollbar-c
+            vScrollKnob: scrollbar-c
+        }
     }
-    button-h: {
+    com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
-        name: "RoundedEdgeRectangle"
+        default: {
-        color: highlight
+            font: font
+            fontColor: white
+            background: select-box-c
+            scrollStyle: default
+            listStyle: default
+            backgroundOver: select-box-h
+            backgroundOpen: select-box-pressed-c
+        }
     }
-    button-disabled: {
+    com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
-        name: "RoundedEdgeRectangle"
+        default-horizontal: {
-        color: disabled
+            knobOver: slider-knob-h
+            knobDown: slider-knob-h
+            background: slider-horizontal-p
+            knob: slider-knob-c
+            knobBefore: slider-horizontal-s
+        }
+        default-vertical: {
+            knobOver: slider-knob-h
+            knobDown: slider-knob-h
+            background: slider-vertical-p
+            knob: slider-knob-c
+            knobBefore: slider-vertical-s
+        }
     }
-    button-positive: {
+    com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
-        name: "RoundedEdgeRectangle"
+        default-horizontal: {
-        color: positive
+            handle: splitpane-horizontal-c
+        }
+        default-vertical: {
+            handle: splitpane-vertical-c
+        }
     }
-    button-negative: {
+    com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
-        name: "RoundedEdgeRectangle"
+        default: {
-        color: negative
+            font: button
+            fontColor: white
+            downFontColor: white
+            overFontColor: dark-gray
+            up: button-c
+            down: button-p
+            over: button-h
+        }
+        positive: {
+            font: button
+            fontColor: white
+            downFontColor: white
+            overFontColor: dark-gray
+            up: button-positive
+            down: button-p
+            over: button-h
+        }
+        negative: {
+            font: button
+            fontColor: white
+            downFontColor: white
+            overFontColor: white
+            up: button-negative
+            down: button-negative-pressed
+            over: button-negative-hover
+        }
+        disabled: {
+            font: button
+            fontColor: white
+            downFontColor: white
+            overFontColor: white
+            up: button-disabled
+            down: button-disabled
+            over: button-disabled
+        }
     }
-    button-negative-pressed: {
+    com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
-        name: "RoundedEdgeRectangle"
+        default: {
-        color: negative-selected
+            font: font
-    }
+            fontColor: white
-    button-negative-hover: {
+            background: textfield-c
-        name: "RoundedEdgeRectangle"
+            cursor: white
-        color: negative-highlight
+            selection: selection
-    }
+        }
-    checkbox-c: {
-        name: "Checkbox"
-        color: color
-    }
-    checkbox-pressed-c: {
-        name: "Checkbox-pressed"
-        color: color
-    }
-    list-c: {
-        name: "RectangleWithOutline"
-        color: color
-    }
-    scrollbar-c: {
-        name: "Scrollbar"
-        color: color
-    }
-    select-box-c: {
-        name: "Select-box"
-        color: color
-    }
-    select-box-pressed-c: {
-        name: "Select-box-pressed"
-        color: color
-    }
-    select-box-h: {
-        name: "Select-box"
-        color: highlight
-    }
-    slider-knob-c: {
-        name: "Circle"
-        color: color
-    }
-    slider-horizontal-s: {
-        name: "Rectangle"
-        color: selection
-    }
-    slider-vertical-s: {
-        name: "Rectangle"
-        color: selection
-    }
-    slider-knob-h: {
-        name: "Circle"
-        color: highlight
-    }
-    slider-horizontal-p: {
-        name: "Rectangle"
-        color: pressed
-    }
-    slider-vertical-p: {
-        name: "Rectangle"
-        color: pressed
-    }
-    splitpane-horizontal-c: {
-        name: "RectangleWithOutline"
-        color: color
-    }
-    splitpane-vertical-c: {
-        name: "RectangleWithOutline"
-        color: color
-    }
-    textfield-c: {
-        name: "RoundedEdgeRectangle"
-        color: color
-    }
-    selection: {
-        name: "Rectangle"
-        color: selection
-    }
-    white: {
-        name: "Rectangle"
-        color: white
     }
 }
-com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
-    default: {
-        up: button-c
-        down: button-p
-        over: button-h
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
-    default: {
-        checkboxOn: checkbox-pressed-c
-        checkboxOff: checkbox-c
-        font: button
-        fontColor: color
-        downFontColor: pressed
-        overFontColor: highlight
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
-    default: {
-        font: font
-        fontColor: color
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
-    default: {
-        font: font
-        fontColorSelected: white
-        fontColorUnselected: white
-        selection: selection
-        background: list-c
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
-    default: {
-        hScrollKnob: scrollbar-c
-        vScrollKnob: scrollbar-c
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
-    default: {
-        font: font
-        fontColor: white
-        background: select-box-c
-        scrollStyle: default
-        listStyle: default
-        backgroundOver: select-box-h
-        backgroundOpen: select-box-pressed-c
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
-    default-horizontal: {
-        knobOver: slider-knob-h
-        knobDown: slider-knob-h
-        background: slider-horizontal-p
-        knob: slider-knob-c
-        knobBefore: slider-horizontal-s
-    }
-    default-vertical: {
-        knobOver: slider-knob-h
-        knobDown: slider-knob-h
-        background: slider-vertical-p
-        knob: slider-knob-c
-        knobBefore: slider-vertical-s
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
-    default-horizontal: {
-        handle: splitpane-horizontal-c
-    }
-    default-vertical: {
-        handle: splitpane-vertical-c
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
-    default: {
-        font: button
-        fontColor: white
-        downFontColor: white
-        overFontColor: dark-gray
-        up: button-c
-        down: button-p
-        over: button-h
-    }
-    positive: {
-        font: button
-        fontColor: white
-        downFontColor: white
-        overFontColor: dark-gray
-        up: button-positive
-        down: button-p
-        over: button-h
-    }
-    negative: {
-        font: button
-        fontColor: white
-        downFontColor: white
-        overFontColor: white
-        up: button-negative
-        down: button-negative-pressed
-        over: button-negative-hover
-    }
-    disabled: {
-        font: button
-        fontColor: white
-        downFontColor: white
-        overFontColor: white
-        up: button-disabled
-        down: button-disabled
-        over: button-disabled
-    }
-}
-com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
-    default: {
-        font: font
-        fontColor: white
-        background: textfield-c
-        cursor: white
-        selection: selection
-    }
-}
-}

core/src/com/unciv/ui/worldscreen/unit/UnitTable.kt

@@ -4,6 +4,7 @@ import com.badlogic.gdx.Gdx
 import com.badlogic.gdx.Input
 import com.badlogic.gdx.scenes.scene2d.Actor
 import com.badlogic.gdx.scenes.scene2d.Touchable
+import com.badlogic.gdx.scenes.scene2d.ui.Image
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.scenes.scene2d.ui.VerticalGroup
 import com.unciv.Constants
@@ -21,12 +22,11 @@ import com.unciv.ui.pickerscreens.UnitRenamePopup
 import com.unciv.ui.utils.BaseScreen
 import com.unciv.ui.utils.UnitGroup
 import com.unciv.ui.utils.extensions.addSeparator
+import com.unciv.ui.utils.extensions.center
 import com.unciv.ui.utils.extensions.darken
 import com.unciv.ui.utils.extensions.onClick
 import com.unciv.ui.utils.extensions.toLabel
 import com.unciv.ui.worldscreen.WorldScreen
-import com.unciv.utils.Log
-import kotlin.system.measureTimeMillis
 
 class UnitTable(val worldScreen: WorldScreen) : Table() {
     private val prevIdleUnitButton = IdleUnitButton(this,worldScreen.mapHolder,true)
@@ -64,13 +64,18 @@ class UnitTable(val worldScreen: WorldScreen) : Table() {
     var selectedUnitHasChanged = false
     val separator: Actor
 
+    var bg = Image(BaseScreen.skinStrings.getUiBackground("WorldScreen/UnitTable",
+        BaseScreen.skinStrings.roundedEdgeRectangleMidShape,
+        BaseScreen.skinStrings.skinConfig.baseColor.darken(0.5f)))
+
+
     init {
         pad(5f)
         touchable = Touchable.enabled
         background = BaseScreen.skinStrings.getUiBackground(
-            "WorldScreen/UnitTable",
+            "WorldScreen/UnitTable", BaseScreen.skinStrings.roundedEdgeRectangleMidShape
-            tintColor = BaseScreen.skinStrings.skinConfig.baseColor.darken(0.5f)
         )
+        addActor(bg)
 
         promotionsTable.touchable = Touchable.enabled
 
@@ -259,6 +264,8 @@ class UnitTable(val worldScreen: WorldScreen) : Table() {
         }
 
         pack()
+        bg.setSize(width-3f, height-3f)
+        bg.center(this)
         selectedUnitHasChanged = false
     }
 

docs/Modders/Creating-a-UI-skin.md

@@ -102,7 +102,8 @@ These shapes are used all over Unciv and can be replaced to make a lot of UI ele
 | WorldScreen/ | PickTechButton | roundedEdgeRectangle | |
 | WorldScreen/ | TileInfoTable | null | |
 | WorldScreen/ | TutorialTaskTable | null | |
-| WorldScreen/ | UnitTable | null | |
+| WorldScreen/ | UnitTable | roundedEdgeRectangleMid | |
+| WorldScreen/ | UnitTable | roundedEdgeRectangleMid | |
 | WorldScreen/CityButton/ | AirUnitTable | roundedEdgeRectangle | |
 | WorldScreen/CityButton/ | InfluenceBar | null | |
 | WorldScreen/Minimap/ | Background | null | |