Skip to content

Homepage #3091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ryanbarlow97 wants to merge 3 commits into from
+1,513 −938
Closed

Homepage #3091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d4c5dc
Homepage mobile UI improvements
ryanbarlow97 Feb 2, 2026
451b5ca
some merge fixes
ryanbarlow97 Feb 2, 2026
1c7b2bf
fix small issues
ryanbarlow97 Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 34 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,24 @@
<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;/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;/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;/images/OF.png&quot;); opacity: 0.25"
></div>
</div>

<!-- LEFT SIDEBAR MENU -->

Expand All @@ -140,10 +152,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 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 -->
Expand All @@ -163,7 +174,14 @@
<!-- Main container with responsive padding -->
<main-layout class="contents">
<play-page class="contents"></play-page>

<lang-selector
inline
class="hidden w-full h-full page-content"
></lang-selector>
<matchmaking-modal
inline
class="hidden w-full h-full page-content"
></matchmaking-modal>
<news-modal
id="page-news"
inline
Expand Down Expand Up @@ -224,6 +242,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 -->
Expand All @@ -239,10 +262,10 @@
<div id="app"></div>

<div
class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px] fixed pointer-events-none"
class="left-0 bottom-0 lg:left-4 lg:bottom-4 w-full flex-col-reverse lg:flex-row z-50 lg:w-[320px] fixed pointer-events-none"
>
<div
class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end pointer-events-none"
class="w-full lg:w-2/3 lg:fixed lg:right-0 lg:bottom-0 lg:flex flex-col items-end pointer-events-none"
>
<chat-display></chat-display>
<events-display></events-display>
Expand Down
21 changes: 0 additions & 21 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added resources/images/OF.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/OpenFront.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/background.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 9 additions & 5 deletions resources/lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,8 @@
"connecting": "Connecting to matchmaking server...",
"searching": "Searching for game...",
"waiting_for_game": "Waiting for game to start...",
"elo": "Your ELO: {elo}"
"elo": "Your ELO: {elo}",
"no_elo": "No ELO yet"
},
"username": {
"enter_username": "Enter your username",
Expand Down Expand Up @@ -475,6 +476,13 @@
"teams": "Teams",
"humans_vs_nations": "Humans vs Nations"
},
"mode_selector": {
"special_title": "Special Mix",
"ranked_title": "Ranked",
"ranked_1v1_title": "1v1",
"ranked_2v2_title": "2v2",
"coming_soon": "Coming Soon"
},
"public_game_modifier": {
"random_spawn": "Random Spawn",
"compact_map": "Compact Map",
Expand Down Expand Up @@ -1001,8 +1009,6 @@
"recent_games": "Recent Games",
"game_id": "Game ID",
"mode": "Mode",
"mode_ffa": "Free-for-All",
"mode_team": "Team",
"replay": "Replay",
"details": "Details",
"ranking": "Ranking",
Expand All @@ -1020,8 +1026,6 @@
"stats_losses": "Losses",
"stats_wlr": "Win:Loss Ratio",
"stats_games_played": "Games Played",
"mode_ffa": "Free-for-All",
"mode_team": "Team",
"no_stats": "No stats recorded for this selection."
},
"matchmaking_button": {
Expand Down
19 changes: 4 additions & 15 deletions src/client/AccountModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,18 +61,9 @@ export class AccountModal extends BaseModal {

render() {
const content = this.isLoadingUser
? html`
<div
class="flex flex-col items-center justify-center p-12 text-white bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 h-full min-h-[400px]"
>
<div
class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mb-4"
></div>
<p class="text-white/60 font-medium tracking-wide animate-pulse">
${translateText("account_modal.fetching_account")}
</p>
</div>
`
? this.renderLoadingSpinner(
translateText("account_modal.fetching_account"),
)
: this.renderInner();

if (this.inline) {
Expand All @@ -99,9 +90,7 @@ export class AccountModal extends BaseModal {
const displayId = publicId || translateText("account_modal.not_found");

return html`
<div
class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
>
<div class="${this.modalContainerClass}">
${modalHeader({
title,
onBack: () => this.close(),
Expand Down
4 changes: 2 additions & 2 deletions src/client/FlagInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export class FlagInput extends LitElement {
return html`
<button
id="flag-input"
class="flag-btn p-0! m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-slate-900/80 hover:bg-slate-800/80 active:bg-slate-800/90 rounded-lg overflow-hidden"
class="flag-btn p-0 m-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
title=${buttonTitle}
@click=${this.onInputClick}
>
Expand All @@ -94,7 +94,7 @@ export class FlagInput extends LitElement {
></span>
${showSelect
? html`<span
class="text-[10px] font-black text-white/40 uppercase leading-none break-words w-full text-center px-1"
class="text-[10px] font-black text-white uppercase leading-none break-words w-full text-center px-1"
>
${translateText("flag_input.title")}
</span>`
Expand Down
4 changes: 1 addition & 3 deletions src/client/FlagInputModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ export class FlagInputModal extends BaseModal {

render() {
const content = html`
<div
class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
>
<div class="${this.modalContainerClass}">
<div
class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
>
Expand Down
6 changes: 1 addition & 5 deletions src/client/HelpModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,7 @@ export class HelpModal extends BaseModal {
const keybinds = this.keybinds;

const content = html`
<div
class="h-full flex flex-col ${this.inline
? "bg-black/60 backdrop-blur-md rounded-2xl border border-white/10"
: ""}"
>
<div class="${this.modalContainerClass}">
${modalHeader({
title: translateText("main.help"),
onBack: this.close,
Expand Down
Loading
Loading