Fix #3754 (#4966)

* Fix portrait * Fix vertical tabs * Fix server selection * Update race_setup.stkgui
supertuxkart · Dec 14, 2023 · 65ee612 · 65ee612
1 parent bba568d
commit 65ee612
Show file tree

Hide file tree

Showing 19 changed files with 103 additions and 74 deletions.
diff --git a/data/gui/screens/edit_track.stkgui b/data/gui/screens/edit_track.stkgui
@@ -11,7 +11,7 @@
         <!-- Track selection -->
         <box proportion="3" width="100%" layout="vertical-row">
             <ribbon_grid id="tracks" proportion="1" width="100%" square_items="true"
-                label_location="each" align="center" max_rows="3" child_width="160"
+                label_location="each" align="center" child_width="160"
                 child_height="120"/>
         </box>
 

diff --git a/data/gui/screens/karts.stkgui b/data/gui/screens/karts.stkgui
@@ -16,7 +16,7 @@
             <div id="kartlist" width="85%" height="100%" layout="vertical-row" >
                 <box proportion="2" width="100%" layout="vertical-row" padding="2">
                     <ribbon_grid id="karts" proportion="1" square_items="true" width="100%" align="center"
-                                child_width="90" child_height="90" max_rows="2"/>
+                                child_width="90" child_height="90"/>
                 </box>
                 <!-- Groups will be added dynamically at runtime -->
                 <tabs width="98%" x="1%" height="1f" id="kartgroups">

diff --git a/data/gui/screens/main_menu.stkgui b/data/gui/screens/main_menu.stkgui
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <stkgui>
     <div x="0" y="0" width="100%" height="100%" layout="vertical-row" >
-        <icon id="logo" align="center" proportion="5" width="100%" icon="gui/icons/logo.png"/>
+        <icon id="logo" align="center" proportion="5" width="90%" icon="gui/icons/logo.png"/>
 
         <buttonbar id="menu_toprow" proportion="3" width="90%" align="center">
             <icon-button id="story" width="128" height="128"
@@ -23,48 +23,54 @@
 
         <spacer width="10" height="6%"/>
 
-        <bottombar width="100%" height="11%" layout="horizontal-row">
+        <div width="100%" height="3f" layout="vertical-row" >
 
-            <spacer width="10" height="10" />
+            <spacer width="10" height="25%"/>
 
-            <label proportion="3" height="100%" id="info_addons"
-                   I18N="In the main screen"
-                   text=""
-                   align="center" text_align="left" />
+            <bottombar width="100%" height="75%" layout="horizontal-row">
 
-            <spacer width="10" height="10" />
+                <spacer width="10" height="10" />
 
-            <buttonbar id="menu_bottomrow" x="0" y="0" width="42%" height="100%" align="center">
-                <icon-button id="test_gpwin" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: GPWin" label_location="hover"/>
-                <icon-button id="test_gplose" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: GPLose" label_location="hover"/>
-                <icon-button id="test_unlocked" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: Unlocked" label_location="hover"/>
-                <icon-button id="test_unlocked2" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: Unlocked 2" label_location="hover"/>
-                <icon-button id="test_intro" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: Intro" label_location="hover"/>
-                <icon-button id="test_outro" width="64" height="64" icon="gui/icons/main_options.png"
-                             raw_text="TEST: Outro" label_location="hover"/>
-                <icon-button id="options" width="64" height="64" icon="gui/icons/main_options.png"
-                             I18N="In the main screen"  text="Options" label_location="hover"/>
-                <icon-button id="help" width="64" height="64" icon="gui/icons/main_help.png"
-                             I18N="In the main screen" text="Help" label_location="hover"/>
-                <icon-button id="startTutorial" width="64" height="64" icon="gui/icons/tutorial.png"
-                             I18N="In the main screen" text="Tutorial" label_location="hover"/>
-                <icon-button id="highscores" width="64" height="64" icon="gui/icons/crown.png"
-                             I18N="In the main screen" text="High Scores" label_location="hover"/>
-                <icon-button id="achievements" width="64" height="64" icon="gui/icons/gp_copy.png"
-                             I18N="In the main screen" text="Achievements" label_location="hover"/>
-                <icon-button id="gpEditor" width="64" height="64" icon="gui/icons/gpeditor.png"
-                             I18N="In the main screen" text="Grand Prix Editor" label_location="hover"/>
-                <icon-button id="about" width="64" height="64" icon="gui/icons/main_about.png"
-                             I18N="In the main screen" text="About" label_location="hover"/>
-                <icon-button id="quit" width="64" height="64" icon="gui/icons/main_quit.png"
-                             I18N="In the main screen" text="Quit" label_location="hover"/>
-            </buttonbar>
-        </bottombar>
+                <label proportion="3" height="100%" id="info_addons"
+                    I18N="In the main screen"
+                    text=""
+                    align="center" text_align="left" />
+
+                <spacer width="10" height="10" />
+
+                <buttonbar id="menu_bottomrow" x="0" y="0" width="42%" height="100%" align="center">
+                    <icon-button id="test_gpwin" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: GPWin" label_location="hover"/>
+                    <icon-button id="test_gplose" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: GPLose" label_location="hover"/>
+                    <icon-button id="test_unlocked" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: Unlocked" label_location="hover"/>
+                    <icon-button id="test_unlocked2" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: Unlocked 2" label_location="hover"/>
+                    <icon-button id="test_intro" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: Intro" label_location="hover"/>
+                    <icon-button id="test_outro" width="64" height="64" icon="gui/icons/main_options.png"
+                                raw_text="TEST: Outro" label_location="hover"/>
+                    <icon-button id="options" width="64" height="64" icon="gui/icons/main_options.png"
+                                I18N="In the main screen"  text="Options" label_location="hover"/>
+                    <icon-button id="help" width="64" height="64" icon="gui/icons/main_help.png"
+                                I18N="In the main screen" text="Help" label_location="hover"/>
+                    <icon-button id="startTutorial" width="64" height="64" icon="gui/icons/tutorial.png"
+                                I18N="In the main screen" text="Tutorial" label_location="hover"/>
+                    <icon-button id="highscores" width="64" height="64" icon="gui/icons/crown.png"
+                                I18N="In the main screen" text="High Scores" label_location="hover"/>
+                    <icon-button id="achievements" width="64" height="64" icon="gui/icons/gp_copy.png"
+                                I18N="In the main screen" text="Achievements" label_location="hover"/>
+                    <icon-button id="gpEditor" width="64" height="64" icon="gui/icons/gpeditor.png"
+                                I18N="In the main screen" text="Grand Prix Editor" label_location="hover"/>
+                    <icon-button id="about" width="64" height="64" icon="gui/icons/main_about.png"
+                                I18N="In the main screen" text="About" label_location="hover"/>
+                    <icon-button id="quit" width="64" height="64" icon="gui/icons/main_quit.png"
+                                I18N="In the main screen" text="Quit" label_location="hover"/>
+                </buttonbar>
+
+            </bottombar>
+        </div>
     </div>
 
     <div x="0" y="0" width="100%" height="fit" layout="vertical-row">

diff --git a/data/gui/screens/online/server_selection.stkgui b/data/gui/screens/online/server_selection.stkgui
@@ -8,7 +8,7 @@
     </div>
 
     <div x="0%" y="1%" width="100%" height="98%" layout="vertical-row" >
-        <header id="title_header" height="2f" align="center" text_align="center" text="Server Selection"/>
+        <header id="title_header" height="9%" align="center" text_align="center" text="Server Selection"/>
         <box proportion="1" width="98%" align="center" layout="vertical-row" padding="6">
             <list id="server_list" x="0" y="0" width="100%" height="93%" word_wrap="true"
                   alternate_bg="true" line_height="small"/>

diff --git a/data/gui/screens/race_setup.stkgui b/data/gui/screens/race_setup.stkgui
@@ -8,7 +8,7 @@
         <spacer height="10" width="25"/>
         <box width="100%" proportion="3" padding="10" layout="vertical-row">
             <spacer height="15%" width="25"/>
-            <ribbon id="difficulty" height="70%" width="100%" align="center">
+            <ribbon x="2%" y="15%" id="difficulty" height="70%" width="96%" align="center">
                 <icon-button id="novice" width="128" height="128" icon="gui/icons/difficulty_easy.png"
                         I18N="Difficulty" text="Novice"/>
                 <icon-button id="intermediate" width="128" height="128" icon="gui/icons/difficulty_medium.png"
@@ -19,15 +19,15 @@
                         I18N="Difficulty"  text="SuperTux"/>
             </ribbon>
         </box>
-        <spacer height="5%" width="25"/>
+        <spacer height="2%" width="25"/>
 
         <bright width="100%" text="Select a game mode" align="center" text_align="left" />
 
-        <spacer height="10" width="25"/>
+        <spacer height="1%" width="25"/>
         <box width="100%" proportion="4" padding="10" layout="vertical-row">
             <spacer height="5%" width="25" />
-            <scrollable_toolbar id="gamemode" height="60%" width="95%" label_location="bottom" align="center"
-                                child_width="256" child_height="256" />
+            <ribbon_grid id="gamemode" height="60%" width="95%" label_location="bottom" align="center"
+                                child_width="192" child_height="192" />
             <spacer proportion="1" width="25" />
         </box>
     </div>

diff --git a/data/gui/screens/tracks.stkgui b/data/gui/screens/tracks.stkgui
@@ -9,7 +9,7 @@
 
         <box proportion="1" width="100%" layout="vertical-row" padding="1">
             <ribbon_grid id="tracks" proportion="1" width="100%" square_items="true"
-                label_location="bottom" align="center" max_rows="3"
+                label_location="bottom" align="center"
                 child_width="160" child_height="120" />
             <spacer width="20" height="13" />
         </box>

diff --git a/data/gui/screens/tracks_and_gp.stkgui b/data/gui/screens/tracks_and_gp.stkgui
@@ -2,11 +2,10 @@
 <stkgui>
     <icon-button id="back" x="1%" y="0" height="9%" icon="gui/icons/back.png"/>
 
-    <div x="1%" y="1%" width="98%" height="98%" layout="vertical-row" >
-        <header width="8%" I18N="In the track and grand prix selection screen" text="Grand Prix"
+    <div x="1%" y="0" width="98%" height="98%" layout="vertical-row" >
+        <header height="9%" I18N="In the track and grand prix selection screen" text="Grand Prix"
                 align="center" text_align="center" />
-        <spacer width="100%" height="1%" />
-
+
         <div width="100%" proportion="3" layout="horizontal-row" >
             <box width="80%" height="100%" layout="vertical-row" padding="0">
                 <scrollable_toolbar id="gps" x="1%" y="1%" width="98%" height="98%" align="center" label_location="each"
@@ -20,23 +19,26 @@
             </box>
         </div>
 
-        <spacer width="100%" height="1%"/>
-        <div width="100%" proportion="1" layout="horizontal-row" >
+        <spacer width="100%" height="1%" />
+
+        <div width="100%" height="fit" layout="horizontal-row" >
             <header width="30%" I18N="In the track and grand prix selection screen" text="All Tracks"
                     align="center" text_align="center" />
             <textbox width="60%" id="search"/>
         </div>
 
+        <spacer width="100%" height="1%" />
+
         <box proportion="8" width="100%" layout="vertical-row" padding="1">
             <ribbon_grid id="tracks" proportion="1" width="100%" square_items="true"
-                label_location="bottom" align="center" max_rows="3"
+                label_location="bottom" align="center"
                 child_width="160" child_height="120" />
             <spacer width="20" height="5%" />
         </box>
 
         <!-- Populated dynamically at runtime -->
         <tabs width="100%" height="1f" id="trackgroups"> </tabs>
 
-        <spacer width="100%" height="2%" />
+
     </div>
 </stkgui>
diff --git a/src/font/font_with_face.cpp b/src/font/font_with_face.cpp
@@ -403,8 +403,8 @@ void FontWithFace::dumpGlyphPage()
  */
 void FontWithFace::setDPI()
 {
-    float scale = std::min(irr_driver->getActualScreenSize().Height,
-                             irr_driver->getActualScreenSize().Width)  / 720.0f;
+    float scale = std::min(irr_driver->getActualScreenSize().Height / 720.0f,
+                             irr_driver->getActualScreenSize().Width  / 900.0f);
     int factorTwo = getScalingFactorTwo();
 
     if (UserConfigParams::m_font_size < 0)

diff --git a/src/guiengine/skin.cpp b/src/guiengine/skin.cpp
@@ -1176,7 +1176,8 @@ void Skin::drawRatingBar(Widget *w, const core::recti &rect,
 
         core::recti source_area = core::recti(0, 0, texture_w, texture_h);
 
-        float scale = (float)irr_driver->getActualScreenSize().Height / 1080.0f;
+        float scale = (float)std::min(irr_driver->getActualScreenSize().Height / 1080.0f, 
+                                    irr_driver->getActualScreenSize().Width / 1350.0f);
         int size = (int)((90.0f + grow) * scale);
         const core::recti rect2(glow_center_x - size,
                                 glow_center_y - size / 2,
@@ -1495,7 +1496,8 @@ void Skin::drawRibbonChild(const core::recti &rect, Widget* widget,
 
                 core::recti source_area(0, 0, texture_w, texture_h);
 
-                float scale = (float)irr_driver->getActualScreenSize().Height / 1080.0f;
+                float scale = (float)std::min(irr_driver->getActualScreenSize().Height / 1080.0f, 
+                                            irr_driver->getActualScreenSize().Width / 1350.0f);
                 int size = (int)((90.0f + grow) * scale);
                 const core::recti rect2(glow_center_x - size,
                                         glow_center_y - size / 2,
@@ -1871,7 +1873,8 @@ void Skin::drawIconButton(const core::recti &rect, Widget* widget,
 
         core::recti source_area = core::recti(0, 0, texture_w, texture_h);
 
-        float scale = (float)irr_driver->getActualScreenSize().Height / 1080.0f;
+        float scale = (float)std::min(irr_driver->getActualScreenSize().Height / 1080.0f, 
+                                    irr_driver->getActualScreenSize().Width / 1350.0f);
         int size = (int)((90.0f + grow) * scale);
         const core::recti rect2(glow_center_x - size,
                                 glow_center_y - size / 2,

diff --git a/src/guiengine/widgets/dynamic_ribbon_widget.cpp b/src/guiengine/widgets/dynamic_ribbon_widget.cpp
@@ -346,7 +346,7 @@ void DynamicRibbonWidget::buildInternalStructure()
     // Give some margin for columns for better readability
     col_width *= 1.2f;
 
-    m_col_amount = (int)floor( m_w / col_width );
+    m_col_amount = std::max((int)floor( m_w / col_width ), 1);
 
     // ajust column amount to not add more item slots than we actually need
     const int item_count = (int) m_items.size();

diff --git a/src/guiengine/widgets/player_kart_widget.cpp b/src/guiengine/widgets/player_kart_widget.cpp
@@ -702,7 +702,7 @@ void PlayerKartWidget::setSize(const int x, const int y, const int w, const int
     else
     {
         const int modelMaxHeight = h - kart_name_h - player_name_h;
-        const int modelMaxWidth =  w;
+        const int modelMaxWidth =  w / 2;
         const int bestSize = std::min(modelMaxWidth, modelMaxHeight);
         const int modelY = y + player_name_h;
         model_x = x + w/4 - (int)(bestSize/2);

diff --git a/src/guiengine/widgets/ribbon_widget.cpp b/src/guiengine/widgets/ribbon_widget.cpp
@@ -145,7 +145,7 @@ void RibbonWidget::add()
     }
 
     //int biggest_y = 0;
-    const int button_y = 10;
+    const int button_y = GUIEngine::getFontHeight() / 5;
 
     const int one_button_width = (subbuttons_amount == 0 ? m_w :
         int(roundf((float)m_w / (float)subbuttons_amount)));
@@ -361,10 +361,13 @@ void RibbonWidget::add()
             // TODO Add support for BUTTON type when needed
             if (m_active_children[i].m_type == WTYPE_ICON_BUTTON)
             {
+                int icon_size = std::min(tab_contents_rect.getHeight(), tab_contents_rect.getWidth()/2);
+                const int y = tab_contents_rect.getHeight()/2 - icon_size/2;
+
                 rect<s32> icon_part = rect<s32>(tab_contents_rect.UpperLeftCorner.X,
-                                                tab_contents_rect.UpperLeftCorner.Y,
-                                                tab_contents_rect.UpperLeftCorner.X + tab_contents_rect.getHeight(),
-                                                tab_contents_rect.UpperLeftCorner.Y + tab_contents_rect.getHeight());
+                                                tab_contents_rect.UpperLeftCorner.Y + y,
+                                                tab_contents_rect.UpperLeftCorner.X + icon_size,
+                                                tab_contents_rect.UpperLeftCorner.Y + y + icon_size);
 
                 // label at the *right* of the icon (for tabs)
                 rect<s32> label_part = rect<s32>(icon_part.LowerRightCorner.X+5,
@@ -443,7 +446,7 @@ void RibbonWidget::add()
 
             const int needed_space_under_button = has_label
                                                 ? GUIEngine::getFontHeight()
-                                                : 10;
+                                                : GUIEngine::getFontHeight() / 5;
 
             float imageRatio =
                 (float)m_active_children[i].m_w / (float)m_active_children[i].m_h;

diff --git a/src/states_screens/arenas_screen.cpp b/src/states_screens/arenas_screen.cpp
@@ -114,7 +114,10 @@ void ArenasScreen::beforeAddingWidget()
 
     DynamicRibbonWidget* tracks_widget = this->getWidget<DynamicRibbonWidget>("tracks");
     assert( tracks_widget != NULL );
-    tracks_widget->setItemCountHint(num_of_arenas+1); //set the item hint to that number to prevent weird formatting
+
+    // Set the item hint to that number to prevent weird formatting
+    // Avoid too many items shown at the same time
+    tracks_widget->setItemCountHint(std::min(num_of_arenas + 1, 30)); 
 }
 
 // -----------------------------------------------------------------------------

diff --git a/src/states_screens/easter_egg_screen.cpp b/src/states_screens/easter_egg_screen.cpp
@@ -165,7 +165,10 @@ void EasterEggScreen::beforeAddingWidget()
 
     DynamicRibbonWidget* tracks_widget = this->getWidget<DynamicRibbonWidget>("tracks");
     assert( tracks_widget != NULL );
-    tracks_widget->setItemCountHint(num_of_arenas+1); //set the item hint to that number to prevent weird formatting
+
+    // Set the item hint to that number to prevent weird formatting
+    // Avoid too many items shown at the same time
+    tracks_widget->setItemCountHint(std::min(num_of_arenas + 1, 30));
 }
 
 // -----------------------------------------------------------------------------

diff --git a/src/states_screens/grand_prix_editor_screen.cpp b/src/states_screens/grand_prix_editor_screen.cpp
@@ -193,7 +193,9 @@ void GrandPrixEditorScreen::loadTrackList (const std::string& gpname)
     const std::vector<std::string> tracks = gp->getTrackNames(true);
 
     tracks_widget->clearItems();
-    tracks_widget->setItemCountHint((int)tracks.size());
+
+    // Avoid too many items shown at the same time
+    tracks_widget->setItemCountHint(std::min((int)tracks.size(), 15));
     for (unsigned int t = 0; t < tracks.size(); t++)
     {
         Track* curr = track_manager->getTrack(tracks[t]);

diff --git a/src/states_screens/kart_selection.cpp b/src/states_screens/kart_selection.cpp
@@ -338,7 +338,8 @@ void KartSelectionScreen::beforeAddingWidget()
     DynamicRibbonWidget* w = getWidget<DynamicRibbonWidget>("karts");
     assert( w != NULL );
 
-    w->setItemCountHint( kart_properties_manager->getNumberOfKarts() );
+    // Avoid too many items shown at the same time
+    w->setItemCountHint(std::min((int)kart_properties_manager->getNumberOfKarts(), 20));
 }   // beforeAddingWidget
 
 // ----------------------------------------------------------------------------