better gun game

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

@@ -26,8 +26,22 @@ const GuessPane = () => {
   const [selectedPoint, setSelectedPoint] = useState(null);
   const [submitted, setSubmitted] = useState(false);
   const [mapSize, setMapSize] = useState("small");
-  const [gunGameBlock, setGunGameBlock] = useState(false);
-  const unblock = useCallback(() => setGunGameBlock(false), []);
+
+  const [gunGameState, setGunGameState] = useState({
+    gunGameBlock: false,
+    lastDistance: null,
+    distance: null,
+    count: 0,
+  });
+  const unblock = useCallback(() => {
+    setGunGameState(({ distance, count }) => ({
+      gunGameBlock: false,
+      lastDistance: distance,
+      distance: null,
+      count: count + 1,
+    }));
+  }, []);
+
   const toggleBig = useCallback(() => setMapSize(toggleMapSize("big")), []);
   const toggleMed = useCallback(() => setMapSize(toggleMapSize("medium")), []);
   useMapResizeKeybindings(toggleBig);
@@ -44,7 +58,7 @@ const GuessPane = () => {
 
   const handleGateKeeping = useCallback(
     async ({ target }) => {
-      const { score } = await checkScore(
+      const { score, distance } = await checkScore(
         selectedPoint,
         targetPoint,
         scoreMethod,
@@ -52,7 +66,11 @@ const GuessPane = () => {
       );
       if (score < 4000) {
         target.blur();
-        setGunGameBlock(true);
+        setGunGameState(gs => ({
+          ...gs,
+          gunGameBlock: true,
+          distance,
+        }));
       } else {
         await handleSubmitGuess();
       }
@@ -88,7 +106,10 @@ const GuessPane = () => {
 
   return (
     <>
-      {gunGameBlock && gameMode === GUN_GAME && <GunGame onFinish={unblock} />}
+      {gunGameState.gunGameBlock && gameMode === GUN_GAME && (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <GunGame {...gunGameState} onFinish={unblock} />
+      )}
       <div className={`${styles.pane} ${mapSizeOpts[mapSize]}`}>
         <button
           type="button"
@@ -96,7 +117,9 @@ const GuessPane = () => {
           onClick={
             gameMode === GUN_GAME ? handleGateKeeping : handleSubmitGuess
           }
-          disabled={gunGameBlock || submitted || selectedPoint === null}
+          disabled={
+            gunGameState.gunGameBlock || submitted || selectedPoint === null
+          }
         >
           Submit Guess
         </button>

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

@@ -167,11 +167,11 @@ const snakeGame = () => {
   return { start, stop, onKey };
 };
 
-const GunGame = ({ onFinish }) => {
+const GunGame = ({ lastDistance, distance, count, onFinish }) => {
   const canvasRef = useRef();
   useEffect(() => {
     const { start, stop } = snakeGame();
-    start(canvasRef.current?.getContext("2d"), 10, onFinish);
+    start(canvasRef.current?.getContext("2d"), 5, onFinish);
     return () => {
       stop();
     };
@@ -182,6 +182,14 @@ const GunGame = ({ onFinish }) => {
       <div className={styles.gungamePanel}>
         <div className={styles.gungameLabel}>
           <div>Not good enough! Finish this snake game to try again!</div>
+          {count === 1 && <div>This is only your second snake!</div>}
+          {count > 1 && <div>You have played snake {count} times!</div>}
+          {lastDistance && distance && (
+            <div>
+              That guess was {distance > lastDistance ? "colder" : "warmer"}{" "}
+              than the last!
+            </div>
+          )}
         </div>
         <canvas ref={canvasRef} width={rawSize} height={rawSize} />
       </div>