From 5fcbafda788eb39538fa2ed91ea50186e79134e2 Mon Sep 17 00:00:00 2001
From: Yair Morgenstern <yairm210@hotmail.com>
Date: Sun, 19 Feb 2023 16:48:53 +0200
Subject: [PATCH] Better trade screen for portrait mode

---
 .../diplomacyscreen/DiplomacyScreen.kt        |  2 +-
 .../diplomacyscreen/OfferColumnsTable.kt      | 49 +++++++++++++------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/core/src/com/unciv/ui/screens/diplomacyscreen/DiplomacyScreen.kt b/core/src/com/unciv/ui/screens/diplomacyscreen/DiplomacyScreen.kt
index 6ca81ab967..b6089f458f 100644
--- a/core/src/com/unciv/ui/screens/diplomacyscreen/DiplomacyScreen.kt
+++ b/core/src/com/unciv/ui/screens/diplomacyscreen/DiplomacyScreen.kt
@@ -68,7 +68,7 @@ class DiplomacyScreen(
     }
 
     private val leftSideTable = Table().apply { defaults().pad(nationIconPad) }
-    private val leftSideScroll = ScrollPane(leftSideTable)
+    val leftSideScroll = ScrollPane(leftSideTable)
     private val rightSideTable = Table()
     private val closeButton = Constants.close.toTextButton()
 
diff --git a/core/src/com/unciv/ui/screens/diplomacyscreen/OfferColumnsTable.kt b/core/src/com/unciv/ui/screens/diplomacyscreen/OfferColumnsTable.kt
index 9bbb4a8d31..02eda87c06 100644
--- a/core/src/com/unciv/ui/screens/diplomacyscreen/OfferColumnsTable.kt
+++ b/core/src/com/unciv/ui/screens/diplomacyscreen/OfferColumnsTable.kt
@@ -7,11 +7,11 @@ import com.unciv.logic.trade.TradeOffer
 import com.unciv.logic.trade.TradeOffersList
 import com.unciv.logic.trade.TradeType
 import com.unciv.models.translations.tr
+import com.unciv.ui.components.extensions.addSeparator
+import com.unciv.ui.components.extensions.surroundWithCircle
 import com.unciv.ui.images.ImageGetter
 import com.unciv.ui.popups.AskNumberPopup
 import com.unciv.ui.screens.basescreen.BaseScreen
-import com.unciv.ui.components.extensions.addSeparator
-import com.unciv.ui.components.extensions.surroundWithCircle
 
 /** This is the class that holds the 4 columns of the offers (ours/theirs/ offered/available) in trade */
 class OfferColumnsTable(private val tradeLogic: TradeLogic, val screen: DiplomacyScreen, val onChange: () -> Unit): Table(
@@ -55,20 +55,41 @@ class OfferColumnsTable(private val tradeLogic: TradeLogic, val screen: Diplomac
 
     init {
         defaults().pad(5f)
-        val columnWidth = screen.stage.width / 3
 
-        add("Our items".tr())
-        add("[${tradeLogic.otherCivilization.civName}]'s items".tr()).row()
+        val isPortraitMode = screen.isNarrowerThan4to3()
 
-        add(ourAvailableOffersTable).prefSize(columnWidth, screen.stage.height / 2)
-        add(theirAvailableOffersTable).prefSize(columnWidth, screen.stage.height / 2).row()
+        val columnWidth = (screen.stage.width - screen.leftSideScroll.width) / 2
 
-        addSeparator().height(2f)
+        if (!isPortraitMode) {
+            add("Our items".tr())
+            add("[${tradeLogic.otherCivilization.civName}]'s items".tr()).row()
 
-        add("Our trade offer".tr())
-        add("[${tradeLogic.otherCivilization.civName}]'s trade offer".tr()).row()
-        add(ourOffersTable).size(columnWidth, screen.stage.height / 3)
-        add(theirOffersTable).size(columnWidth, screen.stage.height / 3)
+            add(ourAvailableOffersTable).prefSize(columnWidth, screen.stage.height / 2)
+            add(theirAvailableOffersTable).prefSize(columnWidth, screen.stage.height / 2).row()
+
+            addSeparator().height(2f)
+
+            add("Our trade offer".tr())
+            add("[${tradeLogic.otherCivilization.civName}]'s trade offer".tr()).row()
+            add(ourOffersTable).size(columnWidth, screen.stage.height / 3)
+            add(theirOffersTable).size(columnWidth, screen.stage.height / 3)
+        }
+        else {
+            add("Our items".tr()).colspan(2).row()
+            add(ourAvailableOffersTable).height(screen.stage.height / 4f).colspan(2).row()
+
+            addSeparator().height(2f)
+
+            add("[${tradeLogic.otherCivilization.civName}]'s items".tr()).colspan(2).row()
+            add(theirAvailableOffersTable).height(screen.stage.height / 4f).colspan(2).row()
+
+            addSeparator().height(5f)
+
+            add("Our trade offer".tr())
+            add("[${tradeLogic.otherCivilization.civName}]'s trade offer".tr()).row()
+            add(ourOffersTable).height(screen.stage.height / 4f).width(columnWidth)
+            add(theirOffersTable).height(screen.stage.height / 4f).width(columnWidth)
+        }
         pack()
         update()
     }
@@ -96,8 +117,8 @@ class OfferColumnsTable(private val tradeLogic: TradeLogic, val screen: Diplomac
             icon = ImageGetter.getStatIcon("Gold").surroundWithCircle(80f),
             defaultValue = offer.amount.toString(),
             amountButtons =
-                if (offer.type == TradeType.Gold) listOf(50, 500)
-                else listOf(5, 15),
+            if (offer.type == TradeType.Gold) listOf(50, 500)
+            else listOf(5, 15),
             bounds = IntRange(0, maxGold),
             actionOnOk = { userInput ->
                 offer.amount = userInput