Updated battle table UI

core/src/com/unciv/ui/utils/ExtensionFunctions.kt

@@ -6,6 +6,7 @@ import com.badlogic.gdx.scenes.scene2d.*
 import com.badlogic.gdx.scenes.scene2d.ui.*
 import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener
 import com.badlogic.gdx.scenes.scene2d.utils.ClickListener
+import com.badlogic.gdx.utils.Align
 import com.unciv.Constants
 import com.unciv.CrashScreen
 import com.unciv.UncivGame
@@ -82,6 +83,7 @@ fun Actor.surroundWithCircle(size: Float, resizeActor: Boolean = true, color: Co
     return IconCircleGroup(size, this, resizeActor, color)
 }
 
+
 fun Actor.addBorder(size:Float, color: Color, expandCell:Boolean = false): Table {
     val table = Table()
     table.pad(size)
@@ -93,6 +95,17 @@ fun Actor.addBorder(size:Float, color: Color, expandCell:Boolean = false): Table
     return table
 }
 
+fun Group.addBorderAllowOpacity(size:Float, color: Color): Group {
+    val group = this
+    fun getTopBottomBorder() = ImageGetter.getDot(color).apply { width=group.width; height=size }
+    addActor(getTopBottomBorder().apply { setPosition(0f, group.height, Align.topLeft) })
+    addActor(getTopBottomBorder().apply { setPosition(0f, 0f, Align.bottomLeft) })
+    fun getLeftRightBorder() = ImageGetter.getDot(color).apply { width=size; height=group.height }
+    addActor(getLeftRightBorder().apply { setPosition(0f, 0f, Align.bottomLeft) })
+    addActor(getLeftRightBorder().apply { setPosition(group.width, 0f, Align.bottomRight) })
+    return group
+}
+
 
 /** get background Image for a new separator */
 private fun getSeparatorImage(color: Color) = ImageGetter.getDot(
@@ -332,4 +345,4 @@ fun (() -> Unit).wrapCrashHandlingUnit(
     val wrappedReturning = this.wrapCrashHandling(postToMainThread)
     // Don't instantiate a new lambda every time the return get called.
     return { wrappedReturning() ?: Unit }
-}
+}

core/src/com/unciv/ui/worldscreen/bottombar/BattleTable.kt

@@ -53,6 +53,8 @@ class BattleTable(val worldScreen: WorldScreen): Table() {
             if (defender == null) { hide(); return }
             simulateBattle(attacker, defender)
         }
+        pack()
+        addBorderAllowOpacity(1f, Color.WHITE)
     }
 
     private fun tryGetAttacker(): ICombatant? {
@@ -118,32 +120,45 @@ class BattleTable(val worldScreen: WorldScreen): Table() {
         add(attacker.getAttackingStrength().toString() + Fonts.strength)
         add(defender.getDefendingStrength().toString() + Fonts.strength).row()
 
+
+        val quarterScreen = worldScreen.stage.width/4
+
         val attackerModifiers =
                 BattleDamage.getAttackModifiers(attacker, defender).map {
                     val description = if (it.key.startsWith("vs "))
                         ("vs [" + it.key.replace("vs ", "") + "]").tr()
                     else it.key.tr()
                     val percentage = (if (it.value > 0) "+" else "") + it.value + "%"
-                    "$description: $percentage"
+
+                    val upOrDownLabel = if (it.value > 0f) "⬆".toLabel(Color.GREEN) else "⬇".toLabel(
+                        Color.RED)
+                    val modifierTable = Table()
+                    modifierTable.add(upOrDownLabel)
+                    val modifierLabel = "$percentage $description".toLabel(fontSize = 14).apply { wrap=true }
+                    modifierTable.add(modifierLabel).width(quarterScreen)
+                    modifierTable
                 }
         val defenderModifiers =
                 if (defender is MapUnitCombatant)
                     BattleDamage.getDefenceModifiers(attacker, defender).map {
                         val description = if(it.key.startsWith("vs ")) ("vs ["+it.key.replace("vs ","")+"]").tr() else it.key.tr()
                         val percentage = (if(it.value>0)"+" else "")+ it.value +"%"
-                        "$description: $percentage"
+                        val upOrDownLabel = if (it.value > 0f) "⬆".toLabel(Color.GREEN) else "⬇".toLabel(
+                            Color.RED)
+                        val modifierTable = Table()
+                        modifierTable.add(upOrDownLabel)
+                        val modifierLabel = "$percentage $description".toLabel(fontSize = 14).apply { wrap=true }
+                        modifierTable.add(modifierLabel).width(quarterScreen)
+                        modifierTable
                     }
                 else listOf()
 
-        val quarterScreen = worldScreen.stage.width/4
         for (i in 0..max(attackerModifiers.size,defenderModifiers.size)) {
             if (attackerModifiers.size > i)
-                add(attackerModifiers[i].toLabel(fontSize = 14)
-                    .apply { wrap = true }).width(quarterScreen)
+                add(attackerModifiers[i])
             else add().width(quarterScreen)
             if (defenderModifiers.size > i)
-                add(defenderModifiers[i].toLabel(fontSize = 14)
-                    .apply { wrap = true }).width(quarterScreen)
+                add(defenderModifiers[i])
             else add().width(quarterScreen)
             row().pad(2f)
         }

core/src/com/unciv/ui/worldscreen/bottombar/TileInfoTable.kt

@@ -6,11 +6,11 @@ import com.badlogic.gdx.utils.Align
 import com.unciv.UncivGame
 import com.unciv.logic.civilization.CivilizationInfo
 import com.unciv.logic.map.TileInfo
-import com.unciv.ui.civilopedia.CivilopediaScreen
 import com.unciv.ui.civilopedia.FormattedLine.IconDisplay
 import com.unciv.ui.civilopedia.MarkupRenderer
 import com.unciv.ui.utils.BaseScreen
 import com.unciv.ui.utils.ImageGetter
+import com.unciv.ui.utils.addBorderAllowOpacity
 import com.unciv.ui.utils.toLabel
 
 class TileInfoTable(private val viewingCiv :CivilizationInfo) : Table(BaseScreen.skin) {
@@ -32,6 +32,7 @@ class TileInfoTable(private val viewingCiv :CivilizationInfo) : Table(BaseScreen
         }
 
         pack()
+        addBorderAllowOpacity(1f, Color.WHITE)
     }
 
     fun getStatsTable(tile: TileInfo): Table {