2 more AI plugins for shits n giggles
This commit is contained in:
KingKDot
@@ -0,0 +1,33 @@
|
||||
@echo off
|
||||
setlocal
|
||||
|
||||
set "PLUGIN_DIR=%~dp0"
|
||||
set "PLUGIN_NAME=tic-tac-toe"
|
||||
set "ZIP_OUT=%PLUGIN_DIR%%PLUGIN_NAME%.zip"
|
||||
set "DLL_OUT=%PLUGIN_DIR%%PLUGIN_NAME%-windows-amd64.dll"
|
||||
|
||||
where gcc >nul 2>&1
|
||||
if errorlevel 1 (
|
||||
echo [error] gcc was not found
|
||||
exit /b 1
|
||||
)
|
||||
gcc -shared -O2 -s -o "%DLL_OUT%" "%PLUGIN_DIR%native\plugin.c" -luser32 -lgdi32
|
||||
if errorlevel 1 (
|
||||
echo [error] Native build failed
|
||||
exit /b 1
|
||||
)
|
||||
|
||||
for %%F in (config.json tic-tac-toe.html tic-tac-toe.css tic-tac-toe.js server.js tic-tac-toe-windows-amd64.dll) do (
|
||||
if not exist "%PLUGIN_DIR%%%F" (
|
||||
echo [error] Missing %%F
|
||||
exit /b 1
|
||||
)
|
||||
)
|
||||
|
||||
if exist "%ZIP_OUT%" del /f /q "%ZIP_OUT%"
|
||||
pushd "%PLUGIN_DIR%"
|
||||
powershell -NoProfile -ExecutionPolicy Bypass -Command "Compress-Archive -Path @('config.json','tic-tac-toe.html','tic-tac-toe.css','tic-tac-toe.js','server.js','tic-tac-toe-windows-amd64.dll') -DestinationPath '%ZIP_OUT%' -Force"
|
||||
set "ZIP_STATUS=%ERRORLEVEL%"
|
||||
popd
|
||||
if not "%ZIP_STATUS%"=="0" exit /b %ZIP_STATUS%
|
||||
echo [ok] %ZIP_OUT%
|
||||
@@ -0,0 +1,261 @@
|
||||
#define WIN32_LEAN_AND_MEAN
|
||||
#include <windows.h>
|
||||
#include <windowsx.h>
|
||||
#include <stdint.h>
|
||||
#include <stdio.h>
|
||||
#include <stdlib.h>
|
||||
#include <string.h>
|
||||
|
||||
#define EXPORT __declspec(dllexport)
|
||||
|
||||
typedef void (__stdcall *host_callback_t)(const char *, uintptr_t, const char *, uintptr_t);
|
||||
static host_callback_t g_callback;
|
||||
static HINSTANCE g_instance;
|
||||
static HWND g_window;
|
||||
static HANDLE g_thread;
|
||||
static SRWLOCK g_lock = SRWLOCK_INIT;
|
||||
static char g_game_id[80];
|
||||
static char g_operator[96] = "operator";
|
||||
static char g_board[9];
|
||||
static char g_turn;
|
||||
static char g_status[24];
|
||||
static int g_waiting;
|
||||
static char g_winner;
|
||||
static ULONGLONG g_confetti_until;
|
||||
|
||||
static void send_event(const char *event, const char *payload) {
|
||||
if (g_callback) g_callback(event, (uintptr_t)strlen(event), payload, payload ? (uintptr_t)strlen(payload) : 0);
|
||||
}
|
||||
|
||||
static void json_string(const char *json, const char *key, char *out, size_t capacity) {
|
||||
const char *start = strstr(json, key);
|
||||
if (!start || capacity == 0) return;
|
||||
start += strlen(key);
|
||||
const char *end = strchr(start, '"');
|
||||
if (!end) return;
|
||||
size_t length = (size_t)(end - start);
|
||||
if (length >= capacity) length = capacity - 1;
|
||||
memcpy(out, start, length);
|
||||
out[length] = 0;
|
||||
}
|
||||
|
||||
static void parse_board(const char *json) {
|
||||
const char *cursor = strstr(json, "\"board\":[");
|
||||
memset(g_board, 0, sizeof(g_board));
|
||||
if (!cursor) return;
|
||||
cursor += 9;
|
||||
for (int index = 0; index < 9; index++) {
|
||||
cursor = strchr(cursor, '"');
|
||||
if (!cursor) break;
|
||||
cursor++;
|
||||
if (*cursor == 'X' || *cursor == 'O') g_board[index] = *cursor;
|
||||
cursor = strchr(cursor, '"');
|
||||
if (!cursor) break;
|
||||
cursor++;
|
||||
}
|
||||
}
|
||||
|
||||
static void parse_state(const char *json) {
|
||||
AcquireSRWLockExclusive(&g_lock);
|
||||
json_string(json, "\"id\":\"", g_game_id, sizeof(g_game_id));
|
||||
json_string(json, "\"status\":\"", g_status, sizeof(g_status));
|
||||
int was_client_win = strcmp(g_status, "won") == 0 && g_winner == 'O';
|
||||
char winner[4] = {0};
|
||||
json_string(json, "\"winner\":\"", winner, sizeof(winner));
|
||||
g_winner = winner[0];
|
||||
int client_won = strcmp(g_status, "won") == 0 && g_winner == 'O';
|
||||
if (client_won && !was_client_win) g_confetti_until = GetTickCount64() + 3000;
|
||||
else if (!client_won) g_confetti_until = 0;
|
||||
char turn[4] = {0};
|
||||
json_string(json, "\"turn\":\"", turn, sizeof(turn));
|
||||
g_turn = turn[0];
|
||||
const char *player = strstr(json, "\"playerX\":");
|
||||
if (player) json_string(player, "\"username\":\"", g_operator, sizeof(g_operator));
|
||||
parse_board(json);
|
||||
g_waiting = 0;
|
||||
ReleaseSRWLockExclusive(&g_lock);
|
||||
}
|
||||
|
||||
static void draw_centered(HDC dc, const char *text, RECT rect, HFONT font, COLORREF color) {
|
||||
SelectObject(dc, font);
|
||||
SetTextColor(dc, color);
|
||||
SetBkMode(dc, TRANSPARENT);
|
||||
DrawTextA(dc, text, -1, &rect, DT_CENTER | DT_VCENTER | DT_SINGLELINE);
|
||||
}
|
||||
|
||||
static void draw_confetti(HDC dc, RECT client, ULONGLONG until) {
|
||||
ULONGLONG now = GetTickCount64();
|
||||
if (!until || now >= until) return;
|
||||
ULONGLONG elapsed = 3000 - (until - now);
|
||||
int width = client.right - client.left;
|
||||
int height = client.bottom - client.top;
|
||||
COLORREF colors[] = {RGB(251, 113, 133), RGB(254, 205, 211), RGB(255, 255, 255)};
|
||||
for (int index = 0; index < 60; index++) {
|
||||
int x = (index * 73) % width;
|
||||
int speed = 110 + (index % 5) * 24;
|
||||
int y = (int)((elapsed * speed / 1000 + index * 47) % (height + 36)) - 18;
|
||||
HBRUSH brush = CreateSolidBrush(colors[index % 3]);
|
||||
RECT piece = {x, y, x + 8, y + 14};
|
||||
FillRect(dc, &piece, brush);
|
||||
DeleteObject(brush);
|
||||
}
|
||||
}
|
||||
|
||||
static LRESULT CALLBACK window_proc(HWND window, UINT message, WPARAM wparam, LPARAM lparam) {
|
||||
if (message == WM_PAINT) {
|
||||
PAINTSTRUCT paint;
|
||||
HDC dc = BeginPaint(window, &paint);
|
||||
RECT client;
|
||||
GetClientRect(window, &client);
|
||||
HBRUSH background = CreateSolidBrush(RGB(8, 13, 22));
|
||||
FillRect(dc, &client, background);
|
||||
DeleteObject(background);
|
||||
|
||||
char board[9], status[24], opponent[96];
|
||||
char turn, winner;
|
||||
ULONGLONG confetti_until;
|
||||
AcquireSRWLockShared(&g_lock);
|
||||
memcpy(board, g_board, sizeof(board));
|
||||
strcpy(status, g_status);
|
||||
strcpy(opponent, g_operator);
|
||||
turn = g_turn;
|
||||
winner = g_winner;
|
||||
confetti_until = g_confetti_until;
|
||||
ReleaseSRWLockShared(&g_lock);
|
||||
|
||||
HFONT title_font = CreateFontA(24, 0, 0, 0, FW_BOLD, 0, 0, 0, DEFAULT_CHARSET, 0, 0, 0, 0, "Segoe UI");
|
||||
HFONT mark_font = CreateFontA(58, 0, 0, 0, FW_BOLD, 0, 0, 0, DEFAULT_CHARSET, 0, 0, 0, 0, "Segoe UI");
|
||||
HFONT text_font = CreateFontA(16, 0, 0, 0, FW_NORMAL, 0, 0, 0, DEFAULT_CHARSET, 0, 0, 0, 0, "Segoe UI");
|
||||
RECT title = {20, 10, 340, 45};
|
||||
char title_text[160];
|
||||
snprintf(title_text, sizeof(title_text), "Tic Tac Toe vs %s", opponent);
|
||||
draw_centered(dc, title_text, title, title_font, RGB(229, 231, 235));
|
||||
|
||||
HPEN grid_pen = CreatePen(PS_SOLID, 2, RGB(51, 65, 85));
|
||||
SelectObject(dc, grid_pen);
|
||||
for (int index = 1; index < 3; index++) {
|
||||
MoveToEx(dc, 20 + index * 100, 60, NULL); LineTo(dc, 20 + index * 100, 360);
|
||||
MoveToEx(dc, 20, 60 + index * 100, NULL); LineTo(dc, 320, 60 + index * 100);
|
||||
}
|
||||
DeleteObject(grid_pen);
|
||||
for (int index = 0; index < 9; index++) {
|
||||
if (!board[index]) continue;
|
||||
int row = index / 3, column = index % 3;
|
||||
RECT cell = {20 + column * 100, 60 + row * 100, 120 + column * 100, 160 + row * 100};
|
||||
char mark[2] = {board[index], 0};
|
||||
draw_centered(dc, mark, cell, mark_font, board[index] == 'X' ? RGB(56, 189, 248) : RGB(251, 113, 133));
|
||||
}
|
||||
RECT footer = {20, 370, 320, 405};
|
||||
const char *footer_text = strcmp(status, "active") != 0
|
||||
? (strcmp(status, "won") == 0 ? (winner == 'O' ? "You won!" : "You lost.") : "Waiting for game")
|
||||
: (turn == 'O' ? "Your turn" : "Operator's turn");
|
||||
draw_centered(dc, footer_text, footer, text_font, RGB(148, 163, 184));
|
||||
draw_confetti(dc, client, confetti_until);
|
||||
DeleteObject(title_font);
|
||||
DeleteObject(mark_font);
|
||||
DeleteObject(text_font);
|
||||
EndPaint(window, &paint);
|
||||
return 0;
|
||||
}
|
||||
if (message == WM_TIMER) {
|
||||
ULONGLONG until;
|
||||
AcquireSRWLockShared(&g_lock);
|
||||
until = g_confetti_until;
|
||||
ReleaseSRWLockShared(&g_lock);
|
||||
if (until > GetTickCount64()) InvalidateRect(window, NULL, FALSE);
|
||||
else KillTimer(window, 1);
|
||||
return 0;
|
||||
}
|
||||
if (message == WM_LBUTTONUP) {
|
||||
int x = GET_X_LPARAM(lparam), y = GET_Y_LPARAM(lparam);
|
||||
if (x < 20 || x >= 320 || y < 60 || y >= 360) return 0;
|
||||
int cell = ((y - 60) / 100) * 3 + ((x - 20) / 100);
|
||||
char game_id[80];
|
||||
int allowed = 0;
|
||||
AcquireSRWLockExclusive(&g_lock);
|
||||
if (!g_waiting && strcmp(g_status, "active") == 0 && g_turn == 'O' && !g_board[cell]) {
|
||||
g_waiting = 1;
|
||||
strcpy(game_id, g_game_id);
|
||||
allowed = 1;
|
||||
}
|
||||
ReleaseSRWLockExclusive(&g_lock);
|
||||
if (allowed) {
|
||||
char payload[160];
|
||||
snprintf(payload, sizeof(payload), "{\"gameId\":\"%s\",\"cell\":%d}", game_id, cell);
|
||||
send_event("move", payload);
|
||||
InvalidateRect(window, NULL, FALSE);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
if (message == WM_CLOSE) { DestroyWindow(window); return 0; }
|
||||
if (message == WM_DESTROY) { PostQuitMessage(0); return 0; }
|
||||
return DefWindowProcW(window, message, wparam, lparam);
|
||||
}
|
||||
|
||||
static DWORD WINAPI ui_thread(void *unused) {
|
||||
(void)unused;
|
||||
const wchar_t *class_name = L"OverlordTicTacToePlugin";
|
||||
WNDCLASSW wc = {0};
|
||||
wc.lpfnWndProc = window_proc;
|
||||
wc.hInstance = g_instance;
|
||||
wc.lpszClassName = class_name;
|
||||
wc.hCursor = LoadCursor(NULL, IDC_ARROW);
|
||||
RegisterClassW(&wc);
|
||||
g_window = CreateWindowExW(WS_EX_TOPMOST, class_name, L"Tic Tac Toe", WS_OVERLAPPED | WS_CAPTION | WS_SYSMENU | WS_MINIMIZEBOX,
|
||||
CW_USEDEFAULT, CW_USEDEFAULT, 360, 455, NULL, NULL, g_instance, NULL);
|
||||
if (!g_window) return 1;
|
||||
ShowWindow(g_window, SW_SHOW);
|
||||
UpdateWindow(g_window);
|
||||
SetTimer(g_window, 1, 33, NULL);
|
||||
MSG message;
|
||||
while (GetMessageW(&message, NULL, 0, 0) > 0) { TranslateMessage(&message); DispatchMessageW(&message); }
|
||||
g_window = NULL;
|
||||
return 0;
|
||||
}
|
||||
|
||||
static void ensure_window(void) {
|
||||
if (g_window) {
|
||||
ShowWindow(g_window, SW_RESTORE);
|
||||
SetWindowPos(g_window, HWND_TOPMOST, 0, 0, 0, 0, SWP_NOMOVE | SWP_NOSIZE | SWP_SHOWWINDOW);
|
||||
SetForegroundWindow(g_window);
|
||||
return;
|
||||
}
|
||||
if (g_thread) { CloseHandle(g_thread); g_thread = NULL; }
|
||||
g_thread = CreateThread(NULL, 0, ui_thread, NULL, 0, NULL);
|
||||
}
|
||||
|
||||
BOOL WINAPI DllMain(HINSTANCE instance, DWORD reason, LPVOID reserved) {
|
||||
(void)reserved;
|
||||
if (reason == DLL_PROCESS_ATTACH) { g_instance = instance; DisableThreadLibraryCalls(instance); }
|
||||
return TRUE;
|
||||
}
|
||||
|
||||
EXPORT const char *PluginGetRuntime(void) { return "c"; }
|
||||
EXPORT void PluginSetCallback(uint64_t callback) { g_callback = (host_callback_t)(uintptr_t)callback; }
|
||||
EXPORT int PluginOnLoad(const char *host_info, int host_info_length, uint64_t callback) {
|
||||
(void)host_info; (void)host_info_length;
|
||||
g_callback = (host_callback_t)(uintptr_t)callback;
|
||||
send_event("ready", "{\"ready\":true}");
|
||||
return 0;
|
||||
}
|
||||
EXPORT int PluginOnEvent(const char *event, int event_length, const char *payload, int payload_length) {
|
||||
if (event_length == 5 && memcmp(event, "state", 5) == 0 && payload && payload_length > 0) {
|
||||
char *json = (char *)malloc((size_t)payload_length + 1);
|
||||
if (!json) return 1;
|
||||
memcpy(json, payload, (size_t)payload_length);
|
||||
json[payload_length] = 0;
|
||||
parse_state(json);
|
||||
free(json);
|
||||
ensure_window();
|
||||
if (g_window) {
|
||||
SetTimer(g_window, 1, 33, NULL);
|
||||
InvalidateRect(g_window, NULL, FALSE);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
EXPORT void PluginOnUnload(void) {
|
||||
if (g_window) PostMessageW(g_window, WM_CLOSE, 0, 0);
|
||||
if (g_thread) { WaitForSingleObject(g_thread, 2000); CloseHandle(g_thread); g_thread = NULL; }
|
||||
g_callback = NULL;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
const WIN_LINES = [
|
||||
[0, 1, 2], [3, 4, 5], [6, 7, 8],
|
||||
[0, 3, 6], [1, 4, 7], [2, 5, 8],
|
||||
[0, 4, 8], [2, 4, 6],
|
||||
];
|
||||
const HISTORY_TTL_MS = 30 * 24 * 60 * 60 * 1000;
|
||||
|
||||
function caller(meta) {
|
||||
return {
|
||||
id: Number(meta.caller.id),
|
||||
username: String(meta.caller.username || `Player #${meta.caller.id}`).trim(),
|
||||
role: String(meta.caller.role || "user"),
|
||||
};
|
||||
}
|
||||
|
||||
function parseBoard(value) {
|
||||
try {
|
||||
const board = JSON.parse(value);
|
||||
return Array.isArray(board) && board.length === 9 ? board.map((cell) => cell === "X" || cell === "O" ? cell : "") : Array(9).fill("");
|
||||
} catch {
|
||||
return Array(9).fill("");
|
||||
}
|
||||
}
|
||||
|
||||
function getGame(ctx, gameId) {
|
||||
return ctx.db.prepare(`
|
||||
SELECT id, status, player_x_id AS playerXId, player_x_name AS playerXName,
|
||||
player_x_role AS playerXRole, player_o_id AS playerOId, player_o_name AS playerOName,
|
||||
player_o_role AS playerORole, client_id AS clientId, board, turn, winner,
|
||||
created_at AS createdAt, updated_at AS updatedAt
|
||||
FROM ttt_games WHERE id = ?
|
||||
`).get(gameId);
|
||||
}
|
||||
|
||||
function serialize(game, callerId) {
|
||||
if (!game) return null;
|
||||
const yourMark = Number(game.playerXId) === callerId ? "X" : Number(game.playerOId) === callerId ? "O" : null;
|
||||
let message = "Waiting for an opponent";
|
||||
if (game.status === "active") message = `${game.turn}'s turn`;
|
||||
else if (game.status === "won") message = `${game.winner} wins`;
|
||||
else if (game.status === "draw") message = "Draw";
|
||||
return {
|
||||
id: game.id,
|
||||
status: game.status,
|
||||
board: parseBoard(game.board),
|
||||
turn: game.turn,
|
||||
winner: game.winner || null,
|
||||
message,
|
||||
yourMark,
|
||||
playerX: { id: Number(game.playerXId), username: game.playerXName, role: game.playerXRole },
|
||||
playerO: game.clientId
|
||||
? { id: null, username: game.playerOName, role: "client", clientId: game.clientId }
|
||||
: game.playerOId == null ? null : { id: Number(game.playerOId), username: game.playerOName, role: game.playerORole },
|
||||
createdAt: Number(game.createdAt),
|
||||
updatedAt: Number(game.updatedAt),
|
||||
};
|
||||
}
|
||||
|
||||
function openChallenges(ctx, callerId) {
|
||||
return ctx.db.prepare(`
|
||||
SELECT id, player_x_id AS playerXId, player_x_name AS playerXName,
|
||||
player_x_role AS playerXRole, created_at AS createdAt
|
||||
FROM ttt_games
|
||||
WHERE status = 'open'
|
||||
ORDER BY created_at ASC
|
||||
LIMIT 30
|
||||
`).all().map((game) => ({
|
||||
id: game.id,
|
||||
username: game.playerXName,
|
||||
role: game.playerXRole,
|
||||
createdAt: Number(game.createdAt),
|
||||
canAccept: Number(game.playerXId) !== callerId,
|
||||
}));
|
||||
}
|
||||
|
||||
function currentGame(ctx, callerId) {
|
||||
return ctx.db.prepare(`
|
||||
SELECT id FROM ttt_games
|
||||
WHERE status IN ('open', 'active') AND (player_x_id = ? OR player_o_id = ?)
|
||||
ORDER BY updated_at DESC LIMIT 1
|
||||
`).get(callerId, callerId);
|
||||
}
|
||||
|
||||
function broadcast(ctx, gameId) {
|
||||
ctx.broadcast("changed", { gameId, at: Date.now() });
|
||||
}
|
||||
|
||||
function applyMove(ctx, game, mark, cell) {
|
||||
if (!game || game.status !== "active") throw new Error("Match is not active");
|
||||
if (game.turn !== mark) throw new Error("It is not your turn");
|
||||
if (!Number.isInteger(cell) || cell < 0 || cell > 8) throw new Error("Invalid cell");
|
||||
const board = parseBoard(game.board);
|
||||
if (board[cell]) throw new Error("Cell is already occupied");
|
||||
board[cell] = mark;
|
||||
const won = WIN_LINES.some((line) => line.every((index) => board[index] === mark));
|
||||
const draw = !won && board.every(Boolean);
|
||||
const status = won ? "won" : draw ? "draw" : "active";
|
||||
const turn = mark === "X" ? "O" : "X";
|
||||
ctx.db.prepare(`
|
||||
UPDATE ttt_games SET board = ?, turn = ?, status = ?, winner = ?, updated_at = ?
|
||||
WHERE id = ? AND status = 'active'
|
||||
`).run(JSON.stringify(board), turn, status, won ? mark : null, Date.now(), game.id);
|
||||
broadcast(ctx, game.id);
|
||||
return getGame(ctx, game.id);
|
||||
}
|
||||
|
||||
export default {
|
||||
setup(ctx) {
|
||||
ctx.db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS ttt_games (
|
||||
id TEXT PRIMARY KEY,
|
||||
status TEXT NOT NULL,
|
||||
player_x_id INTEGER NOT NULL,
|
||||
player_x_name TEXT NOT NULL,
|
||||
player_x_role TEXT NOT NULL,
|
||||
player_o_id INTEGER,
|
||||
player_o_name TEXT,
|
||||
player_o_role TEXT,
|
||||
client_id TEXT,
|
||||
board TEXT NOT NULL,
|
||||
turn TEXT NOT NULL,
|
||||
winner TEXT,
|
||||
created_at INTEGER NOT NULL,
|
||||
updated_at INTEGER NOT NULL
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS ttt_games_status ON ttt_games(status, updated_at);
|
||||
`);
|
||||
const columns = ctx.db.prepare("PRAGMA table_info(ttt_games)").all();
|
||||
if (!columns.some((column) => column.name === "client_id")) {
|
||||
ctx.db.exec("ALTER TABLE ttt_games ADD COLUMN client_id TEXT");
|
||||
}
|
||||
ctx.db.prepare("DELETE FROM ttt_games WHERE status NOT IN ('open', 'active') AND updated_at < ?")
|
||||
.run(Date.now() - HISTORY_TTL_MS);
|
||||
ctx.log.info("Tic Tac Toe multiplayer ready");
|
||||
},
|
||||
|
||||
onEvent(ctx, clientId, event, payload) {
|
||||
if (event !== "move") return;
|
||||
const gameId = typeof payload?.gameId === "string" ? payload.gameId : "";
|
||||
const game = getGame(ctx, gameId);
|
||||
if (!game || game.clientId !== clientId) return;
|
||||
try {
|
||||
applyMove(ctx, game, "O", Number(payload?.cell));
|
||||
} catch (error) {
|
||||
ctx.log.warn(`Rejected client move from ${clientId}: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
},
|
||||
|
||||
rpc: {
|
||||
snapshot(ctx, params, meta) {
|
||||
const user = caller(meta);
|
||||
let game = null;
|
||||
const requestedId = typeof params?.gameId === "string" ? params.gameId : "";
|
||||
if (requestedId) {
|
||||
const requested = getGame(ctx, requestedId);
|
||||
if (requested && (Number(requested.playerXId) === user.id || Number(requested.playerOId) === user.id)) game = requested;
|
||||
}
|
||||
if (!game) {
|
||||
const current = currentGame(ctx, user.id);
|
||||
if (current) game = getGame(ctx, current.id);
|
||||
}
|
||||
return { game: serialize(game, user.id), challenges: openChallenges(ctx, user.id) };
|
||||
},
|
||||
|
||||
createChallenge(ctx, _params, meta) {
|
||||
const user = caller(meta);
|
||||
const active = currentGame(ctx, user.id);
|
||||
if (active) return { game: serialize(getGame(ctx, active.id), user.id) };
|
||||
const id = crypto.randomUUID();
|
||||
const now = Date.now();
|
||||
ctx.db.prepare(`
|
||||
INSERT INTO ttt_games
|
||||
(id, status, player_x_id, player_x_name, player_x_role, board, turn, created_at, updated_at)
|
||||
VALUES (?, 'open', ?, ?, ?, ?, 'X', ?, ?)
|
||||
`).run(id, user.id, user.username, user.role, JSON.stringify(Array(9).fill("")), now, now);
|
||||
broadcast(ctx, id);
|
||||
return { game: serialize(getGame(ctx, id), user.id) };
|
||||
},
|
||||
|
||||
startClientMatch(ctx, params, meta) {
|
||||
const user = caller(meta);
|
||||
const clientId = typeof params?.clientId === "string" ? params.clientId.trim() : "";
|
||||
if (!clientId || clientId.length > 256) throw new Error("Invalid client");
|
||||
const clientName = typeof params?.clientName === "string" && params.clientName.trim()
|
||||
? params.clientName.trim().slice(0, 96)
|
||||
: clientId;
|
||||
const existing = ctx.db.prepare(`
|
||||
SELECT id FROM ttt_games
|
||||
WHERE status = 'active' AND player_x_id = ? AND client_id = ?
|
||||
ORDER BY updated_at DESC LIMIT 1
|
||||
`).get(user.id, clientId);
|
||||
if (existing) return { game: serialize(getGame(ctx, existing.id), user.id) };
|
||||
const active = currentGame(ctx, user.id);
|
||||
if (active) {
|
||||
const activeGame = getGame(ctx, active.id);
|
||||
if (activeGame.status === "open") {
|
||||
ctx.db.prepare("UPDATE ttt_games SET status = 'cancelled', updated_at = ? WHERE id = ?")
|
||||
.run(Date.now(), active.id);
|
||||
} else {
|
||||
throw new Error("Finish your current match first");
|
||||
}
|
||||
}
|
||||
const id = crypto.randomUUID();
|
||||
const now = Date.now();
|
||||
ctx.db.prepare(`
|
||||
INSERT INTO ttt_games
|
||||
(id, status, player_x_id, player_x_name, player_x_role, player_o_name,
|
||||
player_o_role, client_id, board, turn, created_at, updated_at)
|
||||
VALUES (?, 'active', ?, ?, ?, ?, 'client', ?, ?, 'X', ?, ?)
|
||||
`).run(id, user.id, user.username, user.role, clientName, clientId, JSON.stringify(Array(9).fill("")), now, now);
|
||||
broadcast(ctx, id);
|
||||
return { game: serialize(getGame(ctx, id), user.id) };
|
||||
},
|
||||
|
||||
acceptChallenge(ctx, params, meta) {
|
||||
const user = caller(meta);
|
||||
const gameId = typeof params?.gameId === "string" ? params.gameId : "";
|
||||
const active = currentGame(ctx, user.id);
|
||||
if (active) throw new Error("Finish your current match first");
|
||||
const updated = ctx.db.prepare(`
|
||||
UPDATE ttt_games
|
||||
SET status = 'active', player_o_id = ?, player_o_name = ?, player_o_role = ?, updated_at = ?
|
||||
WHERE id = ? AND status = 'open' AND player_x_id != ?
|
||||
`).run(user.id, user.username, user.role, Date.now(), gameId, user.id);
|
||||
if (updated.changes !== 1) throw new Error("Challenge is no longer available");
|
||||
broadcast(ctx, gameId);
|
||||
return { game: serialize(getGame(ctx, gameId), user.id) };
|
||||
},
|
||||
|
||||
move(ctx, params, meta) {
|
||||
const user = caller(meta);
|
||||
const gameId = typeof params?.gameId === "string" ? params.gameId : "";
|
||||
const game = getGame(ctx, gameId);
|
||||
const mark = Number(game?.playerXId) === user.id ? "X" : Number(game?.playerOId) === user.id ? "O" : "";
|
||||
if (!mark) throw new Error("You are not in this match");
|
||||
return { game: serialize(applyMove(ctx, game, mark, Number(params?.cell)), user.id) };
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
body { margin: 0; min-height: 100vh; background: #080d16; color: #e5e7eb; font-family: Inter, system-ui, sans-serif; }
|
||||
.ttt-shell { max-width: 760px; margin: 0 auto; padding: 16px; }
|
||||
.ttt-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
|
||||
.ttt-header h2 { margin: 0; font-size: 32px; }
|
||||
.ttt-header p:not(.ttt-kicker) { margin: 4px 0 0; color: #94a3b8; font-size: 13px; }
|
||||
.ttt-kicker { margin: 0 0 4px; color: #38bdf8; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
|
||||
.ttt-header button,
|
||||
.ttt-lobby button { border: 1px solid #475569; border-radius: 0; padding: 8px 10px; background: #111827; color: #e5e7eb; cursor: pointer; }
|
||||
.ttt-header button:hover,
|
||||
.ttt-lobby button:hover { background: #1e293b; }
|
||||
.ttt-game { display: flex; flex-direction: column; align-items: center; }
|
||||
.ttt-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; width: min(100%, 520px); margin-bottom: 10px; color: #94a3b8; font-size: 12px; }
|
||||
.ttt-match strong { color: #e5e7eb; text-align: center; }
|
||||
.ttt-match span:last-child { text-align: right; }
|
||||
.ttt-frame { border: 8px solid #1e293b; background: #0f172a; padding: 8px; }
|
||||
.ttt-board { display: grid; grid-template-columns: repeat(3, 110px); gap: 2px; background: #334155; }
|
||||
.ttt-cell { width: 110px; height: 110px; border: 0; border-radius: 0; background: #111827; color: #e5e7eb; font-size: 58px; font-weight: 700; cursor: pointer; }
|
||||
.ttt-cell:hover:not(:disabled) { background: #1e293b; }
|
||||
.ttt-cell.mark-x { color: #38bdf8; }
|
||||
.ttt-cell.mark-o { color: #fb7185; }
|
||||
.ttt-cell:disabled { cursor: default; }
|
||||
.ttt-status { min-height: 18px; margin: 8px 0 24px; color: #94a3b8; font-size: 13px; text-align: center; }
|
||||
.ttt-lobby { box-sizing: border-box; width: min(100%, 520px); margin: 0 auto; padding: 12px; border: 1px solid #334155; background: #0c1420; }
|
||||
.ttt-lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.ttt-lobby h3 { margin: 0; font-size: 18px; }
|
||||
.ttt-challenges { margin-top: 10px; }
|
||||
.ttt-challenge { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid #1e293b; }
|
||||
.ttt-challenge span { color: #cbd5e1; font-size: 13px; }
|
||||
.ttt-empty { color: #94a3b8; font-size: 13px; }
|
||||
.ttt-confetti { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
|
||||
.ttt-confetti i { position: absolute; top: -18px; width: 10px; height: 16px; animation: ttt-confetti-fall 1.2s linear forwards; }
|
||||
@keyframes ttt-confetti-fall {
|
||||
from { transform: translateY(-5vh) rotate(0deg); }
|
||||
to { transform: translateY(110vh) rotate(720deg); }
|
||||
}
|
||||
@media (max-width: 440px) {
|
||||
.ttt-shell { padding: 8px; }
|
||||
.ttt-header { align-items: flex-start; flex-direction: column; }
|
||||
.ttt-board { grid-template-columns: repeat(3, 82px); }
|
||||
.ttt-cell { width: 82px; height: 82px; font-size: 44px; }
|
||||
.ttt-match { grid-template-columns: 1fr; gap: 4px; text-align: center; }
|
||||
.ttt-match span:last-child { text-align: center; }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tic Tac Toe</title>
|
||||
<link rel="stylesheet" href="tic-tac-toe.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="ttt-shell">
|
||||
<header class="ttt-header">
|
||||
<div>
|
||||
<p class="ttt-kicker">SERVER ARCADE</p>
|
||||
<h2>Tic Tac Toe</h2>
|
||||
<p class="ttt-subtitle">Challenge another signed-in user.</p>
|
||||
</div>
|
||||
<button id="ttt-new" type="button">Create challenge</button>
|
||||
</header>
|
||||
|
||||
<section class="ttt-game">
|
||||
<div class="ttt-match" aria-live="polite">
|
||||
<span id="ttt-player-x">X · Waiting</span>
|
||||
<strong id="ttt-turn">No active match</strong>
|
||||
<span id="ttt-player-o">O · Waiting</span>
|
||||
</div>
|
||||
<div class="ttt-frame">
|
||||
<div id="ttt-board" class="ttt-board" role="grid" aria-label="Tic Tac Toe board"></div>
|
||||
</div>
|
||||
<p id="ttt-status" class="ttt-status" role="status">Loading lobby…</p>
|
||||
</section>
|
||||
|
||||
<section class="ttt-lobby">
|
||||
<div class="ttt-lobby-heading">
|
||||
<div>
|
||||
<p class="ttt-kicker">OPEN CHALLENGES</p>
|
||||
<h3>Lobby</h3>
|
||||
</div>
|
||||
<button id="ttt-refresh" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="ttt-challenges" class="ttt-challenges"></div>
|
||||
<p id="ttt-empty" class="ttt-empty">No open challenges.</p>
|
||||
</section>
|
||||
</main>
|
||||
<script src="tic-tac-toe.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,226 @@
|
||||
(() => {
|
||||
const board = document.getElementById("ttt-board");
|
||||
if (!board || board.dataset.ready === "true") return;
|
||||
board.dataset.ready = "true";
|
||||
|
||||
const statusElement = document.getElementById("ttt-status");
|
||||
const turnElement = document.getElementById("ttt-turn");
|
||||
const playerXElement = document.getElementById("ttt-player-x");
|
||||
const playerOElement = document.getElementById("ttt-player-o");
|
||||
const challengesElement = document.getElementById("ttt-challenges");
|
||||
const emptyElement = document.getElementById("ttt-empty");
|
||||
const newButton = document.getElementById("ttt-new");
|
||||
const refreshButton = document.getElementById("ttt-refresh");
|
||||
const lobbyElement = document.querySelector(".ttt-lobby");
|
||||
const clientId = new URLSearchParams(window.location.search).get("clientId")?.trim() || "";
|
||||
const directClientMode = Boolean(clientId);
|
||||
if (directClientMode) {
|
||||
lobbyElement.hidden = true;
|
||||
newButton.textContent = "New match";
|
||||
const subtitle = document.querySelector(".ttt-subtitle");
|
||||
if (subtitle) subtitle.textContent = `Playing against ${clientId}.`;
|
||||
}
|
||||
|
||||
let celebratedGame = "";
|
||||
let currentGame = null;
|
||||
let busy = false;
|
||||
const cells = [];
|
||||
|
||||
async function rpc(method, params = {}) {
|
||||
const response = await fetch("/api/plugins/tic-tac-toe/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;
|
||||
}
|
||||
|
||||
async function syncClient(game) {
|
||||
if (!directClientMode || !game) return;
|
||||
const response = await fetch(`/api/clients/${encodeURIComponent(clientId)}/plugins/tic-tac-toe/event`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ event: "state", payload: game }),
|
||||
});
|
||||
if (!response.ok) throw new Error(`Client sync failed: ${response.statusText}`);
|
||||
}
|
||||
|
||||
function celebrateWinner(game) {
|
||||
const celebrationId = game?.status === "won" && game.winner === game.yourMark
|
||||
? `${game.id}:${game.winner}`
|
||||
: "";
|
||||
if (!celebrationId || celebrationId === celebratedGame) return;
|
||||
celebratedGame = celebrationId;
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
const colors = game.winner === "X"
|
||||
? ["#38bdf8", "#bae6fd", "#ffffff"]
|
||||
: ["#fb7185", "#fecdd3", "#ffffff"];
|
||||
const layer = document.createElement("div");
|
||||
layer.className = "ttt-confetti";
|
||||
layer.setAttribute("aria-hidden", "true");
|
||||
for (let index = 0; index < 72; index += 1) {
|
||||
const piece = document.createElement("i");
|
||||
piece.style.left = `${(index * 37) % 100}%`;
|
||||
piece.style.background = colors[index % colors.length];
|
||||
piece.style.animationDelay = `${(index % 12) * 35}ms`;
|
||||
piece.style.animationDuration = `${900 + (index % 7) * 90}ms`;
|
||||
layer.append(piece);
|
||||
}
|
||||
document.body.append(layer);
|
||||
window.setTimeout(() => layer.remove(), 1800);
|
||||
}
|
||||
|
||||
function createBoard() {
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (let index = 0; index < 9; index += 1) {
|
||||
const cell = document.createElement("button");
|
||||
cell.type = "button";
|
||||
cell.className = "ttt-cell";
|
||||
cell.dataset.cell = String(index);
|
||||
cell.setAttribute("role", "gridcell");
|
||||
cell.setAttribute("aria-label", `Cell ${index + 1}`);
|
||||
cells.push(cell);
|
||||
fragment.append(cell);
|
||||
}
|
||||
board.append(fragment);
|
||||
}
|
||||
|
||||
function renderGame(game) {
|
||||
currentGame = game || null;
|
||||
const values = game?.board || Array(9).fill("");
|
||||
const canMove = game?.status === "active" && game.yourMark === game.turn;
|
||||
cells.forEach((cell, index) => {
|
||||
const mark = values[index] || "";
|
||||
cell.textContent = mark;
|
||||
cell.className = `ttt-cell${mark ? ` mark-${mark.toLowerCase()}` : ""}`;
|
||||
cell.disabled = !canMove || Boolean(mark);
|
||||
});
|
||||
|
||||
playerXElement.textContent = `X · ${game?.playerX?.username || "Waiting"}`;
|
||||
playerOElement.textContent = `O · ${game?.playerO?.username || "Waiting"}`;
|
||||
if (!game) {
|
||||
turnElement.textContent = "No active match";
|
||||
statusElement.textContent = "Create or accept a challenge to play.";
|
||||
return;
|
||||
}
|
||||
turnElement.textContent = game.message;
|
||||
if (game.status === "open") statusElement.textContent = "Challenge created. Waiting for another user.";
|
||||
else if (game.status === "active") statusElement.textContent = canMove ? `Your turn as ${game.yourMark}.` : `Waiting for ${game.turn}.`;
|
||||
else if (game.status === "won") statusElement.textContent = game.winner === game.yourMark ? "You won." : "You lost.";
|
||||
else statusElement.textContent = "The match ended in a draw.";
|
||||
celebrateWinner(game);
|
||||
}
|
||||
|
||||
function renderChallenges(challenges) {
|
||||
challengesElement.replaceChildren();
|
||||
const rows = Array.isArray(challenges) ? challenges : [];
|
||||
emptyElement.hidden = rows.length > 0;
|
||||
for (const challenge of rows) {
|
||||
const row = document.createElement("div");
|
||||
const label = document.createElement("span");
|
||||
row.className = "ttt-challenge";
|
||||
label.textContent = `${challenge.username} · ${challenge.role}`;
|
||||
row.append(label);
|
||||
if (challenge.canAccept) {
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.textContent = "Accept";
|
||||
button.addEventListener("click", () => void acceptChallenge(challenge.id));
|
||||
row.append(button);
|
||||
} else {
|
||||
const waiting = document.createElement("span");
|
||||
waiting.textContent = "Your challenge";
|
||||
row.append(waiting);
|
||||
}
|
||||
challengesElement.append(row);
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const result = await rpc("snapshot", { gameId: currentGame?.id });
|
||||
renderGame(result.game);
|
||||
renderChallenges(result.challenges);
|
||||
if (directClientMode && result.game) await syncClient(result.game);
|
||||
} catch (error) {
|
||||
statusElement.textContent = `Refresh failed: ${error instanceof Error ? error.message : String(error)}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function startClientMatch() {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
newButton.disabled = true;
|
||||
try {
|
||||
const result = await rpc("startClientMatch", { clientId, clientName: clientId });
|
||||
renderGame(result.game);
|
||||
await syncClient(result.game);
|
||||
} catch (error) {
|
||||
statusElement.textContent = `Could not start client match: ${error instanceof Error ? error.message : String(error)}`;
|
||||
} finally {
|
||||
busy = false;
|
||||
newButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createChallenge() {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
newButton.disabled = true;
|
||||
try {
|
||||
const result = await rpc("createChallenge");
|
||||
renderGame(result.game);
|
||||
await refresh();
|
||||
} catch (error) {
|
||||
statusElement.textContent = `Could not create challenge: ${error instanceof Error ? error.message : String(error)}`;
|
||||
} finally {
|
||||
busy = false;
|
||||
newButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function acceptChallenge(gameId) {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
try {
|
||||
const result = await rpc("acceptChallenge", { gameId });
|
||||
renderGame(result.game);
|
||||
await refresh();
|
||||
} catch (error) {
|
||||
statusElement.textContent = `Could not accept challenge: ${error instanceof Error ? error.message : String(error)}`;
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function makeMove(cell) {
|
||||
if (busy || !currentGame) return;
|
||||
busy = true;
|
||||
try {
|
||||
const result = await rpc("move", { gameId: currentGame.id, cell });
|
||||
renderGame(result.game);
|
||||
await syncClient(result.game);
|
||||
} catch (error) {
|
||||
statusElement.textContent = `Move rejected: ${error instanceof Error ? error.message : String(error)}`;
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
board.addEventListener("click", (event) => {
|
||||
const cell = event.target.closest(".ttt-cell");
|
||||
if (cell) void makeMove(Number(cell.dataset.cell));
|
||||
});
|
||||
newButton.addEventListener("click", () => void (directClientMode ? startClientMatch() : createChallenge()));
|
||||
refreshButton.addEventListener("click", () => void refresh());
|
||||
|
||||
try {
|
||||
const stream = new EventSource("/api/plugins/tic-tac-toe/stream");
|
||||
stream.addEventListener("changed", () => void refresh());
|
||||
} catch {}
|
||||
|
||||
createBoard();
|
||||
void (directClientMode ? startClientMatch() : refresh());
|
||||
})();
|
||||
Reference in New Issue
Block a user