From 3511bb0eb488d24ce3ec7898dc922196534261a4 Mon Sep 17 00:00:00 2001
From: Mason Schmidgall <13247733+spicydll@users.noreply.github.com>
Date: Wed, 28 May 2025 22:00:31 -0500
Subject: [PATCH] Add instructional overlay message during spawn phase (#934)

## Description:

My first game, I was embarrassingly confused about the spawn phase. I
looked for where my nation spawned for something like 3 minutes before I
realized I needed to actually click a location at the beginning.

Therefore, my first contribution is to add a simple UI message during
the spawn phase that will hopefully prevent anyone else from making the
same mistake.

I have implemented this as an overlay layer that displays at the top and
center of the screen during spawn phase.

## UI Screenshots

Spawn phase message

![image](https://github.com/user-attachments/assets/1d07bc51-e7eb-47d4-9ad6-8ef06404b40a)

## 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

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

spicydll
---
 src/client/graphics/GameRenderer.ts          | 10 +++++
 src/client/graphics/layers/HeadsUpMessage.ts | 46 ++++++++++++++++++++
 src/client/index.html                        |  5 +++
 3 files changed, 61 insertions(+)
 create mode 100644 src/client/graphics/layers/HeadsUpMessage.ts

diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 901ff166e..6fef871c0 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -13,6 +13,7 @@ import { ControlPanel } from "./layers/ControlPanel";
 import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
 import { FxLayer } from "./layers/FxLayer";
+import { HeadsUpMessage } from "./layers/HeadsUpMessage";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
 import { MultiTabModal } from "./layers/MultiTabModal";
@@ -172,6 +173,14 @@ export function createRenderer(
   }
   playerTeamLabel.game = game;
 
+  const headsUpMessage = document.querySelector(
+    "heads-up-message",
+  ) as HeadsUpMessage;
+  if (!(headsUpMessage instanceof HeadsUpMessage)) {
+    console.error("heads-up message not found");
+  }
+  headsUpMessage.game = game;
+
   const unitInfoModal = document.querySelector(
     "unit-info-modal",
   ) as UnitInfoModal;
@@ -220,6 +229,7 @@ export function createRenderer(
     topBar,
     playerPanel,
     playerTeamLabel,
+    headsUpMessage,
     unitInfoModal,
     multiTabModal,
   ];
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
new file mode 100644
index 000000000..8dd68d59a
--- /dev/null
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -0,0 +1,46 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { GameView } from "../../../core/game/GameView";
+import { Layer } from "./Layer";
+
+@customElement("heads-up-message")
+export class HeadsUpMessage extends LitElement implements Layer {
+  public game: GameView;
+
+  @state()
+  private isVisible = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  init() {
+    this.isVisible = true;
+    this.requestUpdate();
+  }
+
+  tick() {
+    if (!this.game.inSpawnPhase()) {
+      this.isVisible = false;
+      this.requestUpdate();
+    }
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+
+    return html`
+      <div
+        class="flex items-center 
+                    w-full justify-evenly h-8 lg:h-10 top-0 lg:top-4 left-0 lg:left-4 
+                    bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg 
+                    backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
+        Choose a starting location
+      </div>
+    `;
+  }
+}
diff --git a/src/client/index.html b/src/client/index.html
index 3e15ba515..dc635b838 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -299,6 +299,11 @@
       <options-menu></options-menu>
       <player-info-overlay></player-info-overlay>
     </div>
+    <div
+      class="fixed bottom-[30px] sm:bottom-auto sm:top-[20px] z-50 mx-auto max-w-max inset-x-0 items-center"
+    >
+      <heads-up-message></heads-up-message>
+    </div>
     <div class="fixed left-[10px] top-[10px] z-50 w-36 lg:w-48 items-center">
       <player-team-label></player-team-label>
     </div>