This commit is contained in:
@@ -0,0 +1,295 @@
|
||||
(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";
|
||||
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, submit);
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
submit.disabled = true;
|
||||
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) {
|
||||
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 };
|
||||
})();
|
||||
Reference in New Issue
Block a user