a digital timer for games, such as go and chess

Usage no npm install needed!

<script type="module">
  import dbosstGameclock from 'https://cdn.skypack.dev/@dbosst/gameclock';



A preact module for a game clock, supporting an arbitrary number of players.


View the live demo by clicking here.

Note: the interface options for the clock are only part of the demo, not the module itself. Also, the images inside each player's clock are part of the demo css, not a module option.

You can also just use the demo for your personal needs (if you aren't attaching the module to a program), and save your own timing presets to a text file by copy/pasting the state with the demo's import/export feature.


Support for various timing modes:

  • Go's byo-yomi / (Canadian) overtime
  • Chess' Delay (Bronstein) Timing
  • Chess' Increment (Fischer) Timing (before & after)
  • Hourglass
  • Word game timing (negative time counting)
  • Absolute (egg-timer)

Customizable display:

  • Display elapsed or remaining time/periods/phase/moves
  • Customizable display text & information (player name, time expired text, periods, etc.)
  • Fractional seconds customization (0-4 decimal places, update interval)

Adjustable clock:

  • Pause the clock first, and then adjust the current player clock.
  • Also, change the active player by pausing and making a move.

Callback events, including:

  • On last 10 seconds (of current period/phase)
  • Time Expired
  • Made move
  • Pause, Resume, Reset, Init

CSS classes:

  • Style the game clock or each individual player clock
  • Style each player clock according to the clock state: expired, running, paused, init.


Please read the docs by clicking here.

Build the demo

Pre-requisites: You need Node.js, npm, and preact installed to build the demo.

Then download this demo with git and use npm to install the dependencies:

$ git clone https://github.com/dbosst/gameclock
$ cd gameclock
$ npm install

Then to create the bundle, you can either build the development demo once:

$ npm run build-demo

Or use the watch-demo script for development:

$ npm run watch-demo

To view the built demo, open the local gameclock/demo/index.html file in your web browser. If you have a javascript blocking plug-in, such as No-Script, make sure to allow for it.