feat(thermite): used next/image to render the assets

Author: usburu

app/page.tsx

@@ -1,10 +1,12 @@
 import Image from "next/image";
 import Link from "next/link";
 
+import { thermiteImg } from "@/public/images/puzzles";
+
 const puzzles = [
   {
     href: "/puzzles/thermite",
-    img: "" /* TODO: add preview image */,
+    img: thermiteImg,
     title: "Thermite",
     description:
       "Replica of the Thermite hack that is triggered when disabling lasers inside the Maze Bank on NoPixel 4.0",

app/puzzles/thermite/Thermite.tsx

@@ -18,6 +18,10 @@ import { NPSettingsRange } from "@/app/components/NPSettings";
 import NPButton from "@/app/components/NPButton";
 import usePersistantState from "@/app/utils/usePersistentState";
 
+import Image from "next/image";
+import crossImg from "@/public/images/thermite/cross.svg";
+import backgroundImg from "@/public/images/thermite/background.svg";
+
 import "@/app/puzzles/thermite/style.css";
 
 const Thermite: FC = () => {
@@ -67,6 +71,7 @@ const Thermite: FC = () => {
     setComboCounter(0);
     setLastKillTimestamp(-1);
     setTotalCombos(0);
+    setOutOfMoves(false);
   }, [columns, rows]);
 
   /**
@@ -78,7 +83,6 @@ const Thermite: FC = () => {
     (newStatus: number): void => {
       switch (newStatus) {
         case 1:
-          setOutOfMoves(false);
           setResetAnimation(false);
           resetBoard();
           break;
@@ -152,28 +156,17 @@ const Thermite: FC = () => {
       const [targetRow, targetCol] = targetCoord;
       const [attackerRow, attackerCol] = attackerCoord;
 
-      let distance = 1;
-      switch (attackerPiece) {
-        case "long":
-          distance = 3;
-          break;
-        case "medium":
-          distance = 2;
-          break;
-        case "short":
-          distance = 1;
-          break;
-      }
-
       /**
        * I'm pretty sure there's a much more clever way to code this
        * condition but I was born dumb.
        */
       return (
-        targetCol % distance === attackerCol % distance &&
-        targetRow % distance === attackerRow % distance &&
-        Math.abs(targetCol - attackerCol) <= distance &&
-        Math.abs(targetRow - attackerRow) <= distance
+        targetCol % attackerPiece.distance ===
+          attackerCol % attackerPiece.distance &&
+        targetRow % attackerPiece.distance ===
+          attackerRow % attackerPiece.distance &&
+        Math.abs(targetCol - attackerCol) <= attackerPiece.distance &&
+        Math.abs(targetRow - attackerRow) <= attackerPiece.distance
       );
     },
     []
@@ -346,8 +339,8 @@ const Thermite: FC = () => {
             title={"Target score"}
             value={settingsTargetScore}
             setValue={setSettingsTargetScore}
-            min={14}
-            max={38}
+            min={10}
+            max={75}
           />
           <NPSettingsRange
             title={"Timer"}
@@ -469,13 +462,18 @@ const Thermite: FC = () => {
                       onClick={() => handleClick([rowIndex, columnIndex])}
                     >
                       <span className="piece">
-                        <embed src={`/images/thermite-${square.piece}.svg`} />
+                        <Image
+                          src={square.piece.img}
+                          alt=""
+                          width={75}
+                          height={75}
+                        />
                       </span>
                       <div className="crosses">
-                        <embed src={`/images/thermite-cross.svg`} />
-                        <embed src={`/images/thermite-cross.svg`} />
-                        <embed src={`/images/thermite-cross.svg`} />
-                        <embed src={`/images/thermite-cross.svg`} />
+                        <Image src={crossImg} alt="" width={16} height={16} />
+                        <Image src={crossImg} alt="" width={16} height={16} />
+                        <Image src={crossImg} alt="" width={16} height={16} />
+                        <Image src={crossImg} alt="" width={16} height={16} />
                       </div>
                       <div
                         className="highlight"
@@ -497,7 +495,7 @@ const Thermite: FC = () => {
               CRC Bypassed!
             </span>
           </div>
-          <embed className="background" src={`/images/bg-circuit.svg`} />
+          <Image src={backgroundImg} alt="" fill />
         </Fragment>
       </div>
     </NPHackContainer>

app/puzzles/thermite/style.css

@@ -27,14 +27,14 @@
 
         .piece {
             @apply w-full h-full p-[25%];
-
-            embed {
-                @apply relative w-full h-full z-20 pointer-events-none;
-            }
         }
 
         .crosses {
             @apply absolute size-full grid grid-rows-[min-content_min-content] grid-cols-[min-content_min-content] justify-between content-between p-1 opacity-30;
+
+            img {
+                @apply max-w-none;
+            }
         }
 
         .highlight {

app/puzzles/thermite/utils.ts

@@ -1,5 +1,27 @@
-export type SquarePiece = "short" | "medium" | "long";
-export const squarePieces: SquarePiece[] = ["short", "medium", "long"];
+import shortImg from "@/public/images/thermite/short.svg";
+import mediumImg from "@/public/images/thermite/medium.svg";
+import longImg from "@/public/images/thermite/long.svg";
+
+export type PieceType = "short" | "medium" | "long";
+export type SquarePiece = {type: PieceType, distance: number, img: any};
+const squarePieces: SquarePiece[] = [
+    {
+        type: "short",
+        distance: 1,
+        img: shortImg,
+    },
+    {
+        type: "medium",
+        distance: 2,
+        img: mediumImg,
+    },
+    {
+        type: "long",
+        distance: 3,
+        img: longImg,
+    },
+];
+
 export type SquareStatus = "full" | "half" | "empty";
 export type Square = {
     piece: SquarePiece,
@@ -31,7 +53,7 @@ export const presets = [
 ];
 export const initialBoard: GridRow[] = new Array(presets[0].rows).fill(
     new Array(presets[0].columns).fill({
-      piece: "short",
+      piece: squarePieces[0],
       status: "full",
       highlighted: false,
     })

public/images/puzzles/index.js

@@ -0,0 +1,3 @@
+import thermiteImg from "./thermite.png";
+
+export {thermiteImg};