diff --git a/src/ts/ui/spaceStation/acceptMissionButton.ts b/src/ts/ui/spaceStation/acceptMissionButton.ts new file mode 100644 index 000000000..cae867fb2 --- /dev/null +++ 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); + }); + } +} \ No newline at end of file diff --git a/src/ts/ui/spaceStation/missionContainer.ts b/src/ts/ui/spaceStation/missionContainer.ts new file mode 100644 index 000000000..d9c637f32 --- /dev/null +++ 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 index 6bb8b2351..5eec24294 100644 --- 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");