Nation Picker visual help where to click (#5287)

* Nation Picker visual help where to click

* Nation Picker visual help where to click - circles

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

@@ -5,6 +5,7 @@ import com.badlogic.gdx.Gdx
 import com.badlogic.gdx.graphics.Color
 import com.badlogic.gdx.scenes.scene2d.Group
 import com.badlogic.gdx.scenes.scene2d.Touchable
+import com.badlogic.gdx.scenes.scene2d.ui.ImageButton
 import com.badlogic.gdx.scenes.scene2d.ui.Table
 import com.badlogic.gdx.scenes.scene2d.ui.TextField
 import com.badlogic.gdx.utils.Align
@@ -242,6 +243,14 @@ private class NationPickerPopup(
     private val playerPicker: PlayerPickerTable,
     private val player: Player
 ) : Popup(playerPicker.previousScreen as CameraStageBaseScreen) {
+    companion object {
+        // These are used for the Close/OK buttons in the lower left/right corners:
+        const val buttonsCircleSize = 70f
+        const val buttonsIconSize = 50f
+        const val buttonsOffsetFromEdge = 5f
+        val buttonsBackColor: Color = Color.BLACK.cpy().apply { a = 0.67f }
+    }
+
     private val previousScreen = playerPicker.previousScreen
     private val ruleset = previousScreen.ruleset
     // This Popup's body has two halves of same size, either side by side or arranged vertically
@@ -251,14 +260,16 @@ private class NationPickerPopup(
     private val nationListTable = Table()
     private val nationListScroll = ScrollPane(nationListTable)
     private val nationDetailsTable = Table()
+    private val nationDetailsScroll = ScrollPane(nationDetailsTable)
+    private var selectedNation: Nation? = null
 
     init {
         nationListScroll.setOverscroll(false, false)
         add(nationListScroll).size( civBlocksWidth + 10f, partHeight )
             // +10, because the nation table has a 5f pad, for a total of +10f
         if (screen.isNarrowerThan4to3()) row()
-        add(ScrollPane(nationDetailsTable).apply { setOverscroll(false, false) })
+        nationDetailsScroll.setOverscroll(false, false)
-            .size(civBlocksWidth + 10f, partHeight) // Same here, see above
+        add(nationDetailsScroll).size(civBlocksWidth + 10f, partHeight) // Same here, see above
 
         val randomNation = Nation().apply {
             name = "Random"
@@ -301,31 +312,47 @@ private class NationPickerPopup(
             nationListScroll.scrollY = nationListScrollY.coerceIn(0f, nationListScroll.maxY)
         }
 
-        val closeImage = ImageGetter.getImage("OtherIcons/Close")
+        val closeButton = "OtherIcons/Close".toImageButton(Color.FIREBRICK)
-        closeImage.setSize(30f, 30f)
+        closeButton.onClick { close() }
-        val closeImageHolder =
+        closeButton.setPosition(buttonsOffsetFromEdge, buttonsOffsetFromEdge, Align.bottomLeft)
-            Group() // This is to add it some more clickable space, to make it easier to click on the phone
+        innerTable.addActor(closeButton)
-        closeImageHolder.setSize(50f, 50f)
+        keyPressDispatcher[KeyCharAndCode.BACK] = { close() }
-        closeImage.center(closeImageHolder)
+
-        closeImageHolder.addActor(closeImage)
+        val okButton = "OtherIcons/Checkmark".toImageButton(Color.LIME)
-        closeImageHolder.onClick { close() }
+        okButton.onClick { returnSelected() }
-        closeImageHolder.setPosition(0f, height, Align.topLeft)
+        okButton.setPosition(innerTable.width - buttonsOffsetFromEdge, buttonsOffsetFromEdge, Align.bottomRight)
-        addActor(closeImageHolder)
+        innerTable.addActor(okButton)
+
+        nationDetailsTable.onClick { returnSelected() }
+    }
+
+    private fun String.toImageButton(overColor: Color): Group {
+        val style = ImageButton.ImageButtonStyle()
+        val image = ImageGetter.getDrawable(this)
+        style.imageUp = image
+        style.imageOver = image.tint(overColor)
+        val button = ImageButton(style)
+        button.setSize(buttonsIconSize, buttonsIconSize)
+
+        return button.surroundWithCircle(buttonsCircleSize, false, buttonsBackColor)
     }
 
     private fun setNationDetails(nation: Nation) {
         nationDetailsTable.clear()
 
         nationDetailsTable.add(NationTable(nation, civBlocksWidth, partHeight, ruleset))
-        nationDetailsTable.onClick {
+        selectedNation = nation
+    }
+
+    private fun returnSelected() {
+        if (selectedNation == null) return
         if (previousScreen is GameParametersScreen)
             previousScreen.mapEditorScreen.tileMap.switchPlayersNation(
                 player,
-                    nation
+                selectedNation!!
             )
-            player.chosenCiv = nation.name
+        player.chosenCiv = selectedNation!!.name
         close()
         playerPicker.update()
     }
-    }
 }

docs/Credits.md

@@ -642,6 +642,7 @@ Unless otherwise specified, all the following are from [the Noun Project](https:
 * [crossed sword](https://thenounproject.com/term/crossed-sword/2427559/) by ProSymbols for Militaristic City-States
 * [ship helm](https://thenounproject.com/term/ship-helm/2170591/) by Vectors Market for Maritime City-States
 * [Magnifying Glass](https://thenounproject.com/term/magnifying-glass/1311/) by John Caserta for Mod filter
+* [tick](https://thenounproject.com/term/tick/3968142/) by Adrien Coquet on Nation picker
 
 ## Main menu