Building Sum Tile: A Modern Web Puzzle Game That Puts Users First

The Idea: A Scrabble-Style Advent Puzzle

The core concept for Sum Tile is simple: Each day from December 1st to the 25th, a new puzzle unlocks. Players must arrange a set of letter tiles to form two distinct words. The catch? The total score of those two words, using standard Scrabble point values, must match a target score.

December Focus: The puzzles use Christmas-related words to celebrate the holiday season!

Post-Christmas: Starting in January, it will smoothly transition into a daily, year-round word puzzle.

Design Philosophy: Simple, Accessible, Delightful

My goal was to create a game that was clear, fast, and universally accessible. The interface needed to get out of the way so players could focus entirely on the puzzle.

Universal Accessibility: How Simple Wins

Accessibility wasn't an afterthought—it was the blueprint. I ensured the game is fully playable using any input method a user prefers:

• Mouse/Touch: Smooth, custom drag-and-drop and touch gestures on mobile with clear visual feedback.
• Keyboard: Full keyboard navigation allows players to Tab through tiles, Enter or Space to select, and Escape to deselect or remove a tile.
• Screen Reader Support: Proper ARIA labels and focus management were built in from the start to ensure the game works for those using assistive technology.

User Delight: The Little Things

The experience is what matters. We added small, rewarding features that make playing fun:

• Celebration Moments: Successfully solving a puzzle triggers a satisfying confetti animation.
• Hint System: Need a nudge? Players get three hints per puzzle, revealing one letter at a time to help balance challenge and frustration.
• Smart Calendar: The calendar system automatically unlocks puzzles daily, creating a sense of anticipation and progression right up to Christmas Day.

Technical Decisions: The Power of Constraints

To make the game fast and easy to maintain, I deliberately chose a lean tech stack. This focused approach fostered creative, focused solutions.

Vanilla JavaScript (No Frameworks)

Why skip the big frameworks? By using plain JavaScript with ES6 modules, the code stays incredibly fast, easy to understand, and maintainable. There are no complex build steps—just clean, modular code that loads almost instantly.

Modular Architecture

The code is neatly separated into focused modules, meaning each file only does one job. This approach, known as modularity, makes the project incredibly easy to work with and extend:

• drag-drop.js — Handles mouse and touch interactions.
• keyboard.js — Manages keyboard navigation.
• scoring.js — Calculates scores and validates solutions.
• ui.js — Manages the calendar and puzzle views.

Tailwind CSS for Styling

I used Tailwind CSS for rapid and consistent styling. The utility-first approach meant the CSS was compiled once and shipped, keeping the overall site load light and snappy.

The Key Lessons Learned

Building Sum Tile reinforced several crucial development principles that any aspiring web creator can use:

• Start with Accessibility: It is infinitely easier to build accessibility features like keyboard navigation and ARIA support from the ground up than to try and retrofit them later.
• Simple Can Be Powerful: Vanilla JavaScript and a light CSS library like Tailwind can deliver a fast, performant, and maintainable solution that easily competes with framework-heavy projects.
• Constraints Foster Creativity: Limiting dependencies forced me to find focused, efficient solutions rather than relying on heavy external libraries.
• User Experience Matters: Thoughtful design details—clear feedback, smooth animations, and helpful hints—make a massive difference in how much someone enjoys your game.