diff --git a/dominoclock/assets/index.eaeda021.js b/dominoclock/assets/index.eaeda021.js
new file mode 100644
index 0000000..edb5a9f
--- /dev/null
+++ b/dominoclock/assets/index.eaeda021.js
@@ -0,0 +1,835 @@
+const p$1 = function polyfill() {
+ const relList = document.createElement("link").relList;
+ if (relList && relList.supports && relList.supports("modulepreload")) {
+ return;
+ }
+ for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
+ processPreload(link);
+ }
+ new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ if (mutation.type !== "childList") {
+ continue;
+ }
+ for (const node of mutation.addedNodes) {
+ if (node.tagName === "LINK" && node.rel === "modulepreload")
+ processPreload(node);
+ }
+ }
+ }).observe(document, { childList: true, subtree: true });
+ function getFetchOpts(script) {
+ const fetchOpts = {};
+ if (script.integrity)
+ fetchOpts.integrity = script.integrity;
+ if (script.referrerpolicy)
+ fetchOpts.referrerPolicy = script.referrerpolicy;
+ if (script.crossorigin === "use-credentials")
+ fetchOpts.credentials = "include";
+ else if (script.crossorigin === "anonymous")
+ fetchOpts.credentials = "omit";
+ else
+ fetchOpts.credentials = "same-origin";
+ return fetchOpts;
+ }
+ function processPreload(link) {
+ if (link.ep)
+ return;
+ link.ep = true;
+ const fetchOpts = getFetchOpts(link);
+ fetch(link.href, fetchOpts);
+ }
+};
+p$1();
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = window, e$5 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), n$4 = /* @__PURE__ */ new WeakMap();
+class o$4 {
+ constructor(t2, e2, n2) {
+ if (this._$cssResult$ = true, n2 !== s$3)
+ throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+ this.cssText = t2, this.t = e2;
+ }
+ get styleSheet() {
+ let t2 = this.o;
+ const s2 = this.t;
+ if (e$5 && void 0 === t2) {
+ const e2 = void 0 !== s2 && 1 === s2.length;
+ e2 && (t2 = n$4.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && n$4.set(s2, t2));
+ }
+ return t2;
+ }
+ toString() {
+ return this.cssText;
+ }
+}
+const r$2 = (t2) => new o$4("string" == typeof t2 ? t2 : t2 + "", void 0, s$3), i$2 = (t2, ...e2) => {
+ const n2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, n3) => e3 + ((t3) => {
+ if (true === t3._$cssResult$)
+ return t3.cssText;
+ if ("number" == typeof t3)
+ return t3;
+ throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+ })(s2) + t2[n3 + 1], t2[0]);
+ return new o$4(n2, t2, s$3);
+}, S$1 = (s2, n2) => {
+ e$5 ? s2.adoptedStyleSheets = n2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet) : n2.forEach((e2) => {
+ const n3 = document.createElement("style"), o2 = t$1.litNonce;
+ void 0 !== o2 && n3.setAttribute("nonce", o2), n3.textContent = e2.cssText, s2.appendChild(n3);
+ });
+}, c$1 = e$5 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
+ let e2 = "";
+ for (const s2 of t3.cssRules)
+ e2 += s2.cssText;
+ return r$2(e2);
+})(t2) : t2;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var s$2;
+const e$4 = window, r$1 = e$4.trustedTypes, h$1 = r$1 ? r$1.emptyScript : "", o$3 = e$4.reactiveElementPolyfillSupport, n$3 = { toAttribute(t2, i2) {
+ switch (i2) {
+ case Boolean:
+ t2 = t2 ? h$1 : null;
+ break;
+ case Object:
+ case Array:
+ t2 = null == t2 ? t2 : JSON.stringify(t2);
+ }
+ return t2;
+}, fromAttribute(t2, i2) {
+ let s2 = t2;
+ switch (i2) {
+ case Boolean:
+ s2 = null !== t2;
+ break;
+ case Number:
+ s2 = null === t2 ? null : Number(t2);
+ break;
+ case Object:
+ case Array:
+ try {
+ s2 = JSON.parse(t2);
+ } catch (t3) {
+ s2 = null;
+ }
+ }
+ return s2;
+} }, a$1 = (t2, i2) => i2 !== t2 && (i2 == i2 || t2 == t2), l$2 = { attribute: true, type: String, converter: n$3, reflect: false, hasChanged: a$1 };
+class d$1 extends HTMLElement {
+ constructor() {
+ super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$El = null, this.u();
+ }
+ static addInitializer(t2) {
+ var i2;
+ this.finalize(), (null !== (i2 = this.h) && void 0 !== i2 ? i2 : this.h = []).push(t2);
+ }
+ static get observedAttributes() {
+ this.finalize();
+ const t2 = [];
+ return this.elementProperties.forEach((i2, s2) => {
+ const e2 = this._$Ep(s2, i2);
+ void 0 !== e2 && (this._$Ev.set(e2, s2), t2.push(e2));
+ }), t2;
+ }
+ static createProperty(t2, i2 = l$2) {
+ if (i2.state && (i2.attribute = false), this.finalize(), this.elementProperties.set(t2, i2), !i2.noAccessor && !this.prototype.hasOwnProperty(t2)) {
+ const s2 = "symbol" == typeof t2 ? Symbol() : "__" + t2, e2 = this.getPropertyDescriptor(t2, s2, i2);
+ void 0 !== e2 && Object.defineProperty(this.prototype, t2, e2);
+ }
+ }
+ static getPropertyDescriptor(t2, i2, s2) {
+ return { get() {
+ return this[i2];
+ }, set(e2) {
+ const r2 = this[t2];
+ this[i2] = e2, this.requestUpdate(t2, r2, s2);
+ }, configurable: true, enumerable: true };
+ }
+ static getPropertyOptions(t2) {
+ return this.elementProperties.get(t2) || l$2;
+ }
+ static finalize() {
+ if (this.hasOwnProperty("finalized"))
+ return false;
+ this.finalized = true;
+ const t2 = Object.getPrototypeOf(this);
+ if (t2.finalize(), void 0 !== t2.h && (this.h = [...t2.h]), this.elementProperties = new Map(t2.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
+ const t3 = this.properties, i2 = [...Object.getOwnPropertyNames(t3), ...Object.getOwnPropertySymbols(t3)];
+ for (const s2 of i2)
+ this.createProperty(s2, t3[s2]);
+ }
+ return this.elementStyles = this.finalizeStyles(this.styles), true;
+ }
+ static finalizeStyles(i2) {
+ const s2 = [];
+ if (Array.isArray(i2)) {
+ const e2 = new Set(i2.flat(1 / 0).reverse());
+ for (const i3 of e2)
+ s2.unshift(c$1(i3));
+ } else
+ void 0 !== i2 && s2.push(c$1(i2));
+ return s2;
+ }
+ static _$Ep(t2, i2) {
+ const s2 = i2.attribute;
+ return false === s2 ? void 0 : "string" == typeof s2 ? s2 : "string" == typeof t2 ? t2.toLowerCase() : void 0;
+ }
+ u() {
+ var t2;
+ this._$E_ = new Promise((t3) => this.enableUpdating = t3), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), null === (t2 = this.constructor.h) || void 0 === t2 || t2.forEach((t3) => t3(this));
+ }
+ addController(t2) {
+ var i2, s2;
+ (null !== (i2 = this._$ES) && void 0 !== i2 ? i2 : this._$ES = []).push(t2), void 0 !== this.renderRoot && this.isConnected && (null === (s2 = t2.hostConnected) || void 0 === s2 || s2.call(t2));
+ }
+ removeController(t2) {
+ var i2;
+ null === (i2 = this._$ES) || void 0 === i2 || i2.splice(this._$ES.indexOf(t2) >>> 0, 1);
+ }
+ _$Eg() {
+ this.constructor.elementProperties.forEach((t2, i2) => {
+ this.hasOwnProperty(i2) && (this._$Ei.set(i2, this[i2]), delete this[i2]);
+ });
+ }
+ createRenderRoot() {
+ var t2;
+ const s2 = null !== (t2 = this.shadowRoot) && void 0 !== t2 ? t2 : this.attachShadow(this.constructor.shadowRootOptions);
+ return S$1(s2, this.constructor.elementStyles), s2;
+ }
+ connectedCallback() {
+ var t2;
+ void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), null === (t2 = this._$ES) || void 0 === t2 || t2.forEach((t3) => {
+ var i2;
+ return null === (i2 = t3.hostConnected) || void 0 === i2 ? void 0 : i2.call(t3);
+ });
+ }
+ enableUpdating(t2) {
+ }
+ disconnectedCallback() {
+ var t2;
+ null === (t2 = this._$ES) || void 0 === t2 || t2.forEach((t3) => {
+ var i2;
+ return null === (i2 = t3.hostDisconnected) || void 0 === i2 ? void 0 : i2.call(t3);
+ });
+ }
+ attributeChangedCallback(t2, i2, s2) {
+ this._$AK(t2, s2);
+ }
+ _$EO(t2, i2, s2 = l$2) {
+ var e2;
+ const r2 = this.constructor._$Ep(t2, s2);
+ if (void 0 !== r2 && true === s2.reflect) {
+ const h2 = (void 0 !== (null === (e2 = s2.converter) || void 0 === e2 ? void 0 : e2.toAttribute) ? s2.converter : n$3).toAttribute(i2, s2.type);
+ this._$El = t2, null == h2 ? this.removeAttribute(r2) : this.setAttribute(r2, h2), this._$El = null;
+ }
+ }
+ _$AK(t2, i2) {
+ var s2;
+ const e2 = this.constructor, r2 = e2._$Ev.get(t2);
+ if (void 0 !== r2 && this._$El !== r2) {
+ const t3 = e2.getPropertyOptions(r2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== (null === (s2 = t3.converter) || void 0 === s2 ? void 0 : s2.fromAttribute) ? t3.converter : n$3;
+ this._$El = r2, this[r2] = h2.fromAttribute(i2, t3.type), this._$El = null;
+ }
+ }
+ requestUpdate(t2, i2, s2) {
+ let e2 = true;
+ void 0 !== t2 && (((s2 = s2 || this.constructor.getPropertyOptions(t2)).hasChanged || a$1)(this[t2], i2) ? (this._$AL.has(t2) || this._$AL.set(t2, i2), true === s2.reflect && this._$El !== t2 && (void 0 === this._$EC && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t2, s2))) : e2 = false), !this.isUpdatePending && e2 && (this._$E_ = this._$Ej());
+ }
+ async _$Ej() {
+ this.isUpdatePending = true;
+ try {
+ await this._$E_;
+ } catch (t3) {
+ Promise.reject(t3);
+ }
+ const t2 = this.scheduleUpdate();
+ return null != t2 && await t2, !this.isUpdatePending;
+ }
+ scheduleUpdate() {
+ return this.performUpdate();
+ }
+ performUpdate() {
+ var t2;
+ if (!this.isUpdatePending)
+ return;
+ this.hasUpdated, this._$Ei && (this._$Ei.forEach((t3, i3) => this[i3] = t3), this._$Ei = void 0);
+ let i2 = false;
+ const s2 = this._$AL;
+ try {
+ i2 = this.shouldUpdate(s2), i2 ? (this.willUpdate(s2), null === (t2 = this._$ES) || void 0 === t2 || t2.forEach((t3) => {
+ var i3;
+ return null === (i3 = t3.hostUpdate) || void 0 === i3 ? void 0 : i3.call(t3);
+ }), this.update(s2)) : this._$Ek();
+ } catch (t3) {
+ throw i2 = false, this._$Ek(), t3;
+ }
+ i2 && this._$AE(s2);
+ }
+ willUpdate(t2) {
+ }
+ _$AE(t2) {
+ var i2;
+ null === (i2 = this._$ES) || void 0 === i2 || i2.forEach((t3) => {
+ var i3;
+ return null === (i3 = t3.hostUpdated) || void 0 === i3 ? void 0 : i3.call(t3);
+ }), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t2)), this.updated(t2);
+ }
+ _$Ek() {
+ this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
+ }
+ get updateComplete() {
+ return this.getUpdateComplete();
+ }
+ getUpdateComplete() {
+ return this._$E_;
+ }
+ shouldUpdate(t2) {
+ return true;
+ }
+ update(t2) {
+ void 0 !== this._$EC && (this._$EC.forEach((t3, i2) => this._$EO(i2, this[i2], t3)), this._$EC = void 0), this._$Ek();
+ }
+ updated(t2) {
+ }
+ firstUpdated(t2) {
+ }
+}
+d$1.finalized = true, d$1.elementProperties = /* @__PURE__ */ new Map(), d$1.elementStyles = [], d$1.shadowRootOptions = { mode: "open" }, null == o$3 || o$3({ ReactiveElement: d$1 }), (null !== (s$2 = e$4.reactiveElementVersions) && void 0 !== s$2 ? s$2 : e$4.reactiveElementVersions = []).push("1.6.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t;
+const i$1 = window, s$1 = i$1.trustedTypes, e$3 = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$2 = `lit$${(Math.random() + "").slice(9)}$`, n$2 = "?" + o$2, l$1 = `<${n$2}>`, h = document, r = (t2 = "") => h.createComment(t2), d = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u = Array.isArray, c = (t2) => u(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, a = /-->/g, f = />/g, _ = RegExp(`>|[
+\f\r](?:([^\\s"'>=/]+)([
+\f\r]*=[
+\f\r]*(?:[^
+\f\r"'\`<>=]|("|')|))|$)`, "g"), m = /'/g, p = /"/g, $ = /^(?:script|style|textarea|title)$/i, g = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), y = g(1), x = Symbol.for("lit-noChange"), b = Symbol.for("lit-nothing"), T = /* @__PURE__ */ new WeakMap(), A = h.createTreeWalker(h, 129, null, false), E = (t2, i2) => {
+ const s2 = t2.length - 1, n2 = [];
+ let h2, r2 = 2 === i2 ? "" : "", d2 = v;
+ for (let i3 = 0; i3 < s2; i3++) {
+ const s3 = t2[i3];
+ let e2, u3, c2 = -1, g2 = 0;
+ for (; g2 < s3.length && (d2.lastIndex = g2, u3 = d2.exec(s3), null !== u3); )
+ g2 = d2.lastIndex, d2 === v ? "!--" === u3[1] ? d2 = a : void 0 !== u3[1] ? d2 = f : void 0 !== u3[2] ? ($.test(u3[2]) && (h2 = RegExp("" === u3[0] ? (d2 = null != h2 ? h2 : v, c2 = -1) : void 0 === u3[1] ? c2 = -2 : (c2 = d2.lastIndex - u3[2].length, e2 = u3[1], d2 = void 0 === u3[3] ? _ : '"' === u3[3] ? p : m) : d2 === p || d2 === m ? d2 = _ : d2 === a || d2 === f ? d2 = v : (d2 = _, h2 = void 0);
+ const y2 = d2 === _ && t2[i3 + 1].startsWith("/>") ? " " : "";
+ r2 += d2 === v ? s3 + l$1 : c2 >= 0 ? (n2.push(e2), s3.slice(0, c2) + "$lit$" + s3.slice(c2) + o$2 + y2) : s3 + o$2 + (-2 === c2 ? (n2.push(void 0), i3) : y2);
+ }
+ const u2 = r2 + (t2[s2] || "") + (2 === i2 ? " " : "");
+ if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
+ throw Error("invalid template strings array");
+ return [void 0 !== e$3 ? e$3.createHTML(u2) : u2, n2];
+};
+class C {
+ constructor({ strings: t2, _$litType$: i2 }, e2) {
+ let l2;
+ this.parts = [];
+ let h2 = 0, d2 = 0;
+ const u2 = t2.length - 1, c2 = this.parts, [v2, a2] = E(t2, i2);
+ if (this.el = C.createElement(v2, e2), A.currentNode = this.el.content, 2 === i2) {
+ const t3 = this.el.content, i3 = t3.firstChild;
+ i3.remove(), t3.append(...i3.childNodes);
+ }
+ for (; null !== (l2 = A.nextNode()) && c2.length < u2; ) {
+ if (1 === l2.nodeType) {
+ if (l2.hasAttributes()) {
+ const t3 = [];
+ for (const i3 of l2.getAttributeNames())
+ if (i3.endsWith("$lit$") || i3.startsWith(o$2)) {
+ const s2 = a2[d2++];
+ if (t3.push(i3), void 0 !== s2) {
+ const t4 = l2.getAttribute(s2.toLowerCase() + "$lit$").split(o$2), i4 = /([.?@])?(.*)/.exec(s2);
+ c2.push({ type: 1, index: h2, name: i4[2], strings: t4, ctor: "." === i4[1] ? M : "?" === i4[1] ? k : "@" === i4[1] ? H : S });
+ } else
+ c2.push({ type: 6, index: h2 });
+ }
+ for (const i3 of t3)
+ l2.removeAttribute(i3);
+ }
+ if ($.test(l2.tagName)) {
+ const t3 = l2.textContent.split(o$2), i3 = t3.length - 1;
+ if (i3 > 0) {
+ l2.textContent = s$1 ? s$1.emptyScript : "";
+ for (let s2 = 0; s2 < i3; s2++)
+ l2.append(t3[s2], r()), A.nextNode(), c2.push({ type: 2, index: ++h2 });
+ l2.append(t3[i3], r());
+ }
+ }
+ } else if (8 === l2.nodeType)
+ if (l2.data === n$2)
+ c2.push({ type: 2, index: h2 });
+ else {
+ let t3 = -1;
+ for (; -1 !== (t3 = l2.data.indexOf(o$2, t3 + 1)); )
+ c2.push({ type: 7, index: h2 }), t3 += o$2.length - 1;
+ }
+ h2++;
+ }
+ }
+ static createElement(t2, i2) {
+ const s2 = h.createElement("template");
+ return s2.innerHTML = t2, s2;
+ }
+}
+function P(t2, i2, s2 = t2, e2) {
+ var o2, n2, l2, h2;
+ if (i2 === x)
+ return i2;
+ let r2 = void 0 !== e2 ? null === (o2 = s2._$Co) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cl;
+ const u2 = d(i2) ? void 0 : i2._$litDirective$;
+ return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Co) && void 0 !== l2 ? l2 : h2._$Co = [])[e2] = r2 : s2._$Cl = r2), void 0 !== r2 && (i2 = P(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
+}
+class V {
+ constructor(t2, i2) {
+ this.u = [], this._$AN = void 0, this._$AD = t2, this._$AM = i2;
+ }
+ get parentNode() {
+ return this._$AM.parentNode;
+ }
+ get _$AU() {
+ return this._$AM._$AU;
+ }
+ v(t2) {
+ var i2;
+ const { el: { content: s2 }, parts: e2 } = this._$AD, o2 = (null !== (i2 = null == t2 ? void 0 : t2.creationScope) && void 0 !== i2 ? i2 : h).importNode(s2, true);
+ A.currentNode = o2;
+ let n2 = A.nextNode(), l2 = 0, r2 = 0, d2 = e2[0];
+ for (; void 0 !== d2; ) {
+ if (l2 === d2.index) {
+ let i3;
+ 2 === d2.type ? i3 = new N(n2, n2.nextSibling, this, t2) : 1 === d2.type ? i3 = new d2.ctor(n2, d2.name, d2.strings, this, t2) : 6 === d2.type && (i3 = new I(n2, this, t2)), this.u.push(i3), d2 = e2[++r2];
+ }
+ l2 !== (null == d2 ? void 0 : d2.index) && (n2 = A.nextNode(), l2++);
+ }
+ return o2;
+ }
+ p(t2) {
+ let i2 = 0;
+ for (const s2 of this.u)
+ void 0 !== s2 && (void 0 !== s2.strings ? (s2._$AI(t2, s2, i2), i2 += s2.strings.length - 2) : s2._$AI(t2[i2])), i2++;
+ }
+}
+class N {
+ constructor(t2, i2, s2, e2) {
+ var o2;
+ this.type = 2, this._$AH = b, this._$AN = void 0, this._$AA = t2, this._$AB = i2, this._$AM = s2, this.options = e2, this._$Cm = null === (o2 = null == e2 ? void 0 : e2.isConnected) || void 0 === o2 || o2;
+ }
+ get _$AU() {
+ var t2, i2;
+ return null !== (i2 = null === (t2 = this._$AM) || void 0 === t2 ? void 0 : t2._$AU) && void 0 !== i2 ? i2 : this._$Cm;
+ }
+ get parentNode() {
+ let t2 = this._$AA.parentNode;
+ const i2 = this._$AM;
+ return void 0 !== i2 && 11 === t2.nodeType && (t2 = i2.parentNode), t2;
+ }
+ get startNode() {
+ return this._$AA;
+ }
+ get endNode() {
+ return this._$AB;
+ }
+ _$AI(t2, i2 = this) {
+ t2 = P(this, t2, i2), d(t2) ? t2 === b || null == t2 || "" === t2 ? (this._$AH !== b && this._$AR(), this._$AH = b) : t2 !== this._$AH && t2 !== x && this.g(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : c(t2) ? this.k(t2) : this.g(t2);
+ }
+ O(t2, i2 = this._$AB) {
+ return this._$AA.parentNode.insertBefore(t2, i2);
+ }
+ T(t2) {
+ this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
+ }
+ g(t2) {
+ this._$AH !== b && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(h.createTextNode(t2)), this._$AH = t2;
+ }
+ $(t2) {
+ var i2;
+ const { values: s2, _$litType$: e2 } = t2, o2 = "number" == typeof e2 ? this._$AC(t2) : (void 0 === e2.el && (e2.el = C.createElement(e2.h, this.options)), e2);
+ if ((null === (i2 = this._$AH) || void 0 === i2 ? void 0 : i2._$AD) === o2)
+ this._$AH.p(s2);
+ else {
+ const t3 = new V(o2, this), i3 = t3.v(this.options);
+ t3.p(s2), this.T(i3), this._$AH = t3;
+ }
+ }
+ _$AC(t2) {
+ let i2 = T.get(t2.strings);
+ return void 0 === i2 && T.set(t2.strings, i2 = new C(t2)), i2;
+ }
+ k(t2) {
+ u(this._$AH) || (this._$AH = [], this._$AR());
+ const i2 = this._$AH;
+ let s2, e2 = 0;
+ for (const o2 of t2)
+ e2 === i2.length ? i2.push(s2 = new N(this.O(r()), this.O(r()), this, this.options)) : s2 = i2[e2], s2._$AI(o2), e2++;
+ e2 < i2.length && (this._$AR(s2 && s2._$AB.nextSibling, e2), i2.length = e2);
+ }
+ _$AR(t2 = this._$AA.nextSibling, i2) {
+ var s2;
+ for (null === (s2 = this._$AP) || void 0 === s2 || s2.call(this, false, true, i2); t2 && t2 !== this._$AB; ) {
+ const i3 = t2.nextSibling;
+ t2.remove(), t2 = i3;
+ }
+ }
+ setConnected(t2) {
+ var i2;
+ void 0 === this._$AM && (this._$Cm = t2, null === (i2 = this._$AP) || void 0 === i2 || i2.call(this, t2));
+ }
+}
+class S {
+ constructor(t2, i2, s2, e2, o2) {
+ this.type = 1, this._$AH = b, this._$AN = void 0, this.element = t2, this.name = i2, this._$AM = e2, this.options = o2, s2.length > 2 || "" !== s2[0] || "" !== s2[1] ? (this._$AH = Array(s2.length - 1).fill(new String()), this.strings = s2) : this._$AH = b;
+ }
+ get tagName() {
+ return this.element.tagName;
+ }
+ get _$AU() {
+ return this._$AM._$AU;
+ }
+ _$AI(t2, i2 = this, s2, e2) {
+ const o2 = this.strings;
+ let n2 = false;
+ if (void 0 === o2)
+ t2 = P(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== x, n2 && (this._$AH = t2);
+ else {
+ const e3 = t2;
+ let l2, h2;
+ for (t2 = o2[0], l2 = 0; l2 < o2.length - 1; l2++)
+ h2 = P(this, e3[s2 + l2], i2, l2), h2 === x && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === b ? t2 = b : t2 !== b && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
+ }
+ n2 && !e2 && this.j(t2);
+ }
+ j(t2) {
+ t2 === b ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t2 ? t2 : "");
+ }
+}
+class M extends S {
+ constructor() {
+ super(...arguments), this.type = 3;
+ }
+ j(t2) {
+ this.element[this.name] = t2 === b ? void 0 : t2;
+ }
+}
+const R = s$1 ? s$1.emptyScript : "";
+class k extends S {
+ constructor() {
+ super(...arguments), this.type = 4;
+ }
+ j(t2) {
+ t2 && t2 !== b ? this.element.setAttribute(this.name, R) : this.element.removeAttribute(this.name);
+ }
+}
+class H extends S {
+ constructor(t2, i2, s2, e2, o2) {
+ super(t2, i2, s2, e2, o2), this.type = 5;
+ }
+ _$AI(t2, i2 = this) {
+ var s2;
+ if ((t2 = null !== (s2 = P(this, t2, i2, 0)) && void 0 !== s2 ? s2 : b) === x)
+ return;
+ const e2 = this._$AH, o2 = t2 === b && e2 !== b || t2.capture !== e2.capture || t2.once !== e2.once || t2.passive !== e2.passive, n2 = t2 !== b && (e2 === b || o2);
+ o2 && this.element.removeEventListener(this.name, this, e2), n2 && this.element.addEventListener(this.name, this, t2), this._$AH = t2;
+ }
+ handleEvent(t2) {
+ var i2, s2;
+ "function" == typeof this._$AH ? this._$AH.call(null !== (s2 = null === (i2 = this.options) || void 0 === i2 ? void 0 : i2.host) && void 0 !== s2 ? s2 : this.element, t2) : this._$AH.handleEvent(t2);
+ }
+}
+class I {
+ constructor(t2, i2, s2) {
+ this.element = t2, this.type = 6, this._$AN = void 0, this._$AM = i2, this.options = s2;
+ }
+ get _$AU() {
+ return this._$AM._$AU;
+ }
+ _$AI(t2) {
+ P(this, t2);
+ }
+}
+const z = i$1.litHtmlPolyfillSupport;
+null == z || z(C, N), (null !== (t = i$1.litHtmlVersions) && void 0 !== t ? t : i$1.litHtmlVersions = []).push("2.6.1");
+const Z = (t2, i2, s2) => {
+ var e2, o2;
+ const n2 = null !== (e2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== e2 ? e2 : i2;
+ let l2 = n2._$litPart$;
+ if (void 0 === l2) {
+ const t3 = null !== (o2 = null == s2 ? void 0 : s2.renderBefore) && void 0 !== o2 ? o2 : null;
+ n2._$litPart$ = l2 = new N(i2.insertBefore(r(), t3), t3, void 0, null != s2 ? s2 : {});
+ }
+ return l2._$AI(t2), l2;
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var l, o$1;
+class s extends d$1 {
+ constructor() {
+ super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+ }
+ createRenderRoot() {
+ var t2, e2;
+ const i2 = super.createRenderRoot();
+ return null !== (t2 = (e2 = this.renderOptions).renderBefore) && void 0 !== t2 || (e2.renderBefore = i2.firstChild), i2;
+ }
+ update(t2) {
+ const i2 = this.render();
+ this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t2), this._$Do = Z(i2, this.renderRoot, this.renderOptions);
+ }
+ connectedCallback() {
+ var t2;
+ super.connectedCallback(), null === (t2 = this._$Do) || void 0 === t2 || t2.setConnected(true);
+ }
+ disconnectedCallback() {
+ var t2;
+ super.disconnectedCallback(), null === (t2 = this._$Do) || void 0 === t2 || t2.setConnected(false);
+ }
+ render() {
+ return x;
+ }
+}
+s.finalized = true, s._$litElement$ = true, null === (l = globalThis.litElementHydrateSupport) || void 0 === l || l.call(globalThis, { LitElement: s });
+const n$1 = globalThis.litElementPolyfillSupport;
+null == n$1 || n$1({ LitElement: s });
+(null !== (o$1 = globalThis.litElementVersions) && void 0 !== o$1 ? o$1 : globalThis.litElementVersions = []).push("3.2.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$2 = (e2) => (n2) => "function" == typeof n2 ? ((e3, n3) => (customElements.define(e3, n3), n3))(e2, n2) : ((e3, n3) => {
+ const { kind: t2, elements: s2 } = n3;
+ return { kind: t2, elements: s2, finisher(n4) {
+ customElements.define(e3, n4);
+ } };
+})(e2, n2);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i = (i2, e2) => "method" === e2.kind && e2.descriptor && !("value" in e2.descriptor) ? { ...e2, finisher(n2) {
+ n2.createProperty(e2.key, i2);
+} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: e2.key, initializer() {
+ "function" == typeof e2.initializer && (this[e2.key] = e2.initializer.call(this));
+}, finisher(n2) {
+ n2.createProperty(e2.key, i2);
+} };
+function e$1(e2) {
+ return (n2, t2) => void 0 !== t2 ? ((i2, e3, n3) => {
+ e3.constructor.createProperty(n3, i2);
+ })(e2, n2, t2) : i(e2, n2);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o = ({ finisher: e2, descriptor: t2 }) => (o2, n2) => {
+ var r2;
+ if (void 0 === n2) {
+ const n3 = null !== (r2 = o2.originalKey) && void 0 !== r2 ? r2 : o2.key, i2 = null != t2 ? { kind: "method", placement: "prototype", key: n3, descriptor: t2(o2.key) } : { ...o2, key: n3 };
+ return null != e2 && (i2.finisher = function(t3) {
+ e2(t3, n3);
+ }), i2;
+ }
+ {
+ const r3 = o2.constructor;
+ void 0 !== t2 && Object.defineProperty(o2, n2, t2(n2)), null == e2 || e2(r3, n2);
+ }
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e(e2) {
+ return o({ descriptor: (r2) => ({ get() {
+ var r3, o2;
+ return null !== (o2 = null === (r3 = this.renderRoot) || void 0 === r3 ? void 0 : r3.querySelectorAll(e2)) && void 0 !== o2 ? o2 : [];
+ }, enumerable: true, configurable: true }) });
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var n;
+null != (null === (n = window.HTMLSlotElement) || void 0 === n ? void 0 : n.prototype.assignedElements) ? (o2, n2) => o2.assignedElements(n2) : (o2, n2) => o2.assignedNodes(n2).filter((o3) => o3.nodeType === Node.ELEMENT_NODE);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+ for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+ if (decorator = decorators[i2])
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+ if (kind && result)
+ __defProp$1(target, key, result);
+ return result;
+};
+const MATRIX = [
+ [1, 5, 8, 9, 11],
+ [2, 5, 6, 10, 11],
+ [3, 6, 7, 9, 11],
+ [4, 7, 8, 10, 11]
+];
+let DominoClockface = class extends s {
+ constructor() {
+ super(...arguments);
+ this.name = "hour";
+ this.time = "12";
+ }
+ calculateDots() {
+ const time = parseInt(this.time, 10);
+ return [0, 1, 2, 3].map((i2) => MATRIX[i2].includes(time));
+ }
+ render() {
+ const points = this.calculateDots();
+ return y`
+
+ ${points.map((pos) => y`
`)}
+
+
`;
+ }
+};
+DominoClock.styles = i$2`
+ :host {
+ --dominoclock-default-direction: row;
+ --dominoclock-default-face-gap: 0.25rem;
+ }
+
+ .dominoclock {
+ display: flex;
+ flex-direction: var(--dominoclock-direction, var(--dominoclock-default-direction, row));
+ gap: var(--dominoclock-face-gap, var(--dominoclock-default-face-gap, 0.25rem));
+ }
+ `;
+__decorateClass([
+ e("domino-face")
+], DominoClock.prototype, "faces", 2);
+DominoClock = __decorateClass([
+ e$2("domino-clock")
+], DominoClock);
diff --git a/dominoclock/assets/index.eaeda021.js.br b/dominoclock/assets/index.eaeda021.js.br
new file mode 100644
index 0000000..591280a
Binary files /dev/null and b/dominoclock/assets/index.eaeda021.js.br differ
diff --git a/dominoclock/assets/index.eaeda021.js.gz b/dominoclock/assets/index.eaeda021.js.gz
new file mode 100644
index 0000000..3fc144e
Binary files /dev/null and b/dominoclock/assets/index.eaeda021.js.gz differ
diff --git a/dominoclock/index.html b/dominoclock/index.html
new file mode 100644
index 0000000..5d8ccd0
--- /dev/null
+++ b/dominoclock/index.html
@@ -0,0 +1,59 @@
+
+
+
+ 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
+ Web Component ,
+ using the lit-html library . 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/src/DominoFace.ts b/src/DominoFace.ts
index 6664125..eaaf206 100644
--- a/src/DominoFace.ts
+++ b/src/DominoFace.ts
@@ -36,10 +36,7 @@ export class DominoClockface extends LitElement {
var(--dominoclock-default-background-color, #daaf20)
);
border: 1px solid #282828;
- border-radius: var(
- --dominoclock-border-radius,
- var(--dominoclock-default-border-radius, 0.5rem)
- );
+ border-radius: var(--dominoclock-border-radius, var(--dominoclock-default-border-radius, 0.5rem));
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
@@ -57,9 +54,7 @@ export class DominoClockface extends LitElement {
width: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
height: var(--dominoclock-date-size, var(--dominoclock-default-date-size, 1rem));
background-color: var(--dominoclock-dot-color, var(--dominoclock-default-dot-color, #2f4f4f));
- border-radius: calc(
- var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)) / 2
- );
+ border-radius: calc(var(--dominoclock-dot-size, var(--dominoclock-default-dot-size, 1rem)) / 2);
opacity: 0;
}