Skip to content

E
el3ab-Player
Commit 6d2431c7 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

feat: implement full backgammon game — rules engine, bot AI, canvas renderer, multiplayer 

- Port backgammonjs-master rules to ES modules (standard, gul bara, tapa variants)
- 3-tier bot AI (easy/medium/hard) with positional evaluation
- Doubling cube with Crawford rule for match play
- Canvas board renderer with piece stacking, hit/bear-off animations
- Room scene with variant/length/difficulty selection
- Full multiplayer via backgammon-match.php (queue, move, heartbeat, leave)
- Realtime subscription for backgammon_matches table
- Emote panel + phrase system (reuses Ludo pattern)
- 7 new SFX slots in branding admin (dice, move, hit, bear, double, win)
- Match system (first-to-N, gammon/backgammon scoring multipliers)
- Wired into engine.js, play table, queue routing, match-session recovery
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent e4824004
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2879 additions and 9 deletions
admin/branding.php
View file @ 6d2431c7
...@@ -510,6 +510,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) { ...@@ -510,6 +510,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) {
['slot' => 'sfx_piece_home', 'label' => '🏠 وصول البيت (Piece Home)', 'hint' => 'قطعة وصلت المركز — لودو'], ['slot' => 'sfx_piece_home', 'label' => '🏠 وصول البيت (Piece Home)', 'hint' => 'قطعة وصلت المركز — لودو'],
['slot' => 'sfx_turn_start', 'label' => '🔔 دورك (Turn Start)', 'hint' => 'تنبيه بدء دورك — لودو/دومينو'], ['slot' => 'sfx_turn_start', 'label' => '🔔 دورك (Turn Start)', 'hint' => 'تنبيه بدء دورك — لودو/دومينو'],
['slot' => 'sfx_emote', 'label' => '💬 إيموت (Emote)', 'hint' => 'إرسال إيموجي/عبارة اجتماعية'], ['slot' => 'sfx_emote', 'label' => '💬 إيموت (Emote)', 'hint' => 'إرسال إيموجي/عبارة اجتماعية'],
['slot' => 'sfx_bg_dice_roll', 'label' => '🎲 نرد طاولة (BG Dice Roll)', 'hint' => 'رمي النرد — طاولة/باكگمون'],
['slot' => 'sfx_bg_piece_move', 'label' => '♟️ حركة قطعة (BG Move)', 'hint' => 'تحريك قطعة على البورد — طاولة'],
['slot' => 'sfx_bg_piece_hit', 'label' => '💥 أكل قطعة (BG Hit)', 'hint' => 'ضرب قطعة الخصم للبار — طاولة'],
['slot' => 'sfx_bg_bear_off', 'label' => '✅ تطليع (BG Bear Off)', 'hint' => 'إخراج قطعة من اللوح — طاولة'],
['slot' => 'sfx_bg_double', 'label' => '⬆️ مضاعفة (BG Double)', 'hint' => 'عرض مكعب المضاعفة — طاولة'],
['slot' => 'sfx_bg_win_game', 'label' => '🎉 فوز جولة (BG Win Game)', 'hint' => 'فوز بجولة واحدة — طاولة'],
['slot' => 'sfx_bg_win_match', 'label' => '🏆 فوز ماتش (BG Win Match)', 'hint' => 'فوز بالماتش كامل — طاولة'],
]; ];
foreach ($soundSlots as $s): foreach ($soundSlots as $s):
$current = $theme['assets'][$s['slot']] ?? null; $current = $theme['assets'][$s['slot']] ?? null;
......
api/backgammon-match.php 0 → 100644
View file @ 6d2431c7
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(200); exit; }
require_once __DIR__ . '/../includes/supabase.php';
require_once __DIR__ . '/../includes/auth.php';
$token = requireAuth();
$userId = getUserId($token);
$input = getInput();
$action = $input['action'] ?? '';
switch ($action) {
case 'queue': handleQueue($userId, $input); break;
case 'status': handleStatus($userId); break;
case 'move': handleMove($userId, $input); break;
case 'get': handleGet($userId, $input); break;
case 'complete': handleComplete($userId, $input); break;
case 'heartbeat': handleBgHeartbeat($userId, $input); break;
case 'leave': handleBgLeave($userId, $input); break;
case 'emote': handleEmote($userId, $input); break;
default: jsonError('Invalid action');
}
function handleQueue(string $userId, array $input): void {
$sdb = supabaseService();
$variant = $input['variant'] ?? 'standard';
$matchLength = intval($input['match_length'] ?? 3);
// Clean old queue entries
$sdb->delete('backgammon_queue', ['user_id' => 'eq.' . $userId]);
// Search for opponent
$searchUrl = SUPABASE_REST . '/backgammon_queue'
. '?user_id=neq.' . $userId
. '&match_id=is.null'
. '&variant=eq.' . $variant
. '&select=id,user_id'
. '&limit=1';
$ch = curl_init($searchUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'apikey: ' . SUPABASE_SERVICE_KEY,
'Authorization: Bearer ' . SUPABASE_SERVICE_KEY,
'Content-Type: application/json'
]);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$result = curl_exec($ch);
curl_close($ch);
$opponents = json_decode($result, true);
if (!empty($opponents) && isset($opponents[0])) {
$opponent = $opponents[0];
$players = [$opponent['user_id'], $userId];
// Randomly assign colors
$whiteIdx = rand(0, 1);
$colors = [$whiteIdx === 0 ? 'white' : 'black', $whiteIdx === 1 ? 'white' : 'black'];
$matchData = [
'status' => 'in_progress',
'players' => json_encode($players),
'colors' => json_encode($colors),
'variant' => $variant,
'match_length' => $matchLength,
'scores' => json_encode([0, 0]),
'current_turn' => $whiteIdx,
'game_state' => json_encode([
'variant' => $variant,
'match_length' => $matchLength,
'game_number' => 1,
'cube_value' => 1,
'cube_owner' => null,
'crawford' => false
]),
'host_id' => $opponent['user_id'],
'created_by' => $userId
];
$match = $sdb->insert('backgammon_matches', $matchData);
$matchId = $match[0]['id'] ?? $match['id'] ?? null;
if ($matchId) {
$sdb->update('backgammon_queue', ['match_id' => $matchId], ['id' => 'eq.' . $opponent['id']]);
jsonResponse([
'match_id' => $matchId,
'player_index' => 1,
'players' => $players,
'color' => $colors[1]
]);
return;
}
}
// No opponent found — queue up
$sdb->insert('backgammon_queue', [
'user_id' => $userId,
'variant' => $variant,
'match_length' => $matchLength
]);
jsonResponse(['queued' => true]);
}
function handleStatus(string $userId): void {
$sdb = supabaseService();
$entry = $sdb->get('backgammon_queue', [
'user_id' => 'eq.' . $userId,
'select' => 'id,match_id',
'limit' => 1
]);
if (!empty($entry) && !isset($entry['error']) && !empty($entry[0]['match_id'])) {
$matchId = $entry[0]['match_id'];
$sdb->delete('backgammon_queue', ['user_id' => 'eq.' . $userId]);
$matches = $sdb->get('backgammon_matches', ['id' => 'eq.' . $matchId, 'select' => 'players,colors', 'limit' => 1]);
$players = [];
$colors = [];
if (!empty($matches) && !isset($matches['error'])) {
$players = json_decode($matches[0]['players'] ?? '[]', true);
$colors = json_decode($matches[0]['colors'] ?? '[]', true);
}
$playerIndex = array_search($userId, $players);
jsonResponse([
'match_id' => $matchId,
'player_index' => $playerIndex !== false ? $playerIndex : 0,
'players' => $players,
'color' => $colors[$playerIndex] ?? 'white'
]);
return;
}
jsonResponse(['waiting' => true]);
}
function handleMove(string $userId, array $input): void {
$matchId = $input['match_id'] ?? '';
if (!$matchId) jsonError('match_id required');
$sdb = supabaseService();
$update = [];
if (isset($input['game_state'])) {
$gs = is_string($input['game_state']) ? $input['game_state'] : json_encode($input['game_state']);
$update['game_state'] = $gs;
}
if (isset($input['match_state'])) {
$ms = is_string($input['match_state']) ? json_decode($input['match_state'], true) : $input['match_state'];
if (isset($ms['scores'])) $update['scores'] = json_encode($ms['scores']);
if (isset($ms['gameNumber'])) $update['game_number'] = $ms['gameNumber'];
}
if (isset($input['cube'])) {
$update['cube_state'] = is_string($input['cube']) ? $input['cube'] : json_encode($input['cube']);
}
if (isset($input['current_turn'])) {
$update['current_turn'] = intval($input['current_turn']);
}
$update['last_activity'] = date('c');
$update['updated_at'] = date('c');
if (!empty($update)) {
$sdb->update('backgammon_matches', $update, ['id' => 'eq.' . $matchId]);
}
jsonResponse(['success' => true]);
}
function handleGet(string $userId, array $input): void {
$matchId = $input['match_id'] ?? ($_GET['match_id'] ?? '');
if (!$matchId) jsonError('match_id required');
$sdb = supabaseService();
$matches = $sdb->get('backgammon_matches', ['id' => 'eq.' . $matchId, 'select' => '*', 'limit' => 1]);
if (empty($matches) || isset($matches['error'])) jsonError('Not found', 404);
$match = $matches[0];
// Server-side turn timeout (30s)
if ($match['status'] === 'in_progress') {
$timeout = supabaseRpc('enforce_turn_timeout', [
'p_game_key' => 'backgammon',
'p_match_id' => $matchId,
'p_timeout_seconds' => 30
]);
if (!empty($timeout['timeout'])) {
$match['_turn_timed_out'] = true;
$match['_timeout_player'] = $timeout['player_index'] ?? null;
}
}
jsonResponse($match);
}
function handleComplete(string $userId, array $input): void {
$matchId = $input['match_id'] ?? '';
if (!$matchId) jsonError('match_id required');
$winner = $input['winner'] ?? null;
$reason = $input['reason'] ?? 'normal';
$sdb = supabaseService();
$sdb->update('backgammon_matches', [
'status' => 'completed',
'completed_at' => date('c'),
'winner_id' => $winner,
'result' => $reason,
'updated_at' => date('c')
], ['id' => 'eq.' . $matchId]);
$result = supabaseRpc('complete_match', [
'p_game_key' => 'backgammon',
'p_match_id' => $matchId,
'p_winners' => json_encode([$winner]),
'p_reason' => $reason
]);
jsonResponse($result ?: ['success' => true]);
}
function handleBgHeartbeat(string $userId, array $input): void {
$matchId = $input['match_id'] ?? '';
if (!$matchId) jsonError('match_id required');
$result = supabaseRpc('match_heartbeat', [
'p_game_key' => 'backgammon',
'p_match_id' => $matchId,
'p_player_id' => $userId
]);
jsonResponse($result ?: ['status' => 'ok']);
}
function handleBgLeave(string $userId, array $input): void {
$matchId = $input['match_id'] ?? '';
if (!$matchId) jsonError('match_id required');
$sdb = supabaseService();
$matches = $sdb->get('backgammon_matches', ['id' => 'eq.' . $matchId, 'select' => 'players,game_state', 'limit' => 1]);
if (empty($matches) || isset($matches['error'])) jsonError('Not found');
$gameState = json_decode($matches[0]['game_state'] ?? '{}', true);
$gameState['left_by'] = $userId;
$gameState['left_at'] = date('c');
$sdb->update('backgammon_matches', [
'game_state' => json_encode($gameState),
'status' => 'abandoned',
'updated_at' => date('c')
], ['id' => 'eq.' . $matchId]);
jsonResponse(['success' => true]);
}
function handleEmote(string $userId, array $input): void {
$matchId = $input['match_id'] ?? '';
if (!$matchId) jsonError('match_id required');
$sdb = supabaseService();
$sdb->update('backgammon_matches', [
'last_emote' => json_encode([
'user_id' => $userId,
'emote' => $input['emote'] ?? '',
'at' => date('c')
]),
'updated_at' => date('c')
], ['id' => 'eq.' . $matchId]);
jsonResponse(['success' => true]);
}
public/js/core/audio.js
View file @ 6d2431c7
...@@ -26,7 +26,14 @@ const sounds = { ...@@ -26,7 +26,14 @@ const sounds = {
sfx_boost: { src: null, freq: 880, dur: 0.25 }, sfx_boost: { src: null, freq: 880, dur: 0.25 },
sfx_piece_home: { src: null, freq: 660, dur: 0.35 }, sfx_piece_home: { src: null, freq: 660, dur: 0.35 },
sfx_turn_start: { src: null, freq: 520, dur: 0.15 }, sfx_turn_start: { src: null, freq: 520, dur: 0.15 },
sfx_emote: { src: null, freq: 440, dur: 0.08 } sfx_emote: { src: null, freq: 440, dur: 0.08 },
sfx_bg_dice_roll: { src: null, freq: 180, dur: 0.4 },
sfx_bg_piece_move: { src: null, freq: 400, dur: 0.06 },
sfx_bg_piece_hit: { src: null, freq: 150, dur: 0.2 },
sfx_bg_bear_off: { src: null, freq: 600, dur: 0.25 },
sfx_bg_double: { src: null, freq: 120, dur: 0.3 },
sfx_bg_win_game: { src: null, freq: 523, dur: 0.5 },
sfx_bg_win_match: { src: null, freq: 660, dur: 0.7 }
}; };
function getCtx() { function getCtx() {
......
public/js/core/match-session.js
View file @ 6d2431c7
...@@ -92,7 +92,7 @@ function startPolling() { ...@@ -92,7 +92,7 @@ function startPolling() {
if (currentSession.isBackground) return; // Don't poll when tab is hidden if (currentSession.isBackground) return; // Don't poll when tab is hidden
try { try {
const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : 'game.php'; const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : currentSession.gameType === 'backgammon' ? 'backgammon-match.php' : 'game.php';
const data = await net.post(endpoint, { const data = await net.post(endpoint, {
action: 'get', action: 'get',
match_id: currentSession.matchId match_id: currentSession.matchId
...@@ -128,7 +128,7 @@ function startPinging() { ...@@ -128,7 +128,7 @@ function startPinging() {
currentSession.pingTimer = setInterval(async () => { currentSession.pingTimer = setInterval(async () => {
if (!currentSession || !currentSession.isActive) return; if (!currentSession || !currentSession.isActive) return;
try { try {
const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : 'game.php'; const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : currentSession.gameType === 'backgammon' ? 'backgammon-match.php' : 'game.php';
await net.post(endpoint, { await net.post(endpoint, {
action: 'heartbeat', action: 'heartbeat',
match_id: currentSession.matchId match_id: currentSession.matchId
...@@ -171,7 +171,7 @@ function setupVisibilityHandler() { ...@@ -171,7 +171,7 @@ function setupVisibilityHandler() {
// Immediately fetch latest state // Immediately fetch latest state
if (currentSession.onOpponentMove) { if (currentSession.onOpponentMove) {
const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : 'game.php'; const endpoint = currentSession.gameType === 'ludo' ? 'ludo-match.php' : currentSession.gameType === 'domino' ? 'domino-match.php' : currentSession.gameType === 'backgammon' ? 'backgammon-match.php' : 'game.php';
net.post(endpoint, { action: 'get', match_id: currentSession.matchId }) net.post(endpoint, { action: 'get', match_id: currentSession.matchId })
.then(data => { .then(data => {
if (data && !data.error) { if (data && !data.error) {
......
public/js/core/realtime.js
View file @ 6d2431c7
...@@ -102,6 +102,11 @@ export function subscribeLudoMatch(matchId, callback) { ...@@ -102,6 +102,11 @@ export function subscribeLudoMatch(matchId, callback) {
return subscribe('ludo_matches', `id=eq.${matchId}`, callback); return subscribe('ludo_matches', `id=eq.${matchId}`, callback);
} }
// Subscribe to a specific backgammon match row
export function subscribeBackgammonMatch(matchId, callback) {
return subscribe('backgammon_matches', `id=eq.${matchId}`, callback);
}
// Subscribe to matchmaking queue for match found // Subscribe to matchmaking queue for match found
export function subscribeQueue(playerId, callback) { export function subscribeQueue(playerId, callback) {
return subscribe('matchmaking_queue', `player_id=eq.${playerId}`, callback); return subscribe('matchmaking_queue', `player_id=eq.${playerId}`, callback);
......
public/js/engine.js
View file @ 6d2431c7
...@@ -57,7 +57,7 @@ async function boot() { ...@@ -57,7 +57,7 @@ async function boot() {
if (recoverable) { if (recoverable) {
// Verify match is still running on server before reconnecting // Verify match is still running on server before reconnecting
try { try {
const endpoint = recoverable.gameType === 'ludo' ? 'ludo-match.php' : recoverable.gameType === 'domino' ? 'domino-match.php' : 'game.php'; const endpoint = recoverable.gameType === 'ludo' ? 'ludo-match.php' : recoverable.gameType === 'domino' ? 'domino-match.php' : recoverable.gameType === 'backgammon' ? 'backgammon-match.php' : 'game.php';
const res = await fetch(`/api/${endpoint}`, { const res = await fetch(`/api/${endpoint}`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
...@@ -134,6 +134,7 @@ async function loadModules() { ...@@ -134,6 +134,7 @@ async function loadModules() {
await import('./modules/chess/mod.js'); await import('./modules/chess/mod.js');
await import('./modules/domino/mod.js'); await import('./modules/domino/mod.js');
await import('./modules/ludo/mod.js'); await import('./modules/ludo/mod.js');
await import('./modules/backgammon/mod.js');
await import('./modules/rank/mod.js'); await import('./modules/rank/mod.js');
await import('./modules/social/mod.js'); await import('./modules/social/mod.js');
await import('./modules/tournaments/mod.js'); await import('./modules/tournaments/mod.js');
......
public/js/modules/backgammon/canvas/board-renderer.js 0 → 100644
View file @ 6d2431c7
// Board renderer — draws the backgammon board on canvas
import { WHITE, BLACK } from '../logic/rules.js';
const CHECKER_RADIUS = 16;
const MAX_VISIBLE = 5;
export function drawBoard(ctx, w, h, state, options = {}) {
const { highlights = [], selectedPoint = null, theme = {} } = options;
const boardColor = theme.board || '#2d5016';
const borderColor = theme.border || '#5c3a1e';
const pointDark = theme.pointDark || '#8B4513';
const pointLight = theme.pointLight || '#D2691E';
const barColor = theme.bar || '#3d2b1a';
const margin = 8;
const barWidth = w * 0.06;
const bearOffWidth = w * 0.07;
const boardW = w - margin * 2;
const boardH = h - margin * 2;
const innerW = boardW - bearOffWidth;
const innerH = boardH;
const pointW = (innerW - barWidth) / 12;
const pointH = innerH * 0.42;
ctx.clearRect(0, 0, w, h);
// Board background
ctx.fillStyle = boardColor;
ctx.fillRect(margin, margin, boardW, boardH);
// Border
ctx.strokeStyle = borderColor;
ctx.lineWidth = 3;
ctx.strokeRect(margin, margin, boardW, boardH);
// Bar
const barX = margin + 6 * pointW;
ctx.fillStyle = barColor;
ctx.fillRect(barX, margin, barWidth, boardH);
// Bear-off tray
const bearX = margin + innerW;
ctx.fillStyle = barColor;
ctx.fillRect(bearX, margin, bearOffWidth, boardH);
ctx.strokeStyle = 'rgba(255,255,255,0.1)';
ctx.strokeRect(bearX, margin, bearOffWidth, boardH);
// Draw points (triangles)
for (let i = 0; i < 24; i++) {
const { x, y, isTop } = getPointCoords(i, margin, pointW, pointH, barWidth, boardH);
const color = i % 2 === 0 ? pointDark : pointLight;
ctx.beginPath();
if (isTop) {
ctx.moveTo(x, y);
ctx.lineTo(x + pointW, y);
ctx.lineTo(x + pointW / 2, y + pointH);
} else {
ctx.moveTo(x, y);
ctx.lineTo(x + pointW, y);
ctx.lineTo(x + pointW / 2, y - pointH);
}
ctx.closePath();
// Highlight valid destinations
if (highlights.includes(i)) {
ctx.fillStyle = 'rgba(34, 197, 94, 0.4)';
ctx.fill();
ctx.strokeStyle = '#22c55e';
ctx.lineWidth = 2;
ctx.stroke();
} else if (selectedPoint === i) {
ctx.fillStyle = 'rgba(251, 191, 36, 0.3)';
ctx.fill();
ctx.strokeStyle = '#fbbf24';
ctx.lineWidth = 2;
ctx.stroke();
} else {
ctx.fillStyle = color;
ctx.fill();
}
}
// Draw checkers on points
for (let i = 0; i < 24; i++) {
const pieces = state.points[i];
if (pieces.length === 0) continue;
const { x, y, isTop } = getPointCoords(i, margin, pointW, pointH, barWidth, boardH);
const cx = x + pointW / 2;
const count = pieces.length;
const visibleCount = Math.min(count, MAX_VISIBLE);
const spacing = Math.min(CHECKER_RADIUS * 2, pointH / visibleCount);
for (let j = 0; j < visibleCount; j++) {
const cy = isTop
? y + CHECKER_RADIUS + j * spacing
: y - CHECKER_RADIUS - j * spacing;
drawChecker(ctx, cx, cy, pieces[j].type, theme);
}
if (count > MAX_VISIBLE) {
const lastY = isTop
? y + CHECKER_RADIUS + (visibleCount - 1) * spacing
: y - CHECKER_RADIUS - (visibleCount - 1) * spacing;
ctx.fillStyle = '#fff';
ctx.font = 'bold 11px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(String(count), cx, lastY);
}
}
// Draw bar pieces
drawBarPieces(ctx, state, barX, barWidth, margin, boardH, theme);
// Draw bear-off pieces
drawBearOffPieces(ctx, state, bearX, bearOffWidth, margin, boardH, theme);
// Highlight bear-off if valid destination
if (highlights.includes('off')) {
ctx.fillStyle = 'rgba(34, 197, 94, 0.3)';
ctx.fillRect(bearX + 2, margin + 2, bearOffWidth - 4, boardH - 4);
ctx.strokeStyle = '#22c55e';
ctx.lineWidth = 2;
ctx.strokeRect(bearX + 2, margin + 2, bearOffWidth - 4, boardH - 4);
}
return { margin, pointW, pointH, barWidth, barX, boardH, bearX, bearOffWidth, innerW };
}
function drawChecker(ctx, x, y, type, theme) {
const whiteColor = theme.checkerWhite || '#f8fafc';
const blackColor = theme.checkerBlack || '#1e293b';
const color = type === WHITE ? whiteColor : blackColor;
const borderCol = type === WHITE ? '#94a3b8' : '#475569';
ctx.beginPath();
ctx.arc(x, y, CHECKER_RADIUS - 1, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.strokeStyle = borderCol;
ctx.lineWidth = 2;
ctx.stroke();
// Inner ring
ctx.beginPath();
ctx.arc(x, y, CHECKER_RADIUS - 5, 0, Math.PI * 2);
ctx.strokeStyle = type === WHITE ? '#cbd5e1' : '#64748b';
ctx.lineWidth = 1;
ctx.stroke();
}
function drawBarPieces(ctx, state, barX, barWidth, margin, boardH, theme) {
const cx = barX + barWidth / 2;
// White bar pieces (bottom half)
const whiteBar = state.bar[WHITE];
for (let i = 0; i < whiteBar.length; i++) {
const cy = margin + boardH / 2 + 20 + i * (CHECKER_RADIUS * 2 + 2);
drawChecker(ctx, cx, cy, WHITE, theme);
}
// Black bar pieces (top half)
const blackBar = state.bar[BLACK];
for (let i = 0; i < blackBar.length; i++) {
const cy = margin + boardH / 2 - 20 - i * (CHECKER_RADIUS * 2 + 2);
drawChecker(ctx, cx, cy, BLACK, theme);
}
}
function drawBearOffPieces(ctx, state, bearX, bearOffWidth, margin, boardH, theme) {
const cx = bearX + bearOffWidth / 2;
// White bear-off (bottom)
const whiteOff = state.outside[WHITE].length;
if (whiteOff > 0) {
const startY = margin + boardH - 10;
for (let i = 0; i < Math.min(whiteOff, 8); i++) {
ctx.fillStyle = theme.checkerWhite || '#f8fafc';
ctx.fillRect(cx - 10, startY - i * 8 - 8, 20, 6);
ctx.strokeStyle = '#94a3b8';
ctx.strokeRect(cx - 10, startY - i * 8 - 8, 20, 6);
}
if (whiteOff > 0) {
ctx.fillStyle = '#fff';
ctx.font = 'bold 10px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(String(whiteOff), cx, startY - Math.min(whiteOff, 8) * 8 - 12);
}
}
// Black bear-off (top)
const blackOff = state.outside[BLACK].length;
if (blackOff > 0) {
const startY = margin + 10;
for (let i = 0; i < Math.min(blackOff, 8); i++) {
ctx.fillStyle = theme.checkerBlack || '#1e293b';
ctx.fillRect(cx - 10, startY + i * 8, 20, 6);
ctx.strokeStyle = '#475569';
ctx.strokeRect(cx - 10, startY + i * 8, 20, 6);
}
if (blackOff > 0) {
ctx.fillStyle = '#fff';
ctx.font = 'bold 10px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(String(blackOff), cx, startY + Math.min(blackOff, 8) * 8 + 14);
}
}
}
export function getPointCoords(pointIndex, margin, pointW, pointH, barWidth, boardH) {
let x, y, isTop;
if (pointIndex >= 12) {
// Top row: 12-23 left to right
const col = pointIndex - 12;
x = margin + col * pointW + (col >= 6 ? barWidth : 0);
y = margin;
isTop = true;
} else {
// Bottom row: 11-0 left to right
const col = 11 - pointIndex;
x = margin + col * pointW + (col >= 6 ? barWidth : 0);
y = margin + boardH;
isTop = false;
}
return { x, y, isTop };
}
export function hitTest(canvasX, canvasY, layout, state) {
if (!layout) return null;
const { margin, pointW, pointH, barWidth, barX, boardH, bearX, bearOffWidth } = layout;
// Check bar area
if (canvasX >= barX && canvasX <= barX + barWidth) {
if (canvasY > margin + boardH / 2) return { type: 'bar', player: WHITE };
return { type: 'bar', player: BLACK };
}
// Check bear-off area
if (canvasX >= bearX && canvasX <= bearX + bearOffWidth) {
return { type: 'bearoff' };
}
// Check points
for (let i = 0; i < 24; i++) {
const { x, y, isTop } = getPointCoords(i, margin, pointW, pointH, barWidth, boardH);
if (canvasX >= x && canvasX <= x + pointW) {
if (isTop && canvasY >= margin && canvasY <= margin + pointH + CHECKER_RADIUS * 2) {
return { type: 'point', index: i };
}
if (!isTop && canvasY >= margin + boardH - pointH - CHECKER_RADIUS * 2 && canvasY <= margin + boardH) {
return { type: 'point', index: i };
}
}
}
return null;
}
public/js/modules/backgammon/canvas/dice-renderer.js 0 → 100644
View file @ 6d2431c7
// Dice renderer — draws animated dice for backgammon
const DIE_SIZE = 36;
const DOT_RADIUS = 3.5;
const ROLL_FRAMES = 18;
const ROLL_DURATION = 600;
export function drawDice(ctx, x, y, values, options = {}) {
const { used = [], rolling = false, frame = 0 } = options;
for (let i = 0; i < values.length; i++) {
const dx = x + i * (DIE_SIZE + 10);
const val = rolling ? Math.floor(Math.random() * 6) + 1 : values[i];
const isUsed = used.includes(i);
drawSingleDie(ctx, dx, y, val, isUsed, rolling ? frame : 0);
}
}
function drawSingleDie(ctx, x, y, value, isUsed, frame) {
const rotation = frame > 0 ? (frame / ROLL_FRAMES) * Math.PI * 4 : 0;
ctx.save();
ctx.translate(x + DIE_SIZE / 2, y + DIE_SIZE / 2);
if (frame > 0) ctx.rotate(rotation);
ctx.translate(-DIE_SIZE / 2, -DIE_SIZE / 2);
// Die body
ctx.fillStyle = isUsed ? 'rgba(200, 200, 200, 0.4)' : '#fffef0';
ctx.strokeStyle = isUsed ? 'rgba(150, 150, 150, 0.5)' : '#8B4513';
ctx.lineWidth = 1.5;
roundRect(ctx, 0, 0, DIE_SIZE, DIE_SIZE, 5);
ctx.fill();
ctx.stroke();
if (isUsed) {
ctx.globalAlpha = 0.4;
}
// Dots
ctx.fillStyle = '#1a1a1a';
const positions = getDotPositions(value, DIE_SIZE);
for (const [dx, dy] of positions) {
ctx.beginPath();
ctx.arc(dx, dy, DOT_RADIUS, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
function getDotPositions(value, size) {
const s = size;
const c = s / 2;
const q1 = s * 0.25;
const q3 = s * 0.75;
switch (value) {
case 1: return [[c, c]];
case 2: return [[q1, q3], [q3, q1]];
case 3: return [[q1, q3], [c, c], [q3, q1]];
case 4: return [[q1, q1], [q1, q3], [q3, q1], [q3, q3]];
case 5: return [[q1, q1], [q1, q3], [c, c], [q3, q1], [q3, q3]];
case 6: return [[q1, q1], [q1, c], [q1, q3], [q3, q1], [q3, c], [q3, q3]];
default: return [[c, c]];
}
}
function roundRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
}
export function createRollAnimation(onFrame, onComplete) {
let frame = 0;
const startTime = performance.now();
function tick(now) {
const elapsed = now - startTime;
frame = Math.min(ROLL_FRAMES, Math.floor((elapsed / ROLL_DURATION) * ROLL_FRAMES));
onFrame(frame);
if (elapsed < ROLL_DURATION) {
requestAnimationFrame(tick);
} else {
onComplete();
}
}
requestAnimationFrame(tick);
}
public/js/modules/backgammon/canvas/move-animator.js 0 → 100644
View file @ 6d2431c7
// Move animator — smooth piece transitions
import { getPointCoords } from './board-renderer.js';
const MOVE_DURATION = 300;
const HIT_DURATION = 400;
export function createMoveAnimation(from, to, layout, onFrame, onComplete) {
const startPos = getPixelPos(from, layout);
const endPos = getPixelPos(to, layout);
if (!startPos || !endPos) {
onComplete();
return;
}
const startTime = performance.now();
const duration = from === 'bar' || to === 'bar' ? HIT_DURATION : MOVE_DURATION;
function tick(now) {
const elapsed = now - startTime;
const t = Math.min(1, elapsed / duration);
const ease = 1 - Math.pow(1 - t, 3); // ease-out cubic
const x = startPos.x + (endPos.x - startPos.x) * ease;
const y = startPos.y + (endPos.y - startPos.y) * ease;
// Arc for hits (pieces going to bar)
let arcY = 0;
if (to === 'bar') {
arcY = -40 * Math.sin(t * Math.PI);
}
onFrame({ x, y: y + arcY, progress: t });
if (t < 1) {
requestAnimationFrame(tick);
} else {
onComplete();
}
}
requestAnimationFrame(tick);
}
function getPixelPos(location, layout) {
if (!layout) return null;
const { margin, pointW, pointH, barWidth, barX, boardH, bearX, bearOffWidth } = layout;
if (location === 'bar') {
return { x: barX + barWidth / 2, y: margin + boardH / 2 };
}
if (location === 'off') {
return { x: bearX + bearOffWidth / 2, y: margin + boardH / 2 };
}
if (typeof location === 'number' && location >= 0 && location <= 23) {
const { x, y, isTop } = getPointCoords(location, margin, pointW, pointH, barWidth, boardH);
return {
x: x + pointW / 2,
y: isTop ? y + 20 : y - 20
};
}
return null;
}
public/js/modules/backgammon/logic/bot.js 0 → 100644
View file @ 6d2431c7
// Bot AI for Backgammon — 3 difficulty levels
import { getValidMoves, applyMove, cloneState, getPipCount, WHITE, BLACK } from './rules.js';
export function getBotMove(game, difficulty = 'medium') {
const moves = getValidMoves(game);
if (moves.length === 0) return null;
if (difficulty === 'easy') return getEasyMove(moves);
if (difficulty === 'hard') return getHardMove(game, moves);
return getMediumMove(game, moves);
}
function getEasyMove(moves) {
return moves[Math.floor(Math.random() * moves.length)];
}
function getMediumMove(game, moves) {
let best = moves[0];
let bestScore = -Infinity;
for (const move of moves) {
const score = scoreMoveSimple(game, move);
if (score > bestScore) {
bestScore = score;
best = move;
}
}
return best;
}
function getHardMove(game, moves) {
let best = moves[0];
let bestScore = -Infinity;
for (const move of moves) {
const score = scoreMoveAdvanced(game, move);
if (score > bestScore) {
bestScore = score;
best = move;
}
}
return best;
}
function scoreMoveSimple(game, move) {
let score = 0;
for (const action of move.actions) {
if (action.type === 'hit') score += 30;
if (action.type === 'bear') score += 50;
}
// Prefer moving from bar
if (move.from === 'bar') score += 20;
// Prefer making points (landing where we already have pieces)
if (move.to !== 'off' && move.to >= 0 && move.to <= 23) {
const destCount = game.state.points[move.to].filter(p => p.type === game.turn).length;
if (destCount === 1) score += 15; // making a point
}
// Avoid leaving blots
if (move.from >= 0 && move.from <= 23) {
const remaining = game.state.points[move.from].filter(p => p.type === game.turn).length - 1;
if (remaining === 1) score -= 10;
}
return score;
}
function scoreMoveAdvanced(game, move) {
let score = 0;
const type = game.turn;
const opp = type === WHITE ? BLACK : WHITE;
// Hit value — sending opponent back is huge
for (const action of move.actions) {
if (action.type === 'hit') score += 40;
if (action.type === 'bear') score += 60;
}
// Blot safety — penalize leaving blots
if (move.from >= 0 && move.from <= 23) {
const remaining = game.state.points[move.from].filter(p => p.type === type).length - 1;
if (remaining === 1) {
// How exposed is this blot?
const exposure = calculateBlotExposure(game.state, move.from, opp);
score -= exposure * 8;
}
}
// Point-making — landing to create a 2+ stack
if (move.to !== 'off' && move.to >= 0 && move.to <= 23) {
const friendsAtDest = game.state.points[move.to].filter(p => p.type === type).length;
if (friendsAtDest === 1) score += 20; // making a new point
if (friendsAtDest >= 2) score += 5; // adding to existing point
}
// Prime building — consecutive blocked points
if (move.to !== 'off' && move.to >= 0 && move.to <= 23) {
score += primeBonus(game.state, move.to, type) * 8;
}
// Anchor value — holding points deep in opponent's board
if (move.to !== 'off' && move.to >= 0 && move.to <= 23) {
const norm = type === WHITE ? move.to : 23 - move.to;
if (norm >= 18) score += 12; // anchor in opponent's home
}
// Race — prefer bearing off and advancing when ahead
const myPips = getPipCount(game.state, type);
const oppPips = getPipCount(game.state, opp);
if (myPips < oppPips) {
score += move.steps * 2; // racing advantage, advance further
}
// Advancing runners from deep position
if (move.from >= 0 && move.from <= 23) {
const normFrom = type === WHITE ? move.from : 23 - move.from;
if (normFrom >= 20) score += 8; // escape back runners
}
return score;
}
function calculateBlotExposure(state, pos, opponentType) {
let threats = 0;
for (let dist = 1; dist <= 6; dist++) {
const fromPos = opponentType === WHITE ? pos + dist : pos - dist;
if (fromPos < 0 || fromPos > 23) continue;
if (state.points[fromPos].some(p => p.type === opponentType)) {
threats++;
}
}
// Also count bar pieces as threats
if (state.bar[opponentType].length > 0) {
const barEntry = opponentType === WHITE ? (23 - pos) : pos;
if (barEntry >= 1 && barEntry <= 6) threats += state.bar[opponentType].length;
}
return threats;
}
function primeBonus(state, point, type) {
let consecutive = 0;
for (let i = point - 3; i <= point + 3; i++) {
if (i < 0 || i > 23) continue;
if (state.points[i].filter(p => p.type === type).length >= 2) {
consecutive++;
} else {
if (i > point) break;
consecutive = 0;
}
}
return Math.max(0, consecutive - 1);
}
public/js/modules/backgammon/logic/doubling.js 0 → 100644
View file @ 6d2431c7
// Doubling Cube logic for Backgammon match play
import { WHITE, BLACK } from './rules.js';
export function createCube() {
return {
value: 1,
owner: null, // null = center (either can double), WHITE or BLACK = only that player can
offered: false,
offeredBy: null
};
}
export function canDouble(cube, playerType) {
if (cube.offered) return false;
if (cube.owner === null) return true;
return cube.owner === playerType;
}
export function offerDouble(cube, playerType) {
if (!canDouble(cube, playerType)) return false;
cube.offered = true;
cube.offeredBy = playerType;
return true;
}
export function acceptDouble(cube) {
if (!cube.offered) return false;
cube.value *= 2;
cube.owner = cube.offeredBy === WHITE ? BLACK : WHITE;
cube.offered = false;
cube.offeredBy = null;
return true;
}
export function declineDouble(cube) {
if (!cube.offered) return false;
cube.offered = false;
const decliner = cube.offeredBy === WHITE ? BLACK : WHITE;
cube.offeredBy = null;
return decliner; // returns who declined (and thus loses)
}
export function getStake(cube, gameScore) {
return cube.value * gameScore;
}
// Bot doubling decision based on pip count advantage
export function shouldBotDouble(cube, myPips, oppPips, difficulty) {
if (!canDouble(cube, BLACK)) return false;
const advantage = (oppPips - myPips) / oppPips;
if (difficulty === 'easy') return false;
if (difficulty === 'medium') return advantage > 0.25;
return advantage > 0.15; // hard bot doubles more aggressively
}
export function shouldBotAccept(cube, myPips, oppPips, difficulty) {
const disadvantage = (myPips - oppPips) / myPips;
if (difficulty === 'easy') return true; // easy bot always accepts
if (difficulty === 'medium') return disadvantage < 0.35;
return disadvantage < 0.25; // hard bot drops when too far behind
}
public/js/modules/backgammon/logic/match.js 0 → 100644
View file @ 6d2431c7
// Match system — first-to-N points, Crawford rule
import { WHITE, BLACK, createGame, getGameScore } from './rules.js';
import { createCube } from './doubling.js';
export function createMatch(matchLength = 5, variant = 'standard') {
return {
length: matchLength,
variant,
scores: [0, 0], // [WHITE, BLACK]
gameNumber: 0,
currentGame: null,
cube: null,
crawford: false,
crawfordUsed: false,
isOver: false,
winner: null,
postCrawford: false
};
}
export function startNewGame(match) {
match.gameNumber++;
match.currentGame = createGame(match.variant);
// Crawford rule: no doubling in the game immediately after someone reaches match-point - 1
const atMatchPoint = match.scores[WHITE] === match.length - 1 || match.scores[BLACK] === match.length - 1;
if (atMatchPoint && !match.crawfordUsed) {
match.crawford = true;
match.crawfordUsed = true;
match.cube = null;
} else {
match.crawford = false;
if (match.crawfordUsed) match.postCrawford = true;
match.cube = createCube();
}
// Alternate who goes first each game (simplified — real backgammon uses highest die)
if (match.gameNumber > 1) {
match.currentGame.turn = match.gameNumber % 2 === 0 ? BLACK : WHITE;
}
return match.currentGame;
}
export function endGame(match, winner, gameScore) {
const stake = match.cube ? match.cube.value * gameScore : gameScore;
match.scores[winner] += stake;
if (match.scores[winner] >= match.length) {
match.isOver = true;
match.winner = winner;
}
return {
winner,
gameScore,
stake,
scores: [...match.scores],
matchOver: match.isOver
};
}
export function canUseCube(match) {
return !match.crawford && match.cube !== null;
}
export function getMatchState(match) {
return {
length: match.length,
scores: [...match.scores],
gameNumber: match.gameNumber,
crawford: match.crawford,
isOver: match.isOver,
winner: match.winner
};
}
public/js/modules/backgammon/logic/rules.js 0 → 100644
View file @ 6d2431c7
This diff is collapsed.
public/js/modules/backgammon/mod.js 0 → 100644
View file @ 6d2431c7
import * as scene from '../../core/scene.js';
import { mountGame, unmountGame } from './scenes/game.js';
import { mountResult } from './scenes/result.js';
import { mountRoom, unmountRoom } from './scenes/room.js';
scene.register('backgammon-game', mountGame, unmountGame);
scene.register('backgammon-result', mountResult);
scene.register('backgammon-room', mountRoom, unmountRoom);
public/js/modules/backgammon/scenes/game.js 0 → 100644
View file @ 6d2431c7
This diff is collapsed.
public/js/modules/backgammon/scenes/result.js 0 → 100644
View file @ 6d2431c7
import * as scene from '../../../core/scene.js';
import * as audio from '../../../core/audio.js';
import * as bus from '../../../core/bus.js';
import { emoji } from '../../../core/theme.js';
export function mountResult(el, params) {
const { winner = 'you', scores = [0, 0], matchLength = 3, mode = 'bot', reason = '' } = params || {};
const didWin = winner === 'you';
audio.play(didWin ? 'sfx_bg_win_match' : 'lose', 'game');
el.innerHTML = `
<div class="bgr-wrap">
<div class="bgr-hero">
<div class="bgr-trophy">${didWin ? emoji('trophy', '🏆', 64) : emoji('pensive', '😔', 64)}</div>
<h1 class="bgr-title">${didWin ? 'مبروك! فزت!' : 'خسرت هالمرة'}</h1>
${reason === 'abandon' ? '<p class="bgr-reason">الخصم انسحب</p>' : ''}
</div>
<div class="bgr-scoreboard">
<div class="bgr-score-row">
<span class="bgr-score-label">أنت</span>
<span class="bgr-score-val ${didWin ? 'bgr-score-win' : ''}">${scores[0]}</span>
</div>
<div class="bgr-score-divider">من ${matchLength}</div>
<div class="bgr-score-row">
<span class="bgr-score-label">الخصم</span>
<span class="bgr-score-val ${!didWin ? 'bgr-score-win' : ''}">${scores[1]}</span>
</div>
</div>
<div class="bgr-buttons">
<button class="bgr-btn bgr-btn-primary" id="btn-rematch">
${emoji('fire', '🔥', 18)} العب مرة ثانية
</button>
<button class="bgr-btn bgr-btn-secondary" id="btn-exit">
رجوع للقائمة
</button>
</div>
</div>
${getResultStyles()}
`;
el.querySelector('#btn-rematch').onclick = () => {
audio.play('click');
scene.replace('backgammon-room', { mode: 'menu' });
};
el.querySelector('#btn-exit').onclick = () => {
audio.play('click');
scene.exitGameMode();
bus.emit('navigate', { world: 'play', scene: 'play-table' });
};
}
function getResultStyles() {
return `<style>
.bgr-wrap {
display:flex;flex-direction:column;align-items:center;justify-content:center;
height:100%;padding:24px;
background:linear-gradient(180deg,#0a0f14 0%,#101820 50%,#141f2c 100%);
}
.bgr-hero { text-align:center;margin-bottom:32px; }
.bgr-trophy { font-size:64px;margin-bottom:16px;animation:bgFloat 3s ease-in-out infinite; }
.bgr-title { font-size:24px;font-weight:800;color:#f8fafc;margin:0; }
.bgr-reason { font-size:13px;color:#94a3b8;margin:8px 0 0; }
.bgr-scoreboard {
display:flex;align-items:center;gap:16px;
padding:20px 32px;border-radius:16px;
background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
margin-bottom:32px;
}
.bgr-score-row { display:flex;flex-direction:column;align-items:center;gap:4px; }
.bgr-score-label { font-size:12px;color:#64748b; }
.bgr-score-val { font-size:32px;font-weight:800;color:#94a3b8; }
.bgr-score-win { color:#d4940a; }
.bgr-score-divider { font-size:11px;color:#475569; }
.bgr-buttons { display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px; }
.bgr-btn {
padding:14px 24px;border-radius:14px;border:none;
font-size:15px;font-weight:700;cursor:pointer;text-align:center;
transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.bgr-btn:active { transform:scale(0.95); }
.bgr-btn-primary { background:linear-gradient(135deg,#d4940a,#8B4513);color:#fff;box-shadow:0 4px 16px rgba(212,148,10,0.3); }
.bgr-btn-secondary { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#94a3b8; }
@keyframes bgFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
</style>`;
}
public/js/modules/backgammon/scenes/room.js 0 → 100644
View file @ 6d2431c7
This diff is collapsed.
public/js/modules/backgammon/ui/doubling-cube.js 0 → 100644
View file @ 6d2431c7
// Doubling cube UI overlay
export function renderCubeDisplay(container, cubeValue, cubeOwner, myColor) {
let existing = container.querySelector('.bgg-cube-display');
if (!existing) {
existing = document.createElement('div');
existing.className = 'bgg-cube-display';
container.appendChild(existing);
}
if (!cubeValue || cubeValue === 1) {
existing.style.display = 'none';
return;
}
existing.style.display = '';
const position = cubeOwner === null ? 'center' : cubeOwner === myColor ? 'bottom' : 'top';
existing.innerHTML = `
<div class="bgg-cube bgg-cube-${position}">
<span class="bgg-cube-val">${cubeValue}</span>
</div>
`;
}
public/js/modules/backgammon/ui/emote-panel.js 0 → 100644
View file @ 6d2431c7
// Emote panel for backgammon — reuses Ludo pattern
import * as audio from '../../../core/audio.js';
import * as net from '../../../core/net.js';
const EMOTES = ['🎲', '😤', '🤔', '👏', '😂', '🔥', '💀', '🫡'];
const PHRASES = ['!لعبة حلوة', '!حركة ممتازة', '!حظ', '...فكّر أسرع', '?ريماتش', 'gg wp'];
const COOLDOWN = 3000;
let lastEmoteTime = 0;
export function createEmotePanel(container, options = {}) {
const { matchId, mode, onEmote } = options;
const panel = document.createElement('div');
panel.className = 'bgg-emote-panel';
panel.style.display = 'none';
panel.innerHTML = `
<div class="bgg-emotes">${EMOTES.map(e => `<button class="bgg-emote-btn">${e}</button>`).join('')}</div>
<div class="bgg-phrases">${PHRASES.map(p => `<button class="bgg-phrase-btn">${p}</button>`).join('')}</div>
`;
panel.querySelectorAll('.bgg-emote-btn').forEach(btn => {
btn.onclick = () => {
if (Date.now() - lastEmoteTime < COOLDOWN) return;
lastEmoteTime = Date.now();
audio.play('sfx_emote');
onEmote?.(btn.textContent, 'emote');
panel.style.display = 'none';
if (mode === 'live' && matchId) {
net.post('backgammon-match.php', { action: 'emote', match_id: matchId, emote: btn.textContent }).catch(() => {});
}
};
});
panel.querySelectorAll('.bgg-phrase-btn').forEach(btn => {
btn.onclick = () => {
if (Date.now() - lastEmoteTime < COOLDOWN) return;
lastEmoteTime = Date.now();
audio.play('sfx_emote');
onEmote?.(btn.textContent, 'phrase');
panel.style.display = 'none';
};
});
container.appendChild(panel);
return panel;
}
export function toggle(panel) {
if (!panel) return;
panel.style.display = panel.style.display === 'none' ? '' : 'none';
}
public/js/modules/backgammon/ui/move-hints.js 0 → 100644
View file @ 6d2431c7
// Move hints — shows valid destination indicators on the board
export function showHints(validMoves, selectedPieceId) {
if (!selectedPieceId) return [];
return validMoves
.filter(m => m.piece.id === selectedPieceId)
.map(m => m.to);
}
export function clearHints() {
return [];
}
public/js/modules/play/scenes/queue.js
View file @ 6d2431c7
...@@ -45,12 +45,14 @@ export function mountQueue(el, params) { ...@@ -45,12 +45,14 @@ export function mountQueue(el, params) {
} }
async function joinQueue(params) { async function joinQueue(params) {
const endpoint = params.game === 'ludo' ? 'ludo-match.php' : params.game === 'domino' ? 'domino-match.php' : 'matchmaking.php'; const endpoint = params.game === 'ludo' ? 'ludo-match.php' : params.game === 'domino' ? 'domino-match.php' : params.game === 'backgammon' ? 'backgammon-match.php' : 'matchmaking.php';
try { try {
const data = await net.post(endpoint, { const data = await net.post(endpoint, {
action: 'queue', action: 'queue',
game_key: params.game, game_key: params.game,
time_control: params.timeControl || 'standard' time_control: params.timeControl || 'standard',
variant: params.variant,
match_length: params.matchLength
}); });
if (data.match_id) { if (data.match_id) {
...@@ -64,7 +66,7 @@ async function joinQueue(params) { ...@@ -64,7 +66,7 @@ async function joinQueue(params) {
} }
function pollForMatch(params) { function pollForMatch(params) {
const endpoint = params.game === 'ludo' ? 'ludo-match.php' : params.game === 'domino' ? 'domino-match.php' : 'matchmaking.php'; const endpoint = params.game === 'ludo' ? 'ludo-match.php' : params.game === 'domino' ? 'domino-match.php' : params.game === 'backgammon' ? 'backgammon-match.php' : 'matchmaking.php';
unsub = setInterval(async () => { unsub = setInterval(async () => {
try { try {
const data = await net.post(endpoint, { action: 'status', game_key: params.game }); const data = await net.post(endpoint, { action: 'status', game_key: params.game });
......
public/js/modules/play/scenes/table.js
View file @ 6d2431c7
...@@ -56,7 +56,7 @@ export function mountTable(el) { ...@@ -56,7 +56,7 @@ export function mountTable(el) {
<!-- Games --> <!-- Games -->
<div class="games-grid"> <div class="games-grid">
${games.map(g => { ${games.map(g => {
const disabled = g.key === 'backgammon'; const disabled = false;
return ` return `
<div class="game-tile ${disabled ? 'game-tile-disabled' : ''}" data-game="${g.key}" style="--game-color:${g.color};--game-gradient:${g.gradient};"> <div class="game-tile ${disabled ? 'game-tile-disabled' : ''}" data-game="${g.key}" style="--game-color:${g.color};--game-gradient:${g.gradient};">
<div class="game-tile-bg" style="background:${g.gradient};"></div> <div class="game-tile-bg" style="background:${g.gradient};"></div>
...@@ -360,6 +360,8 @@ function showGameMenu(menu, game) { ...@@ -360,6 +360,8 @@ function showGameMenu(menu, game) {
scene.push('domino-room', { mode: 'bot-pick' }); scene.push('domino-room', { mode: 'bot-pick' });
} else if (game.key === 'ludo') { } else if (game.key === 'ludo') {
scene.push('ludo-room', { mode: 'setup', type: 'local' }); scene.push('ludo-room', { mode: 'setup', type: 'local' });
} else if (game.key === 'backgammon') {
scene.push('backgammon-room', { mode: 'menu' });
} else { } else {
const gameScene = game.key + '-game'; const gameScene = game.key + '-game';
scene.push(gameScene, { mode: 'bot', game: game.key }); scene.push(gameScene, { mode: 'bot', game: game.key });
...@@ -384,6 +386,8 @@ function showGameMenu(menu, game) { ...@@ -384,6 +386,8 @@ function showGameMenu(menu, game) {
scene.push('play-time-select', { game: game.key, mode: 'human' }); scene.push('play-time-select', { game: game.key, mode: 'human' });
} else if (game.key === 'ludo') { } else if (game.key === 'ludo') {
scene.push('ludo-room', { mode: 'setup', type: 'online' }); scene.push('ludo-room', { mode: 'setup', type: 'online' });
} else if (game.key === 'backgammon') {
scene.push('backgammon-room', { mode: 'setup', type: 'online' });
} else { } else {
scene.push('play-queue', { game: game.key, mode: 'human', timeControl: 'standard' }); scene.push('play-queue', { game: game.key, mode: 'human', timeControl: 'standard' });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment