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

Homepage update & add 3 public lobbies (#3191)

Browse Source 
## Description:

Update UI 
check https://homepageupdate.openfront.dev/ 

Improved mobile UI (now fills whole screen for all modals) e.g.:
<img width="432" height="852" alt="image"
src="https://github.com/user-attachments/assets/56de40af-4137-4c57-96b7-3910c9a665b8"
/>

Converted PublicLobby to be "GameModeSelector" to get a nicer 4x4 grid
div, where <GameModeSelector> now handles all the username validation
now (removed redundant code from modals such as matchmaking) also fixed
a bug where someone could have "[XX] X" as thier username (when the
minimum should be 3 chars for their name)

Now visually displays the 3 lobbies ffa/team/special (which is a
continuation from the work done in: #3196 )
<img width="818" height="563" alt="image"
src="https://github.com/user-attachments/assets/a15cd31b-6061-4fb8-83ee-ffde6225cfa7"
/>

updated the background:
<img width="1919" height="807" alt="image"
src="https://github.com/user-attachments/assets/358a7434-51b8-4540-baf2-d1be05053c44"
/>



slightly updated the glassy-look to be less glassy:
<img width="825" height="729" alt="image"
src="https://github.com/user-attachments/assets/1801871b-bbf8-43db-ac53-489337ae80a5"
/>



## 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
This commit is contained in:
Ryan
2026-02-19 05:11:01 +00:00
committed by GitHub
parent 2a7db43db3
commit 70f2abb181
48 changed files with 1016 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+34 -9
View File
@@ -122,12 +122,29 @@
<body
class="h-full select-none font-sans min-h-screen bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-row overflow-hidden"
>
<div
class="fixed inset-0 w-full h-full -z-50 bg-cover bg-center bg-fixed pointer-events-none brightness-[0.5]"
style="
background-image: url(&quot;/images/EuropeBackgroundBlurred.webp&quot;);
"
></div>
<div id="hex-grid" class="fixed inset-0 -z-50 pointer-events-none">
<div
id="background-layer"
class="absolute inset-0 bg-cover bg-center opacity-50 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
style="
background-image: url(&quot;/resources/images/background.png&quot;);
"
></div>
<div
class="absolute inset-0 bg-center bg-no-repeat bg-contain hidden lg:block"
style="
background-image: url(&quot;/resources/images/OpenFront.png&quot;);
opacity: 0.25;
"
></div>
<div
class="absolute inset-0 bg-center bg-no-repeat bg-contain lg:hidden"
style="
background-image: url(&quot;/resources/images/OF.png&quot;);
opacity: 0.25;
"
></div>
</div>
<!-- LEFT SIDEBAR MENU -->
@@ -140,10 +157,9 @@
<mobile-nav-bar
id="sidebar-menu"
class="peer in-[.in-game]:hidden z-40001 fixed left-0 top-0 h-full flex flex-col justify-start overflow-visible bg-black/60 backdrop-blur-md transition-transform duration-500 ease-out transform -translate-x-full w-[80%] [&.open]:translate-x-0 lg:hidden"
class="peer [.in-game_&]:hidden z-[40001] fixed left-0 top-0 h-full flex flex-col justify-start overflow-visible bg-black/70 backdrop-blur-xl border-r border-white/10 transition-transform duration-500 ease-out transform -translate-x-full w-[70%] [&.open]:translate-x-0 lg:hidden"
role="dialog"
data-i18n-aria-label="main.menu"
aria-hidden="true"
></mobile-nav-bar>
<!-- MAIN CONTENT AREA -->
@@ -163,7 +179,11 @@
<!-- Main container with responsive padding -->
<main-layout class="contents">
<play-page class="contents"></play-page>
<matchmaking-modal
id="page-matchmaking"
inline
class="hidden w-full h-full page-content"
></matchmaking-modal>
<news-modal
id="page-news"
inline
@@ -225,6 +245,11 @@
inline
class="hidden w-full h-full page-content"
></flag-input-modal>
<ranked-modal
id="page-ranked"
inline
class="hidden w-full h-full page-content"
></ranked-modal>
</main-layout>
<!-- Desktop Footer -->