elf
/
dominoclock
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add links between project and demo.

This commit is contained in:
Elf M. Sternberg 2021-11-17 16:02:46 -08:00
parent cf560f576d
commit 3b2a7f22f4
5 changed files with 51 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -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 `<domino-clock />` 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.

46
index.html
View File

@ -7,10 +7,50 @@
<meta http-equiv="X-UI-Compatible" content="ie-edge" />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#000000" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet" />
<style>
body {
font-family: "Mulish", sans-serif;
font-size: 16px;
line-height: 1.36;
letter-spacing: 0.012em;
}
p {
color: #282828;
max-width: 45ch;
}
</style>
</head>
<body>
<h2>Domino Clock:</h2>
<domino-clock></domino-clock>
<script type="module" src="/src/index.ts"></script>
<h1>The Domino Clock</h1>
<p>
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.
</p>
<p>
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
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Component</a>. This is
the result.
</p>
<p>
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).
</p>
<domino-clock></domino-clock>
<p>
The source code, both for this project and for the Java original,
<a href="https://git.elfsternberg.com/elf/dominoclock"
>are available at my personal Git repository</a
>
at <a href="https://elfsternberg.com">ElfSternberg.com</a>.
</p>
<script type="module" src="./src/index.ts"></script>
</body>
</html>

2
package.json
View File

@ -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"

2
src/index.ts
View File

@ -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; }

1
vite.config.js
View File

@ -13,6 +13,7 @@ const config = (mode) => ({
build: {
outDir: "build",
assetDir: "./assets",
sourcemap: mode === "development",
minify: !mode === "development",
brotliSize: false,