Removed preferCanvas option for map

Which apparently causes Chrome to slow down when zoomed in. More test required to check performance.

client/plugins/databasemanager/src/airuniteditor.ts

@@ -1,7 +1,7 @@
 import { LoadoutBlueprint, UnitBlueprint } from "interfaces";
 import { UnitEditor } from "./uniteditor";
 import { LoadoutEditor } from "./loadouteditor";
-import { addDropdownInput, addLoadoutsScroll, addNewElementInput, addStringInput } from "./utils";
+import { addCheckboxInput, addDropdownInput, addLoadoutsScroll, addNewElementInput, addStringInput } from "./utils";
 
 /** Database editor for Air Units, both Aircraft and Helicopter since they are identical in terms of datbase entries.
  * 
@@ -44,8 +44,9 @@ export class AirUnitEditor extends UnitEditor {
             addDropdownInput(this.contentDiv2, "Era", blueprint.era, ["WW2", "Early Cold War", "Mid Cold War", "Late Cold War", "Modern"], (value: string) => {blueprint.era = value; });
             addStringInput(this.contentDiv2, "Filename", blueprint.filename ?? "", "text", (value: string) => { blueprint.filename = value; });
             addStringInput(this.contentDiv2, "Cost", String(blueprint.cost) ?? "", "number", (value: string) => { blueprint.cost = parseFloat(value); });
-            addStringInput(this.contentDiv2, "Rufels from", String(blueprint.refuelsFrom) ?? "", "text", (value: string) => { blueprint.refuelsFrom = value; });
-            addStringInput(this.contentDiv2, "Refuelling type", String(blueprint.refuellingType) ?? "", "text", (value: string) => { blueprint.refuellingType = value; });
+            addCheckboxInput(this.contentDiv2, "Can target point", blueprint.canTargetPoint ?? false, (value: boolean) => {blueprint.canTargetPoint = value;})
+            addStringInput(this.contentDiv2, "Description", blueprint.description ?? "", "text", (value: string) => {blueprint.description = value; });
+            addStringInput(this.contentDiv2, "Abilities", blueprint.abilities ?? "", "text", (value: string) => {blueprint.abilities = value; });
 
             /* Add a scrollable list of loadouts that the user can edit */
             var title = document.createElement("label");

client/plugins/databasemanager/src/grounduniteditor.ts

@@ -1,6 +1,6 @@
 import { UnitBlueprint } from "interfaces";
 import { UnitEditor } from "./uniteditor";
-import { addDropdownInput, addStringInput } from "./utils";
+import { addCheckboxInput, addDropdownInput, addStringInput } from "./utils";
 
 /** Database editor for ground units
  * 
@@ -40,6 +40,10 @@ export class GroundUnitEditor extends UnitEditor {
             addStringInput(this.contentDiv2, "Muzzle velocity [m/s]", String(blueprint.muzzleVelocity)?? "", "number", (value: string) => {blueprint.muzzleVelocity = parseFloat(value); });
             addStringInput(this.contentDiv2, "Aim time [s]", String(blueprint.aimTime)?? "", "number", (value: string) => {blueprint.aimTime = parseFloat(value); });
             addStringInput(this.contentDiv2, "Burst quantity", String(blueprint.shotsToFire)?? "", "number", (value: string) => {blueprint.shotsToFire = Math.round(parseFloat(value)); });
+            addCheckboxInput(this.contentDiv2, "Can target point", blueprint.canTargetPoint ?? false, (value: boolean) => {blueprint.canTargetPoint = value;})
+            addCheckboxInput(this.contentDiv2, "Can rearm", blueprint.canRearm ?? false, (value: boolean) => {blueprint.canRearm = value;})
+            addStringInput(this.contentDiv2, "Description", blueprint.description ?? "", "text", (value: string) => {blueprint.description = value; });
+            addStringInput(this.contentDiv2, "Abilities", blueprint.abilities ?? "", "text", (value: string) => {blueprint.abilities = value; });
         }
     }
 

client/plugins/databasemanager/src/loadouteditor.ts

@@ -1,5 +1,5 @@
 import { LoadoutBlueprint } from "interfaces";
-import { addLoadoutItemsEditor, addStringInput } from "./utils";
+import { addLoadoutItemsEditor, addStringInput, arrayToString, stringToArray } from "./utils";
 
 /** The LoadoutEditor allows the user to edit a loadout
  * 
@@ -40,6 +40,7 @@ export class LoadoutEditor {
             var laodout = this.#loadout;
             addStringInput(this.#contentDiv, "Name", laodout.name, "text", (value: string) => {laodout.name = value; this.#contentDiv.dispatchEvent(new Event("refresh"));});
             addStringInput(this.#contentDiv, "Code", laodout.code, "text", (value: string) => {laodout.code = value; });
+            addStringInput(this.#contentDiv, "Roles", arrayToString(laodout.roles), "text", (value: string) => {laodout.roles = stringToArray(value);});
             addLoadoutItemsEditor(this.#contentDiv, this.#loadout);
         }
     }

client/plugins/databasemanager/src/utils.ts

@@ -38,7 +38,7 @@ export function addStringInput(div: HTMLElement, key: string, value: string, typ
  * @param value The initial value of the input
  * @param options The dropdown options
  */
-export function addDropdownInput(div: HTMLElement, key: string, value: string, options: string[], callback: CallableFunction) {
+export function addDropdownInput(div: HTMLElement, key: string, value: string, options: string[], callback: CallableFunction, disabled?: boolean) {
     var row = document.createElement("div");
     var dt = document.createElement("dt");
     var dd = document.createElement("dd");
@@ -51,6 +51,7 @@ export function addDropdownInput(div: HTMLElement, key: string, value: string, o
         select.appendChild(el);
     });
     select.value = value;
+    select.disabled = disabled?? false;
     select.onchange = () => callback(select.value);
     dd.appendChild(select);
     row.appendChild(dt);
@@ -59,6 +60,31 @@ export function addDropdownInput(div: HTMLElement, key: string, value: string, o
     div.appendChild(row);
 }
 
+/** Add a checkbox input in the form of String: [ value ]
+ * 
+ * @param div The HTMLElement that will contain the input
+ * @param key The key of the input, which will be used as label
+ * @param value The initial value of the input
+ * @param callback Callback called when the user enters a new value
+ * @param disabled If true, the input will be disabled and read only
+ */
+export function addCheckboxInput(div: HTMLElement, key: string, value: boolean, callback: CallableFunction, disabled?: boolean) {
+    var row = document.createElement("div");
+    var dt = document.createElement("dt");
+    var dd = document.createElement("dd");
+    dt.innerText = key;
+    var input = document.createElement("input");
+    input.checked = value;
+    input.type = "checkbox";
+    input.disabled = disabled?? false;
+    input.onchange = () => callback(input.checked);
+    dd.appendChild(input);
+    row.appendChild(dt);
+    row.appendChild(dd);
+    row.classList.add("input-row");
+    div.appendChild(row);
+}
+
 /** Create a loadout items editor. This editor allows to add or remove loadout items, as well as changing their name and quantity
  * 
  * @param div The HTMLElement that will contain the editor
@@ -230,4 +256,32 @@ export function addLoadoutsScroll(div: HTMLElement, loadouts: LoadoutBlueprint[]
     });
 
     div.appendChild(loadoutsEl);
+}
+
+/** Converts an array of string into a single string like [val1, val2, val3]
+ * 
+ * @param array The input array of strings
+ * @returns The string
+ */
+export function arrayToString(array: string[]) {
+    var value = "[";
+    var firstRole = true;
+    array.forEach((role: string) => {
+        value += firstRole? "": ", ";
+        firstRole = false; 
+        value += role;
+    })
+    value += "]";
+    return value;
+}
+
+
+export function stringToArray(input: string) {
+    input = input.replace("[", "").replace("]", "");
+    var values = input.split(",");
+    var result: string[] = [];
+    values.forEach((value: string) => {
+        result.push(value.trim());
+    })
+    return result;
 }

client/plugins/databasemanager/style.css

@@ -169,6 +169,7 @@
 
 .input-row>dd {
     width: 100%;
+    text-align: right;
 }
 
 .input-row>dd>* {
@@ -176,6 +177,11 @@
     font-weight: bold;
 }
 
+.input-row>dd>*[type="checkbox"] {
+    width: 20px;
+    font-weight: bold;
+}
+
 .dm-loadout-container {
     max-height: 100%;
     max-width: 500px;