mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-23 15:26:50 +00:00
Ryan
5e6c90d9bb
## Description: Overhauls the Main Menu UI, visit https://menu.openfront.dev to see everything. ## 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
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { LitElement, html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
@customElement("player-stats-grid")
|
|
export class PlayerStatsGrid extends LitElement {
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
|
|
@property({ type: Array }) titles: string[] = [];
|
|
@property({ type: Array }) values: Array<string | number> = [];
|
|
|
|
// Currently fixed to display 4 stats (can be changed if needed)
|
|
private readonly VISIBLE_STATS_COUNT = 4;
|
|
|
|
render() {
|
|
return html`
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-2">
|
|
${Array(this.VISIBLE_STATS_COUNT)
|
|
.fill(0)
|
|
.map(
|
|
(_, i) => html`
|
|
<div
|
|
class="flex flex-col items-center justify-center p-4 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors"
|
|
>
|
|
<div class="text-2xl font-bold text-white mb-1">
|
|
${this.values[i] ?? ""}
|
|
</div>
|
|
<div
|
|
class="text-blue-200/60 text-xs font-bold uppercase tracking-widest"
|
|
>
|
|
${this.titles[i] ?? ""}
|
|
</div>
|
|
</div>
|
|
`,
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|