mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-16 11:53:17 +00:00
Host/Solo modal code cleanup (#2939)
## Description: Refactor / Clean-up code inside Host/Solo modals. ## 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
This commit is contained in:
Ryan
+60
-196
@@ -30,6 +30,10 @@ import { fetchCosmetics } from "./Cosmetics";
|
||||
import { FlagInput } from "./FlagInput";
|
||||
import { JoinLobbyEvent } from "./Main";
|
||||
import { UsernameInput } from "./UsernameInput";
|
||||
import {
|
||||
renderToggleInputCard,
|
||||
renderToggleInputCardInput,
|
||||
} from "./utilities/RenderToggleInputCard";
|
||||
import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
|
||||
import randomMap from "/images/RandomMap.webp?url";
|
||||
|
||||
@@ -522,20 +526,10 @@ export class SinglePlayerModal extends BaseModal {
|
||||
}
|
||||
},
|
||||
)}
|
||||
|
||||
<!-- Toggle with input support for Max Timer -->
|
||||
<div
|
||||
class="relative p-3 rounded-xl border transition-all duration-200 flex flex-col items-center justify-between gap-2 h-full cursor-pointer min-h-[100px] ${this
|
||||
.maxTimer
|
||||
? "bg-blue-500/20 border-blue-500/50"
|
||||
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
|
||||
@click=${(e: Event) => {
|
||||
// Prevent toggling when clicking the input
|
||||
if (
|
||||
(e.target as HTMLElement).tagName.toLowerCase() ===
|
||||
"input"
|
||||
)
|
||||
return;
|
||||
${renderToggleInputCard({
|
||||
labelKey: "single_modal.max_timer",
|
||||
checked: this.maxTimer,
|
||||
onClick: () => {
|
||||
this.maxTimer = !this.maxTimer;
|
||||
if (!this.maxTimer) {
|
||||
this.maxTimerValue = undefined;
|
||||
@@ -553,71 +547,26 @@ export class SinglePlayerModal extends BaseModal {
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center justify-center w-full mt-1">
|
||||
<div
|
||||
class="w-5 h-5 rounded border flex items-center justify-center transition-colors ${this
|
||||
.maxTimer
|
||||
? "bg-blue-500 border-blue-500"
|
||||
: "border-white/20 bg-white/5"}"
|
||||
>
|
||||
${this.maxTimer
|
||||
? html`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3 text-white"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.maxTimer
|
||||
? html`<input
|
||||
type="number"
|
||||
id="end-timer-value"
|
||||
min="1"
|
||||
max="120"
|
||||
.value=${String(this.maxTimerValue ?? "")}
|
||||
class="w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-blue-500 p-1 my-1"
|
||||
aria-label=${translateText("single_modal.max_timer")}
|
||||
@input=${this.handleMaxTimerValueChanges}
|
||||
@keydown=${this.handleMaxTimerValueKeyDown}
|
||||
placeholder=${translateText(
|
||||
"single_modal.max_timer_placeholder",
|
||||
)}
|
||||
/>`
|
||||
: html`<div
|
||||
class="h-[2px] w-4 bg-white/10 rounded my-3"
|
||||
></div>`}
|
||||
<!-- Spacer/Icon placeholder -->
|
||||
|
||||
<div
|
||||
class="text-[10px] uppercase font-bold text-white/60 tracking-wider text-center w-full leading-tight break-words hyphens-auto"
|
||||
>
|
||||
${translateText("single_modal.max_timer")}
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
input: renderToggleInputCardInput({
|
||||
id: "end-timer-value",
|
||||
min: 1,
|
||||
max: 120,
|
||||
value: this.maxTimerValue ?? "",
|
||||
ariaLabel: translateText("single_modal.max_timer"),
|
||||
placeholder: translateText(
|
||||
"single_modal.max_timer_placeholder",
|
||||
),
|
||||
onInput: this.handleMaxTimerValueChanges,
|
||||
onKeyDown: this.handleMaxTimerValueKeyDown,
|
||||
}),
|
||||
})}
|
||||
|
||||
<!-- Gold Multiplier -->
|
||||
<div
|
||||
class="relative p-3 rounded-xl border transition-all duration-200 flex flex-col items-center justify-between gap-2 h-full cursor-pointer min-h-[100px] ${this
|
||||
.goldMultiplier
|
||||
? "bg-blue-500/20 border-blue-500/50"
|
||||
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
|
||||
@click=${(e: Event) => {
|
||||
if (
|
||||
(e.target as HTMLElement).tagName.toLowerCase() ===
|
||||
"input"
|
||||
)
|
||||
return;
|
||||
${renderToggleInputCard({
|
||||
labelKey: "single_modal.gold_multiplier",
|
||||
checked: this.goldMultiplier,
|
||||
onClick: () => {
|
||||
this.goldMultiplier = !this.goldMultiplier;
|
||||
if (!this.goldMultiplier) {
|
||||
this.goldMultiplierValue = undefined;
|
||||
@@ -638,73 +587,27 @@ export class SinglePlayerModal extends BaseModal {
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center justify-center w-full mt-1">
|
||||
<div
|
||||
class="w-5 h-5 rounded border flex items-center justify-center transition-colors ${this
|
||||
.goldMultiplier
|
||||
? "bg-blue-500 border-blue-500"
|
||||
: "border-white/20 bg-white/5"}"
|
||||
>
|
||||
${this.goldMultiplier
|
||||
? html`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3 text-white"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.goldMultiplier
|
||||
? html`<input
|
||||
type="number"
|
||||
id="gold-multiplier-value"
|
||||
min="0.1"
|
||||
max="1000"
|
||||
step="any"
|
||||
value=${this.goldMultiplierValue ?? ""}
|
||||
class="w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-blue-500 p-1 my-1"
|
||||
aria-label=${translateText(
|
||||
"single_modal.gold_multiplier",
|
||||
)}
|
||||
@change=${this.handleGoldMultiplierValueChanges}
|
||||
@keydown=${this.handleGoldMultiplierValueKeyDown}
|
||||
placeholder=${translateText(
|
||||
"single_modal.gold_multiplier_placeholder",
|
||||
)}
|
||||
/>`
|
||||
: html`<div
|
||||
class="h-[2px] w-4 bg-white/10 rounded my-3"
|
||||
></div>`}
|
||||
|
||||
<div
|
||||
class="text-[10px] uppercase font-bold text-white/60 tracking-wider text-center w-full leading-tight break-words hyphens-auto"
|
||||
>
|
||||
${translateText("single_modal.gold_multiplier")}
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
input: renderToggleInputCardInput({
|
||||
id: "gold-multiplier-value",
|
||||
min: 0.1,
|
||||
max: 1000,
|
||||
step: "any",
|
||||
value: this.goldMultiplierValue ?? "",
|
||||
ariaLabel: translateText("single_modal.gold_multiplier"),
|
||||
placeholder: translateText(
|
||||
"single_modal.gold_multiplier_placeholder",
|
||||
),
|
||||
onChange: this.handleGoldMultiplierValueChanges,
|
||||
onKeyDown: this.handleGoldMultiplierValueKeyDown,
|
||||
}),
|
||||
})}
|
||||
|
||||
<!-- Starting Gold -->
|
||||
<div
|
||||
class="relative p-3 rounded-xl border transition-all duration-200 flex flex-col items-center justify-between gap-2 h-full cursor-pointer min-h-[100px] ${this
|
||||
.startingGold
|
||||
? "bg-blue-500/20 border-blue-500/50"
|
||||
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
|
||||
@click=${(e: Event) => {
|
||||
if (
|
||||
(e.target as HTMLElement).tagName.toLowerCase() ===
|
||||
"input"
|
||||
)
|
||||
return;
|
||||
${renderToggleInputCard({
|
||||
labelKey: "single_modal.starting_gold",
|
||||
checked: this.startingGold,
|
||||
onClick: () => {
|
||||
this.startingGold = !this.startingGold;
|
||||
if (!this.startingGold) {
|
||||
this.startingGoldValue = undefined;
|
||||
@@ -725,60 +628,21 @@ export class SinglePlayerModal extends BaseModal {
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex items-center justify-center w-full mt-1">
|
||||
<div
|
||||
class="w-5 h-5 rounded border flex items-center justify-center transition-colors ${this
|
||||
.startingGold
|
||||
? "bg-blue-500 border-blue-500"
|
||||
: "border-white/20 bg-white/5"}"
|
||||
>
|
||||
${this.startingGold
|
||||
? html`<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-3 w-3 text-white"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.startingGold
|
||||
? html`<input
|
||||
type="number"
|
||||
id="starting-gold-value"
|
||||
min="0"
|
||||
max="1000000000"
|
||||
step="100000"
|
||||
.value=${String(this.startingGoldValue ?? "")}
|
||||
class="w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-blue-500 p-1 my-1"
|
||||
aria-label=${translateText(
|
||||
"single_modal.starting_gold",
|
||||
)}
|
||||
@input=${this.handleStartingGoldValueChanges}
|
||||
@keydown=${this.handleStartingGoldValueKeyDown}
|
||||
placeholder=${translateText(
|
||||
"single_modal.starting_gold_placeholder",
|
||||
)}
|
||||
/>`
|
||||
: html`<div
|
||||
class="h-[2px] w-4 bg-white/10 rounded my-3"
|
||||
></div>`}
|
||||
|
||||
<div
|
||||
class="text-[10px] uppercase font-bold text-white/60 tracking-wider text-center w-full leading-tight break-words hyphens-auto"
|
||||
>
|
||||
${translateText("single_modal.starting_gold")}
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
input: renderToggleInputCardInput({
|
||||
id: "starting-gold-value",
|
||||
min: 0,
|
||||
max: 1000000000,
|
||||
step: 100000,
|
||||
value: this.startingGoldValue ?? "",
|
||||
ariaLabel: translateText("single_modal.starting_gold"),
|
||||
placeholder: translateText(
|
||||
"single_modal.starting_gold_placeholder",
|
||||
),
|
||||
onInput: this.handleStartingGoldValueChanges,
|
||||
onKeyDown: this.handleStartingGoldValueKeyDown,
|
||||
}),
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user