Skip to content

E
el3ab-Player
Switch branch/tag
  1. 03 Jun, 2026 8 commits
    • Mahmoud Aglan's avatar
      feat: complete rebuild — all 16 phases, modular game engine · 4d7736a1
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      4d7736a1
    • Mahmoud Aglan's avatar
      fix: chess board ACTUALLY visible now · 1b09a424
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      1b09a424
    • Mahmoud Aglan's avatar
      fix: chess board init — sequential script loading + DOM verification · 677320c2
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      677320c2
    • Mahmoud Aglan's avatar
      fix: chess board renders — use .board-wrapper (what CSS expects) · b4e41050
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      b4e41050
    • Mahmoud Aglan's avatar
      fix: puzzles working — create table, seed 20 puzzles, fix offset bug · 4cf1c318
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      4cf1c318
    • Mahmoud Aglan's avatar
      feat: chess fully playable — all modes, analysis, puzzles, matchmaking · 2dd53307
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      2dd53307
    • Mahmoud Aglan's avatar
      juice: full animation + interaction feedback system · d369c086
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      d369c086
    • Mahmoud Aglan's avatar
      nuke v2 SPA, rebuild as single-file app with working games · e620362f
      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: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      e620362f
  3. 02 Jun, 2026 5 commits
    • Mahmoud Aglan's avatar
      feat: all screens built — chess lobby, profile, leaderboard, friends, shop,... · f39a8dcb
      Mahmoud Aglan authored 
      feat: all screens built — chess lobby, profile, leaderboard, friends, shop, achievements, settings, ludo/domino/backgammon lobbies

Phase 2+3 complete:
- Chess lobby: full time control picker, bot selector, multiplayer search
- Chess game: wraps Board + Game engines in immersive mode
- Ludo lobby: player count, bot difficulty, room codes
- Domino lobby: 2P/4P teams, difficulty, room codes
- Backgammon lobby: match length, room codes
- Profile: XP bar, per-game ratings, economy, stats
- Leaderboard: multi-game + multi-mode selector
- Friends: list, requests, search, add
- Shop: categories, buy with coin burst particles, equip
- Achievements: grid with progress tracking
- Settings: sound toggle, logout
- Fix: router import bug in main.js
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      f39a8dcb
    • Mahmoud Aglan's avatar
      nuke: delete entire PHP frontend, rebuild as vanilla JS SPA · 9d4a6fa3
      Mahmoud Aglan authored 
      DELETED:
- All 50+ PHP pages, templates, includes
- app.css and app-v2.css (1782 + 700 lines of accumulated CSS)

CREATED:
- app/core/ — SPA engine (router, state, api, audio, haptics, particles, animate)
- app/screens/ — ES module screens (home, login + placeholders for all routes)
- app/styles/ — Design token system + animations + components
- index.php — now serves SPA shell for all non-API routes

ARCHITECTURE:
- Vanilla JS SPA with ES Modules (no build step, no framework)
- History API router with animated transitions
- Web Audio API synthesizer for game sounds
- Canvas particle system (confetti, coin bursts)
- Web Animations API for juice (number tickers, fly-to, pop, shake)
- Haptic feedback patterns via navigator.vibrate
- Game engines load on-demand as classic scripts (zero modifications)

API endpoints (24) completely unchanged. Game engine JS (25 files) unchanged.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      9d4a6fa3
    • Mahmoud Aglan's avatar
      feat: kill chess-centric shell — EL3AB is now a game hub · 8c4dc029
      Mahmoud Aglan authored 
      - Sidebar: games (شطرنج/لودو/طاولة/دومينو) are the primary nav items
- Removed "العب الان" chess-only play button from sidebar
- Removed floating chess FAB from mobile nav
- Mobile nav: 5 tabs (home/games/leaderboard/social/profile)
- Header: shows account level instead of chess ELO
- Home page: games grid is the hero, no chess matchmaking widget
- Removed all chess-specific time control UI from home page
- Each game's lobby page handles its own matchmaking
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      8c4dc029
    • Mahmoud Aglan's avatar
      fix: daily reward — use correct column name last_daily_reward · 0b3d240c
      Mahmoud Aglan authored 
      Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      0b3d240c
    • Mahmoud Aglan's avatar
      feat: multi-game platform overhaul — per-game ratings, redesigned UI, kill chess-legacy · bd053eda
      Mahmoud Aglan authored 
      - New player_game_ratings table (any game, any mode, ELO + W/L/D + streaks)
- New /api/ratings.php — unified ratings API (player, leaderboard, history, modes)
- game.php dual-writes to new table on chess game end
- ludo.php now tracks ELO + XP + coins on game completion
- Full v2 design system (app-v2.css) — WCAG AA, component-driven
- Redesigned: home, profile, leaderboard, play, login pages
- New nav: 4-tab mobile + floating play FAB + grouped desktop sidebar
- XP level titles now game-neutral (مبتدئ → استاذ → اسطورة)
- Leaderboard supports all games with mode selector
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
      bd053eda
  5. 31 May, 2026 1 commit
  7. 30 May, 2026 26 commits