better mission display logic

src/ts/ui/currentMissionDisplay.ts

@@ -6,21 +6,29 @@ export class CurrentMissionDisplay {
 
     private activeMissionIndex: number | null = null;
 
-    private readonly defaultPanel: HTMLElement;
-
-    private missionToPanel: Map<Mission, HTMLElement> = new Map();
-
     constructor(player: Player) {
         this.rootNode = document.createElement("div");
         this.rootNode.classList.add("currentMissionDisplay");
 
-        this.defaultPanel = document.createElement("div");
-        this.defaultPanel.classList.add("missionPanel");
+        this.setNoMissionActive();
+    }
+
+    private setMissionActive(mission: Mission) {
+        const panelRoot = document.createElement("div");
+
+        this.rootNode.innerHTML = "";
+        this.rootNode.appendChild(panelRoot);
+    }
+
+    private setNoMissionActive() {
+        const defaultPanel = document.createElement("div");
+        defaultPanel.classList.add("missionPanel");
 
         const defaultPanelH2 = document.createElement("h2");
         defaultPanelH2.innerText = "You don't have any active missions";
-        this.defaultPanel.appendChild(defaultPanelH2);
+        defaultPanel.appendChild(defaultPanelH2);
 
-        this.rootNode.appendChild(this.defaultPanel);
+        this.rootNode.innerHTML = "";
+        this.rootNode.appendChild(defaultPanel);
     }
 }