MTG Chess Clock

A web-based multiplayer chess clock and life counter for Magic: The Gathering, designed for use in table top play with a phone or tablet. This was an earlier project of mine, when I was still learning web development basics. It helped me understand responsive design, codifying game logic, and dynamic DOM manipulation.

Learning Outcomes

1. Responsive Web Design: UI constructed using CSS Grid and media queries.
2. JavaScript Game Logic: Implemented turn-based timing, life counters, and player state management in JS.
3. Dynamic DOM Manipulation: Used jQuery and vanilla JS for interactive controls and real-time updates.
4. Accessibility & Usability: Designed for touch devices, with double-tap prevention and large controls.
5. Component Reuse: Structured code for easy extension to different player counts and game modes.

Project Architecture

• Frontend:
  • Pure HTML, CSS, and JavaScript (with jQuery for convenience).
  • CSS Grid for layout, responsive design for mobile/desktop.
  • All logic runs client-side, no backend required.
• Features:
  • Four-player chess clock with pass-turn and pause functionality.
  • Life counters for each player, with elimination on zero life.
  • Settings dialog for initial time and player count.
  • Flip controls for table orientation.
• Extensibility:
  • Easy to modify for different games or player numbers.

Explore the Code

• MTG Chess Clock on GitHub
• Give it a go!