- 03 Jun, 2026 3 commits
-
-
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:Claude Opus 4.6 <noreply@anthropic.com>
-
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:
-
- 02 Jun, 2026 5 commits
-
-
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: -
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: -
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: -
Mahmoud Aglan authored
Co-Authored-By: -
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:
-
- 31 May, 2026 1 commit
-
-
Mahmoud Aglan authored
The PATCH to profiles was using user token which fails due to RLS. Now uses SUPABASE_SERVICE_KEY. Also fixed system_config query auth. Co-Authored-By:
-
- 30 May, 2026 28 commits
-
-
Mahmoud Aglan authored
- Added missing data-panel="chess" HTML section for field rendering - Reorganized sidebar into logical groups with Arabic headers: عام (General): Colors, Spacing, UI, Assets, Icons, Bots شطرنج (Chess): Board Colors, Game Styling, Pieces, Move Classes ألعاب أخرى (Other Games): Ludo, Domino, Backgammon Co-Authored-By: -
Mahmoud Aglan authored
-
Mahmoud Aglan authored
Converted all hardcoded chess board values to CSS custom properties: - Board: radius, shadow, border, max-width - Pieces: size, white/black colors, stroke, shadow, hover/drag scale - Legal moves: dot size, capture ring size/border - Clock: bg, active bg, radius, font-size, padding - Coordinates: size, weight - Side panel: width, bg, radius - Move list: font-size - Eval bar: width, radius - Game header: padding, radius, bg, player/rating font sizes All 32 variables exposed in admin theme under "♟ Chess Styling" section with text inputs for full customization of every single value. Co-Authored-By: -
Mahmoud Aglan authored
Admin Theme New Sections: -
📐 Spacing & Layout: 9 range sliders for border-radius, content-max, header-h, nav-bottom-h, card-padding, section-gap, touch-min -🎲 Domino: 5 color pickers for game theming -🎯 Backgammon: 8 color pickers for board/checker/felt colors -🎨 Icons Grid: per-icon upload (31 icons individually replaceable) RGBA Picker: - Color input + alpha slider (0-100%) for rgba-based CSS variables - Live preview, outputs rgba() string - Applied to: board highlights, overlays, borders Per-Icon Override: - Individual SVG/PNG upload per icon - Runtime: replaces SVG <use> with <img> element - Resolution guide: "24×24px SVG مفضل" Upload Resolution Guides: - Pieces: 128×128px - Logo: 200×40px - Favicon: 32×32px - Icons: 24×24px - Sprite: SVG 24px viewBox All changes live-effective via CSS variable injection + runtime JS. Co-Authored-By: -
Mahmoud Aglan authored
Problems fixed: - Analysis no longer freezes (was sending all positions in one request) - Now analyzes position-by-position with live progress updates - Progress bar shows "تحليل النقلة 5 من 30" with fill animation - Fallback: loads moves from moves[] array when PGN is empty - Added 'cache' API action to save analysis results with service key - Fixed curl handle leak (unset → proper handling) Flow: click analyze → progress bar fills per move → results render → cached Co-Authored-By: -
Mahmoud Aglan authored
Time Controls: - 4 categories: Bullet (1+0, 1+1, 2+1), Blitz (3+0, 3+2, 5+0, 5+3), Rapid (10+0, 10+5, 15+10, 20+0), Classical (30+0, 30+20, 45+0, 60+0) - Category tabs with dynamic option switching - Both multiplayer and custom game sections ELO: - Default starts at 0 (was 1200) - DB columns altered: DEFAULT 0 - Floor at 0 (was 100) - FIDE calculation unchanged (K-factor based on games played) Bot games: - Always rated=false (removed toggle) - Shows "مباراة تدريبية (غير مصنفة)" instead of rated toggle - Quick match also unrated Premove: - Selected square now visually highlighted during opponent's turn - premove-from class applied immediately for visual feedback Co-Authored-By: -
Mahmoud Aglan authored
- game.js now sends moves array + move_count alongside PGN - API uses SUPABASE_SERVICE_KEY instead of user token for PATCH (user token may lack permission to update matches table) - Handles moves as array or string - This fixes analysis page showing "no moves" after game ends Co-Authored-By: -
Mahmoud Aglan authored
Both bot games and live multiplayer games now show a gold "تحليل اللعبة" button in the result overlay that navigates to /analysis?id={gameId}. Co-Authored-By: -
Mahmoud Aglan authored
Both sides now use ♚♛♜♝♞♟ (solid filled shapes). White: color #fff + 1px #555 stroke = solid white with dark outline Black: color #222 + 1px #000 stroke = solid dark with black outline Both look equally solid/filled, just different colors. Co-Authored-By: -
Mahmoud Aglan authored
Coordinates now inside squares with contrasting colors: - Rank numbers: top-left of left column, alternating light/dark - File letters: bottom-right of bottom row, alternating dark/light - No separate border/padding needed - Board: no thick border, just subtle shadow - Clean minimal look matching Chess.com mobile Co-Authored-By: -
Mahmoud Aglan authored
- White pieces: 0.5px #444 stroke (subtler outline, looks more solid) - Coordinates: moved outside board (bottom -22px, left -20px) - Coords larger (12px), centered, light grey (#aaa) - Board wrapper: padding for coord space (22px left, 22px bottom) Co-Authored-By: -
Mahmoud Aglan authored
White: #fff fill + 1px #666 stroke (solid white with grey outline) Black: #000 fill, no stroke (solid black like reference) Co-Authored-By: -
Mahmoud Aglan authored
White pieces: color #fff with 1px dark stroke (filled white, visible outline) Black pieces: color #333 with thin stroke (solid dark, like reference) Both use paint-order: stroke fill for proper rendering. Co-Authored-By: -
Mahmoud Aglan authored
Black pieces now color: #222 with stroke, white pieces color: #fff. Gives clear visual distinction between sides. Co-Authored-By: -
Mahmoud Aglan authored
Board colors changed to Chess.com-style green: - Light squares: #EBECD0 (cream/beige) - Dark squares: #779556 (olive green) - Selected: yellow highlight - Last move: yellow tint Board frame: - Dark border (3px #3d3d3d) - Deeper shadow for elevation - 6px border-radius Pieces: - Larger font-size (62px max) - Drop-shadow filter for 3D depth - Hover scale effect (1.05x) - Removed pulsing animation on legal moves (static dots like Chess.com) Highlights: - Stronger check glow (red inset shadow) - Clean static legal move dots (no pulse) - Capture ring slightly larger (88%) Co-Authored-By: -
Mahmoud Aglan authored
- Board tiles: 56x28 base (was 48x24), 60x30 on desktop - Board area: max-height 400px, stops giant green void - Pips: 4px base, 5px desktop for readability - Hand tiles: more gap (6px), more padding - Mobile: tiles 44x22 (was 38x19) Co-Authored-By: -
Mahmoud Aglan authored
Smart behaviors: - Auto-roll dice at start of each turn - If only one move exists for a piece, execute immediately on tap - If only one complete sequence possible, auto-execute entire turn - Auto-end turn when no moves remain - Movable pieces highlighted with golden glow (tap targets) - Tap piece → valid destinations highlighted → tap destination → done - Undo button for unlimited undo before turn ends UX flow: 1. Dice auto-roll 2. Movable sources highlighted 3. Tap source → if single destination, auto-move 4. If multiple destinations → show targets → tap one 5. Repeat until dice exhausted 6. Turn auto-ends Minimal taps, zero rules knowledge needed, fast animations. Co-Authored-By: -
Mahmoud Aglan authored
- Board: fixed 580px width (680px on large screens), aspect-ratio 1.4:1 - Checkers: 32px (36px large screens) - Layout: centered with gap, not stretched - Page container: 960px max (not 100%) - No more viewport-filling nonsense Co-Authored-By: -
Mahmoud Aglan authored
The app's .main-inner has max-width: 600px globally. Added !important override on game pages so the board can expand to full available width. Co-Authored-By: -
Mahmoud Aglan authored
max-height: calc(100vh - 150px) ensures board fills available height, aspect-ratio 1.5:1 derives width from that. Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Real backgammon boards are wider than tall. Board now uses width:100% with aspect-ratio 1.45/1, expanding to fill available horizontal space. Co-Authored-By: -
Mahmoud Aglan authored
Height set to min(calc(100vh - 160px), 680px) with aspect-ratio driving the width. On 900px screen = 740px height = fills viewport. Co-Authored-By: -
Mahmoud Aglan authored
Co-Authored-By: -
Mahmoud Aglan authored
Board was overflowing horizontally because height-driven sizing made it wider than viewport. Now uses max-width: calc(100vw - 340px) with aspect-ratio 1.4/1 so it fills width and height follows proportionally. Co-Authored-By: -
Mahmoud Aglan authored
- Board height: calc(100vh - 180px) — uses full screen height - Layout height: calc(100vh - 70px) with overflow hidden - Removed max-width constraint, now aspect-ratio + height drive size - Board dominates viewport instead of floating in a small box - Large screens: max-height 750px Co-Authored-By: -
Mahmoud Aglan authored
getAllMovesForDice was returning moves without dieUsed, causing "(undefined)" in bot move log messages. Co-Authored-By: -
Mahmoud Aglan authored
- Board max-width: min(780px, calc(100vh - 160px)) instead of 640px - Layout max-width: 1200px instead of 900px - Checkers: 38px base, 42px on large screens - Dice: 60px on large screens - Player bars match board width - Board fills available viewport height Co-Authored-By:
-
- 29 May, 2026 3 commits
-
-
Mahmoud Aglan authored
Game Controller (backgammon-game.js) rewrite: - Fix selection: click same piece to deselect, click another to swap - Bar enforcement: must enter from bar first with clear message - Auto-pass when no moves remain for unused dice - Bot waiting status message visible during thinking - Opening roll shows clear "your turn" status with dice values - Pass button action for truly stuck positions - Smart move validation with proper die tracking - Individual bot move logging - Source validation: only select pieces that have moves UI (backgammon-ui.js) rewrite: - setSelected directly applies DOM classes (no render cycle needed) - Status text system: guides player ("Select piece", "Choose target") - Movable checkers highlighted with golden ring when it's your turn - Dice remaining indicator text below dice - Pass/skip button shown when stuck - Active player gold border highlight - Tap feedback animation - Hover preview on valid targets - New game button in result overlay - Valid target points show dashed circle indicator CSS additions: - .bg-point--clickable with gold ring on top checker - .bg-point--hover-preview green tint - .bg-move-flash animation - .bg-status, .bg-pass-btn, .bg-dice-remaining styles - .bg-new-game-btn in overlay - Valid point dashed circle indicator Co-Authored-By: -
Mahmoud Aglan authored
- Added gap: 4px between 3x3 grid cells - Added place-items: center for proper dot centering - Reduced dot size to 10px for better proportion with gaps - Removed margin: auto (place-items handles centering) - Increased border-radius to 12px for rounder dice Co-Authored-By: -
Mahmoud Aglan authored
- Deeper board shadow + border + 12px corners - Warmer path cells (#faf8f4) with subtle 0.5px grid - Gold safe stars with glow, larger and bolder - Start cells use gradients, home entrance directional gradients - Base corners: radial gradients with depth - Warmer base-inner (#fffef8) with deeper shadows - Pieces: radial gradient 3D look, larger (5.8%), smoother movement - Stronger highlight pulse + brightness filter - Center triangles doubled in size (100px borders) - Dice: larger (72px), warm glow, bigger dots (12px) - Roll button: larger padding, gold glow shadow - Player cards: box-shadow, 12px radius, stronger active glow - Board wrapper: 520px max for bigger desktop board - More dramatic piece-land bounce animation Co-Authored-By:
-
