mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-30 09:22:11 +00:00
DevelopingTom
d758e21351
## Description: The game rank modal was still using the old style, which clashes strongly with the new one. This PR changes changes the modal style to be consistent with the new one: ### Old <img width="894" height="451" alt="image" src="https://github.com/user-attachments/assets/c83177cf-a1ed-4ee5-9e12-7d2a9d8004cf" /> ### New  Tagged as `v29` to have a consistent style in the same version. ## 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: IngloriousTom
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { LitElement, html, nothing } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { translateText } from "../../../Utils";
|
|
import { RankType } from "./GameInfoRanking";
|
|
|
|
@customElement("ranking-header")
|
|
export class RankingHeader extends LitElement {
|
|
@property({ type: String }) rankType = RankType.Lifetime;
|
|
|
|
private onSort(type: RankType) {
|
|
this.dispatchEvent(new CustomEvent("sort", { detail: type }));
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<li
|
|
class="text-lg border-white/5 bg-white/[0.02] text-white/60 text-xs uppercase tracking-wider relative pt-2 pb-2 pr-5 pl-5 flex justify-between items-center"
|
|
>
|
|
${this.renderHeaderContent()}
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
private renderHeaderContent() {
|
|
switch (this.rankType) {
|
|
case RankType.Lifetime:
|
|
return html`<div class="w-full">
|
|
${translateText("game_info_modal.survival_time")}
|
|
</div>`;
|
|
case RankType.Conquests:
|
|
return html`<div class="w-full">
|
|
${translateText("game_info_modal.num_of_conquests")}
|
|
</div>`;
|
|
case RankType.Atoms:
|
|
case RankType.Hydros:
|
|
case RankType.MIRV:
|
|
return html`
|
|
<div class="flex justify-between sm:px-17.5 w-full">
|
|
${this.renderMultipleChoiceHeaderButton(
|
|
translateText("game_info_modal.atoms"),
|
|
RankType.Atoms,
|
|
)}
|
|
/
|
|
${this.renderMultipleChoiceHeaderButton(
|
|
translateText("game_info_modal.hydros"),
|
|
RankType.Hydros,
|
|
)}
|
|
/
|
|
${this.renderMultipleChoiceHeaderButton(
|
|
translateText("game_info_modal.mirv"),
|
|
RankType.MIRV,
|
|
)}
|
|
</div>
|
|
`;
|
|
case RankType.TotalGold:
|
|
return html`<div class="w-full">
|
|
${translateText("game_info_modal.all_gold")}
|
|
</div>`;
|
|
case RankType.NavalTrade:
|
|
case RankType.TrainTrade:
|
|
return html`
|
|
<div class="flex justify-between sm:px-17.5 w-full">
|
|
${this.renderMultipleChoiceHeaderButton(
|
|
translateText("game_info_modal.train_trade"),
|
|
RankType.TrainTrade,
|
|
)}
|
|
/
|
|
${this.renderMultipleChoiceHeaderButton(
|
|
translateText("game_info_modal.naval_trade"),
|
|
RankType.NavalTrade,
|
|
)}
|
|
</div>
|
|
`;
|
|
case RankType.ConqueredGold:
|
|
return html`<div class="w-full">
|
|
${translateText("game_info_modal.conquest_gold")}
|
|
</div>`;
|
|
case RankType.StolenGold:
|
|
return html`<div class="w-full">
|
|
${translateText("game_info_modal.stolen_gold")}
|
|
</div>`;
|
|
default:
|
|
console.warn("Unhandled RankType", this.rankType);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
private renderMultipleChoiceHeaderButton(label: string, type: RankType) {
|
|
return html`
|
|
<button
|
|
@click=${() => this.onSort(type)}
|
|
class="${this.rankType === type
|
|
? "border-b-2 border-b-white"
|
|
: nothing}"
|
|
>
|
|
${label}
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
createRenderRoot() {
|
|
return this;
|
|
}
|
|
}
|