626 lines
15 KiB
Vue
626 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { useLocalStorage } from "@vueuse/core";
|
|
import gsap from "gsap";
|
|
|
|
const store = useSettingsStore();
|
|
const achievements = useAchievementsStore();
|
|
const confirmationModal = useConfirmationModal();
|
|
const { assets } = useAssets();
|
|
const { onRender } = useScreen();
|
|
|
|
const handleActivateB = () => {
|
|
if (isAnimating.value) return;
|
|
confirmationModal.open({
|
|
text: $t("settings.options.2048.quitConfirmation"),
|
|
bLabel: $t("common.no"),
|
|
aLabel: $t("common.yes"),
|
|
onClosed: async (choice) => {
|
|
if (choice === "A") {
|
|
await animateOutro();
|
|
store.closeSubMenu();
|
|
}
|
|
},
|
|
keepButtonsDown: (choice) => choice === "A",
|
|
});
|
|
};
|
|
|
|
const handleActivateA = () => {
|
|
if (isAnimating.value) return;
|
|
if (isDead()) {
|
|
resetBoard();
|
|
return;
|
|
}
|
|
confirmationModal.open({
|
|
text: $t("settings.options.2048.restartConfirmation"),
|
|
bLabel: $t("common.no"),
|
|
aLabel: $t("common.yes"),
|
|
onClosed: (choice) => {
|
|
if (choice === "A") {
|
|
resetBoard();
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const app = useAppStore();
|
|
|
|
const TILE_VALUES = [0, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096];
|
|
const APP_COLOR_INDEX = TILE_VALUES.indexOf(2048);
|
|
|
|
const buildTileColors = (
|
|
base: string,
|
|
): Record<number, { bg: string; fg: string }> => {
|
|
const result: Record<number, { bg: string; fg: string }> = {
|
|
[0]: { bg: "#f7f7f7", fg: "#776e65" },
|
|
};
|
|
|
|
for (let i = 1; i < TILE_VALUES.length; i += 1) {
|
|
const value = TILE_VALUES[i]!;
|
|
// 0 -> 1 = tile 2 -> 2048
|
|
const progress = (i - 1) / (APP_COLOR_INDEX - 1);
|
|
|
|
let lightnessBoost: number;
|
|
let chromaFactor: number;
|
|
|
|
if (i <= APP_COLOR_INDEX) {
|
|
lightnessBoost = (1 - progress) * 0.35;
|
|
chromaFactor = 0.05 + progress * 0.95;
|
|
} else {
|
|
const stepsAbove2048 = i - APP_COLOR_INDEX;
|
|
lightnessBoost = -stepsAbove2048 * 0.07;
|
|
chromaFactor = 1 + stepsAbove2048 * 0.15;
|
|
}
|
|
|
|
const bg = `oklch(from ${base} calc(l + ${lightnessBoost}) calc(c * ${chromaFactor}) h)`;
|
|
// change text color based on background lightness
|
|
const fg = `oklch(from ${bg} clamp(0, (0.6 - l) * 999, 1) 0 h)`;
|
|
result[value] = { bg, fg };
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
const TILE_COLORS = computed(() => buildTileColors(app.color.hex));
|
|
const LAST_TILE_COLOR = computed(() => {
|
|
const values = Object.values(TILE_COLORS.value);
|
|
return values[values.length - 1]!;
|
|
});
|
|
const TILE_SIZE = 28;
|
|
const ANIM_DURATION = 0.1;
|
|
|
|
const BORDER_COLOR = computed(
|
|
() => `oklch(from ${app.color.hex} 0.88 0.015 h)`,
|
|
);
|
|
const BORDER_SIZE = 3;
|
|
|
|
const BOARD_X = 64;
|
|
const BOARD_Y = 32;
|
|
const BOARD_SIZE = 4;
|
|
|
|
const SLIDE_OFFSET = 96;
|
|
const SLIDE_DURATION = 0.25;
|
|
const SCORE_OFFSET = -20;
|
|
const SCORE_DURATION = 0.167;
|
|
|
|
const isAnimating = ref(true);
|
|
|
|
const bLabel = ref($t("common.goBack"));
|
|
const aLabel = ref($t("common.select"));
|
|
|
|
const intro = reactive({
|
|
frameOffsetY: SLIDE_OFFSET,
|
|
frameOpacity: 0,
|
|
scoreOffsetY: SCORE_OFFSET,
|
|
tilesVisible: false,
|
|
});
|
|
|
|
const emptyBoard = () =>
|
|
Array.from({ length: BOARD_SIZE }, () =>
|
|
Array.from({ length: BOARD_SIZE }, () => 0),
|
|
);
|
|
|
|
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 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 };
|
|
|
|
const cellX = (col: number) => BORDER_SIZE + col * (TILE_SIZE + BORDER_SIZE);
|
|
const cellY = (row: number) => BORDER_SIZE + row * (TILE_SIZE + BORDER_SIZE);
|
|
|
|
let tiles: VisualTile[] = [];
|
|
let animating = false;
|
|
|
|
const showRestartModal = () => {
|
|
confirmationModal.open({
|
|
text: $t("settings.options.2048.gameOver"),
|
|
onActivateA: () => {},
|
|
onClosed: (choice) => {
|
|
if (choice === "A") {
|
|
resetBoard();
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const buildTilesFromBoard = () => {
|
|
tiles = [];
|
|
for (let row = 0; row < BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < BOARD_SIZE; col += 1) {
|
|
const value = board[row]![col]!;
|
|
if (value === 0) continue;
|
|
tiles.push({ value, x: cellX(col), y: cellY(row), scale: 1 });
|
|
}
|
|
}
|
|
};
|
|
|
|
const animateSpawnAll = () => {
|
|
for (const tile of tiles) {
|
|
tile.scale = 0;
|
|
gsap.to(tile, { scale: 1, duration: ANIM_DURATION, ease: "back.out(2)" });
|
|
}
|
|
};
|
|
|
|
const animateIntro = async () => {
|
|
isAnimating.value = true;
|
|
buildTilesFromBoard();
|
|
|
|
await gsap
|
|
.timeline({
|
|
onComplete: () => {
|
|
isAnimating.value = false;
|
|
},
|
|
})
|
|
.to(intro, { frameOffsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
|
|
.to(intro, { frameOpacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
|
|
.call(
|
|
() => {
|
|
intro.tilesVisible = true;
|
|
animateSpawnAll();
|
|
},
|
|
[],
|
|
SLIDE_DURATION,
|
|
)
|
|
.to(
|
|
intro,
|
|
{ scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
|
|
SLIDE_DURATION,
|
|
)
|
|
.call(
|
|
() => {
|
|
bLabel.value = $t("common.quit");
|
|
aLabel.value = $t("common.restart");
|
|
},
|
|
[],
|
|
SUBMENU_LABEL_CHANGE_DELAY,
|
|
);
|
|
};
|
|
|
|
const animateOutro = async () => {
|
|
isAnimating.value = true;
|
|
await gsap
|
|
.timeline({
|
|
onComplete: () => {
|
|
isAnimating.value = false;
|
|
},
|
|
})
|
|
.to(
|
|
intro,
|
|
{ frameOffsetY: SLIDE_OFFSET, duration: SLIDE_DURATION, ease: "none" },
|
|
0,
|
|
)
|
|
.to(intro, { frameOpacity: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
|
|
.to(
|
|
intro,
|
|
{ scoreOffsetY: SCORE_OFFSET, duration: SCORE_DURATION, ease: "none" },
|
|
0,
|
|
);
|
|
};
|
|
|
|
onMounted(() => {
|
|
animateIntro();
|
|
});
|
|
|
|
onRender((ctx) => {
|
|
ctx.textBaseline = "top";
|
|
|
|
ctx.save();
|
|
ctx.globalAlpha = intro.frameOpacity;
|
|
ctx.translate(BOARD_X, BOARD_Y + intro.frameOffsetY);
|
|
|
|
assets.images.settings.bottomScreen.options._2048.frame.draw(ctx, -3, -3);
|
|
|
|
ctx.fillStyle = BORDER_COLOR.value;
|
|
ctx.fillRect(
|
|
0,
|
|
0,
|
|
BORDER_SIZE * (BOARD_SIZE + 1) + TILE_SIZE * BOARD_SIZE,
|
|
BORDER_SIZE * (BOARD_SIZE + 1) + TILE_SIZE * BOARD_SIZE,
|
|
);
|
|
|
|
for (let row = 0; row < BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < BOARD_SIZE; col += 1) {
|
|
ctx.fillStyle = TILE_COLORS.value[0]!.bg;
|
|
ctx.fillRect(cellX(col), cellY(row), TILE_SIZE, TILE_SIZE);
|
|
}
|
|
}
|
|
|
|
if (!intro.tilesVisible) {
|
|
ctx.restore();
|
|
return;
|
|
}
|
|
|
|
for (const tile of tiles) {
|
|
const color = TILE_COLORS.value[tile.value] ?? LAST_TILE_COLOR.value;
|
|
|
|
ctx.save();
|
|
const cx = tile.x + TILE_SIZE / 2;
|
|
const cy = tile.y + TILE_SIZE / 2;
|
|
ctx.translate(cx, cy);
|
|
ctx.scale(tile.scale, tile.scale);
|
|
ctx.translate(-cx, -cy);
|
|
|
|
ctx.fillStyle = color.bg;
|
|
ctx.fillRect(tile.x, tile.y, TILE_SIZE, TILE_SIZE);
|
|
|
|
ctx.fillStyle = color.fg;
|
|
ctx.font = tile.value <= 2048 ? "10px NDS10" : "7px NDS7";
|
|
fillTextHCentered(
|
|
ctx,
|
|
tile.value.toString(),
|
|
tile.x + 1,
|
|
tile.y + (tile.value <= 2048 ? 9 : 10),
|
|
TILE_SIZE,
|
|
);
|
|
ctx.restore();
|
|
}
|
|
ctx.restore();
|
|
});
|
|
|
|
onRender((ctx) => {
|
|
ctx.translate(0, intro.scoreOffsetY);
|
|
drawButton(
|
|
ctx,
|
|
`${$t("settings.options.2048.score")}: ${score}`,
|
|
10,
|
|
2,
|
|
118,
|
|
true,
|
|
);
|
|
drawButton(
|
|
ctx,
|
|
`${$t("settings.options.2048.highScore")}: ${savedState.value.highScore}`,
|
|
138,
|
|
2,
|
|
108,
|
|
true,
|
|
);
|
|
}, 110);
|
|
|
|
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)
|
|
) {
|
|
const merged = getCell(row, col) * 2;
|
|
setCell(row, col, merged);
|
|
setCell(nextRow, nextCol, 0);
|
|
score += merged;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
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 null;
|
|
|
|
const [row, col] = empty[Math.floor(Math.random() * empty.length)]!;
|
|
setCell(row, col, Math.random() < 0.9 ? 2 : 4);
|
|
return { row, col };
|
|
};
|
|
|
|
const resetBoard = () => {
|
|
for (let row = 0; row < BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < BOARD_SIZE; col += 1) {
|
|
setCell(row, col, 0);
|
|
}
|
|
}
|
|
|
|
score = 0;
|
|
spawnTile();
|
|
spawnTile();
|
|
saveState();
|
|
buildTilesFromBoard();
|
|
animateSpawnAll();
|
|
};
|
|
|
|
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;
|
|
};
|
|
|
|
if (board.every((r) => r.every((c) => c === 0))) {
|
|
spawnTile();
|
|
spawnTile();
|
|
saveState();
|
|
}
|
|
|
|
const slide = (rowDir: number, colDir: number) => {
|
|
if (isDead() && !confirmationModal.isOpen) {
|
|
showRestartModal();
|
|
return;
|
|
}
|
|
|
|
if (animating) {
|
|
gsap.globalTimeline.clear();
|
|
animating = false;
|
|
buildTilesFromBoard();
|
|
}
|
|
|
|
const beforeTiles: { row: number; col: number; value: number }[] = [];
|
|
for (let row = 0; row < BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < BOARD_SIZE; col += 1) {
|
|
if (getCell(row, col) !== 0) {
|
|
beforeTiles.push({ row, col, value: getCell(row, col) });
|
|
}
|
|
}
|
|
}
|
|
|
|
compact(rowDir, colDir);
|
|
merge(rowDir, colDir);
|
|
compact(rowDir, colDir);
|
|
|
|
const afterTiles: { row: number; col: number; value: number }[] = [];
|
|
for (let row = 0; row < BOARD_SIZE; row += 1) {
|
|
for (let col = 0; col < BOARD_SIZE; col += 1) {
|
|
if (getCell(row, col) !== 0) {
|
|
afterTiles.push({ row, col, value: getCell(row, col) });
|
|
}
|
|
}
|
|
}
|
|
|
|
const changed =
|
|
beforeTiles.length !== afterTiles.length ||
|
|
afterTiles.some(
|
|
(t, i) =>
|
|
t.row !== beforeTiles[i]?.row ||
|
|
t.col !== beforeTiles[i]?.col ||
|
|
t.value !== beforeTiles[i]?.value,
|
|
);
|
|
if (!changed) return;
|
|
|
|
if (board.some((r) => r.some((c) => c >= 512))) {
|
|
achievements.unlock("2048_score_512");
|
|
}
|
|
|
|
const horizontal = colDir !== 0;
|
|
const reversed = rowDir > 0 || colDir > 0;
|
|
|
|
const animTiles: VisualTile[] = [];
|
|
const tweens: { tile: VisualTile; toX: number; toY: number }[] = [];
|
|
const mergePairs: {
|
|
keep: VisualTile;
|
|
remove: VisualTile;
|
|
mergedValue: number;
|
|
}[] = [];
|
|
|
|
for (let major = 0; major < BOARD_SIZE; major += 1) {
|
|
const lineBefore = beforeTiles
|
|
.filter((t) => (horizontal ? t.row : t.col) === major)
|
|
.sort((a, b) => {
|
|
const aPos = horizontal ? a.col : a.row;
|
|
const bPos = horizontal ? b.col : b.row;
|
|
return reversed ? bPos - aPos : aPos - bPos;
|
|
});
|
|
|
|
const lineAfter = afterTiles
|
|
.filter((t) => (horizontal ? t.row : t.col) === major)
|
|
.sort((a, b) => {
|
|
const aPos = horizontal ? a.col : a.row;
|
|
const bPos = horizontal ? b.col : b.row;
|
|
return reversed ? bPos - aPos : aPos - bPos;
|
|
});
|
|
|
|
let afterIdx = 0;
|
|
let i = 0;
|
|
while (i < lineBefore.length) {
|
|
const cur = lineBefore[i]!;
|
|
const next = lineBefore[i + 1];
|
|
const target = lineAfter[afterIdx]!;
|
|
|
|
const tile: VisualTile = {
|
|
value: cur.value,
|
|
x: cellX(cur.col),
|
|
y: cellY(cur.row),
|
|
scale: 1,
|
|
};
|
|
animTiles.push(tile);
|
|
tweens.push({ tile, toX: cellX(target.col), toY: cellY(target.row) });
|
|
|
|
if (next && next.value === cur.value && target.value === cur.value * 2) {
|
|
const mergeTile: VisualTile = {
|
|
value: next.value,
|
|
x: cellX(next.col),
|
|
y: cellY(next.row),
|
|
scale: 1,
|
|
};
|
|
animTiles.push(mergeTile);
|
|
tweens.push({
|
|
tile: mergeTile,
|
|
toX: cellX(target.col),
|
|
toY: cellY(target.row),
|
|
});
|
|
mergePairs.push({
|
|
keep: tile,
|
|
remove: mergeTile,
|
|
mergedValue: target.value,
|
|
});
|
|
i += 2;
|
|
} else {
|
|
i += 1;
|
|
}
|
|
afterIdx += 1;
|
|
}
|
|
}
|
|
|
|
const spawned = spawnTile();
|
|
saveState();
|
|
|
|
if (isDead()) {
|
|
buildTilesFromBoard();
|
|
showRestartModal();
|
|
return;
|
|
}
|
|
|
|
tiles = animTiles;
|
|
animating = true;
|
|
|
|
const tl = gsap.timeline({
|
|
onComplete: () => {
|
|
animating = false;
|
|
buildTilesFromBoard();
|
|
},
|
|
});
|
|
|
|
for (const { tile, toX, toY } of tweens) {
|
|
tl.to(tile, { x: toX, y: toY, duration: ANIM_DURATION, ease: "none" }, 0);
|
|
}
|
|
|
|
if (mergePairs.length > 0) {
|
|
tl.call(() => {
|
|
for (const { keep, remove, mergedValue } of mergePairs) {
|
|
keep.value = mergedValue;
|
|
tiles = tiles.filter((t) => t !== remove);
|
|
}
|
|
});
|
|
for (const { keep } of mergePairs) {
|
|
tl.fromTo(
|
|
keep,
|
|
{ scale: 1.1 },
|
|
{ scale: 1, duration: ANIM_DURATION, ease: "none" },
|
|
);
|
|
}
|
|
}
|
|
|
|
if (spawned) {
|
|
const spawnedTile: VisualTile = {
|
|
value: getCell(spawned.row, spawned.col),
|
|
x: cellX(spawned.col),
|
|
y: cellY(spawned.row),
|
|
scale: 0,
|
|
};
|
|
tl.call(() => {
|
|
tiles.push(spawnedTile);
|
|
});
|
|
tl.to(spawnedTile, {
|
|
scale: 1,
|
|
duration: ANIM_DURATION,
|
|
ease: "back.out(2)",
|
|
});
|
|
}
|
|
};
|
|
|
|
useKeyDown(({ key }) => {
|
|
if (isAnimating.value) return;
|
|
switch (key) {
|
|
case "NDS_UP":
|
|
case "NDS_SWIPE_UP":
|
|
slide(-1, 0);
|
|
break;
|
|
case "NDS_DOWN":
|
|
case "NDS_SWIPE_DOWN":
|
|
slide(1, 0);
|
|
break;
|
|
case "NDS_LEFT":
|
|
case "NDS_SWIPE_LEFT":
|
|
slide(0, -1);
|
|
break;
|
|
case "NDS_RIGHT":
|
|
case "NDS_SWIPE_RIGHT":
|
|
slide(0, 1);
|
|
break;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CommonButtons
|
|
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
|
|
:b-label="bLabel"
|
|
:a-label="aLabel"
|
|
@activate-b="handleActivateB()"
|
|
@activate-a="handleActivateA()"
|
|
/>
|
|
</template>
|