docker: add healthcheck

Reviewed-on: Trianta/trianta.dev#8

Dockerfile

@@ -1,6 +1,6 @@
 FROM nginx:latest
 
-RUN apt-get update && apt-get install -y nodejs npm
+RUN apt-get update && apt-get install -y nodejs npm netcat-openbsd
 
 WORKDIR /app
 
@@ -20,4 +20,6 @@ COPY src/*.css ./public
 
 RUN cp /app/build/* ./public
 
+HEALTHCHECK CMD nc -z 127.0.0.1 80
+
 EXPOSE 80

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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "trianta.dev",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "My personal website",
   "main": "index.html",
   "scripts": {

src/snake.ts

@@ -55,21 +55,22 @@ class SnakeCore {
     height: number;
     board: number[][];
     body: Point[];
+    food: Point;
     gameover: boolean;
     foodAte: boolean;
 
     constructor() {
-        // TODO: Add CSS stuff for page
         this.canvas = document.getElementById('snake') as HTMLCanvasElement;
         this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
         this.grid = 25; // size of grid squares
-        this.timeout = 100; // speed in ms
+        this.timeout = 32; // speed in ms
         this.width = 25;
         this.height = 15;
         this.board = [];
         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 +113,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 +163,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 {
@@ -204,7 +212,6 @@ class Bot {
         }
     }
     
-    // TODO: Fix trim function
     trim() {
         let reachedSnake = false;
         this.path.push(this.pathUntrimmed.pop() as Point); // Push food location
@@ -231,13 +238,6 @@ class Bot {
         }
     }
 
-    /*
-        values:
-        0 = left
-        1 = up
-        2 = right
-        4 = down
-    */
     nextMove() {
         // Get new path to food
         if (this.path.length === 0)
@@ -280,6 +280,7 @@ function snakeloop() {
     g_snake.foodRegen();
 
     g_snake.draw();
+    g_snake.updatePageText();
 }
 
 // start the game