import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
export enum DifficultyDescription {
Easy = "Relaxed",
Medium = "Balanced",
Hard = "Intense",
Impossible = "Challenging",
Insane = "Extreme",
}
@customElement("difficulty-display")
export class DifficultyDisplay extends LitElement {
@property({ type: String }) difficultyKey = "";
static styles = css`
.difficulty-indicator {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
gap: 6px;
margin: 4px 0 0 0;
}
.difficulty-skull {
width: 16px;
height: 16px;
opacity: 0.3;
transition: all 0.2s ease;
}
.difficulty-skull.big {
width: 40px;
height: 40px;
}
.difficulty-skull.active {
opacity: 1;
color: #ff3838;
filter: drop-shadow(0 0 4px rgba(255, 56, 56, 0.4));
transform: translateY(-1px);
}
:host(:hover) .difficulty-skull.active {
filter: drop-shadow(0 0 6px rgba(255, 56, 56, 0.6));
transform: translateY(-2px);
}
`;
private getDifficultyIcon(difficultyKey: string) {
const skull = html``;
const burningSkull = html``;
const kingSkull = html``;
const questionMark = html``;
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}
`;
case "Insane":
return html`
${kingSkull}
`;
default:
return html`
${questionMark}
`;
}
}
render() {
return html`
${this.getDifficultyIcon(this.difficultyKey)}
`;
}
}