feat(settings/options/2048): compute and save score

app/components/Settings/BottomScreen/Menus/Options/GbaMode.vue

@@ -59,16 +59,29 @@ const BOARD_X = 64;
 const BOARD_Y = 32;
 const BOARD_SIZE = 4;
 
+const SCORE_X = 195;
+const SCORE_Y = 36;
+const HIGH_SCORE_Y = 68;
+
 const emptyBoard = () =>
   Array.from({ length: BOARD_SIZE }, () =>
     Array.from({ length: BOARD_SIZE }, () => 0),
   );
 
-const savedBoard = useLocalStorage("nds-2048-board", emptyBoard());
-const board = savedBoard.value.map((r) => [...r]);
+const savedState = useLocalStorage("nds-2048", {
+  board: emptyBoard(),
+  score: 0,
+  highScore: 0,
+});
+const board = savedState.value.board.map((r) => [...r]);
+let score = savedState.value.score;
 
-const saveBoard = () => {
-  savedBoard.value = board.map((r) => [...r]);
+const saveState = () => {
+  savedState.value.board = board.map((r) => [...r]);
+  savedState.value.score = score;
+  if (score > savedState.value.highScore) {
+    savedState.value.highScore = score;
+  }
 };
 
 type VisualTile = { value: number; x: number; y: number; scale: number };
@@ -115,6 +128,8 @@ const animateSpawnAll = () => {
 onRender((ctx) => {
   assets.images.home.topScreen.background.draw(ctx, 0, 0);
   ctx.textBaseline = "top";
+
+  ctx.save();
   ctx.translate(BOARD_X, BOARD_Y);
 
   assets.images.settings.bottomScreen.options._2048.frame.draw(ctx, -3, -3);
@@ -158,6 +173,22 @@ onRender((ctx) => {
     );
     ctx.restore();
   }
+  ctx.restore();
+
+  ctx.font = "7px NDS7";
+  ctx.fillStyle = "#010101";
+
+  // score
+  ctx.fillText("Score:", SCORE_X, SCORE_Y);
+  ctx.fillText(score.toString(), SCORE_X, SCORE_Y + 16);
+
+  // high score
+  ctx.fillText("High:", SCORE_X, HIGH_SCORE_Y);
+  ctx.fillText(
+    savedState.value.highScore.toString(),
+    SCORE_X,
+    HIGH_SCORE_Y + 16,
+  );
 });
 
 const getCell = (row: number, col: number) => board[row]![col]!;
@@ -209,8 +240,10 @@ const merge = (rowDir: number, colDir: number) => {
         getCell(row, col) !== 0 &&
         getCell(row, col) === getCell(nextRow, nextCol)
       ) {
-        setCell(row, col, getCell(row, col) * 2);
+        const merged = getCell(row, col) * 2;
+        setCell(row, col, merged);
         setCell(nextRow, nextCol, 0);
+        score += merged;
       }
     }
   }
@@ -237,9 +270,10 @@ const resetBoard = () => {
     }
   }
 
+  score = 0;
   spawnTile();
   spawnTile();
-  saveBoard();
+  saveState();
   buildTilesFromBoard();
   animateSpawnAll();
 };
@@ -380,7 +414,7 @@ const slide = (rowDir: number, colDir: number) => {
   }
 
   const spawned = spawnTile();
-  saveBoard();
+  saveState();
 
   if (isDead()) {
     buildTilesFromBoard();
@@ -440,7 +474,7 @@ useKeyDown((key) => {
   switch (key) {
     // TODO: remove this, testing only
     case "n":
-      savedBoard.value = [
+      savedState.value.board = [
         [0, 0, 2, 4],
         [8, 16, 32, 64],
         [128, 256, 512, 1024],