From 6178830504621116cafd5fa74c23dcc7e44e9078 Mon Sep 17 00:00:00 2001
From: Leon Styhre <leon@leonstyhre.com>
Date: Fri, 2 Jul 2021 17:57:52 +0200
Subject: [PATCH] Improved scaling relative to the screen aspect ratio for
 various GUI components.

---
 es-core/src/guis/GuiComplexTextEditPopup.cpp | 14 ++++++++----
 es-core/src/guis/GuiDetectDevice.cpp         |  8 +++----
 es-core/src/guis/GuiInputConfig.cpp          |  8 +++----
 es-core/src/guis/GuiMsgBox.cpp               | 23 ++++++++++++--------
 es-core/src/guis/GuiTextEditPopup.cpp        |  8 +++----
 5 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/es-core/src/guis/GuiComplexTextEditPopup.cpp b/es-core/src/guis/GuiComplexTextEditPopup.cpp
index 0d234c0ed..20d77fba7 100644
--- a/es-core/src/guis/GuiComplexTextEditPopup.cpp
+++ b/es-core/src/guis/GuiComplexTextEditPopup.cpp
@@ -88,11 +88,17 @@ GuiComplexTextEditPopup::GuiComplexTextEditPopup(
     if (multiLine)
         textHeight *= 6;
 
-    mText->setSize(0, textHeight);
-    mInfoString2->setSize(Renderer::getScreenWidth() * 0.70f, mInfoString2->getFont()->getHeight());
+    // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
+    // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+    float infoWidth = Math::clamp(0.70f * aspectValue, 0.60f, 0.85f) * Renderer::getScreenWidth();
+    float windowWidth = Math::clamp(0.75f * aspectValue, 0.65f, 0.90f) * Renderer::getScreenWidth();
 
-    setSize(Renderer::getScreenWidth() * 0.75f, mTitle->getFont()->getHeight() +
-            textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f);
+    mText->setSize(0, textHeight);
+    mInfoString2->setSize(infoWidth, mInfoString2->getFont()->getHeight());
+
+    setSize(windowWidth, mTitle->getFont()->getHeight() + textHeight +
+            mButtonGrid->getSize().y() + mButtonGrid->getSize().y() * 1.85f);
     setPosition((Renderer::getScreenWidth() - mSize.x()) / 2,
             (Renderer::getScreenHeight() - mSize.y()) / 2);
     mText->startEditing();
diff --git a/es-core/src/guis/GuiDetectDevice.cpp b/es-core/src/guis/GuiDetectDevice.cpp
index f9135f672..f5973c510 100644
--- a/es-core/src/guis/GuiDetectDevice.cpp
+++ b/es-core/src/guis/GuiDetectDevice.cpp
@@ -77,10 +77,10 @@ GuiDetectDevice::GuiDetectDevice(
             Font::get(FONT_SIZE_MEDIUM), 0xFFFFFFFF, ALIGN_CENTER);
     mGrid.setEntry(mDeviceHeld, Vector2i(0, 4), false, true);
 
-    // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
-    // width rather than the 60% allowed for wider displays.
-    float width = Renderer::getScreenWidth() *
-            ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
+    // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
+    // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+    float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth();
 
     setSize(width, Renderer::getScreenHeight() * 0.5f);
     setPosition((Renderer::getScreenWidth() - mSize.x()) / 2,
diff --git a/es-core/src/guis/GuiInputConfig.cpp b/es-core/src/guis/GuiInputConfig.cpp
index efab129ff..5604c5f5e 100644
--- a/es-core/src/guis/GuiInputConfig.cpp
+++ b/es-core/src/guis/GuiInputConfig.cpp
@@ -214,10 +214,10 @@ GuiInputConfig::GuiInputConfig(
     mButtonGrid = makeButtonGrid(mWindow, buttons);
     mGrid.setEntry(mButtonGrid, Vector2i(0, 6), true, false);
 
-    // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
-    // width rather than the 60% allowed for wider displays.
-    float width = Renderer::getScreenWidth() *
-            ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
+    // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
+    // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+    float width = Math::clamp(0.60f * aspectValue, 0.50f, 0.80f) * Renderer::getScreenWidth();
 
     setSize(width, Renderer::getScreenHeight() * 0.75f);
     setPosition((Renderer::getScreenWidth() - mSize.x()) / 2.0f,
diff --git a/es-core/src/guis/GuiMsgBox.cpp b/es-core/src/guis/GuiMsgBox.cpp
index d7d98eae1..16b87ef5b 100644
--- a/es-core/src/guis/GuiMsgBox.cpp
+++ b/es-core/src/guis/GuiMsgBox.cpp
@@ -27,11 +27,14 @@ GuiMsgBox::GuiMsgBox(Window* window, const HelpStyle& helpstyle, const std::stri
         mDisableBackButton(disableBackButton),
         mDeleteOnButtonPress(deleteOnButtonPress)
 {
-    // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
-    // width rather than the 60% allowed for wider displays.
-    float width = Renderer::getScreenWidth() *
-            ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
-    float minWidth = Renderer::getScreenWidth() * 0.3f;
+    // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
+    // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+
+    float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) *
+            Renderer::getScreenWidth());
+    float minWidth = floorf(Math::clamp(0.30f * aspectValue, 0.10f, 0.50f) *
+            Renderer::getScreenWidth());
 
     mMsg = std::make_shared<TextComponent>(mWindow, text, Font::get(FONT_SIZE_MEDIUM),
             0x777777FF, ALIGN_CENTER);
@@ -95,11 +98,13 @@ void GuiMsgBox::changeText(const std::string& newText)
     mMsg->setText(newText);
     mMsg->setSize(mMsg->getFont()->sizeText(newText));
 
-    // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 80% of the screen
-    // width rather than the 60% allowed for wider displays.
-    float width = Renderer::getScreenWidth() *
-            ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.8f : 0.6f);
+    // Adjust the width depending on the aspect ratio of the screen, to make the screen look
+    // somewhat coherent regardless of screen type. The 1.778 aspect ratio value is the 16:9
+    // reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
 
+    float width = floorf(Math::clamp(0.60f * aspectValue, 0.60f, 0.80f) *
+            Renderer::getScreenWidth());
     float minWidth = Renderer::getScreenWidth() * 0.3f;
 
     // Decide final width.
diff --git a/es-core/src/guis/GuiTextEditPopup.cpp b/es-core/src/guis/GuiTextEditPopup.cpp
index 71aee9be9..1bdb06961 100644
--- a/es-core/src/guis/GuiTextEditPopup.cpp
+++ b/es-core/src/guis/GuiTextEditPopup.cpp
@@ -62,10 +62,10 @@ GuiTextEditPopup::GuiTextEditPopup(
         textHeight *= 6;
     mText->setSize(0, textHeight);
 
-    // For narrower displays (e.g. in 4:3 ratio), allow the window to fill 70% of the screen
-    // width rather than the 50% allowed for wider displays.
-    float width = Renderer::getScreenWidth() *
-            ((Renderer::getScreenAspectRatio() < 1.4f) ? 0.7f : 0.5f);
+    // Adjust the width relative to the aspect ratio of the screen to make the GUI look coherent
+    // regardless of screen type. The 1.778 aspect ratio value is the 16:9 reference.
+    float aspectValue = 1.778f / Renderer::getScreenAspectRatio();
+    float width = Math::clamp(0.50f * aspectValue, 0.40f, 0.70f) * Renderer::getScreenWidth();
 
     setSize(width, mTitle->getFont()->getHeight() +
             textHeight + mButtonGrid->getSize().y() + mButtonGrid->getSize().y() / 2);