305 lines
10 KiB
JavaScript
305 lines
10 KiB
JavaScript
(function () {
|
||
const $game = (selector, root = document) => root.querySelector(selector);
|
||
|
||
const GAME_META = {
|
||
twenty_four: {
|
||
title: "24 点",
|
||
kicker: "ARITHMETIC PUZZLE",
|
||
action: "开始组式",
|
||
},
|
||
sudoku: {
|
||
title: "数独",
|
||
kicker: "LOGIC GRID",
|
||
action: "开始推理",
|
||
},
|
||
};
|
||
|
||
function difficultySelect() {
|
||
const select = document.createElement("select");
|
||
select.className = "game-difficulty";
|
||
[
|
||
["easy", "入门"],
|
||
["standard", "标准"],
|
||
["hard", "进阶"],
|
||
].forEach(([value, label]) => {
|
||
const option = document.createElement("option");
|
||
option.value = value;
|
||
option.textContent = label;
|
||
if (value === "standard") option.selected = true;
|
||
select.append(option);
|
||
});
|
||
return select;
|
||
}
|
||
|
||
function gameCard(game) {
|
||
const meta = GAME_META[game.kind];
|
||
const article = document.createElement("article");
|
||
article.className = `game-card game-${game.kind}`;
|
||
const top = document.createElement("div");
|
||
top.className = "game-card-top";
|
||
const icon = document.createElement("span");
|
||
icon.textContent = game.kind === "sudoku" ? "9×9" : "24";
|
||
const time = document.createElement("small");
|
||
time.textContent = `约 ${game.estimated_minutes} 分钟`;
|
||
top.append(icon, time);
|
||
const kicker = document.createElement("b");
|
||
kicker.textContent = meta.kicker;
|
||
const title = document.createElement("h3");
|
||
title.textContent = game.title;
|
||
const summary = document.createElement("p");
|
||
summary.textContent = game.summary;
|
||
const controls = document.createElement("div");
|
||
controls.className = "game-card-controls";
|
||
const difficulty = difficultySelect();
|
||
const start = document.createElement("button");
|
||
start.className = "primary-button";
|
||
start.textContent = meta.action;
|
||
start.addEventListener("click", () => startGame(game.kind, difficulty.value));
|
||
controls.append(difficulty, start);
|
||
article.append(top, kicker, title, summary, controls);
|
||
return article;
|
||
}
|
||
|
||
async function loadGames() {
|
||
const root = $game("#math-game-list");
|
||
try {
|
||
const games = await api("contests/games/");
|
||
root.replaceChildren(...games.map(gameCard));
|
||
} catch (error) {
|
||
root.textContent = error.message;
|
||
}
|
||
}
|
||
|
||
async function startGame(kind, difficulty) {
|
||
if (!requireAuth()) return;
|
||
try {
|
||
const attempt = await api(`contests/games/${kind}/start/`, {
|
||
method: "POST",
|
||
body: { difficulty },
|
||
});
|
||
renderGame(attempt);
|
||
$game("#experience-dialog").showModal();
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
}
|
||
}
|
||
|
||
function gameHeading(attempt) {
|
||
const fragment = document.createDocumentFragment();
|
||
const label = document.createElement("span");
|
||
label.className = "kicker";
|
||
label.textContent =
|
||
`${GAME_META[attempt.kind].kicker} · ${attempt.difficulty.toUpperCase()}`;
|
||
const title = document.createElement("h2");
|
||
title.textContent = GAME_META[attempt.kind].title;
|
||
fragment.append(label, title);
|
||
return fragment;
|
||
}
|
||
|
||
function resultPanel(attempt) {
|
||
const panel = document.createElement("div");
|
||
panel.className = "game-result-panel";
|
||
const score = document.createElement("strong");
|
||
score.textContent = `${attempt.score} 分`;
|
||
const details = document.createElement("p");
|
||
details.textContent =
|
||
`用时 ${(attempt.duration_ms / 1000).toFixed(1)} 秒 · 提示 ${attempt.hints_used} 次`;
|
||
panel.append(score, details);
|
||
return panel;
|
||
}
|
||
|
||
function renderGame(attempt) {
|
||
if (attempt.kind === "sudoku") renderSudoku(attempt);
|
||
else renderTwentyFour(attempt);
|
||
}
|
||
|
||
function renderTwentyFour(attempt) {
|
||
const root = $game("#experience-content");
|
||
root.replaceChildren();
|
||
root.append(gameHeading(attempt));
|
||
if (attempt.status === "completed") {
|
||
root.append(resultPanel(attempt));
|
||
return;
|
||
}
|
||
const instruction = document.createElement("p");
|
||
instruction.className = "scene";
|
||
instruction.textContent = "四个数字必须各使用一次，只允许 +、−、×、÷ 和括号。";
|
||
const numbers = document.createElement("div");
|
||
numbers.className = "twenty-four-numbers";
|
||
attempt.puzzle.numbers.forEach((number) => {
|
||
const tile = document.createElement("button");
|
||
tile.type = "button";
|
||
tile.textContent = number;
|
||
tile.addEventListener("click", () => {
|
||
input.value += String(number);
|
||
input.focus();
|
||
});
|
||
numbers.append(tile);
|
||
});
|
||
const form = document.createElement("form");
|
||
form.className = "twenty-four-form";
|
||
const input = document.createElement("input");
|
||
input.className = "formula-input";
|
||
input.placeholder = "例如：6 / (1 - 3 / 4)";
|
||
input.autocomplete = "off";
|
||
input.inputMode = "text";
|
||
input.spellcheck = false;
|
||
const errorMessage = document.createElement("p");
|
||
errorMessage.className = "form-error game-form-error";
|
||
errorMessage.setAttribute("role", "alert");
|
||
input.addEventListener("input", () => {
|
||
errorMessage.textContent = "";
|
||
});
|
||
const keypad = document.createElement("div");
|
||
keypad.className = "game-keypad";
|
||
["+", "-", "*", "/", "(", ")"].forEach((operator) => {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.textContent = operator;
|
||
button.addEventListener("click", () => {
|
||
input.value += operator;
|
||
input.focus();
|
||
});
|
||
keypad.append(button);
|
||
});
|
||
const submit = document.createElement("button");
|
||
submit.className = "primary-button";
|
||
submit.type = "submit";
|
||
submit.textContent = "验证并计分";
|
||
form.append(input, keypad, errorMessage, submit);
|
||
form.addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
submit.disabled = true;
|
||
errorMessage.textContent = "";
|
||
try {
|
||
const result = await api(
|
||
`contests/games/attempts/${attempt.attempt_id}/submit/`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Idempotency-Key": createIdempotencyKey() },
|
||
body: { expression: input.value },
|
||
},
|
||
);
|
||
renderTwentyFour(result);
|
||
showToast("得到 24，成绩已记录");
|
||
} catch (error) {
|
||
errorMessage.textContent = error.message;
|
||
showToast(error.message);
|
||
submit.disabled = false;
|
||
}
|
||
});
|
||
root.append(instruction, numbers, form);
|
||
window.setTimeout(() => input.focus(), 50);
|
||
}
|
||
|
||
function sudokuCell(given, value, row, column) {
|
||
const input = document.createElement("input");
|
||
input.inputMode = "numeric";
|
||
input.pattern = "[1-9]";
|
||
input.maxLength = 1;
|
||
input.dataset.row = row;
|
||
input.dataset.column = column;
|
||
input.value = value || "";
|
||
input.className = given ? "given" : "";
|
||
input.readOnly = given;
|
||
input.setAttribute("aria-label", `第 ${row + 1} 行第 ${column + 1} 列`);
|
||
input.addEventListener("input", () => {
|
||
input.value = input.value.replace(/[^1-9]/g, "").slice(0, 1);
|
||
});
|
||
return input;
|
||
}
|
||
|
||
function renderSudoku(attempt) {
|
||
const root = $game("#experience-content");
|
||
root.replaceChildren();
|
||
root.append(gameHeading(attempt));
|
||
if (attempt.status === "completed") {
|
||
root.append(resultPanel(attempt));
|
||
return;
|
||
}
|
||
const instruction = document.createElement("p");
|
||
instruction.className = "scene";
|
||
instruction.textContent = "每一行、每一列和每个 3×3 九宫格都要包含 1 到 9。";
|
||
const board = document.createElement("div");
|
||
board.className = "sudoku-board";
|
||
const hints = new Map(
|
||
(attempt.puzzle.hints || []).map((item) => [`${item.row}-${item.column}`, item.value])
|
||
);
|
||
attempt.puzzle.grid.forEach((rowValues, row) => {
|
||
rowValues.forEach((givenValue, column) => {
|
||
const hintValue = hints.get(`${row}-${column}`) || 0;
|
||
const input = sudokuCell(Boolean(givenValue), givenValue || hintValue, row, column);
|
||
if (hintValue) {
|
||
input.readOnly = true;
|
||
input.classList.add("hint");
|
||
}
|
||
board.append(input);
|
||
});
|
||
});
|
||
const actions = document.createElement("div");
|
||
actions.className = "sudoku-actions";
|
||
const hint = document.createElement("button");
|
||
hint.type = "button";
|
||
hint.className = "ghost-button";
|
||
hint.textContent = `提示（已用 ${attempt.hints_used}/3）`;
|
||
hint.disabled = attempt.hints_used >= 3;
|
||
const submit = document.createElement("button");
|
||
submit.type = "button";
|
||
submit.className = "primary-button";
|
||
submit.textContent = "检查并完成";
|
||
hint.addEventListener("click", async () => {
|
||
hint.disabled = true;
|
||
try {
|
||
const result = await api(
|
||
`contests/games/attempts/${attempt.attempt_id}/hint/`,
|
||
{ method: "POST", body: {} },
|
||
);
|
||
const input = $game(
|
||
`[data-row="${result.row}"][data-column="${result.column}"]`,
|
||
board,
|
||
);
|
||
input.value = result.value;
|
||
input.readOnly = true;
|
||
input.classList.add("hint");
|
||
attempt.hints_used = result.hints_used;
|
||
hint.textContent = `提示（已用 ${result.hints_used}/3）`;
|
||
hint.disabled = result.hints_used >= 3;
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
hint.disabled = false;
|
||
}
|
||
});
|
||
submit.addEventListener("click", async () => {
|
||
submit.disabled = true;
|
||
const grid = Array.from({ length: 9 }, () => Array(9).fill(0));
|
||
$gameAll("input", board).forEach((input) => {
|
||
grid[Number(input.dataset.row)][Number(input.dataset.column)] =
|
||
Number(input.value || 0);
|
||
});
|
||
try {
|
||
const result = await api(
|
||
`contests/games/attempts/${attempt.attempt_id}/submit/`,
|
||
{
|
||
method: "POST",
|
||
headers: { "Idempotency-Key": createIdempotencyKey() },
|
||
body: { grid },
|
||
},
|
||
);
|
||
renderSudoku(result);
|
||
showToast("数独完成，成绩已记录");
|
||
} catch (error) {
|
||
showToast(error.message);
|
||
submit.disabled = false;
|
||
}
|
||
});
|
||
actions.append(hint, submit);
|
||
root.append(instruction, board, actions);
|
||
}
|
||
|
||
function $gameAll(selector, root = document) {
|
||
return [...root.querySelectorAll(selector)];
|
||
}
|
||
|
||
window.HuluGames = { load: loadGames };
|
||
})();
|