mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-27 12:04:16 +00:00
evanpelle
0f79060f58
## Description: This will make the copyright notice more clear. <img width="369" height="242" alt="Screenshot 2025-10-07 at 6 03 44 PM" src="https://github.com/user-attachments/assets/53925a24-bf1a-437e-84c1-3d146d598bfd" /> ## 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
115 lines
2.3 KiB
TypeScript
115 lines
2.3 KiB
TypeScript
import { LitElement, css, 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;
|
|
|
|
static styles = css`
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: rgba(30, 30, 30, 0.7);
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
z-index: 9999;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(5px);
|
|
color: white;
|
|
width: 300px;
|
|
text-align: center;
|
|
transition:
|
|
opacity 0.3s ease-in-out,
|
|
visibility 0.3s ease-in-out;
|
|
}
|
|
|
|
.modal.visible {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -48%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.modal h2 {
|
|
margin-bottom: 15px;
|
|
font-size: 22px;
|
|
color: white;
|
|
}
|
|
|
|
.modal p {
|
|
margin-bottom: 20px;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modal button {
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
background: rgba(255, 100, 100, 0.7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
transform 0.1s ease;
|
|
}
|
|
|
|
.modal button:hover {
|
|
background: rgba(255, 100, 100, 0.9);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.modal button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.copyright {
|
|
font-size: 32px;
|
|
margin-top: 20px;
|
|
opacity: 1;
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
return html`
|
|
<div class="modal ${this.isVisible ? "visible" : ""}">
|
|
<div class="copyright">© OpenFront</div>
|
|
<h5>${translateText("game_starting_modal.code_license")}</h5>
|
|
<p>${translateText("game_starting_modal.title")}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
show() {
|
|
this.isVisible = true;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
hide() {
|
|
this.isVisible = false;
|
|
this.requestUpdate();
|
|
}
|
|
}
|