Add links between project and demo.
This commit is contained in:
parent
cf560f576d
commit
3b2a7f22f4
|
|
@ -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 faces in response to the overall size of the container allocated to
|
||||||
the `<domino-clock />` component, but that's a future task.
|
the `<domino-clock />` component, but that's a future task.
|
||||||
|
|
||||||
|
# DEMO
|
||||||
|
|
||||||
|
There is a demo: [The Domino
|
||||||
|
Clock.](https://elfsternberg.com/projects/dominoclock/)
|
||||||
|
|
||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
- Add a few more CSS variables.
|
- Add a few more CSS variables.
|
||||||
|
|
|
||||||
46
index.html
46
index.html
|
|
@ -7,10 +7,50 @@
|
||||||
<meta http-equiv="X-UI-Compatible" content="ie-edge" />
|
<meta http-equiv="X-UI-Compatible" content="ie-edge" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Domino Clock:</h2>
|
<h1>The Domino Clock</h1>
|
||||||
<domino-clock></domino-clock>
|
<p>
|
||||||
<script type="module" src="/src/index.ts"></script>
|
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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
"description": "The Domino Clock",
|
"description": "The Domino Clock",
|
||||||
"main": "build/index.js",
|
"main": "build/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "vite build",
|
"build": "vite build --base='./'",
|
||||||
"lint": "eslint",
|
"lint": "eslint",
|
||||||
"dev": "vite -m development",
|
"dev": "vite -m development",
|
||||||
"test": "jest"
|
"test": "jest"
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ class DominoClock extends HTMLElement {
|
||||||
|
|
||||||
tock(board: Face, time: number) {
|
tock(board: Face, time: number) {
|
||||||
const dots = Array.from(this.elements[board].getElementsByTagName('div'));
|
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) => {
|
dots.forEach((element) => {
|
||||||
const row = MATRIX.find((i) => Array.from(element.classList).includes(i[0]));
|
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; }
|
if (!row) { console.log(`Didn't find a row for ${element.className}?`); return; }
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ const config = (mode) => ({
|
||||||
|
|
||||||
build: {
|
build: {
|
||||||
outDir: "build",
|
outDir: "build",
|
||||||
|
assetDir: "./assets",
|
||||||
sourcemap: mode === "development",
|
sourcemap: mode === "development",
|
||||||
minify: !mode === "development",
|
minify: !mode === "development",
|
||||||
brotliSize: false,
|
brotliSize: false,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue