Prettier fixes.
This commit is contained in:
parent
566bc9d9f4
commit
26bf5bc883
|
|
@ -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 ? "<svg>" : "", 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[2], "g")), d2 = _) : void 0 !== u3[3] && (d2 = _) : d2 === _ ? ">" === 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 ? "</svg>" : "");
|
||||
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`
|
||||
<div class="face">
|
||||
${points.map((pos) => y` <div class="dot${pos ? " active" : ""}"><div></div></div> `)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
DominoClockface.styles = i$2`
|
||||
:host {
|
||||
--dominoclock-default-dot-size: 1rem;
|
||||
--dominoclock-default-dot-color: #2f4f4f;
|
||||
--dominoclock-default-face-size: 5rem;
|
||||
--dominoclock-default-background-color: #daaf20;
|
||||
--dominoclock-default-border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.face {
|
||||
position: relative;
|
||||
width: var(--dominoclock-face-size, var(--dominoclock-default-face-size, 5rem));
|
||||
height: var(--dominoclock-face-size, var(--dominoclock-default-face-size, 5rem));
|
||||
background-color: var(
|
||||
--dominoclock-background-color,
|
||||
var(--dominoclock-default-background-color, #daaf20)
|
||||
);
|
||||
border: 1px solid #282828;
|
||||
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;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center center;
|
||||
}
|
||||
|
||||
.dot > div {
|
||||
transition: opacity 0.6s ease;
|
||||
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
|
||||
);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dot.active > div {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
__decorateClass$1([
|
||||
e$1({ type: String })
|
||||
], DominoClockface.prototype, "name", 2);
|
||||
__decorateClass$1([
|
||||
e$1({ type: String })
|
||||
], DominoClockface.prototype, "time", 2);
|
||||
__decorateClass$1([
|
||||
e(".dot")
|
||||
], DominoClockface.prototype, "dots", 2);
|
||||
DominoClockface = __decorateClass$1([
|
||||
e$2("domino-face")
|
||||
], DominoClockface);
|
||||
var __defProp = Object.defineProperty;
|
||||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||
var __decorateClass = (decorators, target, key, kind) => {
|
||||
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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(target, key, result);
|
||||
return result;
|
||||
};
|
||||
function times() {
|
||||
const now = new Date();
|
||||
const rawHours = now.getHours();
|
||||
return {
|
||||
hour: rawHours > 12 ? rawHours - 12 : rawHours,
|
||||
minute: Math.floor(now.getUTCMinutes() / 5),
|
||||
second: Math.floor(now.getUTCSeconds() / 5)
|
||||
};
|
||||
}
|
||||
let DominoClock = class extends s {
|
||||
constructor() {
|
||||
super();
|
||||
this.timer = 0;
|
||||
this.paint = this.paint.bind(this);
|
||||
}
|
||||
paint() {
|
||||
const update = times();
|
||||
Array.from(this.faces).forEach((face) => {
|
||||
const name = face.getAttribute("name");
|
||||
face.setAttribute("time", `${update[name]}`);
|
||||
});
|
||||
this.timer = window.setTimeout(this.paint, 250);
|
||||
}
|
||||
connectedCallback() {
|
||||
if (super.connectedCallback) {
|
||||
super.connectedCallback();
|
||||
}
|
||||
this.timer = window.setTimeout(this.paint, 250);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
window.clearTimeout(this.timer);
|
||||
if (super.disconnectedCallback) {
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const update = times();
|
||||
return y` <div class="dominoclock">
|
||||
<domino-face name="hour" time=${update.hour}></domino-face>
|
||||
<domino-face name="minute" time=${update.minute}></domino-face>
|
||||
<domino-face name="second" time=${update.second}></domino-face>
|
||||
</div>`;
|
||||
}
|
||||
};
|
||||
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);
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Domino Clock</title>
|
||||
<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;
|
||||
padding: 1rem;
|
||||
}
|
||||
p {
|
||||
color: #282828;
|
||||
max-width: 45ch;
|
||||
}
|
||||
</style>
|
||||
<script type="module" crossorigin src="./assets/index.eaeda021.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<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
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Component</a>,
|
||||
using the <a href="https://lit.dev">lit-html library</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue