create basic win popup

src/client/graphics/GameRenderer.ts

@@ -8,6 +8,7 @@ import {TerritoryRenderer} from "./TerritoryRenderer";
 import {ClientID} from "../../core/Schemas";
 import {renderTroops} from "./Utils";
 import {UIRenderer} from "./UIRenderer";
+import {EventBus} from "../../core/EventBus";
 
 export class GameRenderer {
 	private territoryCanvas: HTMLCanvasElement
@@ -28,11 +29,11 @@ export class GameRenderer {
 	private theme: Theme
 
 
-	constructor(private gs: Game, private clientID: ClientID, private terrainRenderer: TerrainRenderer) {
+	constructor(private eventBus: EventBus, private gs: Game, private clientID: ClientID, private terrainRenderer: TerrainRenderer) {
 		this.theme = gs.config().theme()
 		this.nameRenderer = new NameRenderer(gs, this.theme)
 		this.territoryRenderer = new TerritoryRenderer(gs)
-		this.uiRenderer = new UIRenderer(gs, this.theme, clientID)
+		this.uiRenderer = new UIRenderer(eventBus, gs, this.theme, clientID)
 	}
 
 	initialize() {
@@ -107,7 +108,7 @@ export class GameRenderer {
 
 		this.context.restore()
 
-		this.renderUIBar()
+		this.renderSpawnBar()
 		this.uiRenderer.render(this.context)
 
 		requestAnimationFrame(() => this.renderGame());
@@ -115,7 +116,7 @@ export class GameRenderer {
 
 
 	// TODO: move to UIRenderer
-	renderUIBar() {
+	renderSpawnBar() {
 		if (!this.gs.inSpawnPhase()) {
 			return
 		}

src/client/graphics/UIRenderer.ts

@@ -1,17 +1,94 @@
 import {Theme} from "../../core/configuration/Config";
-import {Game} from "../../core/Game";
+import {EventBus} from "../../core/EventBus";
+import {WinEvent} from "../../core/execution/WinCheckExecution";
+import {Game, Player} from "../../core/Game";
 import {ClientID} from "../../core/Schemas";
 import {renderTroops} from "./Utils";
+import winModalHtml from '../WinModal.html';
 
 export class UIRenderer {
     private exitButton: HTMLButtonElement;
+    private winModal: HTMLElement | null = null;
 
-    constructor(private game: Game, private theme: Theme, private clientID: ClientID) {
+
+    constructor(private eventBus: EventBus, private game: Game, private theme: Theme, private clientID: ClientID) {
 
     }
 
     init() {
         this.createExitButton()
+        this.createWinModal()
+        this.eventBus.on(WinEvent, (e) => this.onWinEvent(e))
+    }
+
+    createWinModal() {
+        console.log("Creating win modal");
+        this.winModal = document.createElement('div');
+        this.winModal.style.cssText = `
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            padding: 20px;
+            border: 2px solid black;
+            border-radius: 10px;
+            z-index: 2000;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        `;
+
+        const content = document.createElement('div');
+
+        const title = document.createElement('h2');
+        title.textContent = 'Game Over';
+        title.id = 'winTitle';
+        title.style.marginTop = '0';
+
+        const message = document.createElement('p');
+        message.id = 'winMessage';
+
+        const buttonContainer = document.createElement('div');
+        buttonContainer.style.display = 'flex';
+        buttonContainer.style.justifyContent = 'space-between';
+        buttonContainer.style.marginTop = '20px';
+
+        const exitButton = document.createElement('button');
+        exitButton.textContent = 'Exit Game';
+        exitButton.onclick = () => this.exitGame();
+        this.styleButton(exitButton);
+
+        const continueButton = document.createElement('button');
+        continueButton.textContent = 'Keep Playing';
+        continueButton.onclick = () => this.closeWinModal();
+        this.styleButton(continueButton);
+
+        buttonContainer.appendChild(exitButton);
+        buttonContainer.appendChild(continueButton);
+
+        content.appendChild(title);
+        content.appendChild(message);
+        content.appendChild(buttonContainer);
+
+        this.winModal.appendChild(content);
+        document.body.appendChild(this.winModal);
+
+        console.log("Win modal appended to body");
+    }
+
+    styleButton(button: HTMLButtonElement) {
+        button.style.cssText = `
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            background-color: #4A90E2;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        `;
+        button.onmouseover = () => button.style.backgroundColor = '#3A7BCE';
+        button.onmouseout = () => button.style.backgroundColor = '#4A90E2';
     }
 
     createExitButton() {
@@ -48,26 +125,44 @@ export class UIRenderer {
     }
 
     render(context: CanvasRenderingContext2D) {
-        // const p = this.game.players().find(p => p.clientID() == this.clientID);
-        // let troopCount = p ? `${renderTroops(p.troops())}` : '';
+    }
 
-        // context.save();
-        // context.fillStyle = 'rgba(0, 0, 0, 0.7)'; // Black with 70% opacity
-        // context.textAlign = 'center';
-        // context.textBaseline = 'top';
 
-        // const x = context.canvas.width / 2; // Center horizontally
-        // const y = 40; // Distance from the top
+    onWinEvent(event: WinEvent) {
+        console.log(`${event.winner.name()} won the game!!}`)
+        this.showWinModal(event.winner)
+    }
 
-        // context.font = `bold ${60}px ${this.theme.font()}`;
-        // context.fillText(troopCount, x, y);
-        // context.restore();
+    showWinModal(winner: Player) {
+        if (this.winModal) {
+            const message = this.winModal.querySelector('#winMessage');
+            if (message) {
+                message.textContent = `${winner.name()} won the game!`;
+            }
+            const title = this.winModal.querySelector('#winTitle')
+            if (winner.clientID() == this.clientID) {
+                title.textContent = 'You Won!!!'
+            } else {
+                title.textContent = 'You Lost!!!'
+            }
+            this.winModal.style.display = 'block';
+        }
     }
 
     onExitButtonClick() {
         console.log('Button clicked!');
         window.location.reload();
-        // Add your button action here
+    }
+
+    closeWinModal() {
+        if (this.winModal) {
+            this.winModal.style.display = 'none';
+        }
+    }
+
+    exitGame() {
+        this.closeWinModal();
+        window.location.reload();
     }
 
 }