From 3b2a7f22f4ee700ca565528afde5c017072041d2 Mon Sep 17 00:00:00 2001 From: "Elf M. Sternberg" Date: Wed, 17 Nov 2021 16:02:46 -0800 Subject: [PATCH] Add links between project and demo. --- README.md | 5 +++++ index.html | 46 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 2 +- src/index.ts | 2 +- vite.config.js | 1 + 5 files changed, 51 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a86659e..8620ae3 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,11 @@ you can change the size and colors. I *really* should make it resize the faces in response to the overall size of the container allocated to the `` component, but that's a future task. +# DEMO + +There is a demo: [The Domino +Clock.](https://elfsternberg.com/projects/dominoclock/) + # TODO - Add a few more CSS variables. diff --git a/index.html b/index.html index c7282b4..f4da7da 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,50 @@ + + + + -

Domino Clock:

- - +

The Domino Clock

+

+ Sometime around 1996, when I was working for CompuServe, I saw a lovely demonstration of an + electromechanical watch that used a sort of domino face to tell the time. I liked it so much that + when I was looking for a toy project for my first Java Applet, I decided to implement the + algorithm of the watch. +

+

+ 25 years later, I found the source code buried somewhere in an old CD. I decided to try an + re-implement the logic in Javascript, and to experiment with a hand-written + Web Component. This is + the result. +

+

+ It might seem a bit silly to have implemented the seconds face when the minutes face has a + resolution of only five minutes, but it allows you to watch the clock in operation and learn what + each symbol means: an empty face is 0 (12) and all four pips visible is 11 (or 55 + minutes/seconds). +

+ +

+ The source code, both for this project and for the Java original, + are available at my personal Git repository + at ElfSternberg.com. +

+ diff --git a/package.json b/package.json index f94882f..e05bd8b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "The Domino Clock", "main": "build/index.js", "scripts": { - "build": "vite build", + "build": "vite build --base='./'", "lint": "eslint", "dev": "vite -m development", "test": "jest" diff --git a/src/index.ts b/src/index.ts index 1c5da22..edf7ee5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -104,7 +104,7 @@ class DominoClock extends HTMLElement { tock(board: Face, time: number) { const dots = Array.from(this.elements[board].getElementsByTagName('div')); - dots.forEach((element) => element.style.opacity = "0"); + dots.forEach((element) => { element.style.opacity = "0"; }); dots.forEach((element) => { const row = MATRIX.find((i) => Array.from(element.classList).includes(i[0])); if (!row) { console.log(`Didn't find a row for ${element.className}?`); return; } diff --git a/vite.config.js b/vite.config.js index ac4a857..0889958 100644 --- a/vite.config.js +++ b/vite.config.js @@ -13,6 +13,7 @@ const config = (mode) => ({ build: { outDir: "build", + assetDir: "./assets", sourcemap: mode === "development", minify: !mode === "development", brotliSize: false,