alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 15:40:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'v31'

Browse Source
This commit is contained in:
evanpelle
2026-05-11 17:07:12 -07:00
parent 834a9757d7 96e8f5cccd
commit a597262af9
3 changed files with 975 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/GameModeSelector.ts
+45 -37
View File
@@ -147,45 +147,53 @@ export class GameModeSelector extends LitElement {
<ios-add-to-home-screen-banner></ios-add-to-home-screen-banner>
<!-- Game cards grid -->
<div
class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
>
<!-- Left col: main card (desktop only) -->
${ffa
? html`<div class="hidden sm:block">
${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
</div>`
: nothing}
${this.lobbies === null
? html`<div
class="flex items-center justify-center h-44 sm:h-[min(24rem,40vh)]"
>
<span
class="w-24 h-24 border-[6px] border-blue-500/30 border-t-blue-500 rounded-full animate-spin"
></span>
</div>`
: html`<div
class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
>
<!-- Left col: main card (desktop only) -->
${ffa
? html`<div class="hidden sm:block">
${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
</div>`
: nothing}
<!-- Right col: special + teams (desktop only) -->
<div class="hidden sm:flex sm:flex-col sm:gap-4">
${special
? html`<div class="flex-1 min-h-0">
${this.renderSpecialLobbyCard(special)}
</div>`
: nothing}
${teams
? html`<div class="flex-1 min-h-0">
${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
</div>`
: nothing}
</div>
<!-- Right col: special + teams (desktop only) -->
<div class="hidden sm:flex sm:flex-col sm:gap-4">
${special
? html`<div class="flex-1 min-h-0">
${this.renderSpecialLobbyCard(special)}
</div>`
: nothing}
${teams
? html`<div class="flex-1 min-h-0">
${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
</div>`
: nothing}
</div>
<!-- Mobile: special, ffa, teams inline -->
<div class="sm:hidden">
${special ? this.renderSpecialLobbyCard(special) : nothing}
</div>
<div class="sm:hidden">
${ffa
? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
: nothing}
</div>
<div class="sm:hidden">
${teams
? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
: nothing}
</div>
</div>
<!-- Mobile: special, ffa, teams inline -->
<div class="sm:hidden">
${special ? this.renderSpecialLobbyCard(special) : nothing}
</div>
<div class="sm:hidden">
${ffa
? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
: nothing}
</div>
<div class="sm:hidden">
${teams
? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
: nothing}
</div>
</div>`}
<!-- Solo: full width, desktop only -->
<div class="hidden sm:block h-14">