Git Product home page Git Product logo

gameclock's Introduction

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.