store waypoints in savegame

src/js/game/camera.js

@@ -100,7 +100,7 @@ export class Camera extends BasicSerializableObject {
         this.bindKeys();
         if (G_IS_DEV) {
             window.addEventListener("keydown", ev => {
-                if (ev.key === "l") {
+                if (ev.key === "i") {
                     this.zoomLevel = 3;
                 }
             });

src/js/game/hud/parts/waypoints.js

@@ -38,11 +38,31 @@ export class HUDWaypoints extends BaseHUDPart {
         this.waypointSprite = Loader.getSprite("sprites/misc/waypoint.png");
     }
 
+    serialize() {
+        return {
+            waypoints: this.waypoints,
+        };
+    }
+
+    deserialize(data) {
+        if (!data || !data.waypoints || !Array.isArray(data.waypoints)) {
+            return "Invalid waypoints data";
+        }
+        this.waypoints = data.waypoints;
+    }
+
     initialize() {
+        /** @type {Array<{
+         *   label: string,
+         *   center: { x: number, y: number },
+         *   zoomLevel: number,
+         *   deletable: boolean
+         * }>}
+         */
         this.waypoints = [
             {
                 label: T.ingame.waypoints.hub,
-                center: new Vector(0, 0),
+                center: { x: 0, y: 0 },
                 zoomLevel: 3,
                 deletable: false,
             },
@@ -87,10 +107,12 @@ export class HUDWaypoints extends BaseHUDPart {
 
         this.root.hud.parts.dialogs.internalShowDialog(dialog);
 
+        const center = worldPos || this.root.camera.center;
+
         dialog.buttonSignals.ok.add(() => {
             this.waypoints.push({
                 label: markerNameInput.getValue(),
-                center: (worldPos || this.root.camera.center).copy(),
+                center: { x: center.x, y: center.y },
                 zoomLevel: Math_max(this.root.camera.zoomLevel, globalConfig.mapChunkOverviewMinZoom + 0.05),
                 deletable: true,
             });
@@ -121,7 +143,9 @@ export class HUDWaypoints extends BaseHUDPart {
 
         for (let i = 0; i < this.waypoints.length; ++i) {
             const waypoint = this.waypoints[i];
-            const screenPos = this.root.camera.worldToScreen(waypoint.center);
+            const screenPos = this.root.camera.worldToScreen(
+                new Vector(waypoint.center.x, waypoint.center.y)
+            );
             const intersectionRect = new Rectangle(
                 screenPos.x - 7 * scale,
                 screenPos.y - 12 * scale,
@@ -144,7 +168,7 @@ export class HUDWaypoints extends BaseHUDPart {
         if (waypoint) {
             if (button === enumMouseButton.left) {
                 this.root.soundProxy.playUiClick();
-                this.root.camera.setDesiredCenter(waypoint.center);
+                this.root.camera.setDesiredCenter(new Vector(waypoint.center.x, waypoint.center.y));
                 this.root.camera.setDesiredZoom(waypoint.zoomLevel);
             } else if (button === enumMouseButton.right) {
                 if (waypoint.deletable) {
@@ -189,13 +213,21 @@ export class HUDWaypoints extends BaseHUDPart {
 
             parameters.context.globalAlpha = this.currentMarkerOpacity * (selected === waypoint ? 1 : 0.7);
 
-            parameters.context.fillStyle = "#000";
-            parameters.context.textAlign = "left";
-            parameters.context.textBaseline = "middle";
-
             const yOffset = -5 * scale;
 
             parameters.context.font = "bold " + 12 * scale + "px GameFont";
+
+            parameters.context.fillStyle = "rgba(255, 255, 255, 0.7)";
+            parameters.context.fillRect(
+                pos.x - 7 * scale,
+                pos.y - 12 * scale,
+                15 * scale + this.dummyBuffer.measureText(waypoint.label).width / this.root.camera.zoomLevel,
+                15 * scale
+            );
+
+            parameters.context.fillStyle = "#000";
+            parameters.context.textAlign = "left";
+            parameters.context.textBaseline = "middle";
             parameters.context.fillText(waypoint.label, pos.x + 6 * scale, pos.y + 0.5 * scale + yOffset);
 
             parameters.context.textBaseline = "alphabetic";

src/js/savegame/savegame_serializer.js

@@ -39,6 +39,7 @@ export class SavegameSerializer {
             entityMgr: root.entityMgr.serialize(),
             hubGoals: root.hubGoals.serialize(),
             pinnedShapes: root.hud.parts.pinnedShapes.serialize(),
+            waypoints: root.hud.parts.waypoints.serialize(),
         };
 
         data.entities = this.internal.serializeEntityArray(root.entityMgr.entities);
@@ -137,6 +138,7 @@ export class SavegameSerializer {
         errorReason = errorReason || root.map.deserialize(savegame.map);
         errorReason = errorReason || root.hubGoals.deserialize(savegame.hubGoals);
         errorReason = errorReason || root.hud.parts.pinnedShapes.deserialize(savegame.pinnedShapes);
+        errorReason = errorReason || root.hud.parts.waypoints.deserialize(savegame.waypoints);
         errorReason = errorReason || this.internal.deserializeEntityArray(root, savegame.entities);
 
         // Check for errors

src/js/savegame/savegame_typedefs.js

@@ -13,6 +13,7 @@ import { Entity } from "../game/entity";
  *   map: any,
  *   hubGoals: any,
  *   pinnedShapes: any,
+ *   waypoints: any,
  *   entities: Array<Entity>
  * }} SerializedGame
  */

src/js/savegame/schemas/1001.js

@@ -1,5 +1,6 @@
 import { SavegameInterface_V1000 } from "./1000.js";
 import { createLogger } from "../../core/logging.js";
+import { T } from "../../translations.js";
 
 const schema = require("./1001.json");
 
@@ -27,6 +28,16 @@ export class SavegameInterface_V1001 extends SavegameInterface_V1000 {
         dump.pinnedShapes = {
             shapes: [],
         };
+        dump.waypoints = {
+            waypoints: [
+                {
+                    label: T.ingame.waypoints.hub,
+                    center: { x: 0, y: 0 },
+                    zoomLevel: 3,
+                    deletable: false,
+                },
+            ],
+        };
 
         const entities = dump.entities;
         for (let i = 0; i < entities.length; ++i) {