Mancala Royale Project Report
1. The Concept
Mancala Royale is a premium browser-based version of the classic Mancala (Kalah) board game, redesigned to feel like a polished physical tabletop experience. I chose Mancala for this one-day sprint because the core rules are simple enough to implement quickly, while still giving enough room to test AI difficulty, turn-based state management, responsive UI, animation, audio, and a premium 2.5D visual style.
The goal was not only to make the game playable, but to transform a basic web board game into a more commercial-looking experience with carved wood, gold trim, green felt, glass-like stones, animated seed movement, sound effects, background music, local multiplayer, and multiple AI difficulty levels.
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript.
The project uses no framework, no MVC architecture, and no build step. CSS handles the premium 2.5D presentation using gradients, shadows, perspective, responsive media queries, and layered visual effects. JavaScript handles the Mancala rules, board rendering, seed animations, AI, move history, game states, audio controls, and screen transitions. The project also uses the Web Audio API for sound effects and a real background music file from assets/audio/music-game.mp3.
The AI Assist: ChatGPT handled the concept analysis, visual direction, UI/UX planning, responsive-layout strategy, debugging prompts, and technical instructions. OpenAI Codex was used for the coding and iterative improvement phase, modifying the existing HTML, CSS, and JavaScript based on the design requirements and feedback.
3. The 1 Day Sprint:
Morning (Hours 1–3): We started by building the core Mancala experience and defining the rules, turn flow, capture system, extra-turn behavior, win condition, local 2-player mode, and computer opponent. The first version was functional, but visually it still looked like a basic web board game. We then focused on the product direction and decided to redesign it as Mancala Royale — Master the Ancient Board, with a premium carved-wood, gold, and green-felt style.
Afternoon (Hours 4–6): The main focus shifted to the 2.5D redesign. We worked on a new home screen, decorative Mancala board, gold primary CTA, wooden secondary buttons, utility controls, gameplay HUD, player cards, board depth, marble-like stones, shadows, and responsive behavior. This stage required several iterations because Codex could reproduce the general structure but struggled to match the reference design proportions. Desktop layouts became too wide, buttons and text were sometimes too small, and short screens caused the lower navigation and footer to be cut off. We repeatedly adjusted the layout system so the design stayed centered, preserved its portrait-like composition, and allowed vertical scrolling when the viewport was too short.
The Finish Line (Hours 7–8): The final phase focused on polish and QA. We improved responsive sizing, menu-button depth, spacing, shadows, mobile and short-desktop behavior, gameplay orientation handling, and visual hierarchy. We also added multiple AI difficulties—Easy, Medium, and Hard—with Hard using a depth-5 minimax search with alpha-beta pruning. Move history, settings, winner feedback, confetti, and gameplay controls were added or refined. Finally, we integrated real looping background music from the assets/audio/ folder while keeping the existing synthesized sound effects, then reviewed and updated the project documentation.
4. The Roadblocks
Roadblocks: The biggest roadblock was matching the premium 2.5D reference design consistently across different screen sizes. Codex could create the basic components, but it often treated the interface like a normal responsive website instead of one unified game composition. On large desktop screens the board and buttons stretched too wide, while on shorter screens the logo, menu, bottom navigation, or footer could become cropped.
Another challenge was visual consistency. Fixing one layout problem sometimes introduced another—for example, reducing the overall width made text wrap, enlarging the primary button made the board feel too small, and forcing everything into 100vh made the bottom controls disappear. The solution was to stop scaling individual components independently and instead use a single centered Home layout system with consistent proportions, controlled maximum widths, responsive breakpoints, and vertical scrolling when necessary.
The final challenge was audio integration. The original project relied mainly on synthesized Web Audio effects, but the upgraded version needed real background music without creating duplicate tracks or breaking browser autoplay restrictions. The music system had to start after user interaction, loop continuously, fade smoothly, respect the settings controls, and remain as a single instance while switching between Home and Gameplay.
5. Key Takeaways
What was the part that worked the best? The core game structure and progressive feature development. Mancala was a good fit for a one-day sprint because the rules could be implemented early, leaving time to improve the experience with animations, three AI difficulty levels, move history, audio, responsive behavior, and a much stronger visual identity. Separating the gameplay logic from the presentation also made it possible to redesign the interface without rewriting the full game.
What was the part that worked the worst? Translating a highly detailed visual reference into responsive HTML and CSS through repeated Codex prompts. A request such as “make it match this design” was not specific enough. Codex performed much better when the work was divided into smaller passes: first structure, then size and spacing, then 2.5D depth and shadows, then responsive QA. The biggest lesson was that premium UI work needs measurable layout constraints rather than only visual descriptions.
My final thought: If I had one more day, I would focus on a complete visual QA pass across desktop, tablet, and mobile, replace more CSS-generated decorative elements with optimized image assets where useful, add persistent settings and statistics with localStorage, and make the currently decorative leaderboard/statistics controls fully functional. I would also tune the Hard AI further, improve the background-music transitions between menu and gameplay, and continue refining the board and button materials until the final interface matches the Mancala Royale reference more closely.