More work on database editing

client/plugins/databasemanager/src/databasemanagerplugin.ts

@@ -3,6 +3,7 @@ import { AirUnitEditor } from "./airuniteditor";
 import { OlympusApp } from "olympusapp";
 import { GroundUnitEditor } from "./grounduniteditor";
 import { PrimaryToolbar } from "toolbars/primarytoolbar";
+import { NavyUnitEditor } from "./navyuniteditor";
 
 export class DatabaseManagerPlugin implements OlympusPlugin {
     #app: OlympusApp | null = null;
@@ -26,6 +27,7 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
     #aircraftEditor: AirUnitEditor;
     #helicopterEditor: AirUnitEditor;
     #groundUnitEditor: GroundUnitEditor;
+    #navyUnitEditor: NavyUnitEditor;
 
     constructor() {
         this.#element = document.createElement("div");
@@ -59,6 +61,7 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
         this.#button4 = document.createElement("button");
         this.#button4.classList.add("tab-button");
         this.#button4.textContent = "Navy Unit database";
+        this.#button4.onclick = () => { this.hideAll(); this.#navyUnitEditor.show(); this.#button4.classList.add("selected"); };
         topButtonContainer.appendChild(this.#button4);
 
         this.#element.appendChild(topButtonContainer);
@@ -82,6 +85,7 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
         this.#aircraftEditor = new AirUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
         this.#helicopterEditor = new AirUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
         this.#groundUnitEditor = new GroundUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
+        this.#navyUnitEditor = new NavyUnitEditor(this.#contentDiv1, this.#contentDiv2, this.#contentDiv3);
 
         let bottomButtonContainer = document.createElement("div");
 
@@ -100,6 +104,10 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
             var groundUnitDatabase = this.#groundUnitEditor.getDatabase();
             if (groundUnitDatabase)
                 this.uploadDatabase(groundUnitDatabase, "groundUnitDatabase");
+
+            var navyUnitDatabase = this.#navyUnitEditor.getDatabase();
+            if (navyUnitDatabase)
+                this.uploadDatabase(navyUnitDatabase, "navyUnitDatabase");
         };
         bottomButtonContainer.appendChild(this.#button5);
 
@@ -161,6 +169,10 @@ export class DatabaseManagerPlugin implements OlympusPlugin {
         if (groundUnitDatabase != null)
             this.#groundUnitEditor.setDatabase(groundUnitDatabase);
 
+        var navyUnitDatabase = this.#app?.getNavyUnitDatabase();
+        if (navyUnitDatabase != null)
+            this.#navyUnitEditor.setDatabase(navyUnitDatabase);
+
         this.hideAll();
         this.#aircraftEditor.show();
         this.#button1.classList.add("selected");

client/plugins/databasemanager/src/grounduniteditor.ts

@@ -34,8 +34,10 @@ export class GroundUnitEditor extends UnitEditor {
             addStringInput(this.contentDiv2, "Type", blueprint.type?? "", "text", (value: string) => {blueprint.type = value; });
             addDropdownInput(this.contentDiv2, "Coalition", blueprint.coalition, ["", "blue", "red"],);
             addDropdownInput(this.contentDiv2, "Era", blueprint.era, ["WW2", "Early Cold War", "Mid Cold War", "Late Cold War", "Modern"]);
-            addStringInput(this.contentDiv2, "Filename", blueprint.filename?? "", "text", (value: string) => {blueprint.filename = 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, "Barrel height [m]", String(blueprint.barrelHeight)?? "", "number", (value: string) => {blueprint.barrelHeight = parseFloat(value); });
+            addStringInput(this.contentDiv2, "Muzzle velocity [m/s]", String(blueprint.muzzleVelocity)?? "", "number", (value: string) => {blueprint.muzzleVelocity = parseFloat(value); });
         }
     }
 

client/plugins/databasemanager/src/navyuniteditor.ts

@@ -0,0 +1,55 @@
+import { UnitBlueprint } from "interfaces";
+import { UnitEditor } from "./uniteditor";
+import { addDropdownInput, addStringInput } from "./utils";
+
+export class NavyUnitEditor extends UnitEditor {
+    #blueprint: UnitBlueprint | null = null;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        super(contentDiv1, contentDiv2, contentDiv3);
+        this.contentDiv2.addEventListener("refresh", () => { 
+            if (this.visible) {
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+            }
+        });
+        
+        this.contentDiv3.addEventListener("refresh", () => { 
+            if (this.visible) {
+                if (this.#blueprint !== null)
+                    this.setBlueprint(this.#blueprint);
+            }
+        });
+    }
+
+    setBlueprint(blueprint: UnitBlueprint) {
+        this.#blueprint = blueprint;
+
+        if (this.#blueprint !== null) {
+            this.contentDiv2.replaceChildren();
+            
+            addStringInput(this.contentDiv2, "Name", blueprint.name, "text", (value: string) => {blueprint.name = value; }, true);
+            addStringInput(this.contentDiv2, "Label", blueprint.label, "text", (value: string) => {blueprint.label = value; });
+            addStringInput(this.contentDiv2, "Short label", blueprint.shortLabel, "text", (value: string) => {blueprint.shortLabel = value; });
+            addStringInput(this.contentDiv2, "Type", blueprint.type?? "", "text", (value: string) => {blueprint.type = value; });
+            addDropdownInput(this.contentDiv2, "Coalition", blueprint.coalition, ["", "blue", "red"],);
+            addDropdownInput(this.contentDiv2, "Era", blueprint.era, ["WW2", "Early Cold War", "Mid Cold War", "Late Cold War", "Modern"]);
+            //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); });
+        }
+    }
+
+    addBlueprint(key: string) {
+        if (this.database != null) {
+            this.database.blueprints[key] = {
+                name: key,
+                coalition: "",
+                label: "",
+                shortLabel: "",
+                era: ""
+            }
+            this.show();
+            this.setBlueprint(this.database.blueprints[key]);
+        }
+    }
+}

client/plugins/databasemanager/style.css

@@ -1,15 +1,30 @@
 #database-manager-panel {
-    display: flex;
     flex-direction: column;
+    display: flex;
     width: 80%;
     height: 80%;
     padding: 10px;
     border-radius: 5px;
+    background-color: var(--background-steel) !important;
+    z-index: 9999999;
+}
+
+@media (orientation: landscape) {
+    .dm-container {
+      flex-direction: row;
+    }
+}
+  
+@media (orientation: portrait) {
+    .dm-container {
+        flex-direction: column;
+    }
 }
 
 #database-manager-panel * {
     font-size: 13;
-    font-weight: bold;
+    font-family: 'Open Sans', sans-serif !important;
+    user-select: none;
 }
 
 #database-manager-panel>div:first-child {
@@ -27,11 +42,10 @@
 }
 
 .dm-container {
-    background-color: #555555;
+    background-color: var(--background-grey);
     border: 2px solid #777777;
     position: relative;
     display: flex;
-    flex-direction: row;
     width: 100%;
     padding: 5px;
     height: calc(100% - 64px - 5px);
@@ -48,9 +62,21 @@
     display: flex;
     flex-direction: column;
     row-gap: 5px;
-    height: calc(100% - 20px);
-    min-width: 200px;
-    width: fit-content;
+}
+
+@media (orientation: landscape) {
+    .dm-content-container {
+        height: calc(100% - 20px);
+        min-width: 200px;
+        width: fit-content;
+    }
+}
+  
+@media (orientation: portrait) {
+    .dm-content-container {
+        width: 100% - calc(20px);
+        height: 30%;
+    }
 }
 
 .dm-scroll-container {
@@ -62,10 +88,6 @@
     font-weight: bold;
 }
 
-.dm-scroll-container>* {
-    padding: 2px;
-}
-
 .dm-scroll-container>div:nth-child(even) {
     background-color: gainsboro;
 }
@@ -77,9 +99,10 @@
 .dm-scroll-container>div *:nth-child(1) {
     height: 100%;
     width: 100%;
+    padding: 2px;
 }
 
-.dm-scroll-container>div *:nth-child(1):hover{
+.dm-scroll-container>div *:nth-child(1):hover {
     background-color: var(--secondary-blue-text);
     color: white;
     cursor: pointer;
@@ -104,7 +127,7 @@
 }
 
 .input-row>dt {
-    width: 150px;
+    width: 250px;
 }
 
 .input-row>dd {
@@ -113,11 +136,12 @@
 
 .input-row>dd>* {
     width: 100%;
+    font-weight: bold;
 }
 
 .dm-loadout-container {
     max-height: 100%;
-    width: 400px;
+    width: 100%;
 }
 
 .dm-items-container {
@@ -136,11 +160,13 @@
 }
 
 .dm-items-container div>input:nth-of-type(1) {
-    width: 100%;
+    flex: 1;
+    font-weight: bold;
 }
 
 .dm-items-container div>input:nth-of-type(2) {
     width: 40px;
+    font-weight: bold;
 }
 
 .dm-new-element-input {
@@ -170,16 +196,16 @@
 
 .tab-button {
     transform: translateY(+3px);
-    background-color: #333333;
+    background-color: var(--background-steel);
     border-radius: 0;
-    border-bottom: 2px solid transparent;
-    border-top: 2px solid #777777;
-    border-left: 2px solid #777777;
-    border-right: 0px solid #777777;
+    border-bottom: 2px solid transparent !important;
+    border-top: 2px solid #777777 !important;
+    border-left: 2px solid #777777 !important;
+    border-right: 0px solid #777777 !important;
 }
 
 .tab-button.selected {
-    background-color: #555555;
+    background-color: var(--background-grey);
     z-index: 10;
 }
 
@@ -189,5 +215,9 @@
 
 .tab-button:last-of-type {
     border-top-right-radius: 5px;
-    border-right: 2px solid #777777;
+    border-right: 2px solid #777777 !important;
+}
+
+#database-manager-panel button :not(.dm-scroll-container>div) {
+    border: 1px solid white;
 }