×
-
Start Single Player Game
-
-
-
-
-
-
-
+
+
Single Player
+
+
+
+
+
Map
+
+ ${Object.entries(GameMapType)
+ .filter(([key]) => isNaN(Number(key)))
+ .map(
+ ([key, value]) => html`
+
this.handleMapSelection(value)}>
+
+
+ `
+ )}
+
+
+
+
+
+
Difficulty
+
+ ${Object.entries(Difficulty)
+ .filter(([key]) => isNaN(Number(key)))
+ .map(
+ ([key, value]) => html`
+
this.handleDifficultySelection(value)}
+ >
+
+
+ ${DifficultyDescription[key]}
+
+
+ `
+ )}
+
+
-
+
`;
@@ -129,20 +265,16 @@ export class SinglePlayerModal extends LitElement {
public close() {
this.isModalOpen = false;
}
+ private handleMapSelection(value: GameMapType) {
+ this.selectedMap = value;
+ }
+ private handleDifficultySelection(value: Difficulty) {
+ this.selectedDifficulty = value;
+ }
- private handleMapChange(e: Event) {
- this.selectedMap = String(
- (e.target as HTMLSelectElement).value,
- ) as GameMapType;
- }
- private handleDifficultyChange(e: Event) {
- this.selectedDifficulty = String(
- (e.target as HTMLSelectElement).value,
- ) as Difficulty;
- }
private startGame() {
consolex.log(
- `Starting single player game with map: ${GameMapType[this.selectedMap]}`,
+ `Starting single player game with map: ${GameMapType[this.selectedMap]}`
);
this.dispatchEvent(
new CustomEvent("join-lobby", {
@@ -156,7 +288,7 @@ export class SinglePlayerModal extends LitElement {
},
bubbles: true,
composed: true,
- }),
+ })
);
this.close();
}
diff --git a/src/client/components/Difficulties.ts b/src/client/components/Difficulties.ts
new file mode 100644
index 000000000..8cad087f9
--- /dev/null
+++ b/src/client/components/Difficulties.ts
@@ -0,0 +1,155 @@
+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)}
+
+ `;
+ }
+}
diff --git a/src/client/components/Maps.ts b/src/client/components/Maps.ts
new file mode 100644
index 000000000..37cff8552
--- /dev/null
+++ b/src/client/components/Maps.ts
@@ -0,0 +1,115 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { GameMapType } from "../../core/game/Game";
+
+// Add map descriptions
+export const MapDescription: Record
= {
+ World: "World",
+ Europe: "Europe",
+ Mena: "MENA",
+ NorthAmerica: "North America",
+ Oceania: "Oceania",
+ BlackSea: "Black Sea",
+};
+
+import world from "../../../resources/maps/WorldMap.png";
+import oceania from "../../../resources/maps/Oceania.png";
+import europe from "../../../resources/maps/Europe.png";
+import mena from "../../../resources/maps/Mena.png";
+import northAmerica from "../../../resources/maps/NorthAmerica.png";
+import blackSea from "../../../resources/maps/BlackSea.png";
+
+@customElement("map-display")
+export class MapDisplay extends LitElement {
+ @property({ type: String }) mapKey = "";
+ @property({ type: Boolean }) selected = false;
+
+ static styles = css`
+ .option-card {
+ width: 100%;
+ min-width: 100px;
+ max-width: 120px;
+ padding: 4px 4px 0 4px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ background: rgba(30, 30, 30, 0.95);
+ border: 2px solid rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .option-card:hover {
+ transform: translateY(-2px);
+ border-color: rgba(255, 255, 255, 0.3);
+ background: rgba(40, 40, 40, 0.95);
+ }
+
+ .option-card.selected {
+ border-color: #4a9eff;
+ background: rgba(74, 158, 255, 0.1);
+ }
+
+ .option-card-title {
+ font-size: 14px;
+ color: #aaa;
+ text-align: center;
+ margin: 0 0 4px 0;
+ }
+
+ .option-image {
+ width: 100%;
+ aspect-ratio: 4/2;
+ color: #aaa;
+ transition: transform 0.2s ease-in-out;
+ border-radius: 8px;
+ background-color: rgba(255, 255, 255, 0.1);
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ `;
+
+ private getMapsImage(map: GameMapType): string {
+ switch (map) {
+ case GameMapType.World:
+ return world;
+ case GameMapType.Oceania:
+ return oceania;
+ case GameMapType.Europe:
+ return europe;
+ case GameMapType.Mena:
+ return mena;
+ case GameMapType.NorthAmerica:
+ return northAmerica;
+ case GameMapType.BlackSea:
+ return blackSea;
+ default:
+ return "";
+ }
+ }
+
+ render() {
+ const mapValue = GameMapType[this.mapKey as keyof typeof GameMapType];
+
+ return html`
+
+ ${this.getMapsImage(mapValue)
+ ? html`
})
`
+ : html`
`}
+
+ ${MapDescription[this.mapKey as keyof typeof GameMapType]}
+
+