added basic ability to bookmark systems

the display part is still lacking.

It would be nice to have a unified way to display both bookmarks and missions in the starmap

src/locales/en-US/starMap.json

@@ -3,6 +3,7 @@
     "planets": "Planets",
     "plotItinerary": "Plot Itinerary",
     "bookmark": "Bookmark",
+    "bookmarked": "Bookmarked",
     "distanceToSol": "Distance to Sol",
     "distanceFromCurrent": "Distance",
     "humanPresence": "Human Presence",

src/locales/fr-FR/starMap.json

@@ -3,6 +3,7 @@
     "planets": "Planètes",
     "plotItinerary": "Planifier l'itinéraire",
     "bookmark": "Marquer",
+    "bookmarked": "Marqué",
     "distanceToSol": "Distance à Sol",
     "distanceFromCurrent": "Distance",
     "humanPresence": "Présence humaine",

src/styles/starMapUI.scss

@@ -90,6 +90,16 @@
         background: var(--accent-color-dark);
       }
 
+      &.bookmarked {
+        background: goldenrod;
+        &:active {
+          background: darkgoldenrod;
+        }
+        &:hover {
+          background: gold;
+        }
+      }
+
       &.loading {
         // animate background with linear gradient going from accent color to light accent color to accent color again
         background: linear-gradient(90deg, var(--accent-color), rgb(200, 200, 200), var(--accent-color)) 0 0 / 200% 100% no-repeat;

src/ts/starmap/starMap.ts

@@ -141,7 +141,7 @@ export class StarMap implements View {
         AudioManager.RegisterSound(this.backgroundMusic);
         this.backgroundMusic.sound.play();
 
-        this.starMapUI = new StarMapUI(this.scene);
+        this.starMapUI = new StarMapUI(this.scene, this.player);
 
         this.starMapUI.shortHandUIPlotItineraryButton.addEventListener("click", () => {
             if (this.currentSystemSeed === null) throw new Error("current system seed is null!");

src/ts/starmap/starMapBookmarkButton.ts

@@ -0,0 +1,46 @@
+import i18n from "../i18n";
+import { SystemSeed } from "../utils/systemSeed";
+import { Player } from "../player/player";
+import { Sounds } from "../assets/sounds";
+
+export class StarMapBookmarkButton {
+    readonly rootNode: HTMLElement;
+    private readonly player: Player;
+
+    private selectedSystemSeed: SystemSeed | null = null;
+    private isSelectedSystemBookmarked = false;
+
+    constructor(player: Player) {
+        this.rootNode = document.createElement("button");
+        this.rootNode.classList.add("bookmarkButton");
+        this.rootNode.textContent = i18n.t("starMap:bookmark");
+
+        this.player = player;
+
+        this.rootNode.addEventListener("click", () => {
+            if (this.selectedSystemSeed === null) return;
+            Sounds.MENU_SELECT_SOUND.play();
+
+            const currentSystemSeed = this.selectedSystemSeed;
+
+            if (!this.isSelectedSystemBookmarked) {
+                this.player.systemBookmarks.push(this.selectedSystemSeed);
+                this.rootNode.classList.add("bookmarked");
+                this.rootNode.textContent = i18n.t("starMap:bookmarked");
+            } else {
+                this.player.systemBookmarks = this.player.systemBookmarks.filter((bookmark) => !bookmark.equals(currentSystemSeed));
+                this.rootNode.classList.remove("bookmarked");
+                this.rootNode.textContent = i18n.t("starMap:bookmark");
+            }
+
+            this.isSelectedSystemBookmarked = !this.isSelectedSystemBookmarked;
+        });
+    }
+
+    setSelectedSystemSeed(seed: SystemSeed) {
+        this.selectedSystemSeed = seed;
+        this.isSelectedSystemBookmarked = this.player.systemBookmarks.find((bookmark) => bookmark.equals(seed)) !== undefined;
+        this.rootNode.classList.toggle("bookmarked", this.isSelectedSystemBookmarked);
+        this.rootNode.textContent = this.isSelectedSystemBookmarked ? i18n.t("starMap:bookmarked") : i18n.t("starMap:bookmark");
+    }
+}

src/ts/starmap/starMapUI.ts

@@ -18,7 +18,6 @@
 import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
 import { Animation } from "@babylonjs/core/Animations/animation";
 import { Scene } from "@babylonjs/core/scene";
-import { Settings } from "../settings";
 import { Matrix, Vector3 } from "@babylonjs/core/Maths/math.vector";
 import i18n from "../i18n";
 import { getStellarTypeString } from "../stellarObjects/common";
@@ -28,10 +27,11 @@ import { BlackHoleModel } from "../stellarObjects/blackHole/blackHoleModel";
 import { NeutronStarModel } from "../stellarObjects/neutronStar/neutronStarModel";
 import { BodyType } from "../architecture/bodyType";
 import { getStarGalacticCoordinates } from "../utils/getStarGalacticCoordinates";
-import { parseDistance } from "../utils/parseToStrings";
 import { factionToString } from "../powerplay/factions";
 import { isSystemInHumanBubble } from "../society/starSystemSociety";
 import { getSpaceStationModels } from "../utils/getModelsFromSystemModel";
+import { StarMapBookmarkButton } from "./starMapBookmarkButton";
+import { Player } from "../player/player";
 
 export class StarMapUI {
     readonly htmlRoot: HTMLDivElement;
@@ -63,7 +63,7 @@ export class StarMapUI {
     readonly shortHandUIFactions: HTMLDivElement;
     readonly shortHandUIButtonContainer: HTMLDivElement;
     readonly shortHandUIPlotItineraryButton: HTMLButtonElement;
-    readonly shortHandUIBookmarkButton: HTMLButtonElement;
+    readonly shortHandUIBookmarkButton: StarMapBookmarkButton;
 
     private selectedMesh: AbstractMesh | null = null;
     private hoveredMesh: AbstractMesh | null = null;
@@ -73,7 +73,7 @@ export class StarMapUI {
 
     private readonly scene: Scene;
 
-    constructor(scene: Scene) {
+    constructor(scene: Scene, player: Player) {
         this.scene = scene;
         this.scene.hoverCursor = "none";
 
@@ -187,10 +187,8 @@ export class StarMapUI {
         this.shortHandUIPlotItineraryButton.textContent = i18n.t("starMap:plotItinerary");
         this.shortHandUIButtonContainer.appendChild(this.shortHandUIPlotItineraryButton);
 
-        this.shortHandUIBookmarkButton = document.createElement("button");
-        this.shortHandUIBookmarkButton.classList.add("bookmarkButton");
-        this.shortHandUIBookmarkButton.textContent = i18n.t("starMap:bookmark");
-        this.shortHandUIButtonContainer.appendChild(this.shortHandUIBookmarkButton);
+        this.shortHandUIBookmarkButton = new StarMapBookmarkButton(player);
+        this.shortHandUIButtonContainer.appendChild(this.shortHandUIBookmarkButton.rootNode);
 
         document.addEventListener("pointermove", (event) => {
             this.cursor.style.transform = `translate(calc(${event.clientX}px - 50%), calc(${event.clientY}px - 50%))`;
@@ -316,6 +314,7 @@ export class StarMapUI {
         else typeString = i18n.t("objectTypes:star", { stellarType: getStellarTypeString(starModel.stellarType) });
 
         this.shortHandUISystemType.textContent = typeString;
+        this.shortHandUIBookmarkButton.setSelectedSystemSeed(targetSystemModel.seed);
 
         if (starModel instanceof StarModel) {
             this.infoPanelStarPreview.style.background = starModel.color.toHexString();