small plugin changes + make minesweeper and snake plugin
This commit is contained in:
KingKDot
@@ -0,0 +1,277 @@
|
||||
(() => {
|
||||
const board = document.getElementById("snake-board");
|
||||
if (!(board instanceof HTMLCanvasElement) || board.dataset.ready === "true") return;
|
||||
board.dataset.ready = "true";
|
||||
|
||||
const context = board.getContext("2d");
|
||||
const scoreElement = document.getElementById("snake-score");
|
||||
const bestElement = document.getElementById("snake-best");
|
||||
const statusElement = document.getElementById("snake-status");
|
||||
const overlay = document.getElementById("snake-overlay");
|
||||
const overlayTitle = document.getElementById("snake-overlay-title");
|
||||
const overlayCopy = document.getElementById("snake-overlay-copy");
|
||||
const startButton = document.getElementById("snake-start");
|
||||
const refreshButton = document.getElementById("snake-refresh");
|
||||
const leaderboardList = document.getElementById("snake-leaderboard-list");
|
||||
const leaderboardEmpty = document.getElementById("snake-leaderboard-empty");
|
||||
|
||||
const directions = {
|
||||
up: { x: 0, y: -1, opposite: "down" },
|
||||
down: { x: 0, y: 1, opposite: "up" },
|
||||
left: { x: -1, y: 0, opposite: "right" },
|
||||
right: { x: 1, y: 0, opposite: "left" },
|
||||
};
|
||||
const keyDirections = {
|
||||
ArrowUp: "up", KeyW: "up",
|
||||
ArrowDown: "down", KeyS: "down",
|
||||
ArrowLeft: "left", KeyA: "left",
|
||||
ArrowRight: "right", KeyD: "right",
|
||||
};
|
||||
|
||||
let game = null;
|
||||
let timer = null;
|
||||
let pendingDirection = null;
|
||||
let paused = false;
|
||||
let best = 0;
|
||||
|
||||
function makeRng(seed) {
|
||||
let value = seed >>> 0;
|
||||
return () => {
|
||||
value ^= value << 13;
|
||||
value ^= value >>> 17;
|
||||
value ^= value << 5;
|
||||
return (value >>> 0) / 0x100000000;
|
||||
};
|
||||
}
|
||||
|
||||
function chooseFood(snake, rng, size) {
|
||||
const occupied = new Set(snake.map((cell) => `${cell.x},${cell.y}`));
|
||||
const free = [];
|
||||
for (let y = 0; y < size; y += 1) {
|
||||
for (let x = 0; x < size; x += 1) {
|
||||
if (!occupied.has(`${x},${y}`)) free.push({ x, y });
|
||||
}
|
||||
}
|
||||
return free.length ? free[Math.floor(rng() * free.length)] : null;
|
||||
}
|
||||
|
||||
async function rpc(method, params = {}) {
|
||||
const response = await fetch("/api/plugins/snake/rpc", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ method, params }),
|
||||
});
|
||||
const body = await response.json();
|
||||
if (!response.ok || body.ok === false) throw new Error(body.error || response.statusText);
|
||||
return body.result;
|
||||
}
|
||||
|
||||
function setStatus(message) {
|
||||
if (statusElement) statusElement.textContent = message;
|
||||
}
|
||||
|
||||
function setOverlay(title, copy, buttonLabel) {
|
||||
if (overlayTitle) overlayTitle.textContent = title;
|
||||
if (overlayCopy) overlayCopy.textContent = copy;
|
||||
if (startButton) startButton.textContent = buttonLabel;
|
||||
if (overlay) overlay.hidden = false;
|
||||
}
|
||||
|
||||
function renderLeaderboard(entries) {
|
||||
if (!leaderboardList || !leaderboardEmpty) return;
|
||||
leaderboardList.replaceChildren();
|
||||
const safeEntries = Array.isArray(entries) ? entries : [];
|
||||
leaderboardEmpty.hidden = safeEntries.length > 0;
|
||||
safeEntries.forEach((entry, index) => {
|
||||
const item = document.createElement("li");
|
||||
const rank = document.createElement("span");
|
||||
const player = document.createElement("span");
|
||||
const points = document.createElement("strong");
|
||||
rank.className = "snake-rank";
|
||||
player.className = "snake-player";
|
||||
points.className = "snake-points";
|
||||
rank.textContent = String(index + 1).padStart(2, "0");
|
||||
player.textContent = String(entry.player || "Player");
|
||||
points.textContent = String(Number(entry.score) || 0);
|
||||
item.append(rank, player, points);
|
||||
leaderboardList.append(item);
|
||||
});
|
||||
best = safeEntries.reduce((maximum, entry) => Math.max(maximum, Number(entry.score) || 0), 0);
|
||||
if (bestElement) bestElement.textContent = String(best);
|
||||
}
|
||||
|
||||
async function loadLeaderboard() {
|
||||
try {
|
||||
const result = await rpc("leaderboard");
|
||||
renderLeaderboard(result.entries);
|
||||
} catch (error) {
|
||||
setStatus(`Leaderboard unavailable: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (!context) return;
|
||||
const size = game?.size || 24;
|
||||
const cell = board.width / size;
|
||||
context.fillStyle = "#07100d";
|
||||
context.fillRect(0, 0, board.width, board.height);
|
||||
|
||||
context.strokeStyle = "rgba(94, 227, 142, 0.055)";
|
||||
context.lineWidth = 1;
|
||||
for (let i = 1; i < size; i += 1) {
|
||||
const offset = Math.round(i * cell) + 0.5;
|
||||
context.beginPath(); context.moveTo(offset, 0); context.lineTo(offset, board.height); context.stroke();
|
||||
context.beginPath(); context.moveTo(0, offset); context.lineTo(board.width, offset); context.stroke();
|
||||
}
|
||||
if (!game) return;
|
||||
|
||||
if (game.food) {
|
||||
const inset = 3;
|
||||
context.fillStyle = "#ef4444";
|
||||
context.fillRect(game.food.x * cell + inset, game.food.y * cell + inset, cell - inset * 2, cell - inset * 2);
|
||||
}
|
||||
|
||||
game.snake.forEach((segment) => {
|
||||
const inset = 2;
|
||||
context.fillStyle = "#22c55e";
|
||||
context.fillRect(segment.x * cell + inset, segment.y * cell + inset, cell - inset * 2, cell - inset * 2);
|
||||
});
|
||||
}
|
||||
|
||||
function queueDirection(direction) {
|
||||
if (!game || game.ended || paused || pendingDirection || !directions[direction]) return;
|
||||
if (directions[game.direction].opposite === direction) return;
|
||||
if (direction !== game.direction) pendingDirection = direction;
|
||||
}
|
||||
|
||||
async function finish(won) {
|
||||
if (!game || game.ended) return;
|
||||
game.ended = true;
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
setStatus("Validating run with the server…");
|
||||
try {
|
||||
const result = await rpc("submit", { gameId: game.id, ticks: game.tick, moves: game.moves });
|
||||
renderLeaderboard(result.entries);
|
||||
setOverlay(won ? "Board cleared" : "Game over", `Validated score: ${result.score}`, "Play again");
|
||||
setStatus("Run validated and leaderboard updated.");
|
||||
} catch (error) {
|
||||
setOverlay("Run rejected", error instanceof Error ? error.message : String(error), "Try again");
|
||||
setStatus("The server could not validate this run.");
|
||||
}
|
||||
}
|
||||
|
||||
function tick() {
|
||||
if (!game || game.ended || paused) return;
|
||||
game.tick += 1;
|
||||
if (pendingDirection) {
|
||||
game.direction = pendingDirection;
|
||||
game.moves.push({ tick: game.tick, direction: pendingDirection });
|
||||
pendingDirection = null;
|
||||
}
|
||||
|
||||
const vector = directions[game.direction];
|
||||
const head = { x: game.snake[0].x + vector.x, y: game.snake[0].y + vector.y };
|
||||
const ate = game.food && head.x === game.food.x && head.y === game.food.y;
|
||||
const collisionBody = ate ? game.snake : game.snake.slice(0, -1);
|
||||
const collided = head.x < 0 || head.y < 0 || head.x >= game.size || head.y >= game.size ||
|
||||
collisionBody.some((cell) => cell.x === head.x && cell.y === head.y);
|
||||
if (collided) {
|
||||
draw();
|
||||
void finish(false);
|
||||
return;
|
||||
}
|
||||
|
||||
game.snake.unshift(head);
|
||||
if (ate) {
|
||||
game.score += 1;
|
||||
game.food = chooseFood(game.snake, game.rng, game.size);
|
||||
if (scoreElement) scoreElement.textContent = String(game.score);
|
||||
if (!game.food) {
|
||||
draw();
|
||||
void finish(true);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
game.snake.pop();
|
||||
}
|
||||
draw();
|
||||
}
|
||||
|
||||
async function startGame() {
|
||||
if (startButton) startButton.disabled = true;
|
||||
setStatus("Opening a validated game session…");
|
||||
try {
|
||||
const session = await rpc("start");
|
||||
const rng = makeRng(Number(session.seed));
|
||||
const snake = session.snake.map((cell) => ({ x: Number(cell.x), y: Number(cell.y) }));
|
||||
chooseFood(snake, rng, Number(session.boardSize));
|
||||
game = {
|
||||
id: session.gameId,
|
||||
size: Number(session.boardSize),
|
||||
snake,
|
||||
food: session.food,
|
||||
direction: session.direction,
|
||||
score: 0,
|
||||
tick: 0,
|
||||
moves: [],
|
||||
rng,
|
||||
ended: false,
|
||||
};
|
||||
paused = false;
|
||||
pendingDirection = null;
|
||||
if (scoreElement) scoreElement.textContent = "0";
|
||||
if (overlay) overlay.hidden = true;
|
||||
clearInterval(timer);
|
||||
timer = setInterval(tick, Number(session.tickMs) || 115);
|
||||
setStatus("Game active.");
|
||||
draw();
|
||||
} catch (error) {
|
||||
setOverlay("Could not start", error instanceof Error ? error.message : String(error), "Retry");
|
||||
setStatus("Could not open a game session.");
|
||||
} finally {
|
||||
if (startButton) startButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function togglePause() {
|
||||
if (!game || game.ended) return;
|
||||
paused = !paused;
|
||||
if (paused) {
|
||||
setOverlay("Paused", "Press Space to continue.", "Resume");
|
||||
setStatus("Game paused.");
|
||||
} else {
|
||||
if (overlay) overlay.hidden = true;
|
||||
setStatus("Game active.");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
const direction = keyDirections[event.code];
|
||||
if (direction) {
|
||||
event.preventDefault();
|
||||
queueDirection(direction);
|
||||
} else if (event.code === "Space" && game && !game.ended) {
|
||||
event.preventDefault();
|
||||
togglePause();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll(".snake-controls [data-direction]").forEach((button) => {
|
||||
button.addEventListener("click", () => queueDirection(button.dataset.direction));
|
||||
});
|
||||
startButton?.addEventListener("click", () => {
|
||||
if (paused && game && !game.ended) togglePause();
|
||||
else void startGame();
|
||||
});
|
||||
refreshButton?.addEventListener("click", () => void loadLeaderboard());
|
||||
|
||||
try {
|
||||
const stream = new EventSource("/api/plugins/snake/stream");
|
||||
stream.addEventListener("leaderboard", (event) => {
|
||||
try { renderLeaderboard(JSON.parse(event.data).entries); } catch {}
|
||||
});
|
||||
} catch {}
|
||||
|
||||
draw();
|
||||
void loadLeaderboard();
|
||||
})();
|
||||
Reference in New Issue
Block a user