Fix up snake

client/src/components/screens/GamePanel/GuessPane/GunGame.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import styles from "./GuessPane.module.css";
 
-const tileSize = 20;
+const tileSize = 16;
 const tiles = 32;
 const rawSize = tileSize * tiles;
 
@@ -39,6 +39,7 @@ const snakeGame = () => {
   const snakeHead = { x: null, y: null, vx: null, vy: null };
   let snakeTail = [];
   const apple = { x: null, y: null };
+  let lost = false;
 
   const randomApple = () => {
     apple.x = gaussianRandomTile();
@@ -52,6 +53,7 @@ const snakeGame = () => {
     snakeHead.vy = -1;
     snakeTail = [{ ...snakeHead }];
     randomApple();
+    lost = false;
   };
 
   reset();
@@ -69,6 +71,10 @@ const snakeGame = () => {
   const start = (ctx, finishScore, onFinish) => {
     document.addEventListener("keydown", onKey);
     interval = setInterval(() => {
+      if (lost) {
+        return;
+      }
+
       switch (lastKey) {
         case "ArrowUp":
           snakeHead.vx = 0;
@@ -100,7 +106,13 @@ const snakeGame = () => {
         snakeHead.y >= tiles ||
         snakeTail.find(({ x, y }) => x === snakeHead.x && y === snakeHead.y)
       ) {
-        reset();
+        lost = true;
+        ctx.font = "48px serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText("Crashed!", rawSize / 2, rawSize / 2);
+        setTimeout(() => reset(), 250);
+        return;
       }
 
       snakeTail.push({ ...snakeHead });
@@ -165,16 +177,11 @@ const GunGame = ({ onFinish }) => {
 
   return (
     <div className={styles.gungame}>
-      <div className={styles.gungame_panel}>
-        <div className={styles.gungame_label}>
+      <div className={styles.gungamePanel}>
+        <div className={styles.gungameLabel}>
           <div>Not good enough! Finish this snake game to try again!</div>
         </div>
-        <canvas
-          className={styles.gungame_canvas}
-          ref={canvasRef}
-          width={rawSize}
-          height={rawSize}
-        />
+        <canvas ref={canvasRef} width={rawSize} height={rawSize} />
       </div>
     </div>
   );