mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 16:40:16 +00:00
Evan
62299c9714
## Description: We have brand colors: <img width="738" height="900" alt="Screenshot 2026-04-25 at 12 52 29 PM" src="https://github.com/user-attachments/assets/aac69e87-91f2-4c3f-9f1e-f69f48f5943e" /> So update the homepage & in-game UI to use those colors: <img width="1185" height="946" alt="Screenshot 2026-04-25 at 12 51 06 PM" src="https://github.com/user-attachments/assets/89a0b12c-2db1-43d4-9500-fcf405c0f7ff" /> Also updated buttons to use the o-button element ## 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: evan
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { LitElement, html } from "lit";
|
|
import { customElement, state } from "lit/decorators.js";
|
|
import { translateText } from "./Utils";
|
|
|
|
@customElement("game-starting-modal")
|
|
export class GameStartingModal extends LitElement {
|
|
@state()
|
|
isVisible = false;
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
render() {
|
|
const isVisible = this.isVisible;
|
|
return html`
|
|
<div
|
|
class="fixed inset-0 bg-black/30 backdrop-blur-[4px] z-[9998] transition-all duration-300 ${isVisible
|
|
? "opacity-100 visible"
|
|
: "opacity-0 invisible"}"
|
|
></div>
|
|
<div
|
|
class="fixed top-1/2 left-1/2 bg-zinc-900/90 backdrop-blur-md border border-white/10 p-6 rounded-2xl z-[9999] shadow-2xl text-white w-[400px] text-center transition-all duration-300 -translate-x-1/2 ${isVisible
|
|
? "opacity-100 visible -translate-y-1/2"
|
|
: "opacity-0 invisible -translate-y-[48%]"}"
|
|
>
|
|
<div
|
|
class="text-base font-medium tracking-wider uppercase text-white/40 mb-3"
|
|
>
|
|
© OpenFront and Contributors
|
|
</div>
|
|
<a
|
|
href="https://github.com/openfrontio/OpenFrontIO/blob/main/CREDITS.md"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block mb-4 text-lg font-medium tracking-wider uppercase text-malibu-blue no-underline transition-colors duration-200 hover:text-aquarius"
|
|
>${translateText("game_starting_modal.credits")}</a
|
|
>
|
|
<p class="text-base text-white/40 mb-4">
|
|
${translateText("game_starting_modal.code_license")}
|
|
</p>
|
|
<p
|
|
class="text-xl font-medium tracking-wider text-white bg-white/5 border border-white/10 px-4 py-3 rounded-xl"
|
|
>
|
|
${translateText("game_starting_modal.title")}
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
show() {
|
|
this.isVisible = true;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
hide() {
|
|
this.isVisible = false;
|
|
this.requestUpdate();
|
|
}
|
|
}
|