Add setting for compass for marker dialog

A boolean setting is added at the bottom of the marker dialog
for whether to have a compass. COMPASS_PREFIX is removed.

There are slight changes to the boolean form element,
and a new translation is added for the compass setting description.

src/css/ingame_hud/dialogs.scss

@@ -201,6 +201,10 @@
                     }
                 }
             }
+
+            .checkbox {
+                @include S(margin, 10px, 0);
+            }
         }
 
         > .buttons {

src/css/ingame_hud/waypoints.scss

@@ -93,7 +93,7 @@
             }
         }
 
-        &.hub {
+        &.hasCompass {
             // Transform because there is a canvas before
             @include S(margin-left, -2px);
 

src/js/core/modal_dialog_forms.js

@@ -123,7 +123,7 @@ export class FormElementInput extends FormElement {
 }
 
 export class FormElementCheckbox extends FormElement {
-    constructor({ id, label, defaultValue = true }) {
+    constructor({ id, label, defaultValue = false }) {
         super(id, label);
         this.defaultValue = defaultValue;
         this.value = this.defaultValue;

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

@@ -3,7 +3,7 @@ import { globalConfig, THIRDPARTY_URLS } from "../../../core/config";
 import { DrawParameters } from "../../../core/draw_parameters";
 import { Loader } from "../../../core/loader";
 import { DialogWithForm } from "../../../core/modal_dialog_elements";
-import { FormElementInput } from "../../../core/modal_dialog_forms";
+import { FormElementCheckbox, FormElementInput } from "../../../core/modal_dialog_forms";
 import { Rectangle } from "../../../core/rectangle";
 import { STOP_PROPAGATION } from "../../../core/signal";
 import {
@@ -27,12 +27,12 @@ import { enumNotificationType } from "./notifications";
  *   label: string | null,
  *   parts: Array<string> | null,
  *   center: { x: number, y: number },
- *   zoomLevel: number
+ *   zoomLevel: number,
+ *   hasCompass: boolean
  * }} Waypoint */
 
 const MAX_LABEL_LENGTH = 70;
 const SHAPE_TEXT_LENGTH = 2;
-const COMPASS_PREFIX = "!";
 
 export class HUDWaypoints extends BaseHUDPart {
     /**
@@ -83,7 +83,13 @@ export class HUDWaypoints extends BaseHUDPart {
 
         for (let i = 0; i < this.waypoints.length; ++i) {
             const waypoint = this.waypoints[i];
-            if (waypoint.label && waypoint.label.startsWith(COMPASS_PREFIX)) {
+            if (!waypoint.label) {
+                waypoint.hasCompass = true;
+            }
+            if (waypoint.hasCompass === undefined) {
+                waypoint.hasCompass = false;
+            }
+            if (waypoint.hasCompass) {
                 const [canvas, context] = makeOffscreenBuffer(48, 48, {
                     smooth: true,
                     reusable: false,
@@ -110,6 +116,7 @@ export class HUDWaypoints extends BaseHUDPart {
             parts: null,
             center: { x: 0, y: 0 },
             zoomLevel: 3,
+            hasCompass: true,
         };
         /** @type {Array<Waypoint>}
          */
@@ -242,9 +249,9 @@ export class HUDWaypoints extends BaseHUDPart {
                 this.trackClicks(editButton, () => this.requestSaveMarker({ waypoint }));
             }
 
-            if (this.compassBuffers.has(waypoint)) {
+            if (waypoint.hasCompass) {
                 // This must be a compass label
-                element.classList.add("hub");
+                element.classList.add("hasCompass");
 
                 const canvas = this.compassBuffers.get(waypoint).canvas;
                 element.insertBefore(canvas, element.childNodes[0]);
@@ -306,11 +313,17 @@ export class HUDWaypoints extends BaseHUDPart {
             defaultValue: waypoint ? waypoint.label : "",
             validator: val => val.length > 0 && this.getLabelLength(val) <= MAX_LABEL_LENGTH,
         });
+        console.log(waypoint && waypoint.hasCompass);
+        const compassInput = new FormElementCheckbox({
+            id: "compassChoice",
+            label: T.dialogs.createMarker.compassDesc,
+            defaultValue: waypoint ? waypoint.hasCompass : false,
+        });
         const dialog = new DialogWithForm({
             app: this.root.app,
             title: waypoint ? T.dialogs.createMarker.titleEdit : T.dialogs.createMarker.title,
             desc: fillInLinkIntoTranslation(T.dialogs.createMarker.desc, THIRDPARTY_URLS.shapeViewer),
-            formElements: [markerNameInput],
+            formElements: [markerNameInput, compassInput],
             buttons: waypoint ? ["delete:bad", "cancel", "ok:good"] : ["cancel", "ok:good"],
         });
         this.root.hud.parts.dialogs.internalShowDialog(dialog);
@@ -319,7 +332,7 @@ export class HUDWaypoints extends BaseHUDPart {
         if (waypoint) {
             dialog.buttonSignals.ok.add(() => {
                 // Actually rename the waypoint
-                this.renameWaypoint(waypoint, markerNameInput.getValue());
+                this.renameWaypoint(waypoint, markerNameInput.getValue(), compassInput.getValue());
             });
             dialog.buttonSignals.delete.add(() => {
                 // Actually delete the waypoint
@@ -342,7 +355,7 @@ export class HUDWaypoints extends BaseHUDPart {
                 }
 
                 // Actually create the waypoint
-                this.addWaypoint(markerNameInput.getValue(), center);
+                this.addWaypoint(markerNameInput.getValue(), center, compassInput.getValue());
             });
         }
     }
@@ -351,8 +364,9 @@ export class HUDWaypoints extends BaseHUDPart {
      * Adds a new waypoint at the given location with the given label
      * @param {string} label
      * @param {Vector} position
+     * @param {boolean} hasCompass
      */
-    addWaypoint(label, position) {
+    addWaypoint(label, position, hasCompass = false) {
         const parts = this.splitLabel(label);
 
         const waypoint = {
@@ -360,11 +374,10 @@ export class HUDWaypoints extends BaseHUDPart {
             parts,
             center: { x: position.x, y: position.y },
             zoomLevel: this.root.camera.zoomLevel,
+            hasCompass,
         };
 
-        if (label.startsWith(COMPASS_PREFIX)) {
+        if (hasCompass) {
-            const bufferKey = "" + position.x + "/" + position.y;
-            if (!this.compassBuffers[bufferKey]) {
             const [canvas, context] = makeOffscreenBuffer(48, 48, {
                 smooth: true,
                 reusable: false,
@@ -373,7 +386,6 @@ export class HUDWaypoints extends BaseHUDPart {
             canvas.classList.add("compass");
             this.compassBuffers.set(waypoint, { canvas, context, opacity: 0 });
         }
-        }
 
         this.waypoints.push(waypoint);
 
@@ -393,14 +405,15 @@ export class HUDWaypoints extends BaseHUDPart {
      * Renames a waypoint with the given label
      * @param {Waypoint} waypoint
      * @param {string} label
+     * @param {boolean} hasCompass
      */
-    renameWaypoint(waypoint, label) {
+    renameWaypoint(waypoint, label, hasCompass = false) {
         waypoint.label = label;
         waypoint.parts = this.splitLabel(waypoint.label);
+        waypoint.hasCompass = hasCompass;
 
-        if (label.startsWith(COMPASS_PREFIX)) {
+        if (hasCompass) {
-            const bufferKey = "" + waypoint.center.x + "/" + waypoint.center.y;
+            if (!this.compassBuffers.has(waypoint)) {
-            if (!this.compassBuffers[bufferKey]) {
                 const [canvas, context] = makeOffscreenBuffer(48, 48, {
                     smooth: true,
                     reusable: false,
@@ -409,6 +422,10 @@ export class HUDWaypoints extends BaseHUDPart {
                 canvas.classList.add("compass");
                 this.compassBuffers.set(waypoint, { canvas, context, opacity: 0 });
             }
+        } else {
+            if (this.compassBuffers.has(waypoint)) {
+                this.compassBuffers.delete(waypoint);
+            }
         }
 
         this.sortWaypoints();
@@ -686,7 +703,7 @@ export class HUDWaypoints extends BaseHUDPart {
 
         for (let i = 0; i < this.waypoints.length; ++i) {
             const waypoint = this.waypoints[i];
-            if (this.compassBuffers.has(waypoint)) {
+            if (waypoint.hasCompass) {
                 this.rerenderWaypointsCompass(waypoint);
             }
         }

translations/base-ar.yaml

@@ -181,6 +181,8 @@ dialogs:
         titleEdit: Edit Marker
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: You can only create two custom markers in the demo. Get the standalone for
             unlimited markers!

translations/base-cat.yaml

@@ -189,6 +189,8 @@ dialogs:
         titleEdit: Editar Marcador
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: En la Demo només pots crear dos marcadors, aconsegueix la versió completa
             per gaudir de l'experiència completa!

translations/base-cz.yaml

@@ -180,6 +180,8 @@ dialogs:
         titleEdit: Upravit značku
         desc: Použijte smysluplný název, můžete také zahrnout <strong>krátký
             klíč</strong> tvaru (Ten můžete vygenerovat <link>zde</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     editSignal:
         title: Nastavte signál
         descItems: "Vyberte předdefinovanou položku:"

translations/base-da.yaml

@@ -181,6 +181,8 @@ dialogs:
         title: Ny Markør
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Rediger Markør
     markerDemoLimit:
         desc: Du kan kun lave to markører i demoen. Køb spillet for uendelige markører!

translations/base-de.yaml

@@ -180,6 +180,8 @@ dialogs:
         desc: Gib ihm einen griffigen Namen. Du kannst auch den
             <strong>Kurz-Code</strong> einer Form eingeben (Welchen du
             <link>hier</link> generieren kannst).
+        compassDesc: >-
+            Add a compass that points to the marker:
     editSignal:
         title: Signal setzen
         descItems: "Wähle ein vordefiniertes Item:"

translations/base-el.yaml

@@ -183,6 +183,8 @@ dialogs:
         title: Νέο Σημάδι
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Επεξεργασία Σημαδιού
     markerDemoLimit:
         desc: Στην έκδωση demo μπορείς να βάλεις μέχρι δύο σημάδια στον χάρτη.

translations/base-en.yaml

@@ -254,6 +254,8 @@ dialogs:
         title: New Marker
         titleEdit: Edit Marker
         desc: Give it a meaningful name, you can also include a <strong>short key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
 
     editSignal:
         title: Set Signal

translations/base-es.yaml

@@ -186,6 +186,8 @@ dialogs:
         title: Nuevo marcador
         titleEdit: Editar marcador
         desc: Dale un nombre significativo, tambien puedes incluir la <strong>clave</strong> de una forma (La cual puedes generar <link>aquí</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: Solo puedes crear dos marcadores en la versión de prueba. ¡Obtén el juego
             completo para marcadores ilimitados!

translations/base-fi.yaml

@@ -181,6 +181,8 @@ dialogs:
         title: Uusi merkki
         desc: Anna merkille merkitsevä nimi. Voit myös liittää <strong>lyhyen koodin</strong>
             muodosta. (Jonka voit luoda <link>täällä</link>.)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Muokkaa merkkiä
     markerDemoLimit:
         desc: Voit tehdä vain kaksi mukautettua merkkiä demoversiossa. Hanki kokoversio

translations/base-fr.yaml

@@ -185,6 +185,8 @@ dialogs:
         titleEdit: Modifier cette balise
         desc: Donnez-lui un nom. Vous pouvez aussi inclure <strong>le raccourci</strong>
             d’une forme (que vous pouvez générer <link>ici</link>).
+        compassDesc: >-
+            Add a compass that points to the marker:
     editSignal:
         title: Définir le signal
         descItems: "Choisissez un objet prédéfini :"

translations/base-hr.yaml

@@ -179,6 +179,8 @@ dialogs:
         title: Novi Putokaz
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Edit Marker
     markerDemoLimit:
         desc: U demo verziji se mogu stvoriti samo dva putokaza istovremeno. Nabavi

translations/base-hu.yaml

@@ -187,6 +187,8 @@ dialogs:
         title: Új Jelölő
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Jelölő Szerkesztése
     markerDemoLimit:
         desc: A Demó verzióban csak két Jelölőd lehet. Vásárold meg az Önálló verziót,

translations/base-ind.yaml

@@ -187,6 +187,8 @@ dialogs:
         desc: Berikan nama yang berguna, kamu juga bisa memasukkan <strong>short key
             </strong> dari sebuah bentuk (Yang bisa kamu buat sendiri
             <link>disini</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: Kamu hanya dapat membuat dua penanda pada versi demo. Dapatkan versi
             lengkap untuk penanda-penanda tak terhingga!

translations/base-it.yaml

@@ -181,6 +181,8 @@ dialogs:
         desc: Dagli un nome significativo, puoi anche inserire un
             <strong>codice</strong> di una forma (Che puoi generare
             <link>qui</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Modifica etichetta
     markerDemoLimit:
         desc: Puoi creare solo due etichette personalizzate nella Demo. Ottieni la

translations/base-ja.yaml

@@ -164,6 +164,8 @@ dialogs:
         title: マーカーを設置
         titleEdit: マーカーを編集
         desc: わかりやすい名前をつけてください。形を表す<strong>短いキー</strong>を含めることもできます。（<link>ここ</link>から生成できます）
+        compassDesc: >-
+            Add a compass that points to the marker:
     editSignal:
         title: 信号を設定
         descItems: "プリセットを選択:"

translations/base-kor.yaml

@@ -165,6 +165,8 @@ dialogs:
         titleEdit: 마커 변경
         desc: 의미있는 이름을 정해주거나 <strong>단축키</strong>를 통해 도형을 직접 삽입할 수도 있습니다.
             (<link>여기</link>에서 만드실 수 있습니다).
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: 체험판 버전에서는 마커를 2개 까지만 배치할 수 있습니다. 정식 버전을 구입하면 마커를 무제한으로 배치할 수 있습니다!
     exportScreenshotWarning:

translations/base-lt.yaml

@@ -174,6 +174,8 @@ dialogs:
         title: New Marker
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Edit Marker
     markerDemoLimit:
         desc: You can only create two custom markers in the demo. Get the standalone for

translations/base-nl.yaml

@@ -180,6 +180,8 @@ dialogs:
         title: Nieuwe markering
         desc: Geef het een nuttige naam, Je kan ook een <strong>snel
             toets</strong> van een vorm gebruiken (die je <link>here</link> kan genereren).
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Bewerk markering
     markerDemoLimit:
         desc: Je kunt maar twee markeringen plaatsen in de demo. Koop de standalone voor

translations/base-no.yaml

@@ -182,6 +182,8 @@ dialogs:
         title: Ny Markør
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Rediger markør
     markerDemoLimit:
         desc: Du kan kun ha to markører i demoverjsonen. Skaff deg den frittstående

translations/base-pl.yaml

@@ -180,6 +180,8 @@ dialogs:
         title: Nowy Znacznik
         desc: Nadaj mu nazwę. Możesz w niej zawrzeć <strong>kod</strong> kształtu (Który
             możesz wygenerować <link>tutaj</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Edytuj Znacznik
     markerDemoLimit:
         desc: Możesz stworzyć tylko dwa własne znaczniki w wersji demo. Zakup pełną

translations/base-pt-BR.yaml

@@ -182,6 +182,8 @@ dialogs:
         titleEdit: Editar Marcador
         desc: Dê um nome significativo, você também pode incluir um <strong>código
             </strong> de uma forma (Você pode gerá-lo <link>aqui</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: Você só pode criar dois marcadores na versão demo. Adquira a versão
             completa para marcadores ilimitados!

translations/base-pt-PT.yaml

@@ -181,6 +181,8 @@ dialogs:
         desc: Dá-lhe um nome com significado, também poderás adicionar um
             <strong>pequeno código</strong> de uma forma. (Pode ser gerado
             <link>aqui</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Editar Marco
     markerDemoLimit:
         desc: Apenas podes criar dois marcos na versão Demo. Adquire o jogo completo

translations/base-ro.yaml

@@ -180,6 +180,8 @@ dialogs:
         title: Nou waypoint
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Edit Marker
     markerDemoLimit:
         desc: Poți crea decât două waypoint-uri personalizate în demo. Ia standalone-ul

translations/base-ru.yaml

@@ -179,6 +179,8 @@ dialogs:
         desc: Дайте ему значимое название, вы также можете добавить <strong>короткий
             ключ</strong> фигуры (Который можно сгенерировать
             <link>здесь</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Редактирование маркера
     markerDemoLimit:
         desc: Вы можете создать только 2 своих маркера в демоверсии. Приобретите полную

translations/base-sl.yaml

@@ -183,6 +183,8 @@ dialogs:
         title: New Marker
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Edit Marker
     markerDemoLimit:
         desc: You can only create two custom markers in the demo. Get the standalone for

translations/base-sr.yaml

@@ -184,6 +184,8 @@ dialogs:
         titleEdit: Uredi Putokaz
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: U demo verziji možete imati samo dva putokaza istovremeno. Nabavite
             samostalnu igru za beskonačno mnogo putokaza!

translations/base-sv.yaml

@@ -178,6 +178,8 @@ dialogs:
         title: Ny Markör
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Ändra Markör
     markerDemoLimit:
         desc: Du kan endast ha två markörer i demoversionen. Skaffa den fristående

translations/base-tr.yaml

@@ -176,6 +176,8 @@ dialogs:
         title: Yeni Konum İşareti
         desc: Anlamlı bir isim ver. Ayrıca  <strong>Şekil koduda</strong> koyabilirsiniz
             (<link>Buradan</link> kod yapabilirisinz )
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: Konum İşaretini Düzenle
     markerDemoLimit:
         desc: Deneme sürümünde sadece iki adet yer imi oluşturabilirsiniz. Sınırsız yer

translations/base-uk.yaml

@@ -186,6 +186,8 @@ dialogs:
         titleEdit: Редагувати позначку
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
     markerDemoLimit:
         desc: Ви можете створити тільки 2 позначки в демоверсії. Отримайте окрему версії
             для створення необмеженної кількості позначок.

translations/base-zh-CN.yaml

@@ -156,6 +156,8 @@ dialogs:
         title: 创建地图标记
         desc: Give it a meaningful name, you can also include a <strong>short
             key</strong> of a shape (Which you can generate <link>here</link>)
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: 编辑地图标记
     markerDemoLimit:
         desc: 在试玩版中你只能创建两个地图标记。请获取独立版以创建更多标记。

translations/base-zh-TW.yaml

@@ -155,6 +155,8 @@ dialogs:
         title: 創建標記
         desc: 給地圖標記起一個的名字。 你可以在名字中加入一個<strong>短代碼</strong>以加入圖形。 （你可以在 <link>here</link>
             生成短代碼。）
+        compassDesc: >-
+            Add a compass that points to the marker:
         titleEdit: 修改標記
     markerDemoLimit:
         desc: 在演示版中你只能創建兩個地圖標記。請獲取單機版以創建更多標記。