From 4981a3437f33ef279050aa2049c9a9f51fd95ce6 Mon Sep 17 00:00:00 2001 From: Martin I <33766476+martinIvovIv@users.noreply.github.com> Date: Wed, 21 May 2025 19:32:16 +0200 Subject: [PATCH] feature: adds label for the team game mode with player team (#605) adds label for the teams game mode indicating what team a player is on ## Description: Implements a sticky label informing the player which team they are on. The label will persist through the positioning phase of the round and disappear once the game round begins. *** Desktop Image: ![image](https://github.com/user-attachments/assets/094be388-a40d-47ff-ab01-d0dd6363b063) *** Mobile Image: ![image](https://github.com/user-attachments/assets/3d2f1d47-a887-4bb1-8e13-62cd30259c00) ## Please complete the following: - [x] I have added screenshots for all UI updates - [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 ## Refers to https://github.com/openfrontio/OpenFrontIO/issues/604 [Discord suggestion thread link](https://discord.com/channels/1284581928254701718/1365300537628819647) ## Please put your Discord username so you can be contacted if a bug or regression is found: Discord username: martoi *** Signed-off-by: MartinIvovIv --- src/client/graphics/GameRenderer.ts | 10 +++ src/client/graphics/layers/OptionsMenu.ts | 2 +- src/client/graphics/layers/PlayerTeamLabel.ts | 74 +++++++++++++++++++ src/client/index.html | 3 + 4 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 src/client/graphics/layers/PlayerTeamLabel.ts diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index 9b2240732..58b298c13 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -20,6 +20,7 @@ import { NameLayer } from "./layers/NameLayer"; import { OptionsMenu } from "./layers/OptionsMenu"; import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay"; import { PlayerPanel } from "./layers/PlayerPanel"; +import { PlayerTeamLabel } from "./layers/PlayerTeamLabel"; import { RadialMenu } from "./layers/RadialMenu"; import { SpawnTimer } from "./layers/SpawnTimer"; import { StructureLayer } from "./layers/StructureLayer"; @@ -162,6 +163,14 @@ export function createRenderer( } multiTabModal.game = game; + const playerTeamLabel = document.querySelector( + "player-team-label", + ) as PlayerTeamLabel; + if (!(playerTeamLabel instanceof PlayerTeamLabel)) { + console.error("player team label not found"); + } + playerTeamLabel.game = game; + const layers: Layer[] = [ new TerrainLayer(game, transformHandler), new TerritoryLayer(game, eventBus), @@ -193,6 +202,7 @@ export function createRenderer( teamStats, topBar, playerPanel, + playerTeamLabel, multiTabModal, ]; diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts index 7e85e38f4..56e71605a 100644 --- a/src/client/graphics/layers/OptionsMenu.ts +++ b/src/client/graphics/layers/OptionsMenu.ts @@ -167,7 +167,7 @@ export class OptionsMenu extends LitElement implements Layer { children: this.isPaused ? "▶️" : "⏸", })}
diff --git a/src/client/graphics/layers/PlayerTeamLabel.ts b/src/client/graphics/layers/PlayerTeamLabel.ts new file mode 100644 index 000000000..444fd8c7d --- /dev/null +++ b/src/client/graphics/layers/PlayerTeamLabel.ts @@ -0,0 +1,74 @@ +import { Colord } from "colord"; +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; +import { GameMode } from "../../../core/game/Game"; +import { GameView } from "../../../core/game/GameView"; +import { Layer } from "./Layer"; + +@customElement("player-team-label") +export class PlayerTeamLabel extends LitElement implements Layer { + public game: GameView; + + @state() + private isTeamsGameMode: boolean = false; + + private isVisible = false; + + private playerTeam: string | null = null; + + private playerColor: Colord = new Colord("#FFFFFF"); + + createRenderRoot() { + return this; + } + + init() { + this.isTeamsGameMode = + this.game.config().gameConfig().gameMode === GameMode.Team; + + if (this.isTeamsGameMode) { + this.isVisible = true; + this.requestUpdate(); + } + } + + tick() { + if ( + this.isTeamsGameMode && + !this.playerTeam && + this.game.myPlayer()?.team() + ) { + this.playerTeam = this.game.myPlayer()!.team(); + if (this.playerTeam) { + this.playerColor = this.game + .config() + .theme() + .teamColor(this.playerTeam); + this.requestUpdate(); + } + } + + if (!this.game.inSpawnPhase() && this.isVisible) { + this.isVisible = false; + this.requestUpdate(); + } + } + + render() { + if (!this.isVisible) { + return html``; + } + + return html` +
e.preventDefault()} + > + Your team: + ${this.playerTeam} ⦿ +
+ `; + } +} diff --git a/src/client/index.html b/src/client/index.html index 957c1f08d..6869f4f62 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -338,6 +338,9 @@
+
+ +