72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { LitElement, css, html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
type Dots = [boolean, boolean, boolean, boolean];
|
|
|
|
function timeChanged(oldvalue: Dots, newvalue: Dots): boolean {
|
|
if (!newvalue) {
|
|
return true;
|
|
}
|
|
return !oldvalue.reduce((acc, t, idx) => acc && t === newvalue[idx], true);
|
|
}
|
|
|
|
@customElement("domino-face")
|
|
export class DominoClockface extends LitElement {
|
|
@property({ type: Array, hasChanged: timeChanged }) time = [false, false, false, false];
|
|
|
|
static styles = css`
|
|
: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.3s 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;
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
return html`<div class="face">
|
|
${this.time.map(pos =>
|
|
pos ? html`<div class="dot active"><div></div></div>` : html`<div class="dot"><div></div></div>`
|
|
)}
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
export default DominoClockface;
|