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

Main menu UI cleanup (#857)

Browse Source 
## Description:

- Fixes right side of the username box not being aligned with the rest
of the menu by fully hiding the news button
- Styled news button to match flag button (although a style more like
the secondary buttons would be better IMO, this is more of a temp fix)
- Invalid username popup no longer vertically shifts the rest of the
menu


![image](https://github.com/user-attachments/assets/451d0184-3f0f-44af-9b2c-a93f9dc38e49)


I uhhh kinda forgot how branches work and ended up pushing some changes
to the public lobby button to the same branch:

![image](https://github.com/user-attachments/assets/cee68ac3-361a-4185-a5c5-70602dbbb040)

![image](https://github.com/user-attachments/assets/fb9067e7-6e28-464e-b50e-dcd2ba5afdc3)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

Demonessica

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
This commit is contained in:
Demonessica
2025-05-27 20:29:52 -07:00
committed by GitHub
parent 6e6fb2db3a
commit 3a481d3d16
4 changed files with 54 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/PublicLobby.ts
+34 -31
View File
@@ -100,47 +100,50 @@ export class PublicLobby extends LitElement {
<button
@click=${() => this.lobbyClicked(lobby)}
?disabled=${this.isButtonDebounced}
class="w-full mx-auto p-4 md:p-6 ${this.isLobbyHighlighted
class="isolate grid h-40 grid-cols-[100%] grid-rows-[100%] place-content-stretch w-full overflow-hidden ${this
.isLobbyHighlighted
? "bg-gradient-to-r from-green-600 to-green-500"
: "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
.isButtonDebounced
? "opacity-70 cursor-not-allowed"
: ""}"
>
<div class="text-lg md:text-2xl font-semibold mb-2">
${translateText("public_lobby.join")}
</div>
<div class="flex">
<img
src="${getMapsImage(lobby.gameConfig.gameMap)}"
alt="${lobby.gameConfig.gameMap}"
class="w-1/3 md:w-1/5 md:h-[80px]"
style="border: 1px solid rgba(255, 255, 255, 0.5)"
/>
<div
class="w-full flex flex-col md:flex-row items-center justify-center md:justify-evenly"
>
<div class="flex flex-col items-center">
<div class="text-md font-medium text-blue-100 mb-4">
<!-- ${lobby.gameConfig.gameMap} -->
${translateText(
`map.${lobby.gameConfig.gameMap.toLowerCase().replace(/\s+/g, "")}`,
)}
</div>
<div class="text-md font-medium text-blue-100">
<img
src="${getMapsImage(lobby.gameConfig.gameMap)}"
alt="${lobby.gameConfig.gameMap}"
class="place-self-start col-span-full row-span-full h-full -z-10"
style="mask-image: linear-gradient(to left, transparent, #fff)"
/>
<div
class="flex flex-col justify-between h-full col-span-full row-span-full p-4 md:p-6 text-right z-0"
>
<div>
<div class="text-lg md:text-2xl font-semibold">
${translateText("public_lobby.join")}
</div>
<div class="text-md font-medium text-blue-100">
<span
class="text-sm ${this.isLobbyHighlighted
? "text-green-600"
: "text-blue-600"} bg-white rounded-sm px-1"
>
${lobby.gameConfig.gameMode === GameMode.Team
? translateText("public_lobby.teams", { num: teamCount ?? 0 })
: translateText("game_mode.ffa")}
</div>
: translateText("game_mode.ffa")}</span
>
<span
>${translateText(
`map.${lobby.gameConfig.gameMap.toLowerCase().replace(/\s+/g, "")}`,
)}</span
>
</div>
<div class="flex flex-col items-center">
<div class="text-md font-medium text-blue-100 mb-4">
${lobby.numClients} / ${lobby.gameConfig.maxPlayers}
</div>
<div class="text-md font-medium text-blue-100">
${timeDisplay}
</div>
</div>
<div>
<div class="text-md font-medium text-blue-100">
${lobby.numClients} / ${lobby.gameConfig.maxPlayers}
</div>
<div class="text-md font-medium text-blue-100">${timeDisplay}</div>
</div>
</div>
</button>
src/client/UsernameInput.ts
+1 -1
View File
@@ -47,7 +47,7 @@ export class UsernameInput extends LitElement {
/>
${this.validationError
? html`<div
class="mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
class="absolute w-full mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
>
${this.validationError}
</div>`
src/client/components/NewsButton.ts
+11 -36
View File
@@ -1,4 +1,4 @@
import { LitElement, css, html } from "lit";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import megaphone from "../../../resources/images/Megaphone.svg";
import { NewsModal } from "../NewsModal";
@@ -9,38 +9,6 @@ export class NewsButton extends LitElement {
@property({ type: Boolean })
hidden = false;
static styles = css`
.news-button {
opacity: 0.75;
transition: opacity 0.2s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
}
.news-button:hover {
opacity: 1;
}
.news-button img {
width: 24px;
height: 24px;
display: block;
margin-left: 12px;
}
.hidden {
display: none !important;
}
`;
private handleClick() {
const newsModal = document.querySelector("news-modal") as NewsModal;
if (newsModal) {
@@ -50,9 +18,16 @@ export class NewsButton extends LitElement {
render() {
return html`
<div class="text-center mb-0.5 ${this.hidden ? "hidden" : ""}">
<button class="news-button" @click=${this.handleClick}>
<img src="${megaphone}" alt=${translateText("news.title")} />
<div class="flex relative ${this.hidden ? "parent-hidden" : ""}">
<button
class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
@click=${this.handleClick}
>
<img
class="size-[48px]"
src="${megaphone}"
alt=${translateText("news.title")}
/>
</button>
</div>
`;
src/client/index.html
+8 -3
View File
@@ -99,6 +99,11 @@
display: none;
}
}
/* display:none if child has class parent-hidden since we can't use shadow DOM in Lit due to Tailwind */
*:has(> .parent-hidden) {
display: none;
}
</style>
<!-- Immediate execution to prevent FOUC -->
@@ -223,12 +228,12 @@
<div class="container__row">
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
<username-input class="w-full"></username-input>
<news-button class="mt-3"></news-button>
<username-input class="relative w-full"></username-input>
<news-button class="w-[20%] md:w-[15%]"></news-button>
</div>
<div></div>
<div>
<public-lobby class="w-full"></public-lobby>
<public-lobby class="block"></public-lobby>
</div>
<div class="container__row container__row--equal">
<o-button