mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-03 06:00:49 +00:00
Mason Schmidgall
3511bb0eb4
## 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  ## 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
47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
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>
|
|
`;
|
|
}
|
|
}
|