feat: Save current game in localStorage

src/components/GameBoard/GameBoard.test.ts

@@ -6,6 +6,8 @@ import GameBoard from "./GameBoard.vue";
 vi.spyOn(document, "addEventListener");
 vi.spyOn(document, "removeEventListener");
 
+// TODO: add more tests (unit)
+// TODO: add more tests (e2e)
 describe("GameBoard", () => {
   beforeEach(() => {
     setActivePinia(createPinia());

src/components/GameBoard/GameBoard.vue

@@ -4,7 +4,7 @@
     <game-board-header :current-score="score" :best-score="bestScore"></game-board-header>
 
     <!-- Controls -->
-    <game-board-controls @click:new-game="startGame"></game-board-controls>
+    <game-board-controls @click:new-game="handleNewGameClick"></game-board-controls>
 
     <!-- Board -->
     <div class="game-board-container">
@@ -18,8 +18,9 @@
     <app-dialog v-model="gameOverDialog.show" :title="gameOverDialog.title">
       {{ gameOverDialog.message }}
       <template #actions>
-        <app-button @click="gameOverDialog.show = false" outline>Cancel</app-button>
-        <app-button @click="startGame">New Game</app-button>
+        <!-- TODO: Update text and order for game over scenario -->
+        <app-button @click="handleNewGameClick" outline>New game</app-button>
+        <app-button @click="gameOverDialog.show = false">Continue playing</app-button>
       </template>
     </app-dialog>
   </div>
@@ -37,41 +38,63 @@ import TileItem from "@/components/Tile/Item/TileItem.vue";
 import GameBoardHeader from "@/components/GameBoard/Header/GameBoardHeader.vue";
 import GameBoardControls from "@/components/GameBoard/Controls/GameBoardControls.vue";
 
-import { useGridCells } from "@/composables/useGridCells";
-import { useTiles } from "@/composables/useTiles";
+import { useGridCellsStore } from "@/stores/gridCells";
+import { useTilesStore } from "@/stores/tiles";
 import { useGameStateStore } from "@/stores/gameState";
 import { useUserInput } from "@/composables/useUserInput";
 import { generateNumArray } from "@/utils";
 
-const gameStateStore = useGameStateStore();
-const { resetGridCells } = useGridCells();
-const { renderedTiles, hasReachedHighestValue, addTileToCell, setRenderedTiles } = useTiles();
-const { score, bestScore, gameOverDialog, gridSize, numObstacles } = storeToRefs(gameStateStore);
-const { endGame, setCanAcceptUserInput, setScore, hideGameOverDialog } = gameStateStore;
+const { gridCells } = storeToRefs(useGridCellsStore());
+const { resetGridCells } = useGridCellsStore();
+const { renderedTiles, hasReachedHighestValue } = storeToRefs(useTilesStore());
+const { addTileToCell, setRenderedTiles } = useTilesStore();
+const { score, bestScore, gameOverDialog, gridSize, numObstacles } =
+  storeToRefs(useGameStateStore());
+const { endGame, setCanAcceptUserInput, setScore, hideGameOverDialog } = useGameStateStore();
 const { handleUserInput } = useUserInput();
 
-function startGame() {
-  // Reset game
-  hideGameOverDialog();
+function startNewGame() {
   setScore(0);
-  setRenderedTiles([]);
   resetGridCells(gridSize.value);
   addTileToCell();
-  setCanAcceptUserInput(true);
 
   // Add obstacles
   generateNumArray(numObstacles.value).forEach(() => addTileToCell({ isObstacle: true }));
 }
 
+function handleNewGameClick() {
+  // Reset game
+  hideGameOverDialog();
+  setRenderedTiles([]);
+
+  startNewGame();
+}
+
 watch(hasReachedHighestValue, (current) => {
   if (current) {
-    setCanAcceptUserInput(false);
     endGame("win");
   }
 });
 
+watch(
+  () => gameOverDialog.value.show,
+  (current) => {
+    setCanAcceptUserInput(!current);
+  },
+);
+
 onMounted(() => {
-  startGame();
+  const canContinueSavedGame =
+    renderedTiles.value.length - numObstacles.value > 1 &&
+    renderedTiles.value.length < gridCells.value.length;
+
+  if (!canContinueSavedGame) {
+    startNewGame();
+  }
+
+  setRenderedTiles(gridCells.value.filter((cell) => cell.tile).map((cell) => cell.tile!));
+  setCanAcceptUserInput(true);
+
   document.addEventListener("keyup", handleUserInput);
 });
 

src/composables/useUserInput.ts

@@ -1,26 +1,25 @@
 import { nextTick } from "vue";
 import { storeToRefs } from "pinia";
 
-import { useGridCells } from "@/composables/useGridCells";
-import { useTiles } from "@/composables/useTiles";
+import { useGridCellsStore } from "@/stores/gridCells";
+import { useTilesStore } from "@/stores/tiles";
 import { useGameStateStore } from "@/stores/gameState";
 
 import type { Tile } from "@/types";
 
 export function useUserInput() {
-  const gameStateStore = useGameStateStore();
-  const { gridCells, gridCellsByDirection } = useGridCells();
+  const { canAcceptUserInput } = storeToRefs(useGameStateStore());
+  const { endGame, setCanAcceptUserInput } = useGameStateStore();
+  const { gridCells, gridCellsByDirection } = storeToRefs(useGridCellsStore());
+  const { renderedTiles } = storeToRefs(useTilesStore());
   const {
-    renderedTiles,
     addTileToCell,
     canTileSlide,
     moveTilesIfPossible,
     setRenderedTiles,
     mergeTilesInGridCells,
     getTileElemById,
-  } = useTiles();
-  const { canAcceptUserInput } = storeToRefs(gameStateStore);
-  const { endGame, setCanAcceptUserInput } = gameStateStore;
+  } = useTilesStore();
 
   async function handleUserInput(event: KeyboardEvent) {
     if (!canAcceptUserInput.value) return;