From b7c7589eaa1cc9e14bda031cbec40aa3bf595310 Mon Sep 17 00:00:00 2001
From: Michael Peters <peters@rallc.com>
Date: Fri, 2 Aug 2024 12:05:32 -0700
Subject: [PATCH] function name cleanup

---
 src/components/snake/canvas.ts      | 37 ++++++++++++++++++++++-------
 src/components/snake/game-engine.ts | 30 +++++++++++++++++++----
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/components/snake/canvas.ts b/src/components/snake/canvas.ts
index 04bbf41..d86db88 100644
--- a/src/components/snake/canvas.ts
+++ b/src/components/snake/canvas.ts
@@ -3,8 +3,17 @@ import { Engine, Keys, randint, UI, Vec2, vec2 } from './game-engine';
 const BOARD_SIZE = 600; // px
 const SQUARE_SIZE = 30; // px
 
+const CENTER_X = BOARD_SIZE / 2;
+const CENTER_Y = BOARD_SIZE / 2;
+
 const BOARD_SQUARES = BOARD_SIZE / SQUARE_SIZE;
 
+interface SnakeGameState {
+	dead: boolean;
+	snake: Vec2[];
+	apple: Vec2;
+}
+
 export default function runCanvas(canvas: HTMLCanvasElement) {
     const ui = new UI(canvas);
 	const keys = new Keys();
@@ -21,7 +30,7 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
 		return 1000 / (5 + snakeLength)
 	}
 
-	function resetState() {
+	function resetState(): SnakeGameState {
 		let dead = false;
 		const snake = [vec2(1, 1), vec2(2, 1)];
 		let apple = getRandApplePos();
@@ -43,7 +52,6 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
 			return;
 		}
 
-
         let dir = snake[snake.length - 1]!.sub(snake[snake.length - 2]!);
         const keyDirMap = {
             w: vec2(0, -1),
@@ -86,17 +94,16 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
     }
 
 	// rendering ---------------------------------------------------------------
-    function clearCanvas() {
-        ui.rect(0, 0, canvas.width, canvas.height);
-    }
+
     function drawSquare(pos: Vec2) {
-        ui.rect(pos.x * SQUARE_SIZE, pos.y * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE);
+        ui.fillRect(pos.x * SQUARE_SIZE, pos.y * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE);
     }
+
     function render() {
 		const { dead, snake, apple } = state;
 
         ui.setFillStyle('#333333');
-        clearCanvas();
+		ui.clearCanvas();
 
         ui.setFillStyle('#277edb');
         for (const square of snake.slice(0, snake.length - 1)) {
@@ -109,8 +116,20 @@ export default function runCanvas(canvas: HTMLCanvasElement) {
         drawSquare(apple);
 
         if (dead) {
-            ui.setFillStyle('#ff0000');
-            ui.text('You Died', 60, 60);
+			const text = 'You Died'
+			ui.setFont('40px sans-serif');
+			const m = ui.measureText(text);
+
+			const rw = m.width + 20;
+			const rh = 40 + 20;
+
+			ui.setFillStyle('#222222')
+			ui.fillRect(CENTER_X - rw / 2, CENTER_Y - rh / 2, rw, rh)
+
+            ui.setFillStyle('#cc0000');
+			ui.setTextAlign('center');
+			ui.setTextBaseline('middle');
+            ui.fillText('You Died', BOARD_SIZE / 2, BOARD_SIZE / 2);
         }
     }
 
diff --git a/src/components/snake/game-engine.ts b/src/components/snake/game-engine.ts
index 0bd0482..efed2a1 100644
--- a/src/components/snake/game-engine.ts
+++ b/src/components/snake/game-engine.ts
@@ -113,29 +113,51 @@ export class Keys {
 }
 
 export class UI {
+	canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
 
     camera = vec2(0, 0);
 
-    constructor(canvasElement: HTMLCanvasElement) {
-        const ctx = canvasElement.getContext('2d');
+    constructor(canvas: HTMLCanvasElement) {
+        const ctx = canvas.getContext('2d');
         if (ctx === null) throw Error('unable to get 2d canvas context');
+		this.canvas = canvas;
         this.ctx = ctx;
     }
 
+    setFont(font: string) {
+        this.ctx.font = font;
+    }
+
+    setTextAlign(textAlign: CanvasTextAlign) {
+        this.ctx.textAlign = textAlign;
+    }
+
+    setTextBaseline(textBaseline: CanvasTextBaseline) {
+        this.ctx.textBaseline = textBaseline;
+    }
+
     setFillStyle(style: string) {
         this.ctx.fillStyle = style;
     }
 
-    rect(x: number, y: number, w: number, h: number) {
+    fillRect(x: number, y: number, w: number, h: number) {
         const c = this.camera;
         this.ctx.fillRect(x - c.x, y - c.y, w, h);
     }
 
-    text(text: string, x: number, y: number) {
+    fillText(text: string, x: number, y: number) {
         const c = this.camera;
         this.ctx.fillText(text, x - c.x, y - c.y);
     }
+
+	measureText(text: string) {
+		return this.ctx.measureText(text);
+	}
+
+    clearCanvas() {
+        this.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
 }
 
 export class Engine {