gameclock
A preact module for a game clock, supporting an arbitrary number of players.
Demo
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.
Features
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.
Documentation
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.