make mission container to separate component

BarthPaleologue · Sep 6, 2024 · fdabb89 · fdabb89
1 parent b1acc1b
commit fdabb89
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 48 deletions.
diff --git a/src/ts/ui/spaceStation/acceptMissionButton.ts b/src/ts/ui/spaceStation/acceptMissionButton.ts
@@ -0,0 +1,32 @@
+import { Mission } from "../../missions/mission";
+import { Player } from "../../player/player";
+import { Sounds } from "../../assets/sounds";
+
+export class AcceptMissionButton {
+    readonly rootNode: HTMLElement;
+
+    constructor(mission: Mission, player: Player) {
+        this.rootNode = document.createElement("button");
+        this.rootNode.className = "missionButton";
+        this.rootNode.innerText = "Accept";
+
+        if(player.currentMissions.find((m) => m.equals(mission))) {
+            this.rootNode.classList.add("accepted");
+            this.rootNode.innerText = "Accepted";
+        }
+
+        this.rootNode.addEventListener("click", () => {
+            Sounds.MENU_SELECT_SOUND.play();
+            if(player.currentMissions.find((m) => m.equals(mission))) {
+                this.rootNode.classList.remove("accepted");
+                this.rootNode.innerText = "Accept";
+                player.currentMissions = player.currentMissions.filter((m) => !m.equals(mission));
+                return;
+            }
+
+            this.rootNode.classList.add("accepted");
+            this.rootNode.innerText = "Accepted";
+            player.currentMissions.push(mission);
+        });
+    }
+}
diff --git a/src/ts/ui/spaceStation/missionContainer.ts b/src/ts/ui/spaceStation/missionContainer.ts
@@ -0,0 +1,36 @@
+import { Mission } from "../../missions/mission";
+import { Player } from "../../player/player";
+import { Settings } from "../../settings";
+import { AcceptMissionButton } from "./acceptMissionButton";
+
+export class MissionContainer {
+    readonly rootNode: HTMLElement;
+
+    constructor(mission: Mission, player: Player) {
+        this.rootNode = document.createElement("div");
+        this.rootNode.className = "missionItem";
+
+        const descriptionContainer = document.createElement("div");
+        descriptionContainer.className = "missionDescription";
+        this.rootNode.appendChild(descriptionContainer);
+
+        const missionH4 = document.createElement("h4");
+        missionH4.innerText = mission.getTypeString();
+        descriptionContainer.appendChild(missionH4);
+
+        const missionP = document.createElement("p");
+        missionP.innerText = mission.describe();
+        descriptionContainer.appendChild(missionP);
+
+        const rewardP = document.createElement("p");
+        rewardP.innerText = `Reward: ${Settings.CREDIT_SYMBOL}${mission.getReward().toLocaleString()}`;
+        descriptionContainer.appendChild(rewardP);
+
+        const buttonContainer = document.createElement("div");
+        buttonContainer.className = "missionButtonContainer";
+        this.rootNode.appendChild(buttonContainer);
+
+        const acceptButton = new AcceptMissionButton(mission, player);
+        buttonContainer.appendChild(acceptButton.rootNode);
+    }
+}
diff --git a/src/ts/ui/spaceStation/spaceStationMissions.ts b/src/ts/ui/spaceStation/spaceStationMissions.ts
@@ -8,6 +8,7 @@ import { getSpaceStationModels } from "../../utils/getModelsFromSystemModel";
 import { generateSightseeingMissions } from "../../missions/generator";
 import { getStarGalacticCoordinates } from "../../utils/getStarGalacticCoordinates";
 import { Player } from "../../player/player";
+import { MissionContainer } from "./missionContainer";
 
 export function generateMissionsDom(stationModel: SpaceStationModel, player: Player): HTMLDivElement {
     const sightSeeingMissions = generateSightseeingMissions(stationModel, Date.now());
@@ -51,54 +52,8 @@ export function generateMissionsDom(stationModel: SpaceStationModel, player: Pla
     mainContainer.appendChild(missionList);
 
     sightSeeingMissions.forEach((mission) => {
-        const missionContainer = document.createElement("div");
-        missionContainer.className = "missionItem";
-        missionList.appendChild(missionContainer);
-
-        const descriptionContainer = document.createElement("div");
-        descriptionContainer.className = "missionDescription";
-        missionContainer.appendChild(descriptionContainer);
-
-        const missionH4 = document.createElement("h4");
-        missionH4.innerText = mission.getTypeString();
-        descriptionContainer.appendChild(missionH4);
-
-        const missionP = document.createElement("p");
-        missionP.innerText = mission.describe();
-        descriptionContainer.appendChild(missionP);
-
-        const rewardP = document.createElement("p");
-        rewardP.innerText = `Reward: ${Settings.CREDIT_SYMBOL}${mission.getReward().toLocaleString()}`;
-        descriptionContainer.appendChild(rewardP);
-
-        const buttonContainer = document.createElement("div");
-        buttonContainer.className = "missionButtonContainer";
-        missionContainer.appendChild(buttonContainer);
-
-        const acceptButton = document.createElement("button");
-        acceptButton.className = "missionButton";
-        acceptButton.innerText = "Accept";
-        buttonContainer.appendChild(acceptButton);
-
-        if(player.currentMissions.find((m) => m.equals(mission))) {
-            acceptButton.classList.add("accepted");
-            acceptButton.innerText = "Accepted";
-        }
-
-        acceptButton.addEventListener("click", () => {
-            if(player.currentMissions.find((m) => m.equals(mission))) {
-                acceptButton.classList.remove("accepted");
-                acceptButton.innerText = "Accept";
-                player.currentMissions = player.currentMissions.filter((m) => !m.equals(mission));
-                return;
-            }
-
-            acceptButton.classList.add("accepted");
-            acceptButton.innerText = "Accepted";
-            player.currentMissions.push(mission);
-
-            console.log(player.currentMissions);
-        });
+        const missionContainer = new MissionContainer(mission, player);
+        missionList.appendChild(missionContainer.rootNode);
     });
 
     const terraformationMissionH3 = document.createElement("h3");