Resolved #3431 - Redesigned the player picker, to scroll through civs and display them separately

core/src/com/unciv/ui/newgamescreen/NationTable.kt

@@ -1,38 +1,60 @@
 package com.unciv.ui.newgamescreen
 
+import com.badlogic.gdx.graphics.Color
+import com.badlogic.gdx.scenes.scene2d.Actor
 import com.badlogic.gdx.scenes.scene2d.Touchable
 import com.badlogic.gdx.scenes.scene2d.ui.Table
+import com.badlogic.gdx.utils.Align
+import com.unciv.Constants
 import com.unciv.models.ruleset.Nation
 import com.unciv.models.ruleset.Ruleset
 import com.unciv.ui.utils.CameraStageBaseScreen
 import com.unciv.ui.utils.ImageGetter
+import com.unciv.ui.utils.surroundWithCircle
 import com.unciv.ui.utils.toLabel
 
-class NationTable(val nation: Nation, width:Float, ruleset: Ruleset)
+// The ruleset also acts as a secondary parameter to determine if this is the right or self side of the player picker
+class NationTable(val nation: Nation, width: Float, minHeight: Float, ruleset: Ruleset? = null)
     : Table(CameraStageBaseScreen.skin) {
-    private val innerTable = Table()
+    val innerTable = Table()
 
     init {
         background = ImageGetter.getBackground(nation.getInnerColor())
-        innerTable.pad(10f)
+        if (ruleset != null) pad(5f)
+        innerTable.pad(5f)
+        val totalPadding = 20f // pad*2 + innerTable.pad*2
+
         innerTable.background = ImageGetter.getBackground(nation.getOuterColor())
+        val internalWidth = width - totalPadding
 
         val titleTable = Table()
-        titleTable.add(ImageGetter.getNationIndicator(nation, 50f)).pad(10f)
+
-        val leaderDisplayLabel = nation.getLeaderDisplayName().toLabel(nation.getInnerColor(),24)
+        val nationIndicator: Actor
-        val leaderDisplayNameMaxWidth = width - 70 // for the nation indicator
+        if(nation.name=="Random") nationIndicator = "?".toLabel(Color.WHITE, 30)
-        if(leaderDisplayLabel.width > leaderDisplayNameMaxWidth){ // for instance Polish has really long [x] of [y] translations
+                .apply { this.setAlignment(Align.center) }
+                .surroundWithCircle(45f).apply { circle.color = Color.BLACK }
+                .surroundWithCircle(50f, false).apply { circle.color = Color.WHITE }
+        else nationIndicator = ImageGetter.getNationIndicator(nation, 50f)
+
+        titleTable.add(nationIndicator).pad(10f)
+
+        val titleText = if (ruleset == null || nation.name== Constants.random || nation.name==Constants.spectator)
+            nation.name else nation.getLeaderDisplayName()
+        val leaderDisplayLabel = titleText.toLabel(nation.getInnerColor(), 24)
+        val leaderDisplayNameMaxWidth = internalWidth - 80 // for the nation indicator
+        if (leaderDisplayLabel.width > leaderDisplayNameMaxWidth) { // for instance Polish has really long [x] of [y] translations
             leaderDisplayLabel.setWrap(true)
             titleTable.add(leaderDisplayLabel).width(leaderDisplayNameMaxWidth)
-        }
+        } else titleTable.add(leaderDisplayLabel)
-        else titleTable.add(leaderDisplayLabel)
         innerTable.add(titleTable).row()
-        val nationUniqueLabel =nation.getUniqueString(ruleset).toLabel(nation.getInnerColor())
+
-        nationUniqueLabel.setWrap(true)
+        if (ruleset != null) {
-        innerTable.add(nationUniqueLabel).width(width)
+            val nationUniqueLabel = nation.getUniqueString(ruleset).toLabel(nation.getInnerColor())
+            nationUniqueLabel.setWrap(true)
+            innerTable.add(nationUniqueLabel).width(internalWidth)
+        }
+
         touchable = Touchable.enabled
-        add(innerTable)
+        add(innerTable).width(width).minHeight(minHeight - totalPadding)
     }
-
-
 }

core/src/com/unciv/ui/newgamescreen/PlayerPickerTable.kt

@@ -20,7 +20,6 @@ import com.unciv.models.translations.tr
 import com.unciv.ui.mapeditor.GameParametersScreen
 import com.unciv.ui.utils.*
 import java.util.*
-import kotlin.reflect.typeOf
 
 /**
  * This [Table] is used to pick or edit players information for new game/scenario creation.
@@ -38,8 +37,10 @@ class PlayerPickerTable(val previousScreen: IPreviousScreen, var gameParameters:
     val playerListTable = Table()
     val nationsPopupWidth = previousScreen.stage.width / 2f
     val civBlocksWidth = previousScreen.stage.width / 3
+
     /** Locks player table for editing, used during new game creation with scenario.*/
     var locked = false
+
     /** No random civilization is available, used during map editing.*/
     var noRandom = false
 
@@ -88,7 +89,7 @@ class PlayerPickerTable(val previousScreen: IPreviousScreen, var gameParameters:
                     }).pad(10f)
         }
         // can enable start game when more than 1 active player
-        previousScreen.setRightSideButtonEnabled(gameParameters.players.count{ it.chosenCiv != Constants.spectator } > 1)
+        previousScreen.setRightSideButtonEnabled(gameParameters.players.count { it.chosenCiv != Constants.spectator } > 1)
     }
 
     /**
@@ -216,48 +217,48 @@ class PlayerPickerTable(val previousScreen: IPreviousScreen, var gameParameters:
         val nationsPopup = Popup(previousScreen as CameraStageBaseScreen)
         val nationListTable = Table()
 
-        val randomPlayerTable = Table()
+        val ruleset = previousScreen.ruleset
-        randomPlayerTable.background = ImageGetter.getBackground(Color.BLACK)
+        val height = previousScreen.stage.height * 0.8f
+        nationsPopup.add(ScrollPane(nationListTable).apply { setOverscroll(false, false) })
+                .size(civBlocksWidth + 10, height)  // +10, because the nation table has a 5f pad, for a total of +10f
+        val nationDetailsTable = Table()
+        nationsPopup.add(ScrollPane(nationDetailsTable).apply { setOverscroll(false, false) })
+                .size(civBlocksWidth + 10, height) // Same here, see above
 
-        randomPlayerTable.add("?".toLabel(Color.WHITE, 30)
+        val randomNation = Nation().apply { name = "Random"; innerColor = listOf(255, 255, 255); outerColor = listOf(0, 0, 0); setTransients() }
-                .apply { this.setAlignment(Align.center) }
+        val nations = ArrayList<Nation>()
-                .surroundWithCircle(45f).apply { circle.color = Color.BLACK }
+        if (!noRandom) nations += randomNation
-                .surroundWithCircle(50f, false).apply { circle.color = Color.WHITE }).pad(10f)
+        nations += getAvailablePlayerCivs()
-        randomPlayerTable.add(Constants.random.toLabel())
+        for (nation in nations) {
-        randomPlayerTable.touchable = Touchable.enabled
-        randomPlayerTable.onClick {
-            player.chosenCiv = Constants.random
-            nationsPopup.close()
-            update()
-        }
-
-        if (!noRandom) { nationListTable.add(randomPlayerTable).pad(10f).width(nationsPopupWidth).row() }
-
-        for (nation in getAvailablePlayerCivs()) {
-            // don't show current player civ
             if (player.chosenCiv == nation.name)
                 continue
             // only humans can spectate, sorry robots
             if (player.playerType == PlayerType.AI && nation.isSpectator())
                 continue
+            val nationTable = NationTable(nation, civBlocksWidth, 0f) // no need for min height
+            nationListTable.add(nationTable).row()//.width(civBlocksWidth).row()
+            nationTable.onClick {
+                nationDetailsTable.clear()
 
-            nationListTable.add(NationTable(nation, nationsPopupWidth, previousScreen.ruleset).onClick {
+                val nationUniqueLabel = nation.getUniqueString(ruleset).toLabel(nation.getInnerColor())
-                if (previousScreen is GameParametersScreen)
+                nationUniqueLabel.setWrap(true)
-                    previousScreen.mapEditorScreen.tileMap.switchPlayersNation(player, nation)
+                nationDetailsTable.add(NationTable(nation, civBlocksWidth, height, ruleset))
-                player.chosenCiv = nation.name
+                nationDetailsTable.onClick {
-                nationsPopup.close()
+                    if (previousScreen is GameParametersScreen)
-                update()
+                        previousScreen.mapEditorScreen.tileMap.switchPlayersNation(player, nation)
-            }).pad(10f).width(nationsPopupWidth).row()
+                    player.chosenCiv = nation.name
+                    nationsPopup.close()
+                    update()
+                }
+            }
         }
 
-        nationsPopup.add(ScrollPane(nationListTable).apply { setOverscroll(false,false) })
-                .height(previousScreen.stage.height * 0.8f)
         nationsPopup.pack()
 
         val closeImage = ImageGetter.getImage("OtherIcons/Close")
-        closeImage.setSize(30f,30f)
+        closeImage.setSize(30f, 30f)
         val closeImageHolder = Group() // This is to add it some more clickable space, to make it easier to click on the phone
-        closeImageHolder.setSize(50f,50f)
+        closeImageHolder.setSize(50f, 50f)
         closeImage.center(closeImageHolder)
         closeImageHolder.addActor(closeImage)
         closeImageHolder.onClick { nationsPopup.close() }