From 866934db68a85ba307aeb0efa417e3ca6cdbe5ce Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 2 Sep 2024 11:00:17 -0700
Subject: [PATCH] create exit button

---
 TODO.txt                            |  5 ++--
 src/client/graphics/GameRenderer.ts | 46 +++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index abcf76044..8e2046012 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -78,7 +78,7 @@
 * use better favicon DONE 9/1/2024
 * make mediterranion ocean, fix panama canal DONE 9/1/2024
 * remove tiny islands DONE 9/1/2024
-* Create exit to menu button
+* Create exit to menu button DONE 9/2/2024
 * show next game in menu
 * BUG: attacks starts slow but gets faster
 * BUG: sometimes doesn't connect to lobby
@@ -86,10 +86,11 @@
 
 --- v2 Release
 
+* more random names for game id & client id
 * Make fake humans
 * directed expansion
 * win condition & popup
-* BUG: tiles get left behind during conquer
+* BUG: tiles get left behind during conquer; still problem?
 * Load terrain dataImage in background
 * BUG: shore tiles left behind during conquer
 * BUG: when sending boat to TerraNullius, only takes one tile
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index ae10d1381..deca40b1d 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -23,6 +23,9 @@ export class GameRenderer {
 
 	private theme: Theme
 
+	private exitButton: HTMLButtonElement;
+
+
 	constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
 		this.theme = gs.config().theme()
 		this.nameRenderer = new NameRenderer(gs, this.theme)
@@ -56,10 +59,53 @@ export class GameRenderer {
 		this.territoryContext = this.territoryCanvas.getContext('2d')
 		this.territoryContext.globalAlpha = 0.4;
 
+		this.createExitButton()
+
 
 		requestAnimationFrame(() => this.renderGame());
 	}
 
+
+
+	createExitButton() {
+		this.exitButton = document.createElement('button');
+		this.exitButton.innerHTML = '&#10005;'; // HTML entity for "×" (multiplication sign)
+		this.exitButton.style.position = 'fixed';
+		this.exitButton.style.top = '20px';
+		this.exitButton.style.right = '20px';
+		this.exitButton.style.zIndex = '1000';
+		this.exitButton.style.width = '40px';
+		this.exitButton.style.height = '40px';
+		this.exitButton.style.fontSize = '20px';
+		this.exitButton.style.fontWeight = 'bold';
+		this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.4)'; // More translucent red
+		this.exitButton.style.color = 'white';
+		this.exitButton.style.border = 'none';
+		this.exitButton.style.borderRadius = '50%';
+		this.exitButton.style.cursor = 'pointer';
+		this.exitButton.style.display = 'flex';
+		this.exitButton.style.justifyContent = 'center';
+		this.exitButton.style.alignItems = 'center';
+		this.exitButton.style.transition = 'background-color 0.3s';
+
+		this.exitButton.addEventListener('mouseover', () => {
+			this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // Less translucent on hover
+		});
+
+		this.exitButton.addEventListener('mouseout', () => {
+			this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // Back to more translucent
+		});
+
+		this.exitButton.addEventListener('click', () => this.onExitButtonClick());
+		document.body.appendChild(this.exitButton);
+	}
+
+	onExitButtonClick() {
+		console.log('Button clicked!');
+		window.location.reload();
+		// Add your button action here
+	}
+
 	resizeCanvas() {
 		this.canvas.width = window.innerWidth;
 		this.canvas.height = window.innerHeight;