feat(settings/options/2048): save board state to local storage
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// TODO: store state in local storage
|
import { useLocalStorage } from "@vueuse/core";
|
||||||
|
|
||||||
const store = useSettingsStore();
|
const store = useSettingsStore();
|
||||||
const confirmationModal = useConfirmationModal();
|
const confirmationModal = useConfirmationModal();
|
||||||
@@ -54,9 +54,17 @@ const BOARD_X = 64;
|
|||||||
const BOARD_Y = 32;
|
const BOARD_Y = 32;
|
||||||
const BOARD_SIZE = 4;
|
const BOARD_SIZE = 4;
|
||||||
|
|
||||||
const board = Array.from({ length: BOARD_SIZE }, () =>
|
const emptyBoard = () =>
|
||||||
|
Array.from({ length: BOARD_SIZE }, () =>
|
||||||
Array.from({ length: BOARD_SIZE }, () => 0),
|
Array.from({ length: BOARD_SIZE }, () => 0),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const savedBoard = useLocalStorage("nds-2048-board", emptyBoard());
|
||||||
|
const board = savedBoard.value.map((r) => [...r]);
|
||||||
|
|
||||||
|
const saveBoard = () => {
|
||||||
|
savedBoard.value = board.map((r) => [...r]);
|
||||||
|
};
|
||||||
|
|
||||||
onRender((ctx) => {
|
onRender((ctx) => {
|
||||||
assets.images.home.topScreen.background.draw(ctx, 0, 0);
|
assets.images.home.topScreen.background.draw(ctx, 0, 0);
|
||||||
@@ -182,6 +190,7 @@ const resetBoard = () => {
|
|||||||
|
|
||||||
spawnTile();
|
spawnTile();
|
||||||
spawnTile();
|
spawnTile();
|
||||||
|
saveBoard();
|
||||||
};
|
};
|
||||||
|
|
||||||
const isDead = () => {
|
const isDead = () => {
|
||||||
@@ -198,7 +207,9 @@ const isDead = () => {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
resetBoard();
|
if (board.every((r) => r.every((c) => c === 0))) {
|
||||||
|
resetBoard();
|
||||||
|
}
|
||||||
|
|
||||||
const slide = (rowDir: number, colDir: number) => {
|
const slide = (rowDir: number, colDir: number) => {
|
||||||
const before = board.map((r) => [...r]);
|
const before = board.map((r) => [...r]);
|
||||||
@@ -211,6 +222,7 @@ const slide = (rowDir: number, colDir: number) => {
|
|||||||
if (!moved) return;
|
if (!moved) return;
|
||||||
|
|
||||||
spawnTile();
|
spawnTile();
|
||||||
|
saveBoard();
|
||||||
if (isDead()) {
|
if (isDead()) {
|
||||||
confirmationModal.open({
|
confirmationModal.open({
|
||||||
text: "Game Over!\nRestart?",
|
text: "Game Over!\nRestart?",
|
||||||
|
|||||||
Reference in New Issue
Block a user