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/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>
+    `;
+  }
+}