create exit button

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

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 = '✕'; // 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;