78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { LitElement, css, html } from "lit";
|
|
import { customElement, state } from "lit/decorators.js";
|
|
import "./DominoFace.ts";
|
|
|
|
type Times = number[];
|
|
type Cats = Times;
|
|
const MATRIX: Cats[] = [
|
|
[1, 5, 8, 9, 11],
|
|
[2, 5, 6, 10, 11],
|
|
[3, 6, 7, 9, 11],
|
|
[4, 7, 8, 10, 11],
|
|
];
|
|
|
|
const tock = (time: number) => [0, 1, 2, 3].map(i => MATRIX[i].includes(time));
|
|
|
|
@customElement("domino-clock")
|
|
export class DominoClock extends LitElement {
|
|
timer: number;
|
|
|
|
@state() hour = [false, false, false, false];
|
|
|
|
@state() minute = [false, false, false, false];
|
|
|
|
@state() second = [false, false, false, false];
|
|
|
|
constructor() {
|
|
super();
|
|
this.timer = 0;
|
|
this.paint = this.paint.bind(this);
|
|
}
|
|
|
|
paint() {
|
|
const now = new Date();
|
|
const rawHours = now.getHours();
|
|
this.hour = tock(rawHours > 12 ? rawHours - 12 : rawHours);
|
|
this.minute = tock(Math.floor(now.getUTCMinutes() / 5));
|
|
this.second = tock(Math.floor(now.getUTCSeconds() / 5));
|
|
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();
|
|
}
|
|
}
|
|
|
|
static styles = css`
|
|
: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));
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
return html` <div class="dominoclock">
|
|
<domino-face .time=${this.hour}></domino-face>
|
|
<domino-face .time=${this.minute}></domino-face>
|
|
<domino-face .time=${this.second}></domino-face>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
export default DominoClock;
|