alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-08-18 17:53:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new icon shapes and filter for filtering icons on the layer (#1348)

Browse Source 
## Description:

Add triangle shape for missile silos, square for sam, octagon for
defense posts, and add a filter in the topbar to highlight structures


![image](https://github.com/user-attachments/assets/d0986037-d4d7-41c6-b353-2a69b1eeb7c4)

![highlight](https://github.com/user-attachments/assets/0018e68a-31d4-478f-be57-56c3f71ee32a)


## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Vivacious Box
This commit is contained in:
Vivacious Box
2025-07-07 09:36:55 -07:00
committed by GitHub
parent e661c8b773
commit 105286ed29
8 changed files with 274 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/GameTopBar.ts
+79 -8
View File
@@ -24,7 +24,11 @@ import { UnitType } from "../../../core/game/Game";
import { GameUpdateType } from "../../../core/game/GameUpdates";
import { GameView } from "../../../core/game/GameView";
import { UserSettings } from "../../../core/game/UserSettings";
import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
import {
AlternateViewEvent,
RefreshGraphicsEvent,
ToggleStructureEvent,
} from "../../InputHandler";
import { renderNumber, renderTroops } from "../../Utils";
import { Layer } from "./Layer";
@@ -33,6 +37,7 @@ export class GameTopBar extends LitElement implements Layer {
public game: GameView;
public eventBus: EventBus;
private _userSettings: UserSettings = new UserSettings();
private _selectedStructure: UnitType | null = null;
private _population = 0;
private _troops = 0;
private _cities = 0;
@@ -140,6 +145,12 @@ export class GameTopBar extends LitElement implements Layer {
this.eventBus.emit(new RefreshGraphicsEvent());
}
private onToggleStructureClick(structureType: UnitType) {
this._selectedStructure =
this._selectedStructure === structureType ? null : structureType;
this.eventBus.emit(new ToggleStructureEvent(this._selectedStructure));
}
private onToggleRandomNameModeButtonClick() {
this._userSettings.toggleRandomName();
}
@@ -280,9 +291,19 @@ export class GameTopBar extends LitElement implements Layer {
</div>
</div>
<div
class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1 bg-slate-800/20 border border-slate-400 p-0.5 md:px-1 lg:px-2 md:gap-2"
class="grid grid-rows-1 auto-cols-max grid-flow-col bg-slate-800/20 border border-slate-400 p-0.5 md:px-1 lg:px-2"
>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.City
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.City)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.City)}"
>
<img
src=${cityIcon}
alt="gold"
@@ -292,7 +313,17 @@ export class GameTopBar extends LitElement implements Layer {
/>
${renderNumber(this._cities)}
</div>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.Factory
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.Factory)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.Factory)}"
>
<img
src=${factoryIcon}
alt="gold"
@@ -302,7 +333,17 @@ export class GameTopBar extends LitElement implements Layer {
/>
${renderNumber(this._factories)}
</div>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.Port
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.Port)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.Port)}"
>
<img
src=${portIcon}
alt="gold"
@@ -312,7 +353,17 @@ export class GameTopBar extends LitElement implements Layer {
/>
${renderNumber(this._port)}
</div>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.DefensePost
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.DefensePost)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.DefensePost)}"
>
<img
src=${defensePostIcon}
alt="gold"
@@ -322,7 +373,17 @@ export class GameTopBar extends LitElement implements Layer {
/>
${renderNumber(this._defensePost)}
</div>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.MissileSilo
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.MissileSilo)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.MissileSilo)}"
>
<img
src=${missileSiloIcon}
alt="gold"
@@ -332,7 +393,17 @@ export class GameTopBar extends LitElement implements Layer {
/>
${renderNumber(this._missileSilo)}
</div>
<div class="flex items-center gap-2">
<div
class="md:px-2 px-1 flex items-center gap-2"
style="background: ${this._selectedStructure ===
UnitType.SAMLauncher
? "#ffffff2e"
: "none"}"
@mouseenter="${() =>
this.onToggleStructureClick(UnitType.SAMLauncher)}"
@mouseleave="${() =>
this.onToggleStructureClick(UnitType.SAMLauncher)}"
>
<img
src=${samLauncherIcon}
alt="gold"