alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-05 17:35:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Extraction Host/Solo Modal (#3181)

Browse Source 
## Description:

UI Extraction Host/Solo Modal
- Made all buttons do the same "press" feel (options/settings/random
map) are now the same as the map button.
- Also fixed a bug where you could "drag" the map image off the button.

## 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
2026-02-12 18:41:14 +00:00
committed by GitHub
parent bd96bcca0d
commit f8c14398c8
9 changed files with 1322 additions and 1334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/map/MapDisplay.ts
+8 -2
View File
@@ -53,6 +53,10 @@ export class MapDisplay extends LitElement {
}
}
private preventImageDrag(event: DragEvent) {
event.preventDefault();
}
render() {
return html`
<div
@@ -61,10 +65,10 @@ export class MapDisplay extends LitElement {
aria-selected="${this.selected}"
aria-label="${this.translation ?? this.mapName ?? this.mapKey}"
@keydown="${this.handleKeydown}"
class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 gap-3 group ${this
class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
.selected
? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1 active:scale-95"}"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
>
${this.isLoading
? html`<div
@@ -79,6 +83,8 @@ export class MapDisplay extends LitElement {
<img
src="${this.mapWebpPath}"
alt="${this.translation || this.mapName}"
draggable="false"
@dragstart=${this.preventImageDrag}
class="w-full h-full object-cover ${this.selected
? "opacity-100"
: "opacity-80"} group-hover:opacity-100 transition-opacity duration-200"
src/client/components/map/MapPicker.ts
+20 -13
View File
@@ -43,6 +43,10 @@ export class MapPicker extends LitElement {
this.onSelectRandom?.();
};
private preventImageDrag(event: DragEvent) {
event.preventDefault();
}
private getWins(mapValue: GameMapType): Set<Difficulty> {
return this.mapWins?.get(mapValue) ?? new Set();
}
@@ -54,7 +58,7 @@ export class MapPicker extends LitElement {
return html`
<div
@click=${() => this.handleMapSelection(mapValue)}
class="cursor-pointer transition-transform duration-200 active:scale-95"
class="cursor-pointer"
>
<map-display
.mapKey=${mapKey}
@@ -117,7 +121,7 @@ export class MapPicker extends LitElement {
type="button"
role="tab"
aria-selected=${!this.showAllMaps}
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${this
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
.showAllMaps
? "text-white/60 hover:text-white"
: "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"}"
@@ -129,7 +133,7 @@ export class MapPicker extends LitElement {
type="button"
role="tab"
aria-selected=${this.showAllMaps}
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${this
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
.showAllMaps
? "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"
: "text-white/60 hover:text-white"}"
@@ -152,27 +156,30 @@ export class MapPicker extends LitElement {
</h4>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<button
class="relative group rounded-xl border transition-all duration-200 overflow-hidden flex flex-col items-stretch ${this
type="button"
class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
.useRandomMap
? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20"}"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
@click=${this.handleSelectRandomMap}
>
<div
class="aspect-[2/1] w-full relative overflow-hidden bg-black/20"
class="w-full aspect-[2/1] relative overflow-hidden rounded-lg bg-black/20"
>
<img
src=${randomMap}
alt=${translateText("map.random")}
class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
draggable="false"
@dragstart=${this.preventImageDrag}
class="w-full h-full object-cover ${this.useRandomMap
? "opacity-100"
: "opacity-80"} group-hover:opacity-100 transition-opacity duration-200"
/>
</div>
<div class="p-3 text-center border-t border-white/5">
<div
class="text-xs font-bold text-white uppercase tracking-wider break-words hyphens-auto"
>
${translateText("map.random")}
</div>
<div
class="text-xs font-bold text-white uppercase tracking-wider text-center leading-tight break-words hyphens-auto"
>
${translateText("map.random")}
</div>
</button>
</div>