From 29e1ca2bda3bd5a896246e0121ecae3283dbb6db Mon Sep 17 00:00:00 2001
From: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Date: Tue, 3 Mar 2026 02:01:49 +0000
Subject: [PATCH] new homepage (#3332)

## Description:

updated homepage to make ffa the primary focus. closes
https://github.com/openfrontio/OpenFrontIO/issues/3288 and closes
https://github.com/openfrontio/OpenFrontIO/pull/3328
<img width="1911" height="924" alt="image"
src="https://github.com/user-attachments/assets/f81a3471-6a24-44a5-baf9-c2fdc5a3cbc3"
/>

<img width="416" height="846" alt="image"
src="https://github.com/user-attachments/assets/0456423b-4418-4719-9236-d12cb3aa1c37"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n
---
 src/client/GameModeSelector.ts      | 50 +++++++++++++++++++----------
 src/client/components/MainLayout.ts |  2 +-
 src/client/components/PlayPage.ts   |  2 +-
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 526adf036..6992e342e 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -89,14 +89,23 @@ export class GameModeSelector extends LitElement {
     const special = this.lobbies?.games?.["special"]?.[0];
 
     return html`
-      <div
-        class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-[70%] lg:w-full mx-auto pb-4 lg:pb-0"
-      >
-        ${ffa ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa)) : nothing}
-        ${teams
-          ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
-          : nothing}
-        ${special ? this.renderSpecialLobbyCard(special) : nothing}
+      <div class="flex flex-col gap-4 w-[84%] lg:w-full mx-auto pb-4 lg:pb-0">
+        <div class="order-first lg:order-none h-14 lg:hidden">
+          ${this.renderSoloButton()}
+        </div>
+        <div
+          class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] lg:grid-rows-2 gap-4 lg:h-[28rem]"
+        >
+          ${ffa
+            ? html`<div class="lg:row-span-2">
+                ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
+              </div>`
+            : nothing}
+          ${teams
+            ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
+            : nothing}
+          ${special ? this.renderSpecialLobbyCard(special) : nothing}
+        </div>
         ${this.renderQuickActionsSection()}
       </div>
     `;
@@ -116,20 +125,27 @@ export class GameModeSelector extends LitElement {
     return this.renderLobbyCard(lobby, titleContent);
   }
 
+  private renderSoloButton() {
+    const title = translateText("main.solo");
+    return html`
+      <button
+        @click=${this.openSinglePlayerModal}
+        class="flex items-center justify-center w-full h-full rounded-xl bg-blue-600 border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] text-sm lg:text-base font-bold text-white uppercase tracking-wider text-center"
+      >
+        ${title}
+      </button>
+    `;
+  }
+
   private renderQuickActionsSection() {
     return html`
-      <div class="contents lg:flex lg:flex-col lg:gap-2 lg:h-56">
-        <div class="max-lg:order-first grid grid-cols-2 gap-2 h-20 lg:flex-1">
-          ${this.renderSmallActionCard(
-            translateText("main.solo"),
-            this.openSinglePlayerModal,
-          )}
+      <div class="flex flex-col gap-2">
+        <div class="h-14 hidden lg:block">${this.renderSoloButton()}</div>
+        <div class="grid grid-cols-3 gap-2 h-14">
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
           )}
-        </div>
-        <div class="grid grid-cols-2 gap-2 h-20 lg:flex-1">
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
@@ -213,7 +229,7 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group flex flex-col w-full h-40 lg:h-56 text-white uppercase rounded-2xl overflow-hidden transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] ${CARD_BG}"
+        class="group flex flex-col w-full h-44 lg:h-full text-white uppercase rounded-2xl overflow-hidden transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] ${CARD_BG}"
       >
         <div class="relative flex-1 overflow-hidden ${CARD_BG}">
           ${mapImageSrc
diff --git a/src/client/components/MainLayout.ts b/src/client/components/MainLayout.ts
index 1c32e6dcf..bbe389bfe 100644
--- a/src/client/components/MainLayout.ts
+++ b/src/client/components/MainLayout.ts
@@ -22,7 +22,7 @@ export class MainLayout extends LitElement {
         class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.75rem,1.5vw,1.5rem)]"
       >
         <div
-          class="w-full lg:max-w-[20cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden"
+          class="w-full lg:max-w-[24cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden"
         >
           ${this._initialChildren}
         </div>
diff --git a/src/client/components/PlayPage.ts b/src/client/components/PlayPage.ts
index aec22ccf2..52cd7b211 100644
--- a/src/client/components/PlayPage.ts
+++ b/src/client/components/PlayPage.ts
@@ -11,7 +11,7 @@ export class PlayPage extends LitElement {
     return html`
       <div
         id="page-play"
-        class="flex flex-col gap-2 w-full lg:max-w-6xl mx-auto px-0 lg:px-4 lg:my-auto min-h-0"
+        class="flex flex-col gap-2 w-full px-0 lg:px-4 lg:my-auto min-h-0"
       >
         <token-login class="absolute"></token-login>