snake: display information about game in stats

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>

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