dominoclock/src/DominoClock.ts

import { LitElement, css, html } from "lit";
import { customElement, queryAll } from "lit/decorators.js";
import "./DominoFace.ts";

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),
  };
}

@customElement("domino-clock")
export class DominoClock extends LitElement {
  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));
    }
  `;

  @queryAll("domino-face") faces: HTMLCollection;

  timer: number;

  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 html` <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>`;
  }
}

export default DominoClock;