import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@customElement("difficulty-display")
export class DifficultyDisplay extends LitElement {
@property({ type: String }) difficultyKey = "";
createRenderRoot() {
return this;
}
private getDifficultyIcon(difficultyKey: string) {
const skull = html``;
const burningSkull = html``;
const questionMark = html``;
const activeClass =
"opacity-100 text-[#ff3838] drop-shadow-[0_0_4px_rgba(255,56,56,0.4)] transform group-hover:drop-shadow-[0_0_6px_rgba(255,56,56,0.6)] group-hover:-translate-y-[2px] -translate-y-[1px] transition-all duration-200";
const inactiveClass = "opacity-30 w-4 h-4 transition-all duration-200";
const bigClass = "w-10 h-10";
const smallClass = "w-4 h-4";
switch (difficultyKey) {
case "Easy":
return html`
${skull}
${skull}
${skull}
`;
case "Medium":
return html`
${skull}
${skull}
${skull}
`;
case "Hard":
return html`
${skull}
${skull}
${skull}
`;
case "Impossible":
return html`
${burningSkull}
`;
default:
return html`
${questionMark}
`;
}
}
render() {
return html`
${this.getDifficultyIcon(this.difficultyKey)}
`;
}
}