statechart-watch icon indicating copy to clipboard operation
statechart-watch copied to clipboard

A replica of the Citizen Quartz Multi Alarm III watch based on the 1987 paper introducing statecharts built with XState and React

Citizen Quartz Multi Alarm III

Check out the live demo at https://andyjakubowski.github.io/statechart-watch/

A pretty exact replica of the Citizen Quartz Multi Alarm III watch based on figure 31 in David Harel’s 1987 paper introducing statecharts.

Overview of the watch Figure 31 from Harel’s paper

Links

Statecharts: a visual formalism for complex systems

Awesome overall intro to statecharts: https://statecharts.github.io/

XState, a JavaScript framework that implements statecharts

Citizen Quartz Multi Alarm III 41-3534

Usage

Built with Create React App. See their documentation for details.

Clone this repo on your machine, navigate to the project directory, then run:

yarn install
yarn start

yarn start runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Learn More

To learn React, check out the React documentation.

Deployment

Tweak the homepage field in package.json if you’re going to deploy to GitHub Pages.

More about deploying Create React App apps: https://create-react-app.dev/docs/deployment/#github-pages