Skip to content

E
el3ab-Player
Commit 2dd53307 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

feat: chess fully playable — all modes, analysis, puzzles, matchmaking 

/game — Full chess vs bot:
- Complete DOM (17 elements game engines need)
- Loads chess.min.js → openings.js → board.js → game.js in order
- Clocks, move list, opening display, thinking indicator
- Resign, draw, flip buttons
- Immersive mode (header/nav hide)

/game-live — Multiplayer chess:
- Realtime subscription for opponent moves
- Draw offer banner (accept/decline)
- Same full DOM as bot game

/analysis — Post-game analysis:
- Eval bar with animated fill
- Eval graph canvas
- Move navigation (first/prev/next/last)
- Player accuracy percentages
- Critical moments highlight
- Engine analysis button

/puzzles — Chess puzzles:
- Daily (5 per day with dot progress)
- Streak mode
- Rush mode (timed)
- Tab switching between modes

/matchmaking — Animated opponent search:
- Radar ring pulse animation
- Timer counting up
- Auto-poll API every 2s
- Cancel button returns to lobby

CSS additions:
- Chess game layout (flexbox centered, responsive board)
- Clock styles (active=gold, low=red+pulse)
- Move list compact style
- Matchmaking radar animation

Also: chessboard.css now loaded in <head> globally
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent d369c086
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 15 deletions
app/styles/el3ab.css
View file @ 2dd53307
...@@ -255,9 +255,58 @@ img { display: block; max-width: 100%; } ...@@ -255,9 +255,58 @@ img { display: block; max-width: 100%; }
.mb-5 { margin-bottom: 20px; } .mb-5 { margin-bottom: 20px; }
.text-center { text-align: center; } .text-center { text-align: center; }
/* === CHESS GAME LAYOUT === */
.chess-game-wrap {
display: flex; flex-direction: column; align-items: center;
min-height: 100dvh; justify-content: center; padding: 8px 8px env(safe-area-inset-bottom);
}
.chess-top-bar, .chess-bottom-bar {
width: 100%; max-width: 400px; padding: 6px 4px;
}
.chess-player-bar {
display: flex; align-items: center; justify-content: space-between;
}
.chess-player-name { font-size: 13px; font-weight: 600; }
.chess-clock {
font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
padding: 4px 10px; background: var(--bg-2); border-radius: var(--radius-sm);
min-width: 60px; text-align: center;
}
.chess-clock.active { background: var(--gold); color: var(--text-inv); }
.chess-clock.low { background: var(--loss); color: white; animation: pulse 1s infinite; }
.chess-move-list-wrap {
width: 100%; max-width: 400px; max-height: 80px; overflow-y: auto;
margin: 4px 0; scrollbar-width: thin;
}
.chess-move-list {
display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
font-size: 12px; font-variant-numeric: tabular-nums;
}
.chess-actions {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
/* === RESPONSIVE GAME BOARD === */ /* === RESPONSIVE GAME BOARD === */
.board-container { .board-container {
width: min(100vw - 32px, 400px); aspect-ratio: 1; margin: 0 auto; width: min(100vw - 24px, 400px); aspect-ratio: 1; margin: 0 auto;
}
/* === MATCHMAKING RADAR === */
.matchmaking-radar {
position: relative; width: 120px; height: 120px;
display: flex; align-items: center; justify-content: center;
}
.radar-ring {
position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--gold); opacity: 0;
animation: radar-expand 2s ease-out infinite;
}
.radar-ring.r2 { animation-delay: 0.6s; }
.radar-ring.r3 { animation-delay: 1.2s; }
@keyframes radar-expand {
0% { transform: scale(0.3); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
} }
/* === JUICE: BUTTON RIPPLE === */ /* === JUICE: BUTTON RIPPLE === */
......
index.php
View file @ 2dd53307
This diff is collapsed.
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