From 92cfd954c17173cae449bb12e80ed33027d39984 Mon Sep 17 00:00:00 2001
From: Trianta <56975502+Trimutex@users.noreply.github.com>
Date: Sat, 9 Nov 2024 01:39:16 -0600
Subject: [PATCH] snake: display information about game in stats

---
 index.html   |  3 ++-
 src/snake.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0eb4389..c9297d7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,8 @@
             <h2 class="cardTop">Snake</h2>
             <canvas width="625" height="375" id="snake"></canvas>
             <script src="public/snake.js"></script>
-            <p class="cardStats">Bottom Text<span></span></p>
+            <p class="cardStats">Snake Head Location: <span id="snakeHead"></span></p>
+            <p class="cardStats">Food Location: <span id="snakeFood"></span></p>
             <a class="navItem" href="https://lab.trianta.dev/Trianta/trianta.dev/src/branch/main/src/snake.ts">View Code</a>
         </div>
     </div>
diff --git a/src/snake.ts b/src/snake.ts
index 529befe..789c7d6 100644
--- a/src/snake.ts
+++ b/src/snake.ts
@@ -55,6 +55,7 @@ class SnakeCore {
     height: number;
     board: number[][];
     body: Point[];
+    food: Point;
     gameover: boolean;
     foodAte: boolean;
 
@@ -70,6 +71,7 @@ class SnakeCore {
         for (let i = 0; i < this.height; i++)
             this.board.push(new Array(this.width));
         this.body = [];
+        this.food = new Point();
         this.gameover = false;
         this.foodAte = true;
         this.body.push(new Point(12, 8));
@@ -112,6 +114,7 @@ class SnakeCore {
             if (isBitSet(this.board[tmp.y][tmp.x], BoardState.SNAKE))
                 continue;
             this.board[tmp.y][tmp.x] = bitSet(this.board[tmp.y][tmp.x], BoardState.FOOD);
+            this.food.copy(tmp);
             return;
         }
     }
@@ -161,6 +164,12 @@ class SnakeCore {
             }
         }
     }
+
+    // Update text on page to match game
+    updatePageText() {
+        document.getElementById("snakeHead").innerHTML = "x: " + this.body[this.body.length - 1].x + " y: " + this.body[this.body.length - 1].y;
+        document.getElementById("snakeFood").innerHTML = "x: " + this.food.x + " y: " + this.food.y ;
+    }
 }
 
 class Bot {
@@ -280,6 +289,7 @@ function snakeloop() {
     g_snake.foodRegen();
 
     g_snake.draw();
+    g_snake.updatePageText();
 }
 
 // start the game