pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings/options/2048): implement

Browse Source
This commit is contained in:
Stevan
2026-01-29 21:06:53 +01:00
parent 5e37d47eb1
commit deb4eb5c2c
1 changed files with 245 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
app/components/Settings/BottomScreen/Menus/Options/GbaMode.vue
View File

@@ -1,13 +1,254 @@
<script setup lang="ts">
// TODO: store state in local storage
const store = useSettingsStore();
const confirmationModal = useConfirmationModal();
const { assets } = useAssets();
const { onRender } = useScreen();
const handleActivateB = () => {
store.closeSubMenu();
};
const handleActivateA = () => {
if (isDead()) {
resetBoard();
confirmationModal.close();
return;
}
confirmationModal.open({
text: "Restart game?",
onConfirm: () => {
resetBoard();
confirmationModal.close();
},
onCancel: () => {
confirmationModal.close();
},
});
};
const TILE_COLORS: Record<number, { bg: string; fg: string }> = {
[0]: { bg: "#ccc0b4", fg: "#776e65" },
[2]: { bg: "#eee4db", fg: "#776e65" },
[4]: { bg: "#eee0cb", fg: "#776e65" },
[8]: { bg: "#f3b27a", fg: "#f9f6f2" },
[16]: { bg: "#f69664", fg: "#f9f6f2" },
[32]: { bg: "#f67c5f", fg: "#f9f6f2" },
[64]: { bg: "#f7603c", fg: "#f9f6f2" },
[128]: { bg: "#ecd072", fg: "#f9f6f2" },
[256]: { bg: "#eecc62", fg: "#f9f6f2" },
[512]: { bg: "#eec950", fg: "#f9f6f2" },
[1024]: { bg: "#edc53f", fg: "#f9f6f2" },
[2048]: { bg: "#edc12e", fg: "#f9f6f2" },
[4046]: { bg: "#3c3a33", fg: "#f9f6f2" },
};
const LAST_TILE_COLOR =
Object.values(TILE_COLORS)[Object.values(TILE_COLORS).length - 1]!;
const TILE_SIZE = 28;
const BORDER_COLOR = "#bbada0";
const BORDER_SIZE = 3;
const BOARD_X = 64;
const BOARD_Y = 32;
const BOARD_SIZE = 4;
const board = Array.from({ length: BOARD_SIZE }, () =>
Array.from({ length: BOARD_SIZE }, () => 0),
);
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.font = "10px NDS10";
ctx.fillStyle = "#000000";
ctx.fillText("GBA Mode", 10, 20);
ctx.textBaseline = "top";
ctx.translate(BOARD_X, BOARD_Y);
ctx.fillStyle = BORDER_COLOR;
ctx.fillRect(
0,
0,
BORDER_SIZE * (BOARD_SIZE + 1) + TILE_SIZE * BOARD_SIZE,
BORDER_SIZE * (BOARD_SIZE + 1) + TILE_SIZE * BOARD_SIZE,
);
const renderTile = (col: number, row: number) => {
const value = board[row]![col]!;
const color = TILE_COLORS[value] ?? LAST_TILE_COLOR;
const x = BORDER_SIZE + col * (TILE_SIZE + BORDER_SIZE);
const y = BORDER_SIZE + row * (TILE_SIZE + BORDER_SIZE);
ctx.fillStyle = color.bg;
ctx.fillRect(x, y, TILE_SIZE, TILE_SIZE);
if (value === 0) return;
ctx.fillStyle = color.fg;
ctx.font = value <= 2048 ? "10px NDS10" : "7px NDS7";
fillTextHCentered(
ctx,
value.toString(),
x + 1,
y + (value <= 2048 ? 9 : 10),
TILE_SIZE,
);
};
for (let row = 0; row < BOARD_SIZE; row += 1) {
for (let col = 0; col < BOARD_SIZE; col += 1) {
renderTile(col, row);
}
}
});
defineOptions({
render: () => null,
const getCell = (row: number, col: number) => board[row]![col]!;
const setCell = (row: number, col: number, val: number) => {
board[row]![col] = val;
};
const compact = (rowDir: number, colDir: number) => {
const reversed = rowDir > 0 || colDir > 0;
const start = reversed ? BOARD_SIZE - 1 : 0;
const step = reversed ? -1 : 1;
for (let major = 0; major < BOARD_SIZE; major += 1) {
for (let times = 0; times < BOARD_SIZE - 1; times += 1) {
for (let minor = start; minor >= 0 && minor < BOARD_SIZE; minor += step) {
const row = rowDir !== 0 ? minor : major;
const col = colDir !== 0 ? minor : major;
const nextRow = row - rowDir;
const nextCol = col - colDir;
if (nextRow < 0 || nextRow >= BOARD_SIZE) continue;
if (nextCol < 0 || nextCol >= BOARD_SIZE) continue;
if (getCell(row, col) === 0 && getCell(nextRow, nextCol) !== 0) {
setCell(row, col, getCell(nextRow, nextCol));
setCell(nextRow, nextCol, 0);
}
}
}
}
};
const merge = (rowDir: number, colDir: number) => {
const reversed = rowDir > 0 || colDir > 0;
const start = reversed ? BOARD_SIZE - 1 : 0;
const step = reversed ? -1 : 1;
for (let major = 0; major < BOARD_SIZE; major += 1) {
for (let minor = start; minor >= 0 && minor < BOARD_SIZE; minor += step) {
const row = rowDir !== 0 ? minor : major;
const col = colDir !== 0 ? minor : major;
const nextRow = row - rowDir;
const nextCol = col - colDir;
if (nextRow < 0 || nextRow >= BOARD_SIZE) continue;
if (nextCol < 0 || nextCol >= BOARD_SIZE) continue;
if (
getCell(row, col) !== 0 &&
getCell(row, col) === getCell(nextRow, nextCol)
) {
setCell(row, col, getCell(row, col) * 2);
setCell(nextRow, nextCol, 0);
}
}
}
};
const spawnTile = () => {
const empty: [number, number][] = [];
for (let row = 0; row < BOARD_SIZE; row += 1) {
for (let col = 0; col < BOARD_SIZE; col += 1) {
if (getCell(row, col) === 0) empty.push([row, col]);
}
}
if (empty.length === 0) return;
const [row, col] = empty[Math.floor(Math.random() * empty.length)]!;
setCell(row, col, Math.random() < 0.9 ? 2 : 4);
};
const resetBoard = () => {
for (let row = 0; row < BOARD_SIZE; row += 1) {
for (let col = 0; col < BOARD_SIZE; col += 1) {
setCell(row, col, 0);
}
}
spawnTile();
spawnTile();
};
const isDead = () => {
for (let row = 0; row < BOARD_SIZE; row += 1) {
for (let col = 0; col < BOARD_SIZE; col += 1) {
if (
getCell(row, col) === 0 ||
(col < BOARD_SIZE - 1 && getCell(row, col) === getCell(row, col + 1)) ||
(row < BOARD_SIZE - 1 && getCell(row, col) === getCell(row + 1, col))
)
return false;
}
}
return true;
};
resetBoard();
const slide = (rowDir: number, colDir: number) => {
const before = board.map((r) => [...r]);
compact(rowDir, colDir);
merge(rowDir, colDir);
compact(rowDir, colDir);
const moved = board.some((r, i) => r.some((c, j) => c !== before[i]![j]));
if (!moved) return;
spawnTile();
if (isDead()) {
confirmationModal.open({
text: "Game Over!\nRestart?",
onConfirm: () => {
resetBoard();
confirmationModal.close();
},
onCancel: () => {
confirmationModal.close();
},
});
}
};
useKeyDown((key) => {
switch (key) {
case "NDS_UP":
slide(-1, 0);
break;
case "NDS_DOWN":
slide(1, 0);
break;
case "NDS_LEFT":
slide(0, -1);
break;
case "NDS_RIGHT":
slide(0, 1);
break;
}
});
</script>
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset"
b-label="Cancel"
a-label="Restart"
@activate-b="handleActivateB()"
@activate-a="handleActivateA()"
/>
</template>