- 03 Jun, 2026 40 commits
-
-
Mahmoud Aglan authored
Pawns: - Size increased from 0.32 to 0.42 radius (30% bigger) - Pawn shape: round head on elliptical base (not just circle) - White border, highlight spot, drop shadow - Much more visible and satisfying Home bases: - Positions recentered within home zones (1.8/4.2 instead of 2/4) - Inner white area with rounded corners - Colored ring border inside home zone (like real Ludo boards) Board: - Start position squares colored per player - Home zones have rounded inner area with colored ring Emotes: -
💬 emote button added to Ludo game (same system as chess) - 8 preset emotes: GG, Good Move, Think, Hurry, Wow, Laugh, Angry, Hello - Floating animation when sent Co-Authored-By:Claude Opus 4.6 <noreply@anthropic.com>
-
Mahmoud Aglan authored
Complete Ludo game overhaul: - NEW: board-map.js with exact 52-square path coordinates on 15x15 grid - Pieces now move on CORRECT squares (not random circular positions) - Home columns, safe squares (stars), home bases all properly mapped - Dice roll ANIMATION: 10 frames of random faces with rotation - Dice slam-in effect + star burst on rolling 6 - 4 player panels showing whose turn it is (active border glow) - Proper game flow: roll → valid moves → auto-pick best → animate - Bot turns show dice face updates - Capture: screen shake + heavy haptic - Finish: star burst + success haptic - Win: confetti + celebration - Board rendering: colored home zones, grid lines, home columns, safe squares with stars, center triangles, piece shadows + highlights Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Game Menu: - Buttons: 72px min-height (was 52), 20px padding, 48px icons - Feature chips: 40px min-height, 13px font, 10px gaps - Menu takes up to 75vh for better visibility In-Game Emotes: -
💬 toggle button in bottom-right during chess game - 8 preset emotes: GG, Good Move, Think, Hurry, Wow, Laugh, Angry, Hello - 3-second cooldown between sends - Floating emoji animation when received - Sound feedback on send Tournament System: - New API: /api/swiss.php (tournament, standings, rounds, pairings, my-games) - Integrates with Swiss API at swissapi.caprover.al-arcade.com - Tournament Detail scene with 4 tabs: - Info: stats grid, prize pool, registration button - Standings: ranked player list with score + buchholz - Rounds: expandable rounds → click to load pairings - My Games: player's own tournament matches - Syncs with el3ab-management SwissApiService endpoints - Tournament cards in list now navigate to full detail view Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
ASSET_REGISTRY.json: machine-readable sweep of entire codebase - 67 emojis with exact file:line locations - 80 unique colors - 14 gradients - 24 animations - 56 CSS variables Admin panel new sections: - 🧃 Juice Settings: particles on/off, shake intensity, haptic, confetti count, coin fly count, bounce scale, slam scale, float amount -
😀 Emoji Replacements: 27 most visible emojis as upload slots Each with: current emoji preview, size hint, usage description Upload SVG/PNG → replaces emoji throughout the app theme.js updated: - emoji() helper: returns uploaded image OR fallback emoji at exact size - image-rendering: -webkit-optimize-contrast (fixes pixelation on non-retina) - All images use object-fit:contain (never overflow their expected box) Co-Authored-By: -
Mahmoud Aglan authored
- Classifier: book threshold reduced from 5 to 2 full moves (was classifying everything as book in short games, resulting in 0% accuracy) - Friends empty state: shows friendly illustration + 'invite friends' CTA button instead of hostile 'لا توجد بيانات' on black void - Profile: always fetches fresh data from API on mount (fixes stale rating showing 1200 after playing rated games) Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
New screen: Game Review (chess-review) - Analyzes EVERY move with Stockfish (depth 12) - Shows progress bar while analyzing - Eval graph: canvas-rendered white/black area chart with mistake dots - Accuracy comparison: player vs opponent percentage with colored bars - Move classification breakdown table: !! Brilliant, ! Great, ★ Best, ✓ Good,
📖 Book, ?! Inaccuracy, ? Mistake, ?? Blunder - Counts per player side-by-side (like Chess.com) - Opening name displayed - Links to detailed analysis (timeline scrubber) Co-Authored-By: -
Mahmoud Aglan authored
- Draggable slider bar to scrub through moves like a video - RTL-aware: drag right = start, drag left = end - Blue fill + white thumb shows current position - Touch/pointer events for mobile drag - Move display text above scrubber shows current move - Move chips below still clickable as secondary nav - No more confusing directional arrows Co-Authored-By: -
Mahmoud Aglan authored
- Nav buttons: RTL order (end/next on LEFT, prev/start on RIGHT) - Nav buttons: larger (38x34px), rounded, hover states, scale on press - Arrows: clean ⟫ › ‹ ⟪ instead of emoji
⏮ ⏭ - Eval bar: number shown separately on left, colored bar on right - Eval text: colored green/red/white based on advantage - Analysis section: tighter spacing, better contrast - Move chips: larger padding, hover highlight, smoother active state Co-Authored-By: -
Mahmoud Aglan authored
feat(chess): complete pro features — premoves, rating graph, puzzle themes, best move comparison, opening explorer NEW MODULES: - premove.js: Queue moves during opponent's turn, auto-execute when legal - rating-graph.js: Canvas sparkline with gradient fill, grid, current rating label, change indicator - themes.js: 16 puzzle themes with Arabic names and icons for filtering - analyzer.js: Full game analysis — classifies every move, calculates accuracy per game - explorer.js: Opening explorer database — popular moves with white/draw/black win rates + visual bar ANALYSIS SCENE UPGRADED: - Shows opening explorer data (book moves + win rate bars) above engine analysis - Engine lines show best moves with eval and principal variation - Move navigator with clickable chips GAME SCENE UPGRADED: - Opening name shown in Arabic during game (40+ ECO openings) - Material advantage displayed (+2/-1) with color coding - PGN share/copy buttons on result screen Co-Authored-By: -
Mahmoud Aglan authored
feat(chess): Make Chess Professional — opening names, material count, move classification, PGN sharing Pro features added: - Opening name display: shows ECO opening name during game (40+ openings in Arabic/English) - Material count difference: shows +2/-1 advantage next to captured pieces - Move classifier engine: labels moves as brilliant(!!) / great(!) / best(★) / good / book / inaccuracy(?!) / mistake(?) / blunder(??) - Accuracy calculator: 0-100% accuracy score based on move classifications - Material counter: tracks piece values for both sides from FEN - PGN Share: share button uses Web Share API or clipboard - PGN Copy: one-tap copy to clipboard with visual feedback Foundation for remaining features: - classifier.js ready for post-game analysis integration - openings.js ready for opening explorer - material.js ready for in-game display Co-Authored-By: -
Mahmoud Aglan authored
Chess juice: - Capture: particle burst at capture square + board shake + haptic - Check: board shake + haptic medium - Checkmate: heavy shake + screen flash + haptic heavy Ludo juice: - Dice roll: slam-in with 1.6x overshoot + board shake + haptic - Roll 6: golden star burst around dice - Capture: confetti + heavy shake + haptic heavy - Piece finish: star burst + haptic success Co-Authored-By: -
Mahmoud Aglan authored
New core module: juice.js - Particle burst engine (coins, stars, confetti, squares) - Coin fly-to-target animation (particles arc from source to HUD) - Screen shake with intensity decay - Number counter with eased tick-up - Haptic feedback (light/medium/heavy/success/error patterns) - Element glow/pulse effects - Slam-in, bounce-in, slide-up-bounce animations - Stagger utility for sequential element animations - Float/breathe idle animations - Full-screen flash effect CSS juice system: - 16 keyframe animations (slamIn, slideUpBounce, breatheGlow, ringExpand, wobble, numberPop, shimmerBorder, bgGradientMove...) - Ambient moving gradient background on body - Primary buttons breathe with golden glow when idle - Scene transitions: spring overshoot (scale 0.88→1.02→1) - will-change hints on interactive elements Home screen juiced: - Game tiles bounce-in staggered on load - Tiles float with subtle Y-axis bob (different speeds) - Tile press: haptic + pulse glow - Game menu slams up with spring overshoot Result screen juiced: - Screen flash (green for win, red for loss) - Trophy/skull slams in with 1.8x scale overshoot - Rating counter ticks up/down per digit - Win: confetti burst (40 particles) + haptic success - Loss: screen shake + haptic error - Coins fly from result area to HUD counter - Buttons stagger slide-up on entry Co-Authored-By: -
Mahmoud Aglan authored
Theme loader (theme.js): - Reads theme.json on boot, applies CSS custom properties - All colors, animations, button shapes, and radii are live-editable - assetImg() helper renders uploaded assets at exact expected size with object-fit:contain (prevents pixelation/oversizing) Admin panel updates: - Button shapes section: radius, height, font weight, shadow, borders - 25 asset upload slots (up from 19) including tab bar icons - Each slot shows expected dimensions + usage hint in Arabic - Upload accepts SVG, PNG, JPG, WebP, GIF - Preview renders at exact expected size (not pixelated, not huge) - Old files for same slot are cleaned up on re-upload CSS connected to theme variables: - --btn-press-scale, --btn-min-height, --btn-weight, --btn-shadow - --r-full (button radius), --r-btn-secondary, --r-input - --card-border-width - All existing color variables mapped from theme.json Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Admin panel (/admin/branding.php): - Hardcoded login (admin / El3ab@Brand2024) - Color editor for all 13 platform colors with live preview - Game color editor (8 game-specific colors) - Chess board color editor (5 board theme colors) - Animation/motion settings (speeds, scale, radius) - 19 asset upload slots with size hints: - Logo (200×60), Icon (64×64), Splash (1080×1920) - Coin/Gem/XP icons (24×24) - Game icons (64×64 each) - Win/Loss/Draw icons (128×128) - Medals (32×32), Avatar default (128×128) - Each upload shows expected dimensions in Arabic - Changes save to theme.json and appear as platform defaults - Does NOT override user skins/cosmetics Asset Registry (ASSET_REGISTRY.md): - 44 emojis cataloged with file locations - 71 colors mapped - 9 gradients - 17 animations - 5 board visual configs - 1 piece renderer (vector paths) Co-Authored-By: -
Mahmoud Aglan authored
- Scene transitions: scale+slide (game-like) instead of horizontal slide (web-like) - Buttons: more aggressive scale on press (0.92 in 50ms) - Cards: snappier press response (0.96 in 80ms) - New animation classes: .shake, .pop-in, .bounce-in, .slide-up - Toast: spring bounce entrance, reward/error variants - Keyframes: coinFly, bounceIn, popIn, shake for game events Co-Authored-By: -
Mahmoud Aglan authored
- Canvas coords: scale CSS pixels to logical canvas coordinates properly (fixes the offset between where you tap and what gets selected) - Canvas touchAction:none prevents browser gestures interfering - Canvas width/height explicitly set in style to match logical size Home screen redesign: - Games as 2x2 grid of large colorful tiles (center stage) - Tap game → bottom sheet menu slides up with: - Single Player (bots + local play) - Multiplayer (online ranked) - Feature chips: Leaderboard, My Matches, Puzzles (chess only) - No more carousel that gets cut off - Game-feel: tiles scale down on press, smooth spring animation Co-Authored-By: -
Mahmoud Aglan authored
- Tournament list with registration button for open tournaments - Tournament detail view with player count, rounds, bracket area - Register button with loading state and success feedback - Arabic status labels (تسجيل مفتوح, جارية, منتهية) - Format names in Arabic (سويسري, دوري, خروج المغلوب) Co-Authored-By: -
Mahmoud Aglan authored
- GET match endpoint for live polling during multiplayer - Match history scene (placeholder) - Live sync module with poll/sendMove/drawOffer/resign/rematch - Economy: coins actually granted to player profile on game completion - Economy transactions recorded with reason Co-Authored-By: -
Mahmoud Aglan authored
- Backend Elo calculation (K=32/24/16 based on rating) - Rating history recorded per game in rating_history table - Profile updated with new rating + win/loss/draw counts - Result screen shows actual rating change from server - Board fills more available space (up to 500px) - Carousel cards fixed: proper padding, no truncation, gradient previews Co-Authored-By: -
Mahmoud Aglan authored
- Post-game analysis with Stockfish multi-line eval (3 lines, depth 18) - Move navigator: step through game with
⏮ ◀ ▶ ⏭ buttons - Eval bar: visual white/black advantage indicator - Move chips: click any move to jump to that position - Board sizing: fills available vertical space better (up to 480px) - Analysis accessible from result screen 'تحليل المباراة' button Co-Authored-By: -
Mahmoud Aglan authored
feat(chess): full gameplay polish — move list, captured pieces, promotion dialog, bot thinking indicator, clock urgency, improved result screen - Move list: scrollable horizontal move notation (SAN) - Captured pieces: sorted display below each player name - Promotion dialog: visual piece picker (Q/R/B/N) instead of auto-queen - Bot thinking indicator: animated dots overlay during Stockfish response - Clock urgency: red pulsing animation when time < 30s - Resign confirmation: prevents accidental resign - Result screen: proper rating change, coins, XP, move history, analysis button - Sound: differentiated for check, checkmate, castle, capture, normal move Co-Authored-By: -
Mahmoud Aglan authored
- Chess: vector piece paths (king, queen, rook, bishop, knight, pawn) rendered as proper filled shapes with stroke, not unicode characters - Ludo: actual cross-shaped board with colored home zones, triangular center, home columns, and round pieces with highlights - Domino: green felt table background, proper tiles with pip dots rendered correctly for each value, ivory tile color with borders Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
- Phase 0: Core engine (scene manager, store, bus, net, tween, audio, canvas, HUD, i18n) - Phase 1: Auth (splash, login, register, token management) - Phase 2: Play World (game carousel, mode picker, bot/time selectors, queue) - Phase 3-4: Chess (canvas board, drag/drop, chess.js, Stockfish bots, clock, live matchmaking) - Phase 5: Domino (tile chain logic, bot AI, pip scoring, multiplayer) - Phase 6: Ludo (cross-board, dice, captures, 4-player bots) - Phase 7: Social (friends, notifications, realtime) - Phase 8: Organizations (browse, join, members, detail) - Phase 9: Rewards (daily claims, streak, coins) - Phase 10: Profile (player card, stats, settings, logout) - Phase 11: Shop (cosmetics, purchase flow, equip) - Phase 12: Rank (leaderboard, tournaments, registration) - Phase 13: Puzzles (chess training with rating) - Phase 14-16: All APIs, polish, deployment config Co-Authored-By: -
Mahmoud Aglan authored
Two problems: 1. --board-light and --board-dark CSS vars were in deleted app.css → Added all chess board CSS vars to el3ab.css :root 2. .board-wrapper layout broken in our flex context → Added explicit override: aspect-ratio:1, position:relative → Kill the ::before padding hack (use aspect-ratio) → Force .board to position:absolute;inset:0;width:100%;height:100% Co-Authored-By: -
Mahmoud Aglan authored
The board was empty because: 1. Scripts cached from previous nav resolved immediately 2. Board/Game singletons kept stale DOM references 3. Race condition between DOM render and script execution Fix: - Remove existing script tags before re-adding (forces re-execution) - Load scripts SEQUENTIALLY (chess.min → openings → board → game) - requestAnimationFrame before script loading (DOM settle) - Explicit document.getElementById('board') check before Board.init Co-Authored-By: -
Mahmoud Aglan authored
The board was invisible because: - board.js sets `this.el.className = 'board'` (8x8 grid) - chessboard.css .board uses `width:100%; height:100%` — needs a sized parent - The CSS expects a `.board-wrapper` parent with padding-top:100% trick - I was using a custom `.board-container` with aspect-ratio which doesn't work Fixed: all game screens now use `.board-wrapper > #board` structure which chessboard.css already handles (position:relative + padding-top:100% for the wrapper, position:absolute + inset:0 for the board grid). Co-Authored-By: -
Mahmoud Aglan authored
- Created puzzles table in Supabase with RLS - Seeded 20 Arabic chess puzzles (rating 500-1400) - Fixed daily puzzle offset (was % 100, now % actual count) - Added puzzle_rating, puzzle_streak, best_puzzle_streak to profiles - Fixed ELO defaults (new profiles now get 1200 instead of 0) Co-Authored-By: -
Mahmoud Aglan authored
/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: -
Mahmoud Aglan authored
CSS: - Button ripple effect (radial gradient follows finger position) - Gold button glow pulse (breathing box-shadow) - Gold button shimmer sweep (light streak animation) - Game card entrance pop (staggered scale+fade per card) - Game card icon float (subtle idle bob animation) - Game card hover glow (radial light on press) - Nav active indicator (animated bar slides in) - Nav tap bounce (scale down on press) - Streak claim celebration (pop + color change) - Page transition (fade+slide on every screen change) - Section stagger (each section fades in sequentially) - Activity items slide in (staggered translateX) - Chip selection pop (scale bounce on select) - Input focus glow (cyan ring) - Brand logo pulse on tap - Online dot ping ring (expanding ripple) - Login brand float (idle vertical bob) - Ambient background (slow-moving radial gradients) - Toast in/out animations - Card shadow compression on press - Counter tick scale animation JS: - Haptic feedback on every interactive element (pointerdown) - Web Audio API synthesizer (tap, click, coin, win, error sounds) - Ripple position tracking (--ripple-x, --ripple-y CSS vars) - tickCounter() for animated number updates Co-Authored-By: -
Mahmoud Aglan authored
The ES modules approach was overengineered and broken: - Import maps failed silently - Game engines couldn't find window.App - Nothing was responsive New approach: everything in index.php + one CSS file. - Loads public/js/app.js (game engines need App.fetch, App.toast etc) - Simple defineScreen() router — no modules, no imports, no build step - Chess game works: loads chess.min.js + board.js + game.js, enters immersive mode - Ludo/Domino/Backgammon lobbies create games via API - All screens responsive (max-width adapts, clamp() on hero heights) - Visual identity from DESIGN.md: game-specific gradients, 20px radius cards, gold brand - Header shows level + coins + gems (the game currencies, not chess ELO) - DESIGN.md added as the visual specification document Co-Authored-By:
-
