v0.4.7

489 show all the action options of the selected units even if some units dont have them

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+# ci.yml file for GitHub Actions
+name: CI
+
+on: [push]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+jobs:
+  build_docs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v2
+        
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./client
+
+      - name: Create the docs directory locally in CI
+        run: npx typedoc --out ../docs/client @types/*.d.ts src/**/*.ts
+        working-directory: ./client
+        
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: docs 

.gitignore

@@ -9,4 +9,9 @@ Output
 node_modules
 /client/TODO.txt
 /client/public/javascripts/bundle.js
-!client/bin
+!client/bin
+/client/public/plugins
+/client/plugins/controltips/index.js
+hgt
+/client/public/databases/units/old
+/client/plugins/databasemanager/index.js

LEGAL

@@ -1,4 +1,33 @@
-                    GNU GENERAL PUBLIC LICENSE
+DCS Olympus
+
+A real-time AI unit control mod for DCS World
+
+Copyright (C) 2023 Veltro & Gang
+
+DCS Olympus (the "MATERIAL" or "Software") is provided completely free 
+to users subject to the it under both the terms of version 3 of the GNU 
+General Public License as published by the Free Software Foundation, and 
+the additional terms set out below; except where such terms conflict with this 
+disclaimer, in which case, the terms of this disclaimer shall prevail. 
+
+The authors and/or copyright holders of the Software have not received any 
+financial benefit in connection with the Software. In any event, the 
+Software is provided “as is”, without warranty of any kind, express or 
+implied, including but not limited to the warranties of merchantability, 
+fitness for a particular purpose and non-infringement. In no event shall 
+the authors and/or copyright holders be liable for any claim, damages or 
+other liability, whether in an action of contract, tort or otherwise, 
+arising from, out of or in connection with the Software or the use or o
+ther dealings in the Software. 
+
+Any party making use of the Software in any manner agrees to be 
+bound by the terms set out in this disclaimer, version 3 of the GNU 
+General Public Licence, and the Additional Terms below. 
+
+THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
+
+
+                     GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
@@ -618,57 +647,14 @@ an absolute waiver of all civil liability in connection with the
 Program, unless a warranty or assumption of liability accompanies a
 copy of the Program in return for a fee.
 
-                     END OF TERMS AND CONDITIONS
+              END OF GNU GENERAL PUBLIC LICENCE
 
-            How to Apply These Terms to Your New Programs
+                ADDITIONAL TERMS & CONDITIONS
 
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
+1. Governing Law
 
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+  Save where specifically provided for otherwise, the provisions of the 
+GNU General Public Licence Version 3 above shall be governed by and 
+interpreted in accordance with English Law and the parties submit to the 
+exclusive jurisdiction of the English Courts.
+           

build_package.bat

@@ -0,0 +1,17 @@
+cd src
+msbuild olympus.sln /t:Rebuild /p:Configuration=Release
+cd ..
+cd client
+call npm install
+rmdir /s /q "hgt"
+call npm run emit-declarations
+call npm run build
+cd "plugins\controltips"
+call npm run build
+cd "..\.."
+cd "plugins\databasemanager"
+call npm run build
+cd "..\.."
+call npm prune --production
+cd ..
+call "C:\Program Files (x86)\Inno Setup 6\iscc.exe" "installer\olympus.iss"

client/.vscode/launch.json

@@ -4,17 +4,6 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-    {
-        "name": "Attach to Chrome",
-        "port": 9222,
-        "urlFilter": "http://localhost:3000/*",
-        "request": "attach",
-        "type": "chrome",
-        "webRoot": "${workspaceFolder}/public/",
-        "sourceMapPathOverrides": {
-            "src/*": "${workspaceFolder}/src/*"
-        }
-    },
         {
             "type": "chrome",
             "request": "launch",
@@ -24,7 +13,8 @@
             "sourceMapPathOverrides": {
                 "src/*": "${workspaceFolder}/src/*"
             },
-            "preLaunchTask": "server"
+            "preLaunchTask": "server",
+            "port": 9222
         }
     ]
 }

client/.vscode/tasks.json

@@ -6,7 +6,7 @@
         {
             "label": "server",
             "type": "shell",
-            "command": "npm run start",
+            "command": "npm run debug",
             "isBackground": true
         }
     ]

client/app.js

@@ -3,25 +3,32 @@ var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
 var fs = require('fs');
+var bodyParser = require('body-parser');
 
 var atcRouter       = require('./routes/api/atc');
 var airbasesRouter  = require('./routes/api/airbases');
+var elevationRouter = require('./routes/api/elevation');
+var databasesRouter = require('./routes/api/databases');
 var indexRouter     = require('./routes/index');
 var uikitRouter     = require('./routes/uikit');
 var usersRouter     = require('./routes/users');
 var resourcesRouter = require('./routes/resources');
+var pluginsRouter   = require('./routes/plugins');
 
 var app = express();
 
 app.use(logger('dev'));
-app.use(express.json());
-app.use(express.urlencoded({ extended: false }));
+app.use(bodyParser.json({limit: '50mb'}));
+app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
 app.use('/api/atc', atcRouter);
 app.use('/api/airbases', airbasesRouter);
+app.use('/api/elevation', elevationRouter);
+app.use('/api/databases', databasesRouter);
+app.use('/plugins', pluginsRouter)
 app.use('/users', usersRouter);
 app.use('/uikit', uikitRouter);
 app.use('/resources', resourcesRouter);

client/bin/www

@@ -1,5 +1,9 @@
 #!/usr/bin/env node
 
+var fs = require('fs');
+let rawdata = fs.readFileSync('../olympus.json');
+let config = JSON.parse(rawdata);
+
 /**
  * Module dependencies.
  */
@@ -12,8 +16,14 @@ var http = require('http');
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '3000');
+var configPort = null;
+if (config["client"] != undefined && config["client"]["port"] != undefined) {
+	configPort = config["client"]["port"];
+}
+
+var port = normalizePort(configPort || '3000');
 app.set('port', port);
+console.log("Express server listening on port: " + port)
 
 /**
  * Create HTTP server.

client/copy.bat

@@ -1,3 +1,4 @@
 copy .\\node_modules\\leaflet\\dist\\leaflet.css .\\public\\stylesheets\\leaflet\\leaflet.css 
+copy .\\node_modules\\leaflet-gesture-handling\\dist\\leaflet-gesture-handling.css .\\public\\stylesheets\\leaflet\\leaflet-gesture-handling.css
 copy .\\node_modules\\leaflet.nauticscale\\dist\\leaflet.nauticscale.js .\\public\\javascripts\\leaflet.nauticscale.js
-copy .\\node_modules\\leaflet-path-drag\\dist\\L.Path.Drag.js .\\public\\javascripts\\L.Path.Drag.js
+copy .\\node_modules\\leaflet-path-drag\\dist\\L.Path.Drag.js .\\public\\javascripts\\L.Path.Drag.js

client/demo.js

@@ -1,106 +1,16 @@
+const { random } = require('@turf/turf');
 var basicAuth = require('express-basic-auth')
 var enc = new TextEncoder();
 
-const DEMO_UNIT_DATA = {
-    ["1"]:{ category: "Aircraft", alive: true, human: false, controlled: true, coalition: 2, country: 0, name: "KC-135", unitName: "Cool guy 1-1 who also has a very long name", groupName: "Cool group 1", state: 3, task: "Being cool!",
-        hasTask: true, position: { lat: 37, lng: -116, alt: 1000 }, speed: 200, heading: 45, isTanker: true, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 2,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [{ID: 2, detectionMethod: 1}, {ID: 3, detectionMethod: 4}, {ID: 5, detectionMethod: 4}],
-        activePath: [{lat: 38, lng: -115, alt: 0}, {lat: 38, lng: -114, alt: 0}]
-    },
-    ["2"]:{ category: "Aircraft", alive: true, human: false, controlled: false, coalition: 1, country: 0, name: "FA-18C_hornet", unitName: "Cool guy 1-2", groupName: "Cool group 2", state: 1, task: "Being cool",
-        hasTask: false, position: { lat: 36.9, lng: -116, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 0,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [{ID: 1, detectionMethod: 16}],
-        activePath: [ ]
-    }, ["3"]:{ category: "Helicopter", alive: true, human: false, controlled: false, coalition: 1, country: 0, name: "AH-64D_BLK_II", unitName: "Cool guy 1-4", groupName: "Cool group 3", state: 1, task: "Being cool",
-        hasTask: false, position: { lat: 37.1, lng: -116.1, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 0,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [{ID: 1, detectionMethod: 16}],
-        activePath: [ ]
-    }, ["4"]:{ category: "GroundUnit", alive: true, human: false, controlled: true, coalition: 1, country: 0, name: "Gepard", unitName: "Cool guy 2-1", groupName: "Cool group 4", state: 1, task: "Being cool",
-        hasTask: false, position: { lat: 37.2, lng: -116.1, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 0,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile\0Ciao", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [{ID: 1001, detectionMethod: 16}],
-        activePath: [ ],
-        isLeader: true
-    }, ["5"]:{ category: "GroundUnit", alive: true, human: false, controlled: true, coalition: 1, country: 0, name: "S_75M_Volhov", unitName: "Cool guy 2-2", groupName: "Cool group 4", state: 1, task: "Being cool",
-        hasTask: false, position: { lat: 37.21, lng: -116.1, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 0,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [],
-        activePath: [ ],
-        isLeader: false
-    },
-    ["6"]:{ category: "Aircraft", alive: true, human: false, controlled: false, coalition: 1, country: 0, name: "FA-18C_hornet", unitName: "Bad boi 1-2", groupName: "Bad group 1", state: 1, task: "Being bad",
-        hasTask: false, position: { lat: 36.8, lng: -116, alt: 1000 }, speed: 200, heading: 315 * Math.PI / 180, isTanker: false, isAWACS: false, onOff: true, followRoads: false, fuel: 50, 
-        desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
-        formationOffset: { x: 0, y: 0, z: 0 },
-        targetID: 0,
-        targetPosition: { lat: 0, lng: 0, alt: 0 },
-        ROE: 1,
-        reactionToThreat: 1,
-        emissionsCountermeasures: 1,
-        TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
-        radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
-        generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
-        ammo: [{ quantity: 2, name: "A cool missile", guidance: 0, category: 0, missileCategory: 0 } ],
-        contacts: [{ID: 1, detectionMethod: 16}],
-        activePath: [ ]
-    },
-}
+const aircraftDatabase = require('./public/databases/units/aircraftDatabase.json');
+const helicopterDatabase = require('./public/databases/units/helicopterDatabase.json');
+const groundUnitDatabase = require('./public/databases/units/groundUnitDatabase.json');
+const navyUnitDatabase = require('./public/databases/units/navyUnitDatabase.json');
+
+const DEMO_UNIT_DATA = {}
 
 const DEMO_WEAPONS_DATA = {
-    ["1001"]:{ category: "Missile", alive: true, coalition: 2, name: "", position: { lat: 37.1, lng: -116, alt: 1000 }, speed: 200, heading: 45 * Math.PI / 180 },
+    /*["1001"]:{ category: "Missile", alive: true, coalition: 2, name: "", position: { lat: 37.1, lng: -116, alt: 1000 }, speed: 200, heading: 45 * Math.PI / 180 }, */
 }
 
 class DemoDataGenerator {
@@ -123,6 +33,121 @@ class DemoDataGenerator {
             },
         }))
 
+        
+        let baseData = { alive: true, human: false, controlled: true, coalition: 2, country: 0, unitName: "Cool guy", groupName: "Cool group 1", state: 1, task: "Being cool!",
+            hasTask: true, position: { lat: 37, lng: -116, alt: 1000 }, speed: 200, horizontalVelocity: 200, verticalVelicity: 0, heading: 45, isActiveTanker: false, isActiveAWACS: false, onOff: true, followRoads: false, fuel: 50, 
+            desiredSpeed: 300, desiredSpeedType: 1, desiredAltitude: 1000, desiredAltitudeType: 1, leaderID: 0,
+            formationOffset: { x: 0, y: 0, z: 0 },
+            targetID: 0,
+            targetPosition: { lat: 0, lng: 0, alt: 0 },
+            ROE: 1,
+            reactionToThreat: 1,
+            emissionsCountermeasures: 1,
+            TACAN: { isOn: false, XY: 'Y', callsign: 'TKR', channel: 40 },
+            radio: { frequency: 124000000, callsign: 1, callsignNumber: 1 },
+            generalSettings: { prohibitAA: false, prohibitAfterburner: false, prohibitAG: false, prohibitAirWpn: false, prohibitJettison: false },
+            ammo:  [],
+            contacts: [],
+            activePath: [],
+            isLeader: true
+        }
+
+        /*
+
+        ***************** UNCOMMENT TO TEST ALL UNITS ****************
+
+        var databases = Object.assign({}, aircraftDatabase, helicopterDatabase, groundUnitDatabase, navyUnitDatabase);
+        var t = Object.keys(databases).length;
+        var l = Math.floor(Math.sqrt(t));
+        let latIdx = 0;
+        let lngIdx = 0;
+        let idx = 1;
+        console.log(l)
+        for (let name in databases) {
+            if (databases[name].enabled) {
+                DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+                DEMO_UNIT_DATA[idx].name = name;
+                DEMO_UNIT_DATA[idx].groupName = `Group-${idx}`;
+                DEMO_UNIT_DATA[idx].position.lat += latIdx / 5;
+                DEMO_UNIT_DATA[idx].position.lng += lngIdx / 5;
+                
+                latIdx += 1;
+                if (latIdx === l) {
+                    latIdx = 0;
+                    lngIdx += 1;
+                }
+
+                if (name in aircraftDatabase)
+                    DEMO_UNIT_DATA[idx].category = "Aircraft";
+                else if (name in helicopterDatabase)
+                    DEMO_UNIT_DATA[idx].category = "Helicopter";
+                else if (name in groundUnitDatabase)
+                    DEMO_UNIT_DATA[idx].category = "GroundUnit";
+                else if (name in navyUnitDatabase)
+                    DEMO_UNIT_DATA[idx].category = "NavyUnit";
+
+                idx += 1;
+            }
+        }
+        */
+
+        let idx = 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "S_75M_Volhov";
+        DEMO_UNIT_DATA[idx].groupName = `Group`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "GroundUnit";
+        DEMO_UNIT_DATA[idx].isLeader = true;
+
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "SNR_75V";
+        DEMO_UNIT_DATA[idx].groupName = `Group`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "GroundUnit";
+        DEMO_UNIT_DATA[idx].isLeader = false;
+
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "Ural-4320 APA-5D";
+        DEMO_UNIT_DATA[idx].groupName = `Group`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "GroundUnit";
+        DEMO_UNIT_DATA[idx].isLeader = false;
+        
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "F-14B";
+        DEMO_UNIT_DATA[idx].groupName = `Group-1`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "Aircraft";
+        DEMO_UNIT_DATA[idx].isLeader = false;
+
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "Infantry AK";
+        DEMO_UNIT_DATA[idx].groupName = `Group-2`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "GroundUnit";
+        DEMO_UNIT_DATA[idx].isLeader = true;
+
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "Infantry AK";
+        DEMO_UNIT_DATA[idx].groupName = `Group-3`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "GroundUnit";
+        DEMO_UNIT_DATA[idx].isLeader = true;
+
+        idx += 1;
+        DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
+        DEMO_UNIT_DATA[idx].name = "KC-135";
+        DEMO_UNIT_DATA[idx].groupName = `Group-4`;
+        DEMO_UNIT_DATA[idx].position.lat += idx / 100;
+        DEMO_UNIT_DATA[idx].category = "Aircraft";
+        DEMO_UNIT_DATA[idx].isLeader = true;
+        
+
         this.startTime = Date.now();
     }
     
@@ -130,48 +155,53 @@ class DemoDataGenerator {
         var array = new Uint8Array();
         var time = Date.now();
         array = this.concat(array, this.uint64ToByteArray(BigInt(time)));
-        for (let idx in DEMO_UNIT_DATA) {
-            const unit = DEMO_UNIT_DATA[idx];
-            array = this.concat(array, this.uint32ToByteArray(idx));
-            array = this.appendString(array, unit.category, 1);
-            array = this.appendUint8(array, unit.alive, 2);
-            array = this.appendUint8(array, unit.human, 3);
-            array = this.appendUint8(array, unit.controlled, 4);
-            array = this.appendUint16(array, unit.coalition, 5);
-            array = this.appendUint8(array, unit.country, 6);
-            array = this.appendString(array, unit.name, 7);
-            array = this.appendString(array, unit.unitName, 8);
-            array = this.appendString(array, unit.groupName, 9);
-            array = this.appendUint8(array, unit.state, 10);
-            array = this.appendString(array, unit.task, 11);
-            array = this.appendUint8(array, unit.hasTask, 12);
-            array = this.appendCoordinates(array, unit.position, 13);
-            array = this.appendDouble(array, unit.speed, 14);
-            array = this.appendDouble(array, unit.heading, 15);
-            array = this.appendUint8(array, unit.isTanker, 16);
-            array = this.appendUint8(array, unit.isAWACS, 17);
-            array = this.appendUint8(array, unit.onOff, 18);
-            array = this.appendUint8(array, unit.followRoads, 19);
-            array = this.appendUint16(array, unit.fuel, 20);
-            array = this.appendDouble(array, unit.desiredSpeed, 21);
-            array = this.appendUint8(array, unit.desiredSpeedType, 22);
-            array = this.appendDouble(array, unit.desiredAltitude, 23);
-            array = this.appendUint8(array, unit.desiredAltitudeType, 24);
-            array = this.appendUint32(array, unit.leaderID, 25);
-            array = this.appendOffset(array, unit.formationOffset, 26);
-            array = this.appendUint32(array, unit.targetID, 27);
-            array = this.appendCoordinates(array, unit.targetPosition, 28);
-            array = this.appendUint8(array, unit.ROE, 29);
-            array = this.appendUint8(array, unit.reactionToThreat, 30);
-            array = this.appendUint8(array, unit.emissionsCountermeasures, 31);
-            array = this.appendTACAN(array, unit.TACAN, 32);
-            array = this.appendRadio(array, unit.radio, 33);
-            array = this.appendRadio(array, unit.generalSettings, 34);
-            array = this.appendAmmo(array, unit.ammo, 35);
-            array = this.appendContacts(array, unit.contacts, 36);
-            array = this.appendActivePath(array, unit.activePath, 37);
-            array = this.appendUint8(array, unit.isLeader, 38);
-            array = this.concat(array, this.uint8ToByteArray(255));
+        if (req.query["time"] == 0){
+            for (let idx in DEMO_UNIT_DATA) {
+                const unit = DEMO_UNIT_DATA[idx];
+                array = this.concat(array, this.uint32ToByteArray(idx));
+                array = this.appendString(array, unit.category, 1);
+                array = this.appendUint8(array, unit.alive, 2);
+                array = this.appendUint8(array, unit.human, 3);
+                array = this.appendUint8(array, unit.controlled, 4);
+                array = this.appendUint16(array, unit.coalition, 5);
+                array = this.appendUint8(array, unit.country, 6);
+                array = this.appendString(array, unit.name, 7);
+                array = this.appendString(array, unit.unitName, 8);
+                array = this.appendString(array, unit.groupName, 9);
+                array = this.appendUint8(array, unit.state, 10);
+                array = this.appendString(array, unit.task, 11);
+                array = this.appendUint8(array, unit.hasTask, 12);
+                array = this.appendCoordinates(array, unit.position, 13);
+                array = this.appendDouble(array, unit.speed, 14);
+                array = this.appendDouble(array, unit.horizontalVelocity, 15);
+                array = this.appendDouble(array, unit.verticalVelicity, 16);
+                array = this.appendDouble(array, unit.heading, 17);
+                array = this.appendUint8(array, unit.isActiveTanker, 18);
+                array = this.appendUint8(array, unit.isActiveAWACS, 19);
+                array = this.appendUint8(array, unit.onOff, 20);
+                array = this.appendUint8(array, unit.followRoads, 21);
+                array = this.appendUint16(array, unit.fuel, 22);
+                array = this.appendDouble(array, unit.desiredSpeed, 23);
+                array = this.appendUint8(array, unit.desiredSpeedType, 24);
+                array = this.appendDouble(array, unit.desiredAltitude, 25);
+                array = this.appendUint8(array, unit.desiredAltitudeType, 26);
+                array = this.appendUint32(array, unit.leaderID, 27);
+                array = this.appendOffset(array, unit.formationOffset, 28);
+                array = this.appendUint32(array, unit.targetID, 29);
+                array = this.appendCoordinates(array, unit.targetPosition, 30);
+                array = this.appendUint8(array, unit.ROE, 31);
+                array = this.appendUint8(array, unit.reactionToThreat, 32);
+                array = this.appendUint8(array, unit.emissionsCountermeasures, 33);
+                array = this.appendTACAN(array, unit.TACAN, 34);
+                array = this.appendRadio(array, unit.radio, 35);
+                array = this.appendRadio(array, unit.generalSettings, 36);
+                array = this.appendAmmo(array, unit.ammo, 37);
+                array = this.appendContacts(array, unit.contacts, 38);
+                array = this.appendActivePath(array, unit.activePath, 39);
+                array = this.appendUint8(array, unit.isLeader, 40);
+                array = this.appendUint8(array, unit.operateAs, 41);
+                array = this.concat(array, this.uint8ToByteArray(255));
+            }
         }
         res.end(Buffer.from(array, 'binary'));
     };
@@ -411,7 +441,7 @@ class DemoDataGenerator {
         ret.time = Date.now();
 
         ret.mission.dateAndTime = {
-            time: Date.now(),
+            time: { h: 10, m: 15, s: 34 },
             date: "",
             elapsedTime: (Date.now() - this.startTime) / 1000,
             startTime: 0
@@ -444,7 +474,7 @@ class DemoDataGenerator {
 
         var auth = req.get("Authorization");
         if (auth) {
-            var username = atob(auth.replace("Basic ", "")).split(":")[0];
+            var username = Buffer.from(auth.replace("Basic ", ""), 'base64').toString('binary').split(":")[0];
             switch (username) {
                 case "admin":
                     ret.mission.commandModeOptions.commandMode = "Game master";

client/package.json

@@ -2,30 +2,34 @@
   "name": "DCSOlympus",
   "node-main": "./bin/www",
   "main": "http://localhost:3000",
-  "version": "v0.4.4-alpha",
+  "version": "v0.4.7-alpha",
   "private": true,
   "scripts": {
+	  "build": "browserify .\\src\\index.ts --debug -o .\\public\\javascripts\\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ] && copy.bat",
+    "emit-declarations": "tsc --project tsconfig.json --declaration --emitDeclarationOnly --outfile ./@types/olympus/index.d.ts",
     "copy": "copy.bat",
-    "start": "npm run copy & concurrently --kill-others \"npm run watch\" \"nodemon ./bin/www\"",
-    "watch": "watchify .\\src\\index.ts --debug -o .\\public\\javascripts\\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ]",
-    "document": "typedoc --out ../docs src/index.ts src/contextmenus/*.ts src/controls/*.ts src/map/*.ts src/mission/*.ts src/other/*.ts src/panels/*.ts src/popups/*.ts src/server/*.ts src/unit/*.ts src/weapon/*.ts"
+    "start": "node ./bin/www",
+    "debug": "npm run copy & concurrently --kill-others \"npm run watch\" \"nodemon --ignore ./public/databases/ ./bin/www\"",
+    "watch": "watchify .\\src\\index.ts --debug -o .\\public\\javascripts\\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ]"
   },
   "dependencies": {
+    "@turf/turf": "^6.5.0",
+    "body-parser": "^1.20.2",
     "cookie-parser": "~1.4.4",
     "debug": "~2.6.9",
     "ejs": "^3.1.8",
     "express": "~4.16.1",
     "express-basic-auth": "^1.2.1",
+    "leaflet-gesture-handling": "^1.2.2",
     "morgan": "~1.9.1",
-    "save": "^2.9.0"
+    "save": "^2.9.0",
+    "srtm-elevation": "^2.1.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",
     "@tanem/svg-injector": "^10.1.55",
-    "@turf/turf": "^6.5.0",
     "@types/formatcoords": "^1.1.0",
     "@types/geojson": "^7946.0.10",
-    "@types/gtag.js": "^0.0.12",
     "@types/leaflet": "^1.9.0",
     "@types/node": "^18.16.1",
     "@types/sortablejs": "^1.15.0",
@@ -36,16 +40,20 @@
     "cp": "^0.2.0",
     "esmify": "^2.1.1",
     "formatcoords": "^1.1.3",
+    "geodesy": "^1.1.2",
     "leaflet": "^1.9.3",
     "leaflet-control-mini-map": "^0.4.0",
     "leaflet-path-drag": "*",
     "leaflet.nauticscale": "^1.1.0",
     "nodemon": "^2.0.20",
+    "requirejs": "^2.3.6",
     "sortablejs": "^1.15.0",
     "tsify": "^5.0.4",
+    "tslib": "latest",
     "typedoc": "^0.24.8",
     "typedoc-umlclass": "^0.7.1",
     "typescript": "^4.9.4",
+    "usng.js": "^0.4.5",
     "watchify": "^4.0.0"
   }
 }

client/plugins/controltips/copy.bat

@@ -0,0 +1,5 @@
+mkdir .\\..\\..\\public\\plugins\\controltipsplugin
+
+copy .\\index.js .\\..\\..\\public\\plugins\\controltipsplugin\\index.js
+copy .\\plugin.json .\\..\\..\\public\\plugins\\controltipsplugin\\plugin.json
+copy .\\style.css .\\..\\..\\public\\plugins\\controltipsplugin\\style.css

client/plugins/controltips/index.js

@@ -0,0 +1,384 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ControlTipsPlugin_instances, _ControlTipsPlugin_element, _ControlTipsPlugin_app, _ControlTipsPlugin_shortcutManager, _ControlTipsPlugin_cursorIsHoveringOverUnit, _ControlTipsPlugin_cursorIsHoveringOverAirbase, _ControlTipsPlugin_mouseoverElement, _ControlTipsPlugin_updateTips;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlTipsPlugin = void 0;
+const SHOW_CONTROL_TIPS = "Show control tips";
+class ControlTipsPlugin {
+    constructor() {
+        _ControlTipsPlugin_instances.add(this);
+        _ControlTipsPlugin_element.set(this, void 0);
+        _ControlTipsPlugin_app.set(this, void 0);
+        _ControlTipsPlugin_shortcutManager.set(this, void 0);
+        _ControlTipsPlugin_cursorIsHoveringOverUnit.set(this, false);
+        _ControlTipsPlugin_cursorIsHoveringOverAirbase.set(this, false);
+        _ControlTipsPlugin_mouseoverElement.set(this, void 0);
+        __classPrivateFieldSet(this, _ControlTipsPlugin_element, document.createElement("div"), "f");
+        __classPrivateFieldGet(this, _ControlTipsPlugin_element, "f").id = "control-tips-panel";
+        document.body.appendChild(__classPrivateFieldGet(this, _ControlTipsPlugin_element, "f"));
+    }
+    getName() {
+        return "Control Tips Plugin";
+    }
+    initialize(app) {
+        __classPrivateFieldSet(this, _ControlTipsPlugin_app, app, "f");
+        __classPrivateFieldSet(this, _ControlTipsPlugin_shortcutManager, __classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getShortcutManager(), "f");
+        __classPrivateFieldGet(this, _ControlTipsPlugin_shortcutManager, "f").onKeyDown(() => {
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        __classPrivateFieldGet(this, _ControlTipsPlugin_shortcutManager, "f").onKeyUp(() => {
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("airbaseMouseover", (ev) => {
+            __classPrivateFieldSet(this, _ControlTipsPlugin_cursorIsHoveringOverAirbase, true, "f");
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("airbaseMouseout", (ev) => {
+            __classPrivateFieldSet(this, _ControlTipsPlugin_cursorIsHoveringOverAirbase, false, "f");
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("unitDeselection", (ev) => {
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("unitMouseover", (ev) => {
+            __classPrivateFieldSet(this, _ControlTipsPlugin_cursorIsHoveringOverUnit, true, "f");
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("unitMouseout", (ev) => {
+            __classPrivateFieldSet(this, _ControlTipsPlugin_cursorIsHoveringOverUnit, false, "f");
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("unitsSelection", (ev) => {
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("mapVisibilityOptionsChanged", () => {
+            this.toggle(!__classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getMap().getVisibilityOptions()[SHOW_CONTROL_TIPS]);
+        });
+        document.addEventListener("mouseover", (ev) => {
+            if (ev.target instanceof HTMLElement) {
+                __classPrivateFieldSet(this, _ControlTipsPlugin_mouseoverElement, ev.target, "f");
+            }
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        document.addEventListener("mouseup", (ev) => {
+            __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        });
+        __classPrivateFieldGet(this, _ControlTipsPlugin_instances, "m", _ControlTipsPlugin_updateTips).call(this);
+        __classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getMap().addVisibilityOption(SHOW_CONTROL_TIPS, true);
+        return true;
+    }
+    getElement() {
+        return __classPrivateFieldGet(this, _ControlTipsPlugin_element, "f");
+    }
+    toggle(bool) {
+        this.getElement().classList.toggle("hide", bool);
+    }
+}
+exports.ControlTipsPlugin = ControlTipsPlugin;
+_ControlTipsPlugin_element = new WeakMap(), _ControlTipsPlugin_app = new WeakMap(), _ControlTipsPlugin_shortcutManager = new WeakMap(), _ControlTipsPlugin_cursorIsHoveringOverUnit = new WeakMap(), _ControlTipsPlugin_cursorIsHoveringOverAirbase = new WeakMap(), _ControlTipsPlugin_mouseoverElement = new WeakMap(), _ControlTipsPlugin_instances = new WeakSet(), _ControlTipsPlugin_updateTips = function _ControlTipsPlugin_updateTips() {
+    const combos = [
+        {
+            "keys": [],
+            "tips": [
+                {
+                    "key": `SHIFT`,
+                    "action": `Box select`,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false,
+                    "showIfUnitSelected": false
+                },
+                {
+                    "key": `Mouse1`,
+                    "action": `Deselect`,
+                    "showIfUnitSelected": true
+                },
+                {
+                    "key": `Mouse1+drag`,
+                    "action": `Move map`,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false,
+                    "showIfUnitSelected": false
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Spawn menu`,
+                    "showIfUnitSelected": false,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Quick options`,
+                    "showIfUnitSelected": false,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": true
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Airbase menu`,
+                    "showIfUnitSelected": false,
+                    "showIfHoveringOverAirbase": true,
+                    "showIfHoveringOverUnit": false
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Set first waypoint`,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfUnitSelected": true,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Mouse2 (hold)`,
+                    "action": `Interact (ground)`,
+                    "showIfUnitSelected": true,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Shift`,
+                    "action": "<em>  in formation...</em>",
+                    "showIfUnitSelected": true,
+                    "minSelectedUnits": 2
+                },
+                {
+                    "key": "CTRL",
+                    "action": "<em>  ... more</em>",
+                    "showIfUnitSelected": true,
+                    "showIfHoveringOverAirbase": false,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": "CTRL",
+                    "action": " Pin tool",
+                    "showIfUnitSelected": false,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": "CTRL+Mouse2",
+                    "action": " Airbase menu",
+                    "showIfUnitSelected": true,
+                    "showIfHoveringOverAirbase": true,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Mouse1`,
+                    "action": "Toggle Blue/Red",
+                    "mouseoverSelector": "#coalition-switch .ol-switch-fill"
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": "Set Neutral",
+                    "mouseoverSelector": "#coalition-switch .ol-switch-fill"
+                },
+                {
+                    "key": `Mouse1`,
+                    "action": "Toggle time display",
+                    "mouseoverSelector": "#connection-status-panel[data-is-connected] #connection-status-message abbr"
+                },
+                {
+                    "key": `Mouse1 or Z`,
+                    "action": "Change location system",
+                    "mouseoverSelector": "#coordinates-tool, #coordinates-tool *"
+                },
+                {
+                    "key": `Comma`,
+                    "action": "Decrease precision",
+                    "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *`
+                },
+                {
+                    "key": `Period`,
+                    "action": "Increase precision",
+                    "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *`
+                }
+            ]
+        },
+        {
+            "keys": ["ControlLeft"],
+            "tips": [
+                {
+                    "key": `Mouse1`,
+                    "action": "Toggle pin",
+                    "showIfUnitSelected": false,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false
+                },
+                {
+                    "key": `Mouse1`,
+                    "action": "Toggle selection",
+                    "showIfUnitSelected": true,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": true
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Add waypoint`,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": false,
+                    "showIfUnitSelected": true,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Interact (airbase)`,
+                    "showIfHoveringOverAirbase": true,
+                    "showIfUnitSelected": true,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": `Interact (unit)`,
+                    "showIfHoveringOverAirbase": false,
+                    "showIfHoveringOverUnit": true,
+                    "showIfUnitSelected": true,
+                    "unitsMustBeControlled": true
+                },
+                {
+                    "key": `Shift`,
+                    "action": "<em>  in formation...</em>",
+                    "showIfUnitSelected": true,
+                    "minSelectedUnits": 2
+                },
+                {
+                    "key": `[Num 1-9]`,
+                    "action": "Set hotgroup",
+                    "showIfUnitSelected": true
+                }
+            ]
+        },
+        {
+            "keys": ["ShiftLeft"],
+            "tips": [
+                {
+                    "key": `Mouse1+drag`,
+                    "action": "Box select",
+                    "showIfUnitSelected": false
+                },
+                {
+                    "key": `Mouse2`,
+                    "action": "Set first formation waypoint",
+                    "showIfUnitSelected": true,
+                    "minSelectedUnits": 2
+                },
+                {
+                    "key": `[Num 1-9]`,
+                    "action": "Add to hotgroup",
+                    "showIfUnitSelected": true
+                },
+                {
+                    "key": "CTRL",
+                    "action": "<em>  ... more</em>",
+                    "minSelectedUnits": 2,
+                    "showIfUnitSelected": true,
+                    "showIfHoveringOverAirbase": false,
+                    "unitsMustBeControlled": true
+                }
+            ]
+        },
+        {
+            "keys": ["ControlLeft", "ShiftLeft"],
+            "tips": [
+                {
+                    "key": `Mouse2`,
+                    "action": "Add formation waypoint",
+                    "showIfUnitSelected": true,
+                    "minSelectedUnits": 2,
+                    "unitsMustBeControlled": true
+                }, {
+                    "key": `[Num 1-9]`,
+                    "action": "Add hotgroup to selection",
+                    "callback": (tip) => {
+                        return (Object.values(__classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getUnitsManager().getUnits()).some((unit) => {
+                            return unit.getHotgroup();
+                        }));
+                    },
+                    "showIfUnitSelected": true,
+                    "minSelectedUnits": 1
+                }
+            ]
+        }
+    ];
+    const currentCombo = combos.find((combo) => __classPrivateFieldGet(this, _ControlTipsPlugin_shortcutManager, "f").keyComboMatches(combo.keys)) || combos[0];
+    const element = this.getElement();
+    element.innerHTML = "";
+    let numSelectedUnits = 0;
+    let numSelectedControlledUnits = 0;
+    let unitSelectionContainsControlled = false;
+    if (__classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getUnitsManager()) {
+        let selectedUnits = Object.values(__classPrivateFieldGet(this, _ControlTipsPlugin_app, "f").getUnitsManager().getSelectedUnits());
+        numSelectedUnits = selectedUnits.length;
+        numSelectedControlledUnits = selectedUnits.filter((unit) => unit.getControlled()).length;
+        unitSelectionContainsControlled = numSelectedControlledUnits > 0;
+    }
+    const tipsIncludesActiveMouseover = (currentCombo.tips.some((tip) => {
+        if (!tip.mouseoverSelector) {
+            return false;
+        }
+        if (__classPrivateFieldGet(this, _ControlTipsPlugin_mouseoverElement, "f") instanceof HTMLElement === false) {
+            return false;
+        }
+        if (!__classPrivateFieldGet(this, _ControlTipsPlugin_mouseoverElement, "f").matches(tip.mouseoverSelector)) {
+            return false;
+        }
+        return true;
+    }));
+    currentCombo.tips.filter((tip) => {
+        if (numSelectedUnits > 0) {
+            if (tip.showIfUnitSelected === false) {
+                return false;
+            }
+            if (tip.unitsMustBeControlled === true && unitSelectionContainsControlled === false) {
+                return false;
+            }
+            if (typeof tip.minSelectedUnits === "number" && numSelectedControlledUnits < tip.minSelectedUnits) {
+                return false;
+            }
+        }
+        if (numSelectedUnits === 0 && tip.showIfUnitSelected === true) {
+            return false;
+        }
+        if (typeof tip.showIfHoveringOverAirbase === "boolean") {
+            if (tip.showIfHoveringOverAirbase !== __classPrivateFieldGet(this, _ControlTipsPlugin_cursorIsHoveringOverAirbase, "f")) {
+                return false;
+            }
+        }
+        if (typeof tip.showIfHoveringOverUnit === "boolean") {
+            if (tip.showIfHoveringOverUnit !== __classPrivateFieldGet(this, _ControlTipsPlugin_cursorIsHoveringOverUnit, "f")) {
+                return false;
+            }
+        }
+        if (tipsIncludesActiveMouseover && (typeof tip.mouseoverSelector !== "string" || !__classPrivateFieldGet(this, _ControlTipsPlugin_mouseoverElement, "f").matches(tip.mouseoverSelector))) {
+            return false;
+        }
+        if (!tipsIncludesActiveMouseover && typeof tip.mouseoverSelector === "string") {
+            return false;
+        }
+        if (typeof tip.callback === "function" && !tip.callback(tip)) {
+            return false;
+        }
+        element.innerHTML += `<div><span class="key">${tip.key}</span><span class="action">${tip.action}</span></div>`;
+    });
+};
+
+},{}],2:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const controltipsplugin_1 = require("./controltipsplugin");
+globalThis.getOlympusPlugin = () => {
+    return new controltipsplugin_1.ControlTipsPlugin();
+};
+
+},{"./controltipsplugin":1}]},{},[2]);

client/plugins/controltips/package-lock.json

@@ -0,0 +1,162 @@
+{
+  "name": "ControlTipsPlugin",
+  "version": "v0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
+      "requires": {
+        "error-ex": "^1.2.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+      "requires": {
+        "is-utf8": "^0.2.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "tsconfig": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-5.0.3.tgz",
+      "integrity": "sha512-Cq65A3kVp6BbsUgg9DRHafaGmbMb9EhAc7fjWvudNWKjkbWrt43FnrtZt6awshH1R0ocfF2Z0uxock3lVqEgOg==",
+      "requires": {
+        "any-promise": "^1.3.0",
+        "parse-json": "^2.2.0",
+        "strip-bom": "^2.0.0",
+        "strip-json-comments": "^2.0.0"
+      }
+    },
+    "tsify": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/tsify/-/tsify-5.0.4.tgz",
+      "integrity": "sha512-XAZtQ5OMPsJFclkZ9xMZWkSNyMhMxEPsz3D2zu79yoKorH9j/DT4xCloJeXk5+cDhosEibu4bseMVjyPOAyLJA==",
+      "requires": {
+        "convert-source-map": "^1.1.0",
+        "fs.realpath": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "semver": "^6.1.0",
+        "through2": "^2.0.0",
+        "tsconfig": "^5.0.3"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    }
+  }
+}

client/plugins/controltips/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "ControlTipsPlugin",
+  "version": "v0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "browserify ./src/index.ts -p [ tsify --noImplicitAny] > index.js && copy.bat"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

client/plugins/controltips/plugin.json

@@ -0,0 +1,6 @@
+{
+    "name": "Control Tip Plugin",
+    "version": "0.0.1",
+    "description": "This plugin shows useful control tips on the right side of the screen. The tips change dynamically depending on what the user does",
+    "author": "Peekaboo"
+}

client/plugins/controltips/src/controltipsplugin.ts

@@ -0,0 +1,403 @@
+import { OlympusPlugin } from "interfaces";
+import { OlympusApp } from "olympusapp";
+import { Unit } from "unit/unit";
+
+
+const SHOW_CONTROL_TIPS = "Show control tips"
+
+export class ControlTipsPlugin implements OlympusPlugin {
+    #element: HTMLElement;
+    #app: any;
+    #shortcutManager: any;
+    #cursorIsHoveringOverUnit: boolean = false;
+    #cursorIsHoveringOverAirbase: boolean = false;
+    #mouseoverElement!: HTMLElement;
+    
+    constructor() {
+        this.#element = document.createElement("div");
+        this.#element.id = "control-tips-panel";
+        document.body.appendChild(this.#element);
+    }
+
+    getName() {
+        return "Control Tips Plugin"
+    }
+
+    initialize(app: any) {
+        this.#app = app;
+
+        this.#shortcutManager = this.#app.getShortcutManager();
+
+        this.#shortcutManager.onKeyDown(() => {
+           this.#updateTips()
+        });
+
+        this.#shortcutManager.onKeyUp(() => {
+           this.#updateTips()
+        });
+
+        document.addEventListener("airbaseMouseover", (ev: CustomEventInit) => {
+            this.#cursorIsHoveringOverAirbase = true;
+            this.#updateTips();
+        });
+
+        document.addEventListener("airbaseMouseout", (ev: CustomEventInit) => {
+            this.#cursorIsHoveringOverAirbase = false;
+            this.#updateTips();
+        });
+
+        document.addEventListener("unitDeselection", (ev: CustomEventInit ) => {
+            this.#updateTips();
+        });
+
+        document.addEventListener("unitMouseover", (ev: CustomEventInit) => {
+            this.#cursorIsHoveringOverUnit = true;
+            this.#updateTips();
+        });
+
+        document.addEventListener("unitMouseout", (ev: CustomEventInit) => {
+            this.#cursorIsHoveringOverUnit = false;
+            this.#updateTips();
+        });
+
+        document.addEventListener("unitsSelection", (ev: CustomEventInit ) => {
+            this.#updateTips();
+        });
+
+        document.addEventListener("mapVisibilityOptionsChanged", () => {
+            this.toggle( !this.#app.getMap().getVisibilityOptions()[SHOW_CONTROL_TIPS] );
+        });
+
+        document.addEventListener( "mouseover", ( ev: MouseEvent ) => {
+            if ( ev.target instanceof HTMLElement ) {
+                this.#mouseoverElement = <HTMLElement>ev.target;
+            }
+            this.#updateTips();
+        });
+
+        document.addEventListener( "mouseup", ( ev: MouseEvent ) => {
+            this.#updateTips();
+        });
+
+        this.#updateTips();
+
+        this.#app.getMap().addVisibilityOption(SHOW_CONTROL_TIPS, true);
+
+        return true;
+    }
+
+    getElement() {
+        return this.#element;
+    }
+
+    toggle(bool?: boolean) {
+        this.getElement().classList.toggle("hide", bool);
+    }
+
+    #updateTips() {
+        const combos: Array<object> = [
+            {
+                "keys": [],
+                "tips": [
+                    {
+                        "key": `SHIFT`,
+                        "action": `Box select`,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false,
+                        "showIfUnitSelected": false
+                    },
+                    {
+                        "key": `Mouse1`,
+                        "action": `Deselect`,
+                        "showIfUnitSelected": true
+                    },
+                    {
+                        "key": `Mouse1+drag`,
+                        "action": `Move map`,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false,
+                        "showIfUnitSelected": false
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Spawn menu`,
+                        "showIfUnitSelected": false,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Quick options`,
+                        "showIfUnitSelected": false,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": true
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Airbase menu`,
+                        "showIfUnitSelected": false,
+                        "showIfHoveringOverAirbase": true,
+                        "showIfHoveringOverUnit": false
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Set first waypoint`,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfUnitSelected": true,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Mouse2 (hold)`,
+                        "action": `Interact (ground)`,
+                        "showIfUnitSelected": true,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Shift`,
+                        "action": "<em>  in formation...</em>",
+                        "showIfUnitSelected": true,
+                        "minSelectedUnits": 2
+                    },
+                    {
+                        "key": "CTRL",
+                        "action": "<em>  ... more</em>",
+                        "showIfUnitSelected": true,
+                        "showIfHoveringOverAirbase": false,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": "CTRL",
+                        "action": " Pin tool",
+                        "showIfUnitSelected": false,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": "CTRL+Mouse2",
+                        "action": " Airbase menu",
+                        "showIfUnitSelected": true,
+                        "showIfHoveringOverAirbase": true,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Mouse1`,
+                        "action": "Toggle Blue/Red",
+                        "mouseoverSelector": "#coalition-switch .ol-switch-fill"
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": "Set Neutral",
+                        "mouseoverSelector": "#coalition-switch .ol-switch-fill"
+                    },
+                    {
+                        "key": `Mouse1`,
+                        "action": "Toggle time display",
+                        "mouseoverSelector": "#connection-status-panel[data-is-connected] #connection-status-message abbr"
+                    },
+                    {
+                        "key": `Mouse1 or Z`,
+                        "action": "Change location system",
+                        "mouseoverSelector": "#coordinates-tool, #coordinates-tool *"
+                    },
+                    {
+                        "key": `Comma`,
+                        "action": "Decrease precision",
+                        "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *`
+                    },
+                    {
+                        "key": `Period`,
+                        "action": "Increase precision",
+                        "mouseoverSelector": `#coordinates-tool[data-location-system="MGRS"], #coordinates-tool[data-location-system="MGRS"] *`
+                    }
+                ]
+            },
+            {
+                "keys": ["ControlLeft"],
+                "tips": [
+                    {
+                        "key": `Mouse1`,
+                        "action": "Toggle pin",
+                        "showIfUnitSelected": false,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false
+                    },
+                    {
+                        "key": `Mouse1`,
+                        "action": "Toggle selection",
+                        "showIfUnitSelected": true,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": true
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Add waypoint`,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": false,
+                        "showIfUnitSelected": true,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Interact (airbase)`,
+                        "showIfHoveringOverAirbase": true,
+                        "showIfUnitSelected": true,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": `Interact (unit)`,
+                        "showIfHoveringOverAirbase": false,
+                        "showIfHoveringOverUnit": true,
+                        "showIfUnitSelected": true,
+                        "unitsMustBeControlled": true
+                    },
+                    {
+                        "key": `Shift`,
+                        "action": "<em>  in formation...</em>",
+                        "showIfUnitSelected": true,
+                        "minSelectedUnits": 2
+                    },
+                    {
+                        "key": `[Num 1-9]`,
+                        "action": "Set hotgroup",
+                        "showIfUnitSelected": true
+                    }
+                ]
+            },
+            {
+                "keys": ["ShiftLeft"],
+                "tips": [
+                    {
+                        "key": `Mouse1+drag`,
+                        "action": "Box select",
+                        "showIfUnitSelected": false
+                    },
+                    {
+                        "key": `Mouse2`,
+                        "action": "Set first formation waypoint",
+                        "showIfUnitSelected": true,
+                        "minSelectedUnits": 2
+                    },
+                    {
+                        "key": `[Num 1-9]`,
+                        "action": "Add to hotgroup",
+                        "showIfUnitSelected": true
+                    },
+                    {
+                        "key": "CTRL",
+                        "action": "<em>  ... more</em>",
+                        "minSelectedUnits": 2,
+                        "showIfUnitSelected": true,
+                        "showIfHoveringOverAirbase": false,
+                        "unitsMustBeControlled": true
+                    }
+                ]
+            },
+            {
+                "keys": ["ControlLeft", "ShiftLeft"],
+                "tips": [
+                    {
+                        "key": `Mouse2`,
+                        "action": "Add formation waypoint",
+                        "showIfUnitSelected": true,
+                        "minSelectedUnits": 2,
+                        "unitsMustBeControlled": true
+                    }, {
+                        "key": `[Num 1-9]`,
+                        "action": "Add hotgroup to selection",
+                        "callback": ( tip:object ) => {
+                            return (Object.values<Unit>( this.#app.getUnitsManager().getUnits() ).some( ( unit:Unit ) => {
+                                return unit.getAlive() && unit.getControlled() && unit.getHotgroup();
+                            }));
+                        },
+                        "showIfUnitSelected": true,
+                        "minSelectedUnits": 1
+                    }
+                ]
+            }
+        ];
+
+        const currentCombo: any = combos.find((combo: any) => this.#shortcutManager.keyComboMatches(combo.keys)) || combos[0];
+
+        const element = this.getElement();
+
+        element.innerHTML = "";
+
+        let numSelectedUnits = 0;
+        let numSelectedControlledUnits = 0;
+        let unitSelectionContainsControlled = false;
+
+        if (this.#app.getUnitsManager()) {
+            let selectedUnits = Object.values(this.#app.getUnitsManager().getSelectedUnits());
+            numSelectedUnits                = selectedUnits.length;
+            numSelectedControlledUnits      = selectedUnits.filter((unit: any) => unit.getControlled()).length;
+            unitSelectionContainsControlled = numSelectedControlledUnits > 0;
+        }
+
+        const tipsIncludesActiveMouseover = ( currentCombo.tips.some( ( tip:any ) => {
+            if ( !tip.mouseoverSelector ) {
+                return false;
+            }
+
+            if ( this.#mouseoverElement instanceof HTMLElement === false ) {
+                return false;
+            }
+
+            if ( !this.#mouseoverElement.matches( tip.mouseoverSelector ) ) {
+                return false;
+            }
+
+            return true;
+        }));
+
+        currentCombo.tips.filter((tip: any) => {
+            if (numSelectedUnits > 0) {
+                if (tip.showIfUnitSelected === false) {
+                    return false;
+                }
+
+                if (tip.unitsMustBeControlled === true && unitSelectionContainsControlled === false) {
+                    return false;
+                }
+
+                if ( typeof tip.minSelectedUnits === "number" && numSelectedControlledUnits < tip.minSelectedUnits ) {
+                    return false;
+                }
+            }
+
+            if (numSelectedUnits === 0 && tip.showIfUnitSelected === true) {
+                return false;
+            }
+
+            if (typeof tip.showIfHoveringOverAirbase === "boolean") {
+                if (tip.showIfHoveringOverAirbase !== this.#cursorIsHoveringOverAirbase) {
+                    return false;
+                }
+            }
+
+            if (typeof tip.showIfHoveringOverUnit === "boolean") {
+                if (tip.showIfHoveringOverUnit !== this.#cursorIsHoveringOverUnit) {
+                    return false;
+                }
+            }
+
+            if ( tipsIncludesActiveMouseover && ( typeof tip.mouseoverSelector !== "string" || !this.#mouseoverElement.matches( tip.mouseoverSelector ) ) ) {
+                return false;
+            }
+
+            if ( !tipsIncludesActiveMouseover && typeof tip.mouseoverSelector === "string" ) {
+                return false;
+            }
+
+            if ( typeof tip.callback === "function" && !tip.callback( tip ) ) {
+                return false;
+            }
+
+            element.innerHTML += `<div><span class="key">${tip.key}</span><span class="action">${tip.action}</span></div>`;
+
+        });
+    }
+}

client/plugins/controltips/src/index.ts

@@ -0,0 +1,5 @@
+import { ControlTipsPlugin } from "./controltipsplugin";
+
+globalThis.getOlympusPlugin = () => {
+    return new ControlTipsPlugin();
+}

client/plugins/controltips/style.css

@@ -0,0 +1,33 @@
+#control-tips-panel {
+    align-self: center;
+    display: flex;
+    flex-flow: column wrap;
+    font-size: 13px;
+    justify-self: flex-end;
+    position: absolute;
+    right: 10px;
+    row-gap: 20px;
+    text-align: right;
+    z-index: 999;
+}
+
+#control-tips-panel>* {
+    align-items: center;
+    align-self: end;
+    background-color: var(--background-steel);
+    border-radius: var(--border-radius-md);
+    color: white;
+    column-gap: 8px;
+    display: flex;
+    justify-items: right;
+    opacity: .9;
+    padding: 5px;
+    width: fit-content;
+}
+
+#control-tips-panel>*>.key {
+    background-color: var(--background-grey);
+    border-radius: var(--border-radius-sm);
+    color: white;
+    padding: 1px 4px;
+}

client/plugins/controltips/tsconfig.json

@@ -0,0 +1,104 @@
+{
+    "compilerOptions": {
+      /* Visit https://aka.ms/tsconfig to read more about this file */
+      /* Projects */
+      // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+      // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+      // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+      // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+      // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+      // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+      /* Language and Environment */
+      "target": "ES2017", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+      // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+      // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+      // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+      // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+      // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+      // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+      // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+      // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+      // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+      // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+      // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+      /* Modules */
+      "module": "commonjs", /* Specify what module code is generated. */
+      "rootDirs": ["./src",  "../../@types"], /* Specify the root folder within your source files. */
+      // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+      // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+      // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+      // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+      "typeRoots": [
+        "./node_modules/@types",
+        "../../@types"
+      ], /* Specify multiple folders that act like './node_modules/@types'. */
+      "types": [
+        "olympus"
+      ], /* Specify type package names to be included without being referenced in a source file. */
+      // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+      // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+      // "resolveJsonModule": true,                        /* Enable importing .json files. */
+      // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+      /* JavaScript Support */
+       "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+      // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+      // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+      /* Emit */
+      // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+      // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+      // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+      // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+      // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+      // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+      // "removeComments": true,                           /* Disable emitting comments. */
+      // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+      // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+      // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+      // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+      // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+      // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+      // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+      // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+      // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+      // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+      // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+      // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+      // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+      // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+      // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+      // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+      /* Interop Constraints */
+      // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+      // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+      "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+      // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+      "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+      /* Type Checking */
+      "strict": true, /* Enable all strict type-checking options. */
+      // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+      // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+      // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+      // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+      // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+      // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+      // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+      // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+      // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+      // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+      // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+      // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+      // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+      // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+      // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+      // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+      // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+      // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+      /* Completeness */
+      // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+      "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    },
+    "include": [ 
+        "src/*.ts",
+        "../../@types/olympus/*.d.ts"
+    ]
+}

client/plugins/databasemanager/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "urlFilter": "http://localhost:3000/*",
+            "request": "attach",
+            "type": "chrome",
+            "webRoot": "${workspaceFolder}../../public/",
+            "sourceMapPathOverrides": {
+                "src/*": "src/*"
+            },
+            "preLaunchTask": "start"
+        }
+    ]
+}

client/plugins/databasemanager/.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "start",
+            "type": "shell",
+            "command": "npm run start",
+            "isBackground": true
+        }
+    ]
+}

client/plugins/databasemanager/copy.bat

@@ -0,0 +1,5 @@
+mkdir .\\..\\..\\public\\plugins\\databasemanager
+
+copy .\\index.js .\\..\\..\\public\\plugins\\databasemanager\\index.js
+copy .\\plugin.json .\\..\\..\\public\\plugins\\databasemanager\\plugin.json
+copy .\\style.css .\\..\\..\\public\\plugins\\databasemanager\\style.css

client/plugins/databasemanager/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "DatabaseManagerPlugin",
+  "version": "v0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "DatabaseManagerPlugin",
+      "version": "v0.0.1",
+      "devDependencies": {}
+    }
+  }
+}

client/plugins/databasemanager/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "DatabaseManagerPlugin",
+  "version": "v0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "browserify ./src/index.ts -p [ tsify --noImplicitAny] > index.js && copy.bat",
+    "start": "npm run copy & concurrently --kill-others \"npm run watch\"",
+    "copy": "copy.bat",
+    "watch": "watchify ./src/index.ts --debug -o ../../public/plugins/databasemanager/index.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ]"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

client/plugins/databasemanager/plugin.json

@@ -0,0 +1,6 @@
+{
+    "name": "Control Tip Plugin",
+    "version": "0.0.1",
+    "description": "This plugin shows useful control tips on the right side of the screen. The tips change dynamically depending on what the user does",
+    "author": "Peekaboo"
+}

client/plugins/databasemanager/src/airuniteditor.ts

@@ -0,0 +1,110 @@
+import { LoadoutBlueprint, UnitBlueprint } from "interfaces";
+import { UnitEditor } from "./uniteditor";
+import { LoadoutEditor } from "./loadouteditor";
+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.
+ * 
+ */
+export class AirUnitEditor extends UnitEditor {
+
+    #loadoutEditor: LoadoutEditor | null = null;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        super(contentDiv1, contentDiv2, contentDiv3);
+
+        /* The loadout editor allows to edit the loadout (who could have thought eh?) */
+        this.#loadoutEditor = new LoadoutEditor(this.contentDiv3);
+
+        /* Refresh the loadout editor if needed */
+        this.contentDiv3.addEventListener("refresh", () => {
+            if (this.visible)
+                this.#loadoutEditor?.show();
+        });
+    }
+
+    /** Sets a unit blueprint as the currently active one
+     * 
+     * @param blueprint The blueprint to edit
+     */
+    setBlueprint(blueprint: UnitBlueprint) {
+        this.blueprint = blueprint;
+
+        if (this.blueprint !== null) {
+            this.contentDiv2.replaceChildren();
+
+            var title = document.createElement("label");
+            title.innerText = "Unit properties";
+            this.contentDiv2.appendChild(title);
+
+            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; });
+            addDropdownInput(this.contentDiv2, "Coalition", blueprint.coalition, ["", "blue", "red"], (value: string) => {blueprint.coalition = value; });
+            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); });
+            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, "Tags", blueprint.tags ?? "", "text", (value: string) => {blueprint.tags = value; });
+
+            /* Add a scrollable list of loadouts that the user can edit */
+            var title = document.createElement("label");
+            title.innerText = "Loadouts";
+            this.contentDiv2.appendChild(title);
+            addLoadoutsScroll(this.contentDiv2, blueprint.loadouts ?? [], (loadout: LoadoutBlueprint) => {
+                this.#loadoutEditor?.setLoadout(loadout);
+                this.#loadoutEditor?.show();
+            });
+            addNewElementInput(this.contentDiv2, (ev: MouseEvent, input: HTMLInputElement) => { this.addLoadout(input.value); });
+
+            this.#loadoutEditor?.hide();
+        }
+    }
+
+    /** Add a new empty blueprint
+     * 
+     * @param key Blueprint key
+     */
+    addBlueprint(key: string) {
+        if (this.database != null) {
+            this.database.blueprints[key] = {
+                name: key,
+                coalition: "",
+                label: "",
+                shortLabel: "",
+                era: "",
+                loadouts: [],
+                enabled: true
+            }
+            this.show();
+            this.setBlueprint(this.database.blueprints[key]);
+        }
+    }
+
+    /** Add a new empty loadout to the currently active blueprint
+     * 
+     * @param loadoutName The name of the new loadout
+     */
+    addLoadout(loadoutName: string) {
+        if (loadoutName && this.blueprint !== null) {
+            this.blueprint.loadouts?.push({
+                name: loadoutName,
+                code: "",
+                fuel: 1,
+                items: [],
+                roles: [],
+                enabled: true
+            })
+            this.setBlueprint(this.blueprint);
+        }
+    }
+
+    /** Hide the editor 
+     * 
+     */
+    hide() {
+        super.hide();
+        this.#loadoutEditor?.hide();
+    }
+}

client/plugins/databasemanager/src/databasemanagerplugin.ts

@@ -0,0 +1,412 @@
+import { OlympusPlugin, UnitBlueprint } from "interfaces";
+import { AirUnitEditor } from "./airuniteditor";
+import { OlympusApp } from "olympusapp";
+import { GroundUnitEditor } from "./grounduniteditor";
+import { PrimaryToolbar } from "toolbars/primarytoolbar";
+import { NavyUnitEditor } from "./navyuniteditor";
+
+/** Database Manager
+ * 
+ * This database provides a user interface to allow easier and convenient unit databases manipulation. It allows to edit all the fields of the units databases, save them
+ * on the server, and restore the defaults.
+ * 
+ * TODO:
+ * Add ability to manage liveries
+ * 
+ */
+ 
+export class DatabaseManagerPlugin implements OlympusPlugin {
+    #app: OlympusApp | null = null;
+
+    #element: HTMLElement;
+    #mainContentContainer: HTMLElement;
+    #contentDiv1: HTMLElement;
+    #contentDiv2: HTMLElement;
+    #contentDiv3: HTMLElement;
+
+    /* Upper tab buttons */
+    #button1: HTMLButtonElement;
+    #button2: HTMLButtonElement;
+    #button3: HTMLButtonElement;
+    #button4: HTMLButtonElement;
+
+    /* Lower operation buttons */
+    #button5: HTMLButtonElement;
+    #button6: HTMLButtonElement;
+    #button7: HTMLButtonElement;
+    #button8: HTMLButtonElement;
+    #button9: HTMLButtonElement;
+
+    /* Database editors */
+    #aircraftEditor: AirUnitEditor;
+    #helicopterEditor: AirUnitEditor;
+    #groundUnitEditor: GroundUnitEditor;
+    #navyUnitEditor: NavyUnitEditor;
+
+    constructor() {
+        /* Create main HTML element */
+        this.#element = document.createElement("div");
+        this.#element.id = "database-manager-panel";
+        this.#element.oncontextmenu = () => { return false; }
+        this.#element.classList.add("ol-dialog");
+        document.body.appendChild(this.#element);
+
+        /* Start hidden */
+        this.toggle(false);
+
+        /* Create the top tab buttons container and buttons */
+        let topButtonContainer = document.createElement("div");
+
+        this.#button1 = document.createElement("button");
+        this.#button1.classList.add("tab-button");
+        this.#button1.textContent = "Aircraft database";
+        this.#button1.onclick = () => { this.#hideAll(); this.#aircraftEditor.show(); this.#button1.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button1);
+
+        this.#button2 = document.createElement("button");
+        this.#button2.classList.add("tab-button");
+        this.#button2.textContent = "Helicopter database";
+        this.#button2.onclick = () => { this.#hideAll(); this.#helicopterEditor.show(); this.#button2.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button2);
+
+        this.#button3 = document.createElement("button");
+        this.#button3.classList.add("tab-button");
+        this.#button3.textContent = "Ground Unit database";
+        this.#button3.onclick = () => { this.#hideAll(); this.#groundUnitEditor.show(); this.#button3.classList.add("selected"); };
+        topButtonContainer.appendChild(this.#button3);
+
+        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);
+
+        /* Create the container for the database editor elements  and the elements themselves */
+        this.#mainContentContainer = document.createElement("div");
+        this.#mainContentContainer.classList.add("dm-container");
+        this.#element.appendChild(this.#mainContentContainer);
+
+        this.#contentDiv1 = document.createElement("div");
+        this.#contentDiv1.classList.add("dm-content-container", "ol-scrollable");
+        this.#mainContentContainer.appendChild(this.#contentDiv1);
+
+        this.#contentDiv2 = document.createElement("div");
+        this.#contentDiv2.classList.add("dm-content-container", "ol-scrollable");
+        this.#mainContentContainer.appendChild(this.#contentDiv2);
+
+        this.#contentDiv3 = document.createElement("div");
+        this.#contentDiv3.classList.add("dm-content-container", "ol-scrollable");
+        this.#mainContentContainer.appendChild(this.#contentDiv3);
+
+        /* Create the database editors, which use the three divs created before */
+        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);
+
+        /* Create the bottom buttons container. These buttons allow to save, restore, reset, and discard the changes */
+        let bottomButtonContainer = document.createElement("div");
+
+        this.#button5 = document.createElement("button");
+        this.#button5.textContent = "Save";
+        this.#button5.title = "Save the changes on the server"
+        this.#button5.onclick = () => { this.#saveDatabases();};
+        bottomButtonContainer.appendChild(this.#button5);
+
+        this.#button6 = document.createElement("button");
+        this.#button6.textContent = "Discard";
+        this.#button6.title = "Discard all changes and reload the database from the server";
+        this.#button6.onclick = () => { this.#loadDatabases(); };
+        bottomButtonContainer.appendChild(this.#button6);
+
+        this.#button7 = document.createElement("button");
+        this.#button7.textContent = "Reset defaults";
+        this.#button7.onclick = () => { this.#resetToDefaultDatabases(); };
+        this.#button7.title = "Reset the databases to the default values";
+        bottomButtonContainer.appendChild(this.#button7);
+
+        this.#button8 = document.createElement("button");
+        this.#button8.textContent = "Restore previous";
+        this.#button8.onclick = () => { this.#restoreToPreviousDatabases(); };
+        this.#button8.title = "Restore the previously saved databases. Use this if you saved a database by mistake.";
+        bottomButtonContainer.appendChild(this.#button8);
+
+        this.#button9 = document.createElement("button");
+        this.#button9.textContent = "Close";
+        this.#button9.title = "Close the Database Manager"
+        this.#button9.onclick = () => { this.toggle(false); };
+        bottomButtonContainer.appendChild(this.#button9);
+
+        this.#element.appendChild(bottomButtonContainer);
+    }
+
+    /**
+     * 
+     * @returns The name of the plugin
+     */
+    getName() {
+        return "Database Control Plugin"
+    }
+
+    /** Initialize the plugin
+     * 
+     * @param app The OlympusApp singleton
+     * @returns True if successfull
+     */
+    initialize(app: any) {
+        this.#app = app;
+    
+        /* Load the databases and initialize the editors */
+        this.#loadDatabases();
+
+        /* Add a button to the main Olympus App to allow the users to open the dialog */
+        var mainButtonDiv = document.createElement("div");
+        var mainButton = document.createElement("button");
+        mainButton.textContent = "Database manager";
+        mainButtonDiv.appendChild(mainButton);
+        var toolbar: PrimaryToolbar = this.#app?.getToolbarsManager().get("primaryToolbar") as PrimaryToolbar;
+        var elements = toolbar.getMainDropdown().getOptionElements();
+        var arr = Array.prototype.slice.call(elements);
+        arr.splice(arr.length - 1, 0, mainButtonDiv);
+        toolbar.getMainDropdown().setOptionsElements(arr);
+        mainButton.onclick = () => {
+            toolbar.getMainDropdown().close();
+            if (this.#app?.getMissionManager().getCommandModeOptions().commandMode === "Game master") 
+                this.toggle();
+        }
+    
+        return true;
+    }
+
+    /**
+     * 
+     * @returns The main container element
+     */
+    getElement() {
+        return this.#element;
+    }
+
+    /** Toggles the visibility of the dialog
+     * 
+     * @param bool Force a specific visibility state
+     */
+    toggle(bool?: boolean) {
+        if (bool)
+            this.getElement().classList.toggle("hide", !bool);
+        else
+            this.getElement().classList.toggle("hide");
+    }
+
+    /** Hide all the editors
+     * 
+     */
+    #hideAll() {
+        this.#aircraftEditor.hide();
+        this.#helicopterEditor.hide();
+        this.#groundUnitEditor.hide();
+        this.#navyUnitEditor.hide();
+
+        this.#button1.classList.remove("selected");
+        this.#button2.classList.remove("selected");
+        this.#button3.classList.remove("selected");
+        this.#button4.classList.remove("selected");
+    }
+
+    /** Load the databases from the app to the editor. Note, this does not reload the databases from the server to the app
+     * 
+     */
+    #loadDatabases() {
+        var aircraftDatabase = this.#app?.getAircraftDatabase();
+        if (aircraftDatabase != null)
+            this.#aircraftEditor.setDatabase(aircraftDatabase);
+
+        var helicopterDatabase = this.#app?.getHelicopterDatabase();
+        if (helicopterDatabase != null)
+            this.#helicopterEditor.setDatabase(helicopterDatabase);
+
+        var groundUnitDatabase = this.#app?.getGroundUnitDatabase();
+        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");
+    }
+
+    /** Save the databases on the server and reloads it to apply the changes
+     * 
+     */
+    #saveDatabases() {
+        var aircraftDatabase = this.#aircraftEditor.getDatabase();
+        if (aircraftDatabase){
+            this.#uploadDatabase(aircraftDatabase, "aircraftdatabase", "Aircraft database", () => {
+                var helicopterDatabase = this.#helicopterEditor.getDatabase();
+                if (helicopterDatabase) {
+                    this.#uploadDatabase(helicopterDatabase, "helicopterDatabase", "Helicopter database", () => {
+                        var groundUnitDatabase = this.#groundUnitEditor.getDatabase();
+                        if (groundUnitDatabase) {
+                            this.#uploadDatabase(groundUnitDatabase, "groundUnitDatabase", "Ground Unit database", () => {
+                                var navyUnitDatabase = this.#navyUnitEditor.getDatabase();
+                                if (navyUnitDatabase) {
+                                    this.#uploadDatabase(navyUnitDatabase, "navyUnitDatabase", "Navy Unit database", () => {
+                                        this.#app?.getAircraftDatabase().load(() => {});
+                                        this.#app?.getHelicopterDatabase().load(() => {});
+                                        this.#app?.getGroundUnitDatabase().load(() => {});
+                                        this.#app?.getNavyUnitDatabase().load(() => {});
+
+                                        this.#app?.getServerManager().reloadDatabases(() => {
+                                            this.#app?.getPopupsManager().get("infoPopup")?.setText("Olympus core databases reloaded");
+                                        })
+                                    });
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+
+    /** Resets the databases to the default values 
+     * 
+     */
+    #resetToDefaultDatabases() {
+        this.#resetToDefaultDatabase("aircraftdatabase", "Aircraft database", () => {
+            this.#app?.getAircraftDatabase().load(() => {
+                this.#resetToDefaultDatabase("helicopterdatabase", "Helicopter database", () => {
+                    this.#app?.getHelicopterDatabase().load(() => {
+                        this.#resetToDefaultDatabase("groundunitdatabase", "Ground Unit database", () => {
+                            this.#app?.getGroundUnitDatabase().load(() => {
+                                this.#resetToDefaultDatabase("navyunitdatabase", "Navy Unit database", () => {
+                                    this.#app?.getNavyUnitDatabase().load(() => {
+                                        this.#loadDatabases();
+
+                                        this.#app?.getServerManager().reloadDatabases(() => {
+                                            this.#app?.getPopupsManager().get("infoPopup")?.setText("Olympus core databases reloaded");
+                                        })
+
+                                        this.#hideAll();
+                                        this.#aircraftEditor.show();
+                                        this.#button1.classList.add("selected");
+                                    });
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    }
+
+    /** Restores the databases to the previous saved values. This is useful if you saved the databases by mistake and want to undo the error.
+     * 
+     */
+    #restoreToPreviousDatabases() {
+        this.#restoreToPreviousDatabase("aircraftdatabase", "Aircraft database", () => {
+            this.#app?.getAircraftDatabase().load(() => {
+                this.#restoreToPreviousDatabase("helicopterdatabase", "Helicopter database", () => {
+                    this.#app?.getHelicopterDatabase().load(() => {
+                        this.#restoreToPreviousDatabase("groundunitdatabase", "Ground Unit database", () => {
+                            this.#app?.getGroundUnitDatabase().load(() => {
+                                this.#restoreToPreviousDatabase("navyunitdatabase", "Navy Unit database", () => {
+                                    this.#app?.getNavyUnitDatabase().load(() => {
+                                        this.#loadDatabases();
+
+                                        this.#app?.getServerManager().reloadDatabases(() => {
+                                            this.#app?.getPopupsManager().get("infoPopup")?.setText("Olympus core databases reloaded");
+                                        })
+
+                                        this.#hideAll();
+                                        this.#aircraftEditor.show();
+                                        this.#button1.classList.add("selected");
+                                    });
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    }
+
+    /** Upload a single database to the server
+     * 
+     * @param database The database 
+     * @param name The name of the database as it will be saved on the server
+     * @param label A label used in the info popup
+     */
+    #uploadDatabase(database: { blueprints: { [key: string]: UnitBlueprint } }, name: string, label: string, callback: CallableFunction) {
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.open("PUT", "/api/databases/save/units/" + name);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+        xmlHttp.onload = (res: any) => {
+            if (xmlHttp.status == 200) {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText(label + " saved successfully");
+                callback();
+            }
+            else {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while saving the " + label);
+            }
+        };
+        xmlHttp.onerror = (res: any) => {
+            this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while saving the " + label);
+        }
+        xmlHttp.send(JSON.stringify(database));
+    }
+
+    /** Resets a database to its default values on the server. NOTE: this only resets the database on the server, it will not reload it in the app.
+     * 
+     * @param name The name of the database as it is saved on the server
+     * @param label A label used in the info popup
+     * @param callback Called when the operation is completed
+     */
+    #resetToDefaultDatabase(name: string, label: string, callback: CallableFunction) {
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.open("PUT", "/api/databases/reset/units/" + name);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+        xmlHttp.onload = (res: any) => {
+            if (xmlHttp.status == 200) {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText(label + " reset successfully");
+                callback();
+            }
+            else {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while resetting the " + label);
+            }
+        };
+        xmlHttp.onerror = (res: any) => {
+            this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while resetting the " + label)
+        }
+        xmlHttp.send("");
+    }
+
+    /** Restores a database to its previously saved values on the server. NOTE: this only restores the database on the server, it will not reload it in the app.
+     * 
+     * @param name The name of the database as it is saved on the server
+     * @param label A label used in the info popup
+     * @param callback Called when the operation is completed
+     */
+    #restoreToPreviousDatabase(name: string, label: string, callback: CallableFunction) {
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.open("PUT", "/api/databases/restore/units/" + name);
+        xmlHttp.setRequestHeader("Content-Type", "application/json");
+        xmlHttp.onload = (res: any) => {
+            if (xmlHttp.status == 200) {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText(label + " restored successfully");
+                callback();
+            }
+            else {
+                this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while restoring the " + label);
+            }
+        };
+        xmlHttp.onerror = (res: any) => {
+            this.#app?.getPopupsManager().get("infoPopup")?.setText("An error has occurred while restoring the " + label)
+        }
+        xmlHttp.send("");
+    }
+}

client/plugins/databasemanager/src/grounduniteditor.ts

@@ -0,0 +1,77 @@
+import { UnitBlueprint } from "interfaces";
+import { UnitEditor } from "./uniteditor";
+import { addCheckboxInput, addDropdownInput, addStringInput } from "./utils";
+
+/** Database editor for ground units
+ * 
+ */
+export class GroundUnitEditor extends UnitEditor {
+    #blueprint: UnitBlueprint | null = null;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        super(contentDiv1, contentDiv2, contentDiv3);
+    }
+
+    /** Sets a unit blueprint as the currently active one
+     * 
+     * @param blueprint The blueprint to edit
+     */
+    setBlueprint(blueprint: UnitBlueprint) {
+        this.#blueprint = blueprint;
+
+        if (this.#blueprint !== null) {
+            this.contentDiv2.replaceChildren();
+
+            var title = document.createElement("label");
+            title.innerText = "Unit properties";
+            this.contentDiv2.appendChild(title);
+            
+            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; });
+            addStringInput(this.contentDiv2, "Unit when grouped", blueprint.unitWhenGrouped?? "", "text", (value: string) => {blueprint.unitWhenGrouped = value; });
+            addDropdownInput(this.contentDiv2, "Coalition", blueprint.coalition, ["", "blue", "red"], (value: string) => {blueprint.coalition = value; });
+            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, "Acquisition range [m]", String(blueprint.acquisitionRange)?? "", "number", (value: string) => {blueprint.acquisitionRange = parseFloat(value); });
+            addStringInput(this.contentDiv2, "Engagement range [m]", String(blueprint.engagementRange)?? "", "number", (value: string) => {blueprint.engagementRange = parseFloat(value); });
+            addStringInput(this.contentDiv2, "Targeting range [m]", String(blueprint.targetingRange)?? "", "number", (value: string) => {blueprint.targetingRange = parseFloat(value); });
+            addStringInput(this.contentDiv2, "Aim method range [m]", String(blueprint.aimMethodRange)?? "", "number", (value: string) => {blueprint.aimMethodRange = 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); });
+            addStringInput(this.contentDiv2, "Aim time [s]", String(blueprint.aimTime)?? "", "number", (value: string) => {blueprint.aimTime = parseFloat(value); });
+            addStringInput(this.contentDiv2, "Shots to fire", String(blueprint.shotsToFire)?? "", "number", (value: string) => {blueprint.shotsToFire = Math.round(parseFloat(value)); });
+            addStringInput(this.contentDiv2, "Shots base interval [s]", String(blueprint.shotsBaseInterval)?? "", "number", (value: string) => {blueprint.shotsBaseInterval = Math.round(parseFloat(value)); });
+            addStringInput(this.contentDiv2, "Shots base scatter [°]", String(blueprint.shotsBaseScatter)?? "", "number", (value: string) => {blueprint.shotsBaseScatter = Math.round(parseFloat(value)); });            
+            addStringInput(this.contentDiv2, "Alertness time constant [s]", String(blueprint.alertnessTimeConstant)?? "", "number", (value: string) => {blueprint.alertnessTimeConstant = 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;})
+            addCheckboxInput(this.contentDiv2, "Can operate as AAA", blueprint.canAAA ?? false, (value: boolean) => {blueprint.canAAA = value;})
+            addCheckboxInput(this.contentDiv2, "Indirect fire (e.g. mortar)", blueprint.indirectFire ?? false, (value: boolean) => {blueprint.indirectFire = value;})
+            addStringInput(this.contentDiv2, "Description", blueprint.description ?? "", "text", (value: string) => {blueprint.description = value; });
+            addStringInput(this.contentDiv2, "Tags", blueprint.tags ?? "", "text", (value: string) => {blueprint.tags = value; });
+            addStringInput(this.contentDiv2, "Marker file", blueprint.markerFile ?? "", "text", (value: string) => {blueprint.markerFile = value; });
+        }
+    }
+
+    /** Add a new empty blueprint
+     * 
+     * @param key Blueprint key
+     */
+    addBlueprint(key: string) {
+        if (this.database != null) {
+            this.database.blueprints[key] = {
+                name: key,
+                coalition: "",
+                label: "",
+                shortLabel: "",
+                era: "",
+                enabled: true
+            }
+            this.show();
+            this.setBlueprint(this.database.blueprints[key]);
+        }
+    }
+}

client/plugins/databasemanager/src/index.ts

@@ -0,0 +1,5 @@
+import { DatabaseManagerPlugin } from "./databasemanagerplugin";
+
+globalThis.getOlympusPlugin = () => {
+    return new DatabaseManagerPlugin();
+}

client/plugins/databasemanager/src/loadouteditor.ts

@@ -0,0 +1,55 @@
+import { LoadoutBlueprint } from "interfaces";
+import { addLoadoutItemsEditor, addStringInput, arrayToString, stringToArray } from "./utils";
+
+/** The LoadoutEditor allows the user to edit a loadout
+ * 
+ */
+export class LoadoutEditor {
+    #contentDiv: HTMLElement;
+    #loadout: LoadoutBlueprint | null = null;
+    #visible: boolean = false;
+
+    constructor(contentDiv: HTMLElement) {
+        this.#contentDiv = contentDiv;
+        this.#contentDiv.addEventListener("refresh", () => { 
+            if (this.#visible)
+                this.show(); 
+        })
+    }
+
+    /** Set the loadout to edit
+     * 
+     * @param loadout The loadout to edit
+     */
+    setLoadout(loadout: LoadoutBlueprint) {
+        this.#loadout = loadout;
+    }
+
+    /** Show the editor
+     * 
+     */
+    show() {
+        this.#visible = true;
+        this.#contentDiv.replaceChildren();
+
+        var title = document.createElement("label");
+        title.innerText = "Loadout properties";
+        this.#contentDiv.appendChild(title);
+
+        if (this.#loadout) {
+            var loadout = this.#loadout;
+            addStringInput(this.#contentDiv, "Name", loadout.name, "text", (value: string) => {loadout.name = value; this.#contentDiv.dispatchEvent(new Event("refresh"));});
+            addStringInput(this.#contentDiv, "Code", loadout.code, "text", (value: string) => {loadout.code = value; });
+            addStringInput(this.#contentDiv, "Roles", arrayToString(loadout.roles), "text", (value: string) => {loadout.roles = stringToArray(value);});
+            addLoadoutItemsEditor(this.#contentDiv, this.#loadout);
+        }
+    }
+
+    /** Hide the editor
+     * 
+     */
+    hide() {
+        this.#visible = false;
+        this.#contentDiv.replaceChildren();
+    }
+}

client/plugins/databasemanager/src/navyuniteditor.ts

@@ -0,0 +1,60 @@
+import { UnitBlueprint } from "interfaces";
+import { UnitEditor } from "./uniteditor";
+import { addDropdownInput, addStringInput } from "./utils";
+
+/** Database editor for navy units
+ * 
+ */
+export class NavyUnitEditor extends UnitEditor {
+    #blueprint: UnitBlueprint | null = null;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        super(contentDiv1, contentDiv2, contentDiv3);
+    }
+
+    /** Sets a unit blueprint as the currently active one
+     * 
+     * @param blueprint The blueprint to edit
+     */
+    setBlueprint(blueprint: UnitBlueprint) {
+        this.#blueprint = blueprint;
+
+        if (this.#blueprint !== null) {
+            this.contentDiv2.replaceChildren();
+
+            var title = document.createElement("label");
+            title.innerText = "Unit properties";
+            this.contentDiv2.appendChild(title);
+            
+            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"], (value: string) => {blueprint.coalition = value; });
+            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, "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); });
+        }
+    }
+
+    /** Add a new empty blueprint
+     * 
+     * @param key Blueprint key
+     */
+    addBlueprint(key: string) {
+        if (this.database != null) {
+            this.database.blueprints[key] = {
+                name: key,
+                coalition: "",
+                label: "",
+                shortLabel: "",
+                era: "",
+                enabled: true
+            }
+            this.show();
+            this.setBlueprint(this.database.blueprints[key]);
+        }
+    }
+}

client/plugins/databasemanager/src/uniteditor.ts

@@ -0,0 +1,117 @@
+import { UnitBlueprint } from "interfaces";
+import { UnitDatabase } from "unit/databases/unitdatabase";
+import { addBlueprintsScroll, addNewElementInput } from "./utils";
+
+/** Base abstract class of Unit database editors
+ * 
+ */
+export abstract class UnitEditor {
+    blueprint: UnitBlueprint | null = null;
+    database: {blueprints: {[key: string]: UnitBlueprint}} | null = null;
+    visible: boolean = false;
+    contentDiv1: HTMLElement;
+    contentDiv2: HTMLElement;
+    contentDiv3: HTMLElement;
+
+    constructor(contentDiv1: HTMLElement, contentDiv2: HTMLElement, contentDiv3: HTMLElement) {
+        this.contentDiv1 = contentDiv1;
+        this.contentDiv2 = contentDiv2;
+        this.contentDiv3 = contentDiv3;
+
+        /* Refresh the list of units if it changes */
+        this.contentDiv1.addEventListener("refresh", () => { 
+            if (this.visible)
+                this.show(); 
+        })
+
+        /* If the unit properties or loadout are edited, reload the editor */
+        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);
+            }
+        });
+    }
+
+    /**
+     * 
+     * @param database The database that the editor will operate on
+     */
+    setDatabase(database: UnitDatabase) {
+        this.database = JSON.parse(JSON.stringify({blueprints: database.getBlueprints(true)}));
+    }
+
+    /** Show the editor
+     * @param filter String filter
+     */
+    show(filter: string = "") {
+        this.visible = true;
+        this.contentDiv1.replaceChildren();
+        this.contentDiv2.replaceChildren();
+        this.contentDiv3.replaceChildren();
+
+        /* Create the list of units. Each unit is clickable to activate the editor on it */
+        if (this.database != null) {
+            var title = document.createElement("label");
+            title.innerText = "Units list";
+            this.contentDiv1.appendChild(title);
+
+            var filterInput = document.createElement("input");
+            filterInput.value = filter;
+            this.contentDiv1.appendChild(filterInput);
+
+            filterInput.onchange = (e: Event) => {
+                this.show((e.target as HTMLInputElement).value);
+            }
+            
+            this.addBlueprints(filter);
+        }
+    }
+
+    /** Hide the editor
+     * 
+     */
+    hide() {
+        this.visible = false;
+        this.contentDiv1.replaceChildren();
+        this.contentDiv2.replaceChildren();
+        this.contentDiv3.replaceChildren();
+    }
+
+    /** 
+     * 
+     * @returns The edited database
+     */
+    getDatabase() {
+        return this.database;
+    }
+
+    /**
+     * 
+     * @param filter String filter
+     */
+    addBlueprints(filter: string = "") {
+        if (this.database) {
+            addBlueprintsScroll(this.contentDiv1, this.database, filter, (key: string) => {
+                if (this.database != null) 
+                    this.setBlueprint(this.database.blueprints[key])
+            });
+
+            addNewElementInput(this.contentDiv1, (ev: MouseEvent, input: HTMLInputElement) => {
+                if (input.value != "")
+                    this.addBlueprint((input).value);
+            });
+        }
+    }
+
+    /* Abstract methods which will depend on the specific type of units */
+    abstract setBlueprint(blueprint: UnitBlueprint): void;
+    abstract addBlueprint(key: string): void;
+}

client/plugins/databasemanager/src/utils.ts

@@ -0,0 +1,297 @@
+import { LoadoutBlueprint, LoadoutItemBlueprint, UnitBlueprint } from "interfaces";
+
+/** This file contains a set of utility functions that are reused in the various editors and allows to declutter the classes
+ * 
+ */
+
+/** Add a string 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 type The type of the input, e.g. "Text" or "Number" as per html standard
+ * @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 addStringInput(div: HTMLElement, key: string, value: string, type: string, 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.value = value;
+    input.textContent = value;
+    input.type = type?? "text";
+    input.disabled = disabled?? false;
+    input.onchange = () => callback(input.value);
+    dd.appendChild(input);
+    row.appendChild(dt);
+    row.appendChild(dd);
+    row.classList.add("input-row");
+    div.appendChild(row);
+}
+
+/** Add a dropdown (select) input
+ * 
+ * @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 options The dropdown options
+ */
+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");
+    dt.innerText = key;
+    var select = document.createElement("select");
+    options.forEach((option: string) => {
+        var el = document.createElement("option");
+        el.value = option;
+        el.innerText = option;
+        select.appendChild(el);
+    });
+    select.value = value;
+    select.disabled = disabled?? false;
+    select.onchange = () => callback(select.value);
+    dd.appendChild(select);
+    row.appendChild(dt);
+    row.appendChild(dd);
+    row.classList.add("input-row");
+    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
+ * @param loadout The loadout to edit
+ */
+export function addLoadoutItemsEditor(div: HTMLElement, loadout: LoadoutBlueprint) {
+    var itemsEl = document.createElement("div");
+    itemsEl.classList.add("dm-scroll-container", "dm-items-container");
+
+    /* Create a row for each loadout item to allow and change the name and quantity of the item itself */
+    loadout.items.sort((a: LoadoutItemBlueprint, b: LoadoutItemBlueprint) => a.name.localeCompare(b.name, undefined, {sensitivity: 'base'}));
+    loadout.items.forEach((item: LoadoutItemBlueprint, index: number) => {
+        var rowDiv = document.createElement("div");
+
+        var nameLabel = document.createElement("label");
+        nameLabel.innerText = "Name"
+        rowDiv.appendChild(nameLabel);
+
+        var nameInput = document.createElement("input");
+        rowDiv.appendChild(nameInput);
+        nameInput.textContent = item.name;
+        nameInput.value = item.name
+        nameInput.onchange = () => { loadout.items[index].name = nameInput.value; }
+
+        var quantityLabel = document.createElement("label");
+        quantityLabel.innerText = "Quantity"
+        rowDiv.appendChild(quantityLabel);
+
+        var quantityInput = document.createElement("input");
+        rowDiv.appendChild(quantityInput);
+        quantityInput.textContent = String(item.quantity);
+        quantityInput.value = String(item.quantity);
+        quantityInput.type = "number";
+        quantityInput.step = "1";
+        quantityInput.onchange = () => { loadout.items[index].quantity = parseInt(quantityInput.value); }
+
+        /* This button allows to remove the item */
+        var button = document.createElement("button");
+        button.innerText = "X";
+        button.onclick = () => {
+            loadout.items.splice(index, 1);
+            div.dispatchEvent(new Event("refresh"));
+        }
+        rowDiv.appendChild(button);
+
+        itemsEl.appendChild(rowDiv);
+    })
+    div.appendChild(itemsEl);
+
+    /* Button to add a new item to the loadout */
+    var inputDiv = document.createElement("div");
+    inputDiv.classList.add("dm-new-item-input");
+    var button = document.createElement("button");
+    button.innerText = "Add";
+    inputDiv.appendChild(button);
+    div.appendChild(inputDiv);
+
+    button.addEventListener("click", (ev: MouseEvent) => {
+        loadout?.items.push({
+            name: "",
+            quantity: 1
+        })
+        div.dispatchEvent(new Event("refresh"));
+    });
+}
+
+/** Add a input and button to create a new element in a list. It uses a generic callback to actually add the element.
+ * 
+ * @param div The HTMLElement that will contain the input and button
+ * @param callback Callback called when the user clicks on "Add"
+ */
+export function addNewElementInput(div: HTMLElement, callback: CallableFunction) {
+    var inputDiv = document.createElement("div");
+    inputDiv.classList.add("dm-new-element-input");
+
+    var input = document.createElement("input");
+    inputDiv.appendChild(input);
+
+    var button = document.createElement("button");
+    button.innerText = "Add";
+    button.addEventListener("click", (ev: MouseEvent) => callback(ev, input));
+    inputDiv.appendChild(button);
+    div.appendChild(inputDiv);
+}
+
+/** Add a scrollable list of blueprints
+ * 
+ * @param div The HTMLElement that will contain the list
+ * @param database The database that will be used to fill the list of blueprints
+ * @param filter A string filter that will be executed to filter the blueprints to add
+ * @param callback Callback called when the user clicks on one of the elements
+ */
+export function addBlueprintsScroll(div: HTMLElement, database: {blueprints: {[key: string]: UnitBlueprint}}, filter: string, callback: CallableFunction) {
+    var scrollDiv = document.createElement("div");
+    scrollDiv.classList.add("dm-scroll-container");
+    if (database !== null) {
+        var blueprints: {[key: string]: UnitBlueprint} = database.blueprints;
+
+        for (let key of Object.keys(blueprints).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'}))) {
+            var addKey = true;
+            if (filter !== "") {
+                try {
+                    var blueprint = blueprints[key];
+                    addKey = eval(filter);
+                } catch {
+                    console.error("An error has occurred evaluating the blueprint filter")
+                }
+            }
+
+            if (addKey) {
+                var rowDiv = document.createElement("div");
+                scrollDiv.appendChild(rowDiv);
+
+                let text = document.createElement("div");
+                text.innerHTML = `<div>${key}</div> <div>${blueprints[key].label}</div>`;
+                text.onclick = () => { 
+                    callback(key);
+                    const collection = document.getElementsByClassName("blueprint-selected");
+                    for (let i = 0; i < collection.length; i++) {
+                        collection[i].classList.remove("blueprint-selected");
+                    }
+                    text.classList.add("blueprint-selected");
+                }
+                rowDiv.appendChild(text);
+
+                let checkbox = document.createElement("input");
+                checkbox.type = "checkbox";
+                checkbox.checked = blueprints[key].enabled;
+                checkbox.onclick = () => {
+                    console.log(checkbox.checked);
+                    blueprints[key].enabled = checkbox.checked;
+                }
+                rowDiv.appendChild(checkbox);
+
+                /* This button allows to remove an element from the list. It requires a refresh. */
+                var button = document.createElement("button");
+                button.innerText = "X";
+                button.onclick = () => {
+                    delete blueprints[key];
+                    div.dispatchEvent(new Event("refresh"));
+                }
+                rowDiv.appendChild(button);
+            }
+        }      
+    }
+    div.appendChild(scrollDiv);
+}
+
+/** Add a scrollable list of loadouts
+ * 
+ * @param div The HTMLElement that will contain the list
+ * @param loadouts The loadouts that will be used to fill the list
+ * @param callback Callback called when the user clicks on one of the elements
+ */
+export function addLoadoutsScroll(div: HTMLElement, loadouts: LoadoutBlueprint[], callback: CallableFunction) {
+    var loadoutsEl = document.createElement("div");
+    loadoutsEl.classList.add("dm-scroll-container", "dm-loadout-container")
+    
+    loadouts.sort((a: LoadoutBlueprint, b: LoadoutBlueprint) => a.name.localeCompare(b.name, undefined, {sensitivity: 'base'}));
+    loadouts.forEach((loadout: LoadoutBlueprint, index: number) => {
+        var rowDiv = document.createElement("div");
+        loadoutsEl.appendChild(rowDiv);
+
+        var text = document.createElement("label");
+        text.textContent = loadout.name;
+        text.onclick = () => { callback(loadout) };
+        rowDiv.appendChild(text);
+
+        /* The "Empty loadout" can not be removed */
+        if (loadout.name !== "Empty loadout") {
+            let checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = loadout.enabled;
+            checkbox.onclick = () => {
+                console.log(checkbox.checked);
+                loadout.enabled = checkbox.checked;
+            }
+            rowDiv.appendChild(checkbox);
+
+            /* This button allows to remove an element from the list. It requires a refresh. */
+            var button = document.createElement("button");
+            button.innerText = "X";
+            button.onclick = () => {
+                loadouts.splice(index, 1);
+                div.dispatchEvent(new Event("refresh"));
+            }
+            rowDiv.appendChild(button);
+        }
+    });
+
+    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[]) {
+    return "[" + array.join( ", " ) + "]";
+}
+
+/** Converts an a single string like [val1, val2, val3] into an array
+ *
+ * @param input The input string
+ * @returns The array
+ */
+export function stringToArray(input: string) {
+    return input.match( /(\w)+/g ) ?? [];
+}

client/plugins/databasemanager/style.css

@@ -0,0 +1,295 @@
+#database-manager-panel {
+    flex-direction: column;
+    display: flex;
+    width: 80%;
+    height: 80%;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: var(--background-steel) !important;
+    z-index: 9999999;
+}
+
+@media (min-width: 1200px) {
+    .dm-container {
+      flex-direction: row;
+    }
+}
+  
+@media (max-width: 1200px) {
+    .dm-container {
+        flex-direction: column;
+        overflow-y: auto;
+    }
+}
+
+#database-manager-panel * {
+    font-size: 13;
+    font-family: 'Open Sans', sans-serif !important;
+    user-select: none;
+}
+
+#database-manager-panel>div:first-child {
+    display: flex;
+    align-items: center;
+}
+
+#database-manager-panel>div:last-child {
+    display: flex;
+    column-gap: 5px;
+    align-items: center;
+    justify-content: end;
+    justify-items: end;
+    margin-top: 5px;
+}
+
+#database-manager-panel>div:last-child>button {
+    border: 1px solid white;
+}
+
+.dm-container {
+    background-color: var(--background-grey);
+    border: 2px solid #777777;
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding: 5px;
+    height: calc(100% - 64px - 5px);
+    border-radius: 0px 5px 5px 5px;
+}
+
+.dm-content-container {
+    position: relative;
+    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    max-height: 100%;
+    padding: 10px;
+}
+
+@media (min-width: 1200px) {
+    .dm-content-container {
+        height: calc(100% - 20px);
+    }
+
+    .dm-content-container:nth-of-type(1) {
+        width: 400px;
+    }
+
+    .dm-content-container:nth-of-type(2) {
+        width: 500px;
+    }
+    
+    .dm-content-container:nth-of-type(3) {
+        flex: 1;
+    }
+}
+  
+@media (max-width: 1200px) {
+    .dm-content-container {
+        width: calc(100% - 20px);
+    }
+
+    .dm-content-container:nth-of-type(1) {
+        height: 30%;
+    }
+
+    .dm-content-container:nth-of-type(2) {
+        height: 50%;
+    }
+    
+    .dm-content-container:nth-of-type(3) {
+        flex: 1;
+    }
+}
+
+.dm-content-container>label {
+    font-size: 18px !important;
+    font-weight: bold;
+}
+
+.dm-scroll-container {
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    max-height: 100%;
+    color: black;
+    font-weight: bold;
+}
+
+#database-manager-panel input {
+    font-weight: bold;
+}
+
+.dm-scroll-container>div:nth-child(even) {
+    background-color: gainsboro;
+}
+
+.dm-scroll-container>div:nth-child(odd) {
+    background-color: white;
+}
+
+.dm-scroll-container>div *:nth-child(1) {
+    height: 100%;
+    width: calc(100% - 25px);
+    padding: 2px;
+    word-wrap: break-word;
+}
+
+.dm-scroll-container>div *:nth-child(1):hover {
+    background-color: var(--accent-dark-blue);
+    color: white;
+    cursor: pointer;
+}
+
+.blueprint-selected {
+    background-color: var(--accent-light-blue) !important;
+    color: white;
+}
+
+.dm-scroll-container>div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dm-scroll-container>div>div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.dm-scroll-container>div>button {
+    height: 20px;
+    width: 20px;
+    padding: 0px;
+}
+
+.dm-scroll-container>div>div>div:nth-child(1) {
+    width: fit-content;
+}
+
+.dm-scroll-container>div>div>div:nth-child(2) {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    font-weight: normal;
+}
+
+.input-row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 1200px) {
+    .dm-content-container label {
+        width: 100%;
+    }
+    .input-row {
+        width: 50%;
+    }
+}
+
+.input-row>dt {
+    width: 250px;
+}
+
+.input-row>dd {
+    width: 100%;
+    text-align: right;
+}
+
+.input-row>dd>* {
+    width: 100%;
+    font-weight: bold;
+}
+
+.input-row>dd>*[type="checkbox"] {
+    width: 20px;
+    font-weight: bold;
+}
+
+.dm-loadout-container {
+    max-height: 100%;
+    max-width: 500px;
+    width: 100%;
+}
+
+.dm-items-container {
+    max-height: 100%;
+    height: fit-content;
+}
+
+.dm-items-container>div {
+    display: flex;
+    align-items: center;
+    column-gap: 2px;
+}
+
+.dm-items-container>div>label {
+    width: 80px !important;
+}
+
+.dm-items-container div>input:nth-of-type(1) {
+    flex: 1;
+    font-weight: bold;
+}
+
+.dm-items-container div>input:nth-of-type(2) {
+    width: 40px;
+    font-weight: bold;
+}
+
+.dm-new-element-input {
+    display: flex;
+    flex-direction: row;
+    column-gap: 2px;
+    width: 100%;
+    align-items: center;
+}
+
+.dm-new-element-input>input {
+    width: 100%;
+}
+
+.dm-new-element-input>button {
+    width: 60px;
+}
+
+.dm-new-item-input {
+    display: flex;
+    justify-content: end;
+}
+
+.dm-new-item-input>button {
+    width: 60px;
+}
+
+.tab-button {
+    transform: translateY(+3px);
+    background-color: var(--background-steel);
+    border-radius: 0;
+    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: var(--background-grey);
+    z-index: 10;
+}
+
+.tab-button:first-of-type {
+    border-top-left-radius: 5px;
+}
+
+.tab-button:last-of-type {
+    border-top-right-radius: 5px;
+    border-right: 2px solid #777777 !important;
+}
+
+#database-manager-panel button :not(.dm-scroll-container>div) {
+    border: 1px solid white;
+}

client/plugins/databasemanager/tsconfig.json

@@ -0,0 +1,103 @@
+{
+    "compilerOptions": {
+      /* Visit https://aka.ms/tsconfig to read more about this file */
+      /* Projects */
+      // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+      // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+      // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+      // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+      // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+      // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+      /* Language and Environment */
+      "target": "ES2017", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+      // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+      // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+      // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+      // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+      // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+      // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+      // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+      // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+      // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+      // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+      // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+      /* Modules */
+      "module": "commonjs", /* Specify what module code is generated. */
+      "rootDirs": ["./src"], /* Specify the root folder within your source files. */
+      // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+      // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+      // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+      // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+      "typeRoots": [
+        "./node_modules/@types",
+        "../../@types"
+      ], /* Specify multiple folders that act like './node_modules/@types'. */
+      "types": [
+        "olympus"
+      ], /* Specify type package names to be included without being referenced in a source file. */
+      // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+      // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+      // "resolveJsonModule": true,                        /* Enable importing .json files. */
+      // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+      /* JavaScript Support */
+       "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+      // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+      // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+      /* Emit */
+      // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+      // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+      // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+      // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+      // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+      // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+      // "removeComments": true,                           /* Disable emitting comments. */
+      // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+      // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+      // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+      // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+      // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+      // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+      // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+      // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+      // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+      // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+      // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+      // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+      // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+      // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+      // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+      // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+      /* Interop Constraints */
+      // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+      // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+      "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+      // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+      "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+      /* Type Checking */
+      "strict": true, /* Enable all strict type-checking options. */
+      // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+      // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+      // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+      // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+      // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+      // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+      // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+      // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+      // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+      // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+      // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+      // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+      // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+      // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+      // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+      // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+      // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+      // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+      /* Completeness */
+      // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+      "skipLibCheck": true /* Skip type checking all .d.ts files. */
+    },
+    "include": [ 
+        "src/*.ts"
+    ]
+}

client/prepare.bat

@@ -1,2 +0,0 @@
-copy .\\node_modules\\leaflet\\dist\\leaflet.css .\\public\\stylesheets\\leaflet\\leaflet.css 
-copy .\\node_modules\\leaflet.nauticscale\\dist\\leaflet.nauticscale.js .\\public\\javascripts\\leaflet.nauticscale.js

client/public/databases/units/iran-iraq_fictional/aircraftdatabase.json

@@ -1,767 +0,0 @@
-{
-	"An-26B": {
-		"name": "An-26B",
-		"coalition": "red",
-		"label": "An-26B Curl",
-		"era": "Mid Cold War",
-		"shortLabel": "26",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"Transport"
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "an-26.png",
-		"cost": 0
-	},
-	"An-30M": {
-		"name": "An-30M",
-		"coalition": "red",
-		"label": "An-30M Clank",
-		"era": "Mid Cold War",
-		"shortLabel": "30",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"Transport"
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "a-50.png",
-		"cost": 0
-	},
-	"C-130": {
-		"name": "C-130",
-		"label": "C-130 Hercules",
-		"era": "Early Cold War",
-		"shortLabel": "130",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"Transport"
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "c-130.png",
-		"cost": 0
-	},
-	"F-14A-135-GR": {
-		"name": "F-14A-135-GR",
-		"coalition": "blue",
-		"label": "F-14A-135-GR Tomcat",
-		"era": "Mid Cold War",
-		"shortLabel": "14A",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "fuel",
-						"quantity": 2
-					},
-					{
-						"name": "AIM-54A",
-						"quantity": 2
-					},
-					{
-						"name": "AIM-7F",
-						"quantity": 1
-					},
-					{
-						"name": "AIM-9L",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "AIM-54A-MK47*2, AIM-7F*1, AIM-9L*4, XT*2",
-				"name": "Heavy / Fox 3 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "fuel",
-						"quantity": 2
-					},
-					{
-						"name": "AIM-7F",
-						"quantity": 4
-					},
-					{
-						"name": "AIM-9L",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "AIM-7F*4, AIM-9L*4, XT*2",
-				"name": "Heavy / Fox 1 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "fuel",
-						"quantity": 2
-					},
-					{
-						"name": "AIM-7M",
-						"quantity": 1
-					},
-					{
-						"name": "AIM-9M",
-						"quantity": 2
-					},
-					{
-						"name": "GBU-12",
-						"quantity": 2
-					},
-					{
-						"name": "LANTIRN",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "AIM-7M*1, AIM-9M*2, XT*2, GBU-12*2, LANTIRN",
-				"name": "Heavy / Fox 3, GBU-12 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "f-14.png",
-		"cost": 300,
-		"liveryID": "IRIAF Asia Minor"
-	},
-	"F-4E": {
-		"name": "F-4E",
-		"coalition": "blue",
-		"label": "F-4E Phantom II",
-		"era": "Mid Cold War",
-		"shortLabel": "4",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "fuel",
-						"quantity": 2
-					},
-					{
-						"name": "AIM-7M",
-						"quantity": 4
-					},
-					{
-						"name": "AIM-9M",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "AIM-9*4,AIM-7*4,Fuel*2",
-				"name": "Heavy / Fox 1 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "ECM",
-						"quantity": 1
-					},
-					{
-						"name": "AIM-7M",
-						"quantity": 2
-					},
-					{
-						"name": "Mk-82",
-						"quantity": 18
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "Mk-82*18,AIM-7*2,ECM",
-				"name": "Heavy / Fox 1, Mk-82 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "f-4.png",
-		"cost": 100, 
-		"liveryID": "IRIAF Asia Minor"
-	},
-	"F-5E-3": {
-		"name": "F-5E-3",
-		"coalition": "blue",
-		"label": "F-5E Tiger",
-		"era": "Mid Cold War",
-		"shortLabel": "5",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "Fuel 275",
-						"quantity": 3
-					},
-					{
-						"name": "AIM-9P5",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "AIM-9P5*2, Fuel 275*3",
-				"name": "Heavy / Fox 2 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "Mk-82",
-						"quantity": 4
-					},
-					{
-						"name": "AIM-9P5",
-						"quantity": 2
-					},
-					{
-						"name": "Fuel 275",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "Mk-82LD*4,AIM-9P*2,Fuel 275",
-				"name": "Heavy / Fox 2 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"liveryID": "ir iriaf 43rd tfs",
-		"filename": "f-5.png",
-		"cost": 80
-	},
-	"F-86F Sabre": {
-		"name": "F-86F Sabre",
-		"coalition": "blue",
-		"label": "F-86F Sabre",
-		"era": "Early Cold War",
-		"shortLabel": "86",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "120gal Fuel",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "120gal Fuel*2",
-				"name": "Light / Guns / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "HVAR",
-						"quantity": 16
-					}
-				],
-				"roles": [
-					"CAS"
-				],
-				"code": "HVAR*16",
-				"name": "Light / HVAR / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "AN-M64",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "AN-M64*2",
-				"name": "Light / AN-M64 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Light / Guns / Short Range"
-			}
-		],
-		"filename": "f-86.png",
-		"cost": 40,
-		"liveryID": "iiaf bare metall"
-	},
-	"IL-76MD": {
-		"name": "IL-76MD",
-		"label": "IL-76MD Candid",
-		"era": "Mid Cold War",
-		"shortLabel": "76",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"Transport"
-				],
-				"code": "",
-				"name": "Default Transport"
-			}
-		],
-		"filename": "il-76.png",
-		"cost": 0
-	},
-	"MiG-15bis": {
-		"name": "MiG-15bis",
-		"coalition": "red",
-		"label": "MiG-15 Fagot",
-		"era": "Early Cold War",
-		"shortLabel": "M15",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "300L Fuel Tanks",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "2*300L",
-				"name": "Medium / Guns / Medium Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "FAB-100M",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "2*FAB-100M",
-				"name": "Medium / FAB-100M / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"CAP"
-				],
-				"code": "",
-				"name": "Light / Guns / Short Range"
-			}
-		],
-		"filename": "mig-15.png",
-		"cost": 30, 
-		"liveryID": "Iraqi_Camo"
-	},
-	"MiG-21Bis": {
-		"name": "MiG-21Bis",
-		"coalition": "red",
-		"label": "MiG-21 Fishbed",
-		"era": "Mid Cold War",
-		"shortLabel": "21",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "R-3 Atoll",
-						"quantity": 2
-					},
-					{
-						"name": "R-60 Aphid",
-						"quantity": 2
-					},
-					{
-						"name": "130 gal tanks",
-						"quantity": 1
-					},
-					{
-						"name": "ASO-2 Countermeasures",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "Patrol, short range",
-				"name": "Light / Fox-2 / Short range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "R-3 Atoll",
-						"quantity": 2
-					},
-					{
-						"name": "R-60 Aphid",
-						"quantity": 2
-					},
-					{
-						"name": "210 gal tanks",
-						"quantity": 1
-					},
-					{
-						"name": "ASO-2 Countermeasures",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "Patrol, medium range",
-				"name": "Medium / Fox-2 / Medium range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "R-3R Atoll",
-						"quantity": 2
-					},
-					{
-						"name": "R-3S Atoll",
-						"quantity": 2
-					},
-					{
-						"name": "210 gal tanks",
-						"quantity": 1
-					},
-					{
-						"name": "ASO-2 Countermeasures",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "Patrol, long range",
-				"name": "Medium / Fox-1, Fox-2 / Medium range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "GROM",
-						"quantity": 2
-					},
-					{
-						"name": "FAB-250",
-						"quantity": 2
-					},
-					{
-						"name": "210 gal tanks",
-						"quantity": 1
-					},
-					{
-						"name": "ASO-2 Countermeasures",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "Few big targets, GROM + BOMBS",
-				"name": "Heavy / GROM, FAB250 / Medium range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"CAP"
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mig-21.png", 
-		"cost": 100,
-		"liveryID": "iran - standard"
-	},
-	"MiG-23MLD": {
-		"name": "MiG-23MLD",
-		"coalition": "red",
-		"label": "MiG-23 Flogger",
-		"era": "Mid Cold War",
-		"shortLabel": "23",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "Fuel-800",
-						"quantity": 1
-					},
-					{
-						"name": "R-60M",
-						"quantity": 4
-					},
-					{
-						"name": "R-24R",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "R-24R*2,R-60M*4,Fuel-800",
-				"name": "Heavy / Fox 1 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "Fuel-800",
-						"quantity": 1
-					},
-					{
-						"name": "FAB-500",
-						"quantity": 2
-					},
-					{
-						"name": "R-60M",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "FAB-500*2,R-60M*2,Fuel-800",
-				"name": "Heavy / FAB-500 / Long Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mig-23.png",
-		"cost": 200
-	},
-	"Mirage-F1EE": {
-		"name": "Mirage-F1EE",
-		"coalition": "red",
-		"label": "Mirage-F1EE",
-		"era": "Mid Cold War",
-		"shortLabel": "F1EE",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "AIM-9JULI",
-						"quantity": 2
-					},
-					{
-						"name": "R530EM",
-						"quantity": 2
-					},
-					{
-						"name": "1137L Fuel Tank",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "2*AIM9-JULI, 2*R530EM, 1*Fuel Tank",
-				"name": "Medium / Fox 1 / Medium Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "AIM-9JULI",
-						"quantity": 2
-					},
-					{
-						"name": "SAMP 400 LD",
-						"quantity": 8
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "2*AIM-9JULI, 8*SAMP 400 LD",
-				"name": "Heavy / SAMP400 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mig-25.png",
-		"cost": 150, 
-		"liveryID": "iriaf 3-6215 _ 1990-2010s desert (eq variant)"
-	},
-	"Mirage-F1CE": {
-		"name": "Mirage-F1CE",
-		"coalition": "red",
-		"label": "Mirage-F1CE",
-		"era": "Mid Cold War",
-		"shortLabel": "F1CE",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "AIM-9JULI",
-						"quantity": 2
-					},
-					{
-						"name": "R530IR",
-						"quantity": 2
-					},
-					{
-						"name": "1137L Fuel Tank",
-						"quantity": 1
-					}
-				],
-				"roles": [
-					"CAP"
-				],
-				"code": "2*AIM9-JULI, 2*R530IR, 1*Fuel Tank",
-				"name": "Medium / Fox 2 / Medium Range"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "AIM-9JULI",
-						"quantity": 2
-					},
-					{
-						"name": "SAMP 400 LD",
-						"quantity": 8
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "2*AIM-9JULI, 8*SAMP 400 LD",
-				"name": "Heavy / SAMP400 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mig-25.png",
-		"cost": 150, 
-		"liveryID": "iraq air force (fictional eq version)"
-	},
-	"Su-24M": {
-		"name": "Su-24M",
-		"coalition": "red",
-		"label": "Su-24M Fencer",
-		"era": "Mid Cold War",
-		"shortLabel": "24",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "R-60M",
-						"quantity": 2
-					},
-					{
-						"name": "FAB-1500",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "FAB-1500*2,R-60M*2",
-				"name": "Heavy / FAB-500 / Short Range"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "su-24.png",
-		"cost": 250,
-		"liveryID": "iran air force"
-	}
-}

client/public/databases/units/iran-iraq_fictional/groundunitdatabase.json

@@ -1,153 +0,0 @@
-{
-	"BMP-1": {
-		"name": "BMP-1",
-		"coalition": "red",
-		"era": "Mid Cold War",
-		"label": "BMP-1",
-		"shortLabel": "BMP-1",
-		"filename": "",
-		"type": "IFV",
-		"cost": 10, 
-		"liveryID": "desert"
-	},
-	"Hawk SAM Battery": {
-		"name": "Hawk SAM Battery",
-		"coalition": "blue",
-		"era": "Early Cold War",
-		"label": "Hawk SAM Battery",
-		"shortLabel": "Hawk SAM Battery",
-		"range": "Medium",
-		"filename": "",
-		"type": "SAM Site",
-		"cost": 500
-	},
-	"Infantry AK": {
-		"name": "Infantry AK",
-		"era": "Mid Cold War",
-		"label": "Infantry AK",
-		"shortLabel": "Infantry AK",
-		"filename": "",
-		"type": "Infantry",
-		"cost": 1
-	},
-	"M-113": {
-		"name": "M-113",
-		"coalition": "blue",
-		"era": "Early Cold War",
-		"label": "M-113",
-		"shortLabel": "M-113",
-		"filename": "",
-		"type": "APC",
-		"cost": 5
-	},
-	"M-60": {
-		"name": "M-60",
-		"coalition": "blue",
-		"era": "Early Cold War",
-		"label": "M-60",
-		"shortLabel": "M-60",
-		"filename": "",
-		"type": "Tank",
-		"cost": 10
-	},
-	"SA-2 SAM Battery": {
-		"name": "SA-2 SAM Battery",
-		"coalition": "red",
-		"era": "Early Cold War",
-		"label": "SA-2 SAM Battery",
-		"shortLabel": "SA-2 SAM Battery",
-		"range": "Long",
-		"filename": "",
-		"type": "SAM Site",
-		"cost": 500
-	},
-	"T-55": {
-		"name": "T-55",
-		"coalition": "red",
-		"era": "Early Cold War",
-		"label": "T-55",
-		"shortLabel": "T-55",
-		"filename": "",
-		"type": "Tank",
-		"cost": 10, 
-		"liveryID": "desert"
-	},
-	"T-72B": {
-		"name": "T-72B",
-		"coalition": "red",
-		"era": "Mid Cold War",
-		"label": "T-72B",
-		"shortLabel": "T-72B",
-		"filename": "",
-		"type": "Tank",
-		"cost": 20, 
-		"liveryID": "desert"
-	},
-	"ZSU-23-4 Shilka": {
-		"name": "ZSU-23-4 Shilka",
-		"era": "Late Cold War",
-		"label": "ZSU-23-4 Shilka",
-		"shortLabel": "ZSU-23-4 Shilka",
-		"filename": "",
-		"type": "AAA",
-		"cost": 100
-	},
-	"Ural-375 ZU-23": {
-		"name": "Ural-375 ZU-23",
-		"era": "Early Cold War",
-		"label": "Ural-375 ZU-23",
-		"shortLabel": "Ural-375 ZU-23",
-		"filename": "",
-		"type": "AAA",
-		"cost": 50
-	},
-	"SAU Gvozdika": {
-		"name": "SAU Gvozdika",
-		"coalition": "red",
-		"era": "Early Cold War",
-		"label": "SAU Gvozdika",
-		"shortLabel": "SAU Gvozdika",
-		"filename": "",
-		"type": "Gun Artillery",
-		"cost": 10, 
-		"liveryID": "desert"
-	},
-	"Grad-URAL": {
-		"name": "Grad-URAL",
-		"coalition": "blue",
-		"era": "Early Cold War",
-		"label": "BM-21",
-		"shortLabel": "BM-21",
-		"filename": "",
-		"type": "Rocket Artillery",
-		"cost": 10
-	},
-	"Chieftain_mk3": {
-		"name": "Chieftain_mk3",
-		"coalition": "blue",
-		"era": "Early Cold War",
-		"label": "Chieftain Mk3",
-		"shortLabel": "Chieftain Mk3",
-		"filename": "",
-		"type": "Tank",
-		"cost": 20
-	}, 
-	"Scud_B": {
-		"name": "Scud_B",
-		"era": "Early Cold War",
-		"label": "SCUD",
-		"shortLabel": "SCUD",
-		"filename": "",
-		"type": "Rocket Artillery",
-		"cost": 10
-	}, 
-	"tt_ZU-23": {
-		"name": "tt_ZU-23",
-		"era": "Early Cold War",
-		"label": "Technical ZSU-23",
-		"shortLabel": "Technical ZSU-23",
-		"filename": "",
-		"type": "AAA",
-		"cost": 25
-	}
-}

client/public/databases/units/iran-iraq_fictional/helicopterdatabase.json

@@ -1,141 +0,0 @@
-{
-	"Mi-24P": {
-		"name": "Mi-24P",
-		"coalition": "red",
-		"era": "Mid Cold War",
-		"label": "Mi-24P Hind",
-		"shortLabel": "Mi24",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "S-8KOM",
-						"quantity": 40
-					},
-					{
-						"name": "9M114 ATGM",
-						"quantity": 8
-					}
-				],
-				"roles": [
-					"CAS"
-				],
-				"code": "2xB8V20 (S-8KOM)+8xATGM 9M114",
-				"name": "Gun / ATGM / Rockets"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "S-24B",
-						"quantity": 4
-					},
-					{
-						"name": "9M114 ATGM",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"Strike"
-				],
-				"code": "4xS-24B+4xATGM 9M114",
-				"name": "Gun / ATGM / Rockets"
-			},
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "GUV-1 Grenade Launcher",
-						"quantity": 4
-					},
-					{
-						"name": "9M114 ATGM",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"CAS"
-				],
-				"code": "4xGUV-1 AP30+4xATGM 9M114",
-				"name": "Gun / ATGM / Grenade Launcher"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					""
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mi-24.png", 
-		"cost": 150, 
-		"liveryID": "IQAF"
-	},
-	"Mi-8MT": {
-		"name": "Mi-8MT",
-		"coalition": "blue",
-		"era": "Mid Cold War",
-		"label": "Mi-8MT Hip",
-		"shortLabel": "Mi8",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "UPK",
-						"quantity": 2
-					},
-					{
-						"name": "B8",
-						"quantity": 2
-					}
-				],
-				"roles": [
-					"CAS"
-				],
-				"code": "2 x UPK +2 x B8",
-				"name": "Rockets / Gunpods"
-			},
-			{
-				"fuel": 1,
-				"items": [],
-				"roles": [
-					"Transport"
-				],
-				"code": "",
-				"name": "Empty Loadout"
-			}
-		],
-		"filename": "mi-8.png",
-		"cost": 100, 
-		"liveryID": "IR Iranian Special Police Forces"
-	},
-	"SA342M": {
-		"name": "SA342M",
-		"coalition": "blue",
-		"era": "Mid Cold War",
-		"label": "SA342M Gazelle",
-		"shortLabel": "342",
-		"loadouts": [
-			{
-				"fuel": 1,
-				"items": [
-					{
-						"name": "HOT3",
-						"quantity": 4
-					}
-				],
-				"roles": [
-					"CAS"
-				],
-				"code": "4x HOT3, IR Deflector, Sand Filter",
-				"name": "ATGM"
-			}
-		],
-		"filename": "sa-342.png",
-		"cost": 80
-	}
-}

client/public/databases/units/iran-iraq_fictional/navyunitdatabase.json

@@ -1,3 +0,0 @@
-{
-	
-}

client/public/images/countries/ad.svg

@@ -75,7 +75,7 @@
       <path d="M232.2 261.4a3.7 3.7 0 0 1 3.7-3 3.7 3.7 0 0 1 3.6 3.7 3.8 3.8 0 0 1-1 2.6"/>
       <path d="M239.4 261.3a15.5 15.5 0 0 0 6.2-12.4c0-4.1-1.6-8.4-3.6-10"/>
       <path stroke-linecap="round" d="M244.7 259.4a16.5 16.5 0 0 1-6.3 6"/>
-      <path d="M254.6 273.7c-1-2.2-2.8-3.2-5.8-3.5-3-.3-5.5.5-8.2 1.9a18.6 18.6 0 0 0-10.8 17 25 25 0 0 0 2 9.5c.9 1.6 3 9 15.3 14a86.1 86.1 0 0 0 25.7 3.9c10.4.4 20 .8 25.6 7.6"/>
+      <path d="M254.6 273.7c-1-2.2-2.8-3.2-5.8-3.5-3-.3-5.5.5-8.2 1.9a18.6 18.6 0 0 0-10.8 17 25 25 0 0 0 2 9.5c.9 1.6 3 9 15.3 14a86.1 86.1 0 0 0 25.7 3.9c10.4.5 20 .8 25.6 7.6"/>
       <path stroke-linecap="round" d="M239.7 275.9c3.3-2.2 9.5-5 15.1-2.2a8 8 0 0 1 4.3 4.4 10 10 0 0 1-1.8 9.5c-.9 1-2.7 2.6-5 2.7-3.8 0-4.7-2.6-4.8-3.2-.4-2.8 1.2-3.9 2-4.2.7-.2 2.8-.1 3.2 1.4.2.5.2 1.3-.2 2"/>
       <path d="M252.7 285.7c.3-1 .2-2.2-.8-3.3a5.1 5.1 0 0 0-6-1c-.7.5-1.6 1-2.4 2.2-.4.4-1 1.1-1.2 1.6-.7 1.1-1 2-1 2.5-2.5 7 1.5 14.4 6.5 17.6 4.4 2.8 8.8 3.6 14.4 4 2.5.3 4 .3 6.5.5h9.6a70.1 70.1 0 0 1 7.2 0c3 .3 5.1.4 7.6.8 1.6.2 3.5.5 5.4 1 .6 0 1.2.2 1.8.4l1.2.3c3.6 1.1 7 2.4 9.8 4.2.8.5 1.8 1 2.5 1.7l1.3 1.2c2 2 4 4 4.4 6.7v1.6c0 1.8-1.4 4.3-5.3 5"/>
       <path d="M298.6 328.4c-1 2.2.2 3.2 1.6 3.4 2.2.3 3.3-1.4 3.5-3a4.4 4.4 0 0 0-4.4-4.7 5.5 5.5 0 0 0-5 3.5 6.9 6.9 0 0 0-.5 2.4 5.8 5.8 0 0 0 1.4 4.1 7.5 7.5 0 0 0 5.4 2.5c4.2.1 7.5-3.8 7.5-7.8 0-7.7-11.4-12-16-13a84 84 0 0 0-17.9-2.4c-3.5-.1-6.2 0-10.1-.5-3.5-.3-5.4-.5-9-1.3a27.2 27.2 0 0 1-12.5-6.4 17 17 0 0 1-4.7-22 14.3 14.3 0 0 1 10.3-6.9c3.8-.5 7 1.1 9 4.8 1 1.8.6 4.8-.1 6.2a6 6 0 0 1-4.8 3c-3.8 0-4.7-2.6-4.8-3.2-.4-2.8 1.2-3.9 2-4.2.7-.2 2.8-.1 3.2 1.4.2.5.2 1.3-.2 2"/>

client/public/images/countries/pe.svg

@@ -216,7 +216,7 @@
   <g stroke="#d4af37" stroke-width=".9">
     <path fill="#fff" d="M367.7 432.4c-1.5.5-2.5 1-9 .5-4.6-.3-10.3-1.1-13.2-1.2-5.6 0-5.6.3-15.5 7.1-7 4.8-16 4.4-22.7 3-4-2-5.8-2.3-5.2-1.3 1.1 1.8 9 4.4 13.4 4.4 7 0 12.2-1.8 20.7-7.1 6.6-4.2 9.5-4.5 18.5-2.5 10.6 2.1 12.2 1.2 20.9-2.7-2.6 0-3.2 0-4 .4 1.4-1.6 1.5-3.2 1.8-4.2.4-.6-.8.2-2.1 1.2l-3.6 2.4z" transform="matrix(.59548 0 0 .58466 141.4 62.9)"/>
     <path fill="#d91023" d="M354 429.8c-4.9-.7-8.2-1.4-11.3-1-3.4.3-5.8 2-9.9 4.5-4 2.7-7.7 4.6-8.1 4.6-.6 0-5.8 1.2-9.8 1.2-1.8 0-5.9-1.3-8.6-2.3-5.7-2.1-7.8 1.4-1.8 3.9a33.4 33.4 0 0 0 15.6 1.8c5-.8 9.6-3 13.4-5.8 7.7-5.6 3.2-3 6.2-4.2 3-1.3 5.9-.9 5.9-.9 4 .2 11.9 1.5 15.9 1.6 7.2-.7 6-.7 8.4-2 .8-.6 3.5-2.3 3.6-2.7.2-.4 1.4-2.7 1.2-2.8-7.5 5.1-11.2 5.1-20.7 4.1z" transform="matrix(.59548 0 0 .58466 141.4 62.9)"/>
-    <path fill="#d91023" d="m341 435.4-7.1 4c-6.2 3.8-12 5.6-18.8 5.6-3 .5-13-3.6-11.5-3.1 1.6 3 4 3.4 9.6 4.5 4 .8 6.6.1 11.1-.8 5-.6 7-3 9-4.3a33.5 33.5 0 0 1 14-5.4c1 0 4.7 2.1 8.9 3 4.1.9 6.1 1.1 10.4.4s8.7-4.2 12.8-6.9c-.6.2-2 .2-4 .3-6 3.5-16 4.8-21.2 2.4-5.4-1.3-10.5-1-13.2.3z" transform="matrix(.59548 0 0 .58466 141.4 62.9)"/>
+    <path fill="#d91023" d="m341 435.4-7.1 4c-6.2 3.8-12 5.6-18.8 5.6-3 .5-13-3.6-11.5-3.1 1.6 3 4 3.4 9.6 4.5 4 .8 6.6.1 11.1-.8 5-.6 7-3 9-4.3a33.5 33.5 0 0 1 14-5.4c1 0 4.7 2.1 8.9 3 4.1.9 6.1 1.1 10.4.5s8.7-4.2 12.8-6.9c-.6.2-2 .2-4 .3-6 3.5-16 4.8-21.2 2.4-5.4-1.3-10.5-1-13.2.3z" transform="matrix(.59548 0 0 .58466 141.4 62.9)"/>
   </g>
   <path fill="#00a854" d="M276.4 176.3a37.7 37.7 0 0 0-17.5 13.2c-1 1.2-1.8 2.2-1.9 2.1 0 0 .4-2.7 1.2-5.7.7-3 1.2-6.1 1.2-6.8 0-1.2-.1-1.1-2 1a41 41 0 0 0-7 13c-.7 2.2-1 4.7-1 9.3l.1 6.3-1.2-4.5c-1.3-4.7-2.6-8-4-9.6-.6-1-.8-1-1.3-.3-1 1.5-.3 7.8 1.4 12.4.1.6-.5-.2-1.4-1.7-1-1.6-2-2.7-2.3-2.6-.6.3-.6 5.3 0 7.4.4 1.4.4 1.4-1.3-.5-2.9-3.3-3.5-3.6-3.5-1.3 0 .9.3 2.4.7 3.4l.8 2-1.6.4c-2.3.4-3 1.1-3 3 0 2 1.4 6.8 2 7.2.9.5 1.1 0 1.8-3l.6-2.6 1.9 2.5a76.7 76.7 0 0 1 8.8 17.7c2.2 6.4 2.3 7.7.3 3.7a72 72 0 0 0-3.2-5.2c-2-2.8-12.6-13.9-13.3-13.9-.8 0 0 3.5 1.3 6.4.7 1.4 2.7 4.2 4.4 6.2l2.9 3.6c-.2 0-1.4-.8-2.7-1.7-2.6-2-5.3-3.5-5.6-3.2-.1.1.9 2.3 2.3 4.8l2.4 4.6-1.6-.3a6 6 0 0 0-2.8.3c-1 .6-1 1.1-1 3.5 0 3.3.8 6.7 1.5 6.7.8 0 2-3.2 2-4.9 0-1.3 0-1.3 2.6 1.1 3.7 3.6 8.6 9.6 13.4 16.6l4 6-4.7-3.6c-4.6-3.3-14-8.6-15.5-8.6-.4 0-.8.2-.8.5 0 .2 3 3.3 6.7 6.8l6.7 6.3-3.5-1.1a71 71 0 0 0-5.3-1.5c-1.7-.4-1.7-.3 2.2 3.3a68 68 0 0 0 8.7 6.7c2.6 1.6 4.3 2.8 3.7 2.7a35.1 35.1 0 0 0-11.5-1.9c0 .7 3.5 3.5 6 4.8 1.4.7 5 2 7.8 3 6 2.1 9.6 4 12.6 6.6l2 1.9-3.5-1.6c-4.1-1.8-15.3-5.5-16.5-5.5s3.8 5 8.8 8.7a80.2 80.2 0 0 0 19.5 9.7c5.2 1.7 9.6 2.6 18 3.6 3.6.5 7 1 7.8 1.3.6.3 5 1 10 1.5a99.7 99.7 0 0 1 30.7 7.2c1.7.8 3.5 1.1 7.2 1.3 5.5.3 5.8.1 4.2-2.9-1.3-2.5-3.7-3.9-8.7-4.8l-9.2-1.8a726.1 726.1 0 0 0-29-5c-14-2.3-20.1-4.7-26.7-10.7A43.3 43.3 0 0 1 269 263c.4-3 .6-5.5.5-5.6-.5-.4-3.7 6.3-4.6 9.4l-1 3.3.3-5.4c.3-8.3 3.5-16.1 8.2-20.6 1-1 1.8-2 1.8-2.2 0-.2-1 0-2.1.2-1.6.4-3 1.3-5 3.2l-2.6 2.7 1.3-2.4a27 27 0 0 1 8.3-9.6l2.9-1.9-1.7-.1c-3.4-.4-9.5 4-12.9 9.3-2 3-2 2.1 0-2.6a41.8 41.8 0 0 1 8-12.5c1.9-1.8 2.2-2.5 1.5-2.5-2.7 0-7.2 3.5-11 8.4-1 1.5-1 1.4.2-1.5a40 40 0 0 1 6.1-9.7c1.6-1.9 1.2-2.1-1.5-1a26.4 26.4 0 0 0-8.6 9.7c-1 2-1.8 3-1.7 2.5a61 61 0 0 0 .8-3.3 46.4 46.4 0 0 1 12.8-22.7c2.4-2.2 3-3.2 2.3-3.2-2 0-6.5 2.6-9.5 5.5-3.1 3-3.2 3-2 .9a57 57 0 0 1 18.3-18.6l4.3-3c0-.8-7.8 1.6-11.3 3.3a42.3 42.3 0 0 0-4.4 3.2c-2.5 2-2.7 2.1-1.8.8 1.7-2.4 7.6-7.7 10-8.9 1.7-.9 2-1.2 1-1.3-2.3-.4-8.9 3-14 7.4l-2.2 1.9 1.2-2a48 48 0 0 1 14.7-15.6 60.5 60.5 0 0 1 4.4-2.6c.3-.1.5-.4.4-.5-.2-.2-2 .2-4 1zm77 145a6 6 0 0 1 1.4 1.9c0 .2-1.1.4-2.5.4-2.5 0-2.6 0-2.6-1.4 0-2.6 1.6-2.9 3.8-.8z"/>
   <path fill="#9eab05" d="M350.3 320.5c-1.3 1.2-1 3 .3 3.4 2.2.6 5 .4 5-.4s-3.3-3.8-4.1-3.8c-.3 0-.8.3-1.2.8z"/>

client/public/images/favicons/site.webmanifest

@@ -0,0 +1,16 @@
+{
+    "name": "DCS Olympus",
+    "short_name": "DCS Olympus",
+    "icons": [{
+        "src": "/images/favicons/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+    }, {
+        "src": "/images/favicons/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+    }],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

client/public/stylesheets/layout/layout.css

@@ -13,35 +13,10 @@
 	top: 10px;
 	z-index: 99999;
 	column-gap: 10px;
-}
-
-#primary-toolbar {
-	align-items: center;
-	display: flex;
-}
-
-#command-mode-toolbar {
-	align-items: center;
-	display: flex;
-}
-
-#app-icon>.ol-select-options {
-	width: fit-content;
-}
-
-#toolbar-summary {
-	background-image: url("/images/icon-round.png");
-	background-position: 20px 22px;
-	background-repeat: no-repeat;
-	background-size: 45px 45px;
-	display: flex;
-	flex-direction: column;
-	padding: 20px;
-	text-indent: 60px;
-}
-
-#toolbar-summary {
-	white-space: nowrap;
+	row-gap: 10px;
+	margin-right: 320px;
+	height: fit-content;
+	flex-wrap: wrap;
 }
 
 #connection-status-panel {
@@ -49,16 +24,7 @@
 	font-size: 12px;
 	position: absolute;
 	right: 10px;
-	width: 180px;
-	z-index: 9999;
-}
-
-#server-status-panel {
-	bottom: 20px;
-	font-size: 12px;
-	position: absolute;
-	right: 200px;
-	width: 300px;
+	width: 190px;
 	z-index: 9999;
 }
 
@@ -70,27 +36,30 @@
 	position: absolute;
 	right: 10px;
 	row-gap: 10px;
-	width: 180px;
+	width: 190px;
 	z-index: 9999;
 }
 
 #unit-control-panel {
 	height: fit-content;
+	width: fit-content;
 	left: 10px;
 	position: absolute;
-	top: 80px;
-	width: 320px;
 	z-index: 9999;
 }
 
 #unit-info-panel {
 	bottom: 20px;
 	font-size: 12px;
-	left: 10px;
 	position: absolute;
 	width: fit-content;
 	z-index: 9999;
 	padding: 24px 30px;
+	display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+	right: 210px;
+	height: 180px;
 }
 
 #info-popup {
@@ -100,15 +69,25 @@
     top: 100px;
     left: 50%;
     translate: -50% 0%;
-    z-index: 9999;
+    z-index: 9999999999;
 	display: flex;
 	align-items: center;
 }
 
+#slow-delete-popup {
+	align-self: center;
+	display:flex;
+	justify-self: center;
+    position: absolute;
+    width: fit-content;
+    height: fit-content;
+    z-index: 9999999999;
+}
+
 #log-panel {
 	position: absolute;
 	right: 0px;
-	top: 220px;
+	top: 170px;
 	width: 310px;
 	height: fit-content;
 	z-index: 9990;

client/public/stylesheets/leaflet/leaflet-gesture-handling.css

@@ -0,0 +1,47 @@
+@-webkit-keyframes leaflet-gestures-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes leaflet-gestures-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+.leaflet-container:after {
+  -webkit-animation: leaflet-gestures-fadein 0.8s backwards;
+          animation: leaflet-gestures-fadein 0.8s backwards;
+  color: #fff;
+  font-family: "Roboto", Arial, sans-serif;
+  font-size: 22px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 461;
+  pointer-events: none; }
+
+.leaflet-gesture-handling-touch-warning:after,
+.leaflet-gesture-handling-scroll-warning:after {
+  -webkit-animation: leaflet-gestures-fadein 0.8s forwards;
+          animation: leaflet-gestures-fadein 0.8s forwards; }
+
+.leaflet-gesture-handling-touch-warning:after {
+  content: attr(data-gesture-handling-touch-content); }
+
+.leaflet-gesture-handling-scroll-warning:after {
+  content: attr(data-gesture-handling-scroll-content); }

client/public/stylesheets/markers/units.css

@@ -97,6 +97,22 @@
     position: absolute;
 }
 
+[data-object|="unit-groundunit"] .unit-short-label {
+    transform: translateY(7px);
+}
+
+/*** Health indicator ***/
+[data-object|="unit"] .unit-health {
+    background: white;
+    border: var(--unit-health-border-width) solid var(--secondary-dark-steel);
+    border-radius: var(--border-radius-sm);
+    display: none;
+    height: var(--unit-health-height);
+    position: absolute;
+    translate: var(--unit-health-x) var(--unit-health-y);
+    width: var(--unit-health-width);
+}
+
 /*** Fuel indicator ***/
 [data-object|="unit"] .unit-fuel {
     background: white;
@@ -109,7 +125,8 @@
     width: var(--unit-fuel-width);
 }
 
-[data-object|="unit"] .unit-fuel-level {
+[data-object|="unit"] .unit-fuel-level,
+[data-object|="unit"] .unit-health-level {
     background-color: var(--secondary-light-grey);
     height: 100%;
     width: 100%;
@@ -178,6 +195,7 @@
 
 /*** Common ***/
 [data-object|="unit"]:hover .unit-ammo,
+[data-object|="unit"]:hover .unit-health ,
 [data-object|="unit"]:hover .unit-fuel {
     display: flex;
 }
@@ -188,13 +206,14 @@
     }
 }
 
-[data-object|="unit"][data-has-low-fuel] .unit-fuel {
+[data-object|="unit"][data-has-low-fuel] .unit-fuel, [data-object|="unit"][data-has-low-health] .unit-health {
     animation: pulse 1.5s linear infinite;
 }
 
 [data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
 [data-object|="unit"][data-is-selected] .unit-ammo,
 [data-object|="unit"][data-is-selected] .unit-fuel,
+[data-object|="unit"][data-is-selected] .unit-health,
 [data-object|="unit"][data-is-selected] .unit-selected-spotlight {
     display: flex;
 }
@@ -211,6 +230,7 @@
 }
 
 [data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
+[data-object|="unit"][data-coalition="blue"] .unit-health-level,
 [data-object|="unit"][data-coalition="blue"][data-has-fox-1] .unit-ammo>div:nth-child(1),
 [data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo>div:nth-child(2),
 [data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo>div:nth-child(3),
@@ -227,6 +247,7 @@
 }
 
 [data-object|="unit"][data-coalition="red"] .unit-fuel-level,
+[data-object|="unit"][data-coalition="red"] .unit-health-level,
 [data-object|="unit"][data-coalition="red"][data-has-fox-1] .unit-ammo>div:nth-child(1),
 [data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo>div:nth-child(2),
 [data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo>div:nth-child(3),
@@ -260,14 +281,15 @@
     background-image: url("/resources/theme/images/states/idle.svg");
 }
 
-[data-object*="groundunit"][data-state="idle"] .unit-state {
+[data-object*="groundunit"][data-state="idle"] .unit-state,
+[data-object*="navyunit"][data-state="idle"] .unit-state {
     background-image: url("");  /* To avoid clutter, dont show the idle state for non flying units */
 }
 
 [data-object|="unit"][data-state="attack"] .unit-state,
-[data-object|="unit"][data-state="bombing point"] .unit-state,
-[data-object|="unit"][data-state="carpet bombing"] .unit-state,
-[data-object|="unit"][data-state="firing at area"] .unit-state {
+[data-object|="unit"][data-state="bomb-point"] .unit-state,
+[data-object|="unit"][data-state="carpet-bombing"] .unit-state,
+[data-object|="unit"][data-state="fire-at-area"] .unit-state {
     background-image: url("/resources/theme/images/states/attack.svg");
 }
 
@@ -287,10 +309,40 @@
     background-image: url("/resources/theme/images/states/dcs.svg");
 }
 
+[data-object|="unit"][data-state="land-at-point"] .unit-state {
+    background-image: url("/resources/theme/images/states/land-at-point.svg");
+}
+
 [data-object|="unit"][data-state="no-task"] .unit-state {
     background-image: url("/resources/theme/images/states/no-task.svg");
 }
 
+[data-object|="unit"][data-state="off"] .unit-state {
+    background-image: url("/resources/theme/images/states/off.svg");
+}
+
+[data-object|="unit"][data-state="tanker"] .unit-state {
+    background-image: url("/resources/theme/images/states/tanker.svg");
+}
+
+[data-object|="unit"][data-state="AWACS"] .unit-state {
+    background-image: url("/resources/theme/images/states/awacs.svg");
+}
+
+[data-object|="unit"] .unit-health::before {
+    background-image: url("/resources/theme/images/icons/health.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    content: " ";
+    height: 6px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    translate: -10px -2px;
+    width: 6px;
+}
+
+
 /*** Dead unit ***/
 [data-object|="unit"][data-is-dead] .unit-selected-spotlight,
 [data-object|="unit"][data-is-dead] .unit-short-label,
@@ -299,6 +351,7 @@
 [data-object|="unit"][data-is-dead] .unit-hotgroup-id,
 [data-object|="unit"][data-is-dead] .unit-state,
 [data-object|="unit"][data-is-dead] .unit-fuel,
+[data-object|="unit"][data-is-dead] .unit-health,
 [data-object|="unit"][data-is-dead] .unit-ammo,
 [data-object|="unit"][data-is-dead]:hover .unit-fuel,
 [data-object|="unit"][data-is-dead]:hover .unit-ammo {

client/public/stylesheets/olympus.css

@@ -7,9 +7,12 @@
 @import url("panels/unitcontrol.css");
 @import url("panels/unitinfo.css");
 @import url("panels/logpanel.css");
+@import url("panels/unitlist.css");
 
 @import url("other/contextmenus.css");
 @import url("other/popup.css");
+@import url("other/toolbar.css");
+
 
 @import url("markers/airbase.css");
 @import url("markers/bullseye.css");

client/public/stylesheets/other/contextmenus.css

@@ -37,7 +37,8 @@
     width: 100%;
 }
 
-.contextmenu-advanced-options {
+.contextmenu-advanced-options,
+.contextmenu-metadata {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -46,7 +47,8 @@
     width: 100%;
 }
 
-.contextmenu-advanced-options-toggle {
+.contextmenu-advanced-options-toggle,
+.contextmenu-metadata-toggle {
     display: flex;
     align-content: center;
     text-align: left;
@@ -56,20 +58,45 @@
     cursor: pointer;
 }
 
-.contextmenu-advanced-options-toggle:after {
+.contextmenu-advanced-options-toggle:after,
+.contextmenu-metadata-toggle:after {
     content: url(/resources/theme/images/icons/chevron-down.svg);
     margin: auto;
 }
 
-.contextmenu-advanced-options-toggle div:first-child {
+.contextmenu-advanced-options-toggle div:first-child,
+.contextmenu-metadata-toggle div:first-child {
     width: fit-content;
     white-space: nowrap;
 }
 
-.contextmenu-advanced-options>* {
+.contextmenu-advanced-options>*,
+.contextmenu-metadata>* {
     width: 100%;
 }
 
+.contextmenu-metadata {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0px 10px 10px 10px;
+}
+
+.contextmenu-metadata>div:nth-child(1) {
+    margin-bottom: 5px;
+    width: 100%;
+}
+
+.contextmenu-metadata>div:nth-child(2) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 5px;
+    column-gap: 5px;
+    width: 100%;
+    margin-top: 10px;
+}
+
 .unit-spawn-menu {
     height: fit-content;
 }
@@ -97,6 +124,28 @@
     max-height: 300px;
 }
 
+.ol-tag {
+    background-color: #FFFFFF11;
+    color: #FFFFFFDD;
+    border: 1px solid #FFFFFF55;
+    font-weight: normal;
+    padding: 2px 5px;
+}
+
+/*
+.ol-tag-CA {
+    background-color: #FF000022;
+}
+
+.ol-tag-Radar {
+    background-color: #00FF0022;
+}
+
+.ol-tag-IR {
+    background-color: #0000FF22;
+} 
+*/
+
 .unit-loadout-list {
     min-width: 0;
 }
@@ -198,13 +247,14 @@
     column-gap: 5px;
 }
 
-.unit-label-count-container>div:nth-child(1) {
-    width: 100%;
-    min-width: 0;
+.unit-label-count-container button {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
 }
 
-.unit-label-count-container>div:nth-child(2) {
-    font-size: large;
+.unit-label-count-container button>*:nth-child(1) {
+    margin-left: auto;
 }
 
 .unit-loadout-preview {
@@ -221,14 +271,14 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 5px;
 }
 
 .unit-image {
     filter: invert(100%);
     width: 25%;
-    margin-bottom: 10px;
-    margin-top: 10px;
     aspect-ratio: 1/1;
+    margin: 5px 0px;
 }
 
 #smoke-spawn-menu {
@@ -326,9 +376,9 @@
 #unit-contextmenu div:before {
     display: inline-block;
     filter: invert(100%);
-    height: 16px;
+    height: 20px;
     margin-right: 15px;
-    width: 16px;
+    width: 20px;
 }
 
 .ol-select>.ol-select-options>div button.country-dropdown-element {
@@ -369,10 +419,34 @@
     content: url("/resources/theme/images/icons/crosshairs-solid.svg");
 }
 
+#simulate-fire-fight::before {
+    content: url("/resources/theme/images/icons/crosshairs-solid.svg");
+}
+
 #follow::before {
     content: url("/resources/theme/images/icons/follow.svg");
 }
 
+#scenic-aaa::before {
+    content: url("/resources/theme/images/icons/scenic.svg");
+}
+
+#miss-aaa::before {
+    content: url("/resources/theme/images/icons/miss.svg");
+}
+
+#group-ground::before {
+    content: url("/resources/theme/images/icons/group-ground.svg");
+}
+
+#group-navy::before {
+    content: url("/resources/theme/images/icons/group-navy.svg");
+}
+
+#land-at-point::before {
+    content: url("/resources/theme/images/icons/land-at-point.svg");
+}
+
 #trail::before {
     content: url("/resources/theme/images/icons/trail.svg");
 }

client/public/stylesheets/other/popup.css

@@ -1,8 +1,28 @@
+.ol-popup {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
 .ol-popup > div {
+    background-color: var(--background-steel);
+    border-radius: var(--border-radius-md);
+    box-shadow: 0px 2px 5px #000A;
+    color: white;
+    font-size: 12px;
+    height: fit-content;
+    width: fit-content;
+    padding-top: 5px;
+    padding-bottom: 5px;
     padding-left: 15px;
     padding-right: 15px;
 }
 
+.ol-popup-stack {
+    margin-bottom: -20px;
+    z-index: -1;
+}
+
 .visible {
     opacity: 1;
 }

client/public/stylesheets/other/toolbar.css

@@ -0,0 +1,74 @@
+
+#primary-toolbar {
+	align-items: center;
+	display: flex;
+	height: fit-content;
+}
+
+#command-mode-toolbar {
+	align-items: center;
+	display: flex;
+}
+
+#app-icon>.ol-select-options {
+	width: fit-content;
+}
+
+#toolbar-summary {
+	background-image: url("/images/icon-round.png");
+	background-position: 20px 22px;
+	background-repeat: no-repeat;
+	background-size: 45px 45px;
+	display: flex;
+	flex-direction: column;
+	padding: 20px;
+	text-indent: 60px;
+}
+
+#toolbar-summary {
+	white-space: nowrap;
+}
+
+#toolbar-container>*:nth-child(2)>svg {
+    display: none;
+    width: 0px;
+    height: 0px;
+}
+
+#toolbar-container>*:nth-child(3)>svg {
+    display: none;
+}
+
+@media (max-width: 1145px) {
+	#toolbar-container {
+		flex-direction: column;
+		align-items: start;
+	}
+
+	#toolbar-container>*:nth-child(1):not(:hover) {
+		width: fit-content;
+		height: fit-content;
+	}
+
+	#toolbar-container>*:nth-child(1):not(:hover)>*:not(:first-child) {
+		display: none;
+	}
+
+    #toolbar-container>*:not(:first-child):not(:hover) {
+		height: 52px;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 1/1;
+    }
+
+	#toolbar-container>*:not(:first-child):not(:hover)>svg {
+        display: block;
+		width: 24px;
+		height: 24px;
+        filter: invert();
+	}
+
+	#toolbar-container>*:not(:first-child):not(:hover)>*:not(:first-child) {
+		display: none;
+	}
+}

client/public/stylesheets/panels/connectionstatus.css

@@ -1,8 +1,15 @@
-#connection-status-panel dt::before {
+#connection-status-panel {
+	align-items: center;
+	display:flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+#connection-status-panel #connection-status-message::before {
 	content: "No connection";
 }
 
-#connection-status-panel dd::after {
+#connection-status-light {
 	border-radius: 50%;
 	background: red;
 	content: " ";
@@ -10,10 +17,48 @@
 	width: 12px;
 }
 
-#connection-status-panel[data-is-connected] dt::before {
-	content: "Connected";
+#connection-status-panel[data-is-connected] #connection-status-message::before {
+	content: "";
 }
 
-#connection-status-panel[data-is-connected] dd::after {
+#connection-status-panel .time-display {
+	cursor:pointer;
+	display:none;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+#connection-status-panel[data-is-connected] .mission-elapsed-time,
+#connection-status-panel[data-is-connected]:not([data-mission-time]) .mission-time {
+	display:none;
+}
+
+#connection-status-panel[data-is-connected]:not([data-mission-time]) .mission-elapsed-time,
+#connection-status-panel[data-is-connected][data-mission-time] .mission-time {
+	display:block;
+}
+
+#connection-status-panel[data-is-connected] #connection-status-light {
 	background: var(--accent-green);
+}
+
+#connection-status-panel[data-is-paused] #connection-status-message::before {
+	content: "Server paused";
+}
+
+#connection-status-panel[data-is-paused] #connection-status-light {
+	animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+#connection-status-panel[data-is-paused] #connection-status-light {
+	background: var(--accent-amber);
 }

client/public/stylesheets/panels/logpanel.css

@@ -26,3 +26,55 @@
 #log-panel.open>div:nth-child(2) {
 	display: block;
 }
+
+
+#log-panel-header-right {
+    align-items: center;
+    column-gap: 16px;
+    display:flex;
+    flex-flow: row nowrap;
+}
+
+#server-status-panel abbr {
+	text-decoration: none;
+}
+
+#server-status-panel dl {
+    column-gap: 4px;
+    display:flex;
+    flex-direction: row;
+    width:fit-content;
+}
+
+#server-status-panel dl > * {
+    margin:0;
+    width:fit-content;
+}
+
+#server-status-panel dd {
+    font-weight: bold;
+}
+
+.fps-low {
+    color: red;
+}
+
+.fps-medium {
+    color: orange;
+}
+
+.fps-high {
+    color: lightgreen;
+}
+
+.load-low {
+    color: lightgreen;
+}
+
+.load-medium {
+    color: orange;
+}
+
+.load-high {
+    color: red;
+}

client/public/stylesheets/panels/mouseinfo.css

@@ -1,9 +1,116 @@
-#mouse-info-panel>* {
+#mouse-info-panel .mouse-tool {
 	background-color: var(--background-grey);
 	border-radius: var(--border-radius-sm);
+	display:flex;
+	flex-flow:column wrap;
+	row-gap: 4px;
 	padding: 6px;
 }
 
+#mouse-info-panel .mouse-tool .mouse-tool-item {
+	align-items: center;
+	display:flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+}
+
+
+#mouse-info-panel svg {
+	padding: 3px;
+	height: 100%;
+	width: 100%;
+}
+
+#mouse-info-panel svg > * {
+	fill: black;
+	stroke: black;
+}
+
+#mouse-info-panel .mouse-tool .mouse-tool-item > * {
+	width:fit-content;
+}
+
+#mouse-info-panel .mouse-tool .mouse-tool-item > *:last-child {
+	text-align: right;
+	width:100%;
+}
+
+#mouse-info-panel .svg-icon, #mouse-info-panel .mouse-tool .mouse-tool-item :first-child {
+	align-items: center;
+	background-color: white;
+	border-radius: var(--border-radius-sm);
+	color: var(--background-steel);
+	display: flex;
+	font-size: 15.6px;
+	font-weight: bolder;
+	height: 22px;
+	justify-content: center;
+	text-transform: uppercase;
+	width: 22px;
+}
+
+#mouse-info-panel .mouse-tool .mouse-tool-item [data-label]::after {
+	border-radius: var(--border-radius-sm);
+	content: attr(data-label);
+}
+
+
+#mouse-info-panel .mouse-tool .mouse-tool-item :last-child {
+	color: var(--background-offwhite);
+	font-weight: bold;
+	font-size: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width:fit-content;
+}
+
+
+/*  Bullseye info  */
+
+#mouse-info-panel .mouse-tool .mouse-tool-item [data-label][data-coalition="blue"] {
+	background-color: var(--primary-blue);
+}
+
+#mouse-info-panel .mouse-tool .mouse-tool-item [data-label][data-coalition="red"] {
+	background-color: var(--primary-red);
+}
+
+.br-info::after {
+    content: attr(data-bearing) '\00B0  / ' attr(data-distance) " " attr(data-distance-units);
+}
+
+.br-info[data-coalition="blue"]::after {
+    color: var(--primary-blue)
+}
+
+.br-info[data-coalition="red"]::after {
+    color: var(--primary-red)
+}
+
+.br-info[data-message]::after {
+    content: attr(data-message);
+}
+
+
+/*  Coordinates  */
+#coordinates-tool .elevation::after {
+	content: attr(data-value)
+}
+
+#coordinates-tool[data-location-system] [data-location-system] {
+	cursor:pointer;
+	display:none;
+}
+
+#coordinates-tool[data-location-system="LatLng"] [data-location-system="LatLng"],
+#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"],
+#coordinates-tool[data-location-system="UTM"] [data-location-system="UTM"] {
+	display:flex;
+}
+
+
+/* 
 #mouse-info-panel dl {
 	margin-bottom: 4px;
 	row-gap: 5px;
@@ -14,7 +121,7 @@
 	width: 30%;
 }
 
-#mouse-info-panel dt::after {
+#mouse-info-panel dt::after, #coordinates-tool [data-label] {
 	align-items: center;
 	background-color: white;
 	border-radius: var(--border-radius-sm);
@@ -30,6 +137,11 @@
 	width: 16px;
 }
 
+#coordinates-tool [data-label] {
+	height:24px;
+	width:24px;
+}
+
 #mouse-info-panel #measuring-tool dt {
 	height: 24px;
 	width: 24px;
@@ -48,7 +160,7 @@
 	stroke: black;
 }
 
-#mouse-info-panel dt[data-label]::after {
+#mouse-info-panel [data-label]::after {
 	content: attr(data-label);
 }
 
@@ -60,7 +172,7 @@
 	background-color: var(--primary-red);
 }
 
-#mouse-info-panel dt[data-tooltip]:hover::before {
+#mouse-info-panel [data-tooltip]:hover::before {
 	background-color: var(--background-grey);
 	border-radius: 5px;
 	content: attr(data-tooltip);
@@ -72,8 +184,30 @@
 	white-space: nowrap;
 }
 
-#mouse-info-panel dd {
-	width: 70%;
+#coordinates-tool[data-location-system] [data-location-system] {
+	display:none;
+	flex-direction: column;
+}
+
+#coordinates-tool[data-location-system="LatLng"] [data-location-system="LatLng"],
+#coordinates-tool[data-location-system="MGRS"] [data-location-system="MGRS"] {
+	display:flex;
+}
+
+#coordinates-tool > * > * {
+	align-items: center;
+	display:flex;
+	flex-flow: row nowrap;
+}
+
+#coordinates-tool > * > * > * {
+	display:table-cell;
+	width:fit-content;
+}
+
+#coordinates-tool > * > * > :last-child {
+	text-align: right;
+	width:100%;
 }
 
 .br-info::after {
@@ -106,4 +240,14 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	color: var(--background-offwhite);
-}
+}
+
+.elevation::after {
+    content: attr(data-value);
+	font-weight: bold;
+	font-size: 13px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--background-offwhite);
+} */

client/public/stylesheets/panels/serverstatus.css

@@ -5,13 +5,24 @@
     column-gap: 10px;
 }
 
-#server-status-panel .ol-data-grid {
-    width: 100%;
+
+#log-panel-header-right {
+    align-items: center;
+    column-gap: 16px;
+    display:flex;
+    flex-flow: row nowrap;
 }
 
-#server-status-panel .ol-data-grid:first-of-type {
-    border-right: 1px solid gray;
-    padding-right: 10px;
+#server-status-panel dl {
+    column-gap: 4px;
+    display:flex;
+    flex-direction: row;
+    width:fit-content;
+}
+
+#server-status-panel dl > * {
+    margin:0;
+    width:fit-content;
 }
 
 #server-status-panel dd {

client/public/stylesheets/panels/unitcontrol.css

@@ -3,11 +3,58 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 #unit-control-panel {
+	display: flex;
+	flex-direction: row;
+	column-gap: 10px;
+	row-gap: 10px;
+}
+
+#unit-control-panel>div:nth-child(2),
+#unit-controls {
 	display: flex;
 	flex-direction: column;
 	row-gap: 10px;
 }
 
+#unit-controls {
+	padding-right: 10px;
+}
+
+#unit-control-panel>div:nth-child(2) {
+	width: 330px;
+}
+
+#unit-control-panel>*:nth-child(1) {
+	display: none;
+	padding: 14px;
+}
+
+@media (max-width: 1145px) {
+	#unit-control-panel>*:nth-child(1) {
+		display: flex;
+	}
+
+	#unit-control-panel>*:nth-child(1) svg {
+		display: flex;
+		width: 24px;
+		height: 24px;
+		filter: invert(100%);
+	}
+
+	#unit-control-panel:hover>*:nth-child(1) {
+		display: none;
+	}
+
+	#unit-control-panel:not(:hover) {
+		width: fit-content;
+	}
+
+    #unit-control-panel:not(:hover)>*:nth-child(2),
+	#unit-control-panel:not(:hover)>*:nth-child(3) {
+		display: none;
+	}
+}
+
 #unit-control-panel h3 {
 	margin-bottom: 8px;
 }
@@ -91,8 +138,8 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	justify-content: space-between;
 }
 
-#advanced-settings-dialog h4 {
-	white-space: nowrap;
+#advanced-settings-dialog>.ol-dialog-content>div input[type="number"] {
+    width: 60px;
 }
 
 #advanced-settings-dialog hr {
@@ -102,6 +149,12 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 
 #advanced-settings-dialog .ol-text-input input {
 	height: 40px;
+	width: fit-content;
+}
+
+#advanced-settings-dialog h4 {
+	width: fit-content;
+	text-wrap: nowrap;
 }
 
 #general-settings-grid {
@@ -160,20 +213,23 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 
 #unit-control-panel .switch-control {
 	align-items: center;
-	display: grid;
-	grid-template-columns: 1.35fr 0.65fr;
-}
-
-#unit-control-panel .switch-control>*:nth-child(2) {
-	justify-self: end;
-}
-
-#unit-control-panel .switch-control>*:nth-child(3) {
-	color: var(--secondary-semitransparent-white);
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
 }
 
 #unit-control-panel .switch-control h4 {
 	margin: 0px;
+	display: flex;
+	align-items: center;
+}
+
+#unit-control-panel .switch-control h4 img {
+	height: 15px;
+	margin-left: 10px;
+	cursor: pointer;
+	filter: invert(100%);
+	opacity: 80%;
 }
 
 #unit-control-panel .switch-control .ol-switch {
@@ -197,19 +253,49 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	content: "NO";
 }
 
+#operate-as-switch[data-value="true"] .ol-switch-fill {
+	background-color: var(--accent-light-blue);
+}
+
+#operate-as-switch[data-value="false"] .ol-switch-fill {
+	background-color: var(--primary-red);
+}
+
+#operate-as-switch[data-value="true"]>.ol-switch-fill::before {
+	content: "BLUE" !important;
+}
+
+#operate-as-switch[data-value="false"]>.ol-switch-fill::before {
+	content: "RED" !important;
+}
+
 #advanced-settings-div {
+	position: relative;
 	column-gap: 5px;
 	display: flex;
+	height: fit-content;
 }
 
 #advanced-settings-div>*:nth-child(2) {
 	margin-left: auto;
 }
 
-#advanced-settings-div button {
+#advanced-settings-div>button {
 	height: 40px;
 }
 
+#delete-options button {
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+}
+
+#delete-options button svg {
+	margin-right: 10px;
+	width: 18px;
+	max-height: 18px;
+}
+
 /* Element visibility control */
 #unit-control-panel:not([data-show-categories-tooltip]) #categories-tooltip,
 #unit-control-panel:not([data-show-speed-slider]) #speed-slider,
@@ -217,14 +303,18 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 #unit-control-panel:not([data-show-roe]) #roe,
 #unit-control-panel:not([data-show-threat]) #threat,
 #unit-control-panel:not([data-show-emissions-countermeasures]) #emissions-countermeasures,
+#unit-control-panel:not([data-show-shots-scatter]) #shots-scatter,
+#unit-control-panel:not([data-show-shots-intensity]) #shots-intensity,
+#unit-control-panel:not([data-show-tanker-button]) #tanker-on,
+#unit-control-panel:not([data-show-AWACS-button]) #AWACS-on,
 #unit-control-panel:not([data-show-on-off]) #ai-on-off,
 #unit-control-panel:not([data-show-follow-roads]) #follow-roads,
+#unit-control-panel:not([data-show-operate-as]) #operate-as,
 #unit-control-panel:not([data-show-advanced-settings-button]) #advanced-settings-button,
 #advanced-settings-dialog:not([data-show-settings]) #general-settings,
 #advanced-settings-dialog:not([data-show-tasking]) #tasking,
-#advanced-settings-dialog:not([data-show-tanker]) #tanker-checkbox,
-#advanced-settings-dialog:not([data-show-AWACS]) #AWACS-checkbox,
 #advanced-settings-dialog:not([data-show-TACAN]) #TACAN-options,
-#advanced-settings-dialog:not([data-show-radio]) #radio-options {
+#advanced-settings-dialog:not([data-show-radio]) #radio-options,
+#advanced-settings-dialog:not([data-show-air-unit-checkboxes]) .air-unit-checkbox {
 	display: none;
-}
+}

client/public/stylesheets/panels/unitinfo.css

@@ -1,15 +1,55 @@
 #unit-info-panel>* {
 	position: relative;
-	min-height: 100px;
 	bottom: 0px;
 }
 
+#unit-info-panel>*:nth-child(1) {
+	display: flex;
+	width: 24px;
+	height: 24px;
+	margin: 6px;
+	filter: invert(100%);
+}
+
+#unit-info-panel:hover>*:nth-child(1) {
+	display: none;
+}
+
+#unit-info-panel:not(:hover) {
+	width: fit-content;
+	height: fit-content;
+	padding: 10px;
+	margin: 0px;
+}
+
+#unit-info-panel:not(:hover)>*:not(:first-child) {
+	display: none;
+}
+ 
+#unit-info-panel>.panel-section {
+	border-right: 1px solid #555;
+	padding: 0 30px;
+}
+
+#unit-info-panel>.panel-section:first-of-type {
+	padding-left: 0px;
+}
+
+#unit-info-panel>.panel-section:last-of-type{
+	padding-right: 0px;
+}
+
+#unit-info-panel>.panel-section:last-of-type {
+	border-right-width: 0;
+}
+
 #general {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	row-gap: 4px;
 	position: relative;
+	width: 300px;
 }
 
 #unit-label {
@@ -24,6 +64,10 @@
 #unit-name {
 	margin-bottom: 4px;
 	padding: 0px 0;
+	width: 100%;
+	text-overflow: ellipsis;
+	text-wrap: nowrap;
+	overflow: hidden;
 }
 
 #current-task {
@@ -48,20 +92,24 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	width: 300px;
 }
 
 #loadout-silhouette {
 	filter: invert(100%);
-	height: 100px;
+	height: 75px;
 	margin-right: 25px;
-	width: 100px;
+	width: 75px;
 }
 
 #loadout-items {
 	align-self: center;
+	column-gap: 8px;
 	display: flex;
 	flex-flow: column nowrap;
-	row-gap: 8px;
+	height: 100px;
+	row-gap: 6px;
+	padding-right: 10px;
 }
 
 #loadout-items>* {
@@ -79,7 +127,7 @@
 	display: flex;
 	font-size: 11px;
 	font-weight: bold;
-	padding: 4px 6px;
+	padding: 3px 4px;
 }
 
 #loadout-items>*::after {
@@ -94,7 +142,7 @@
 #fuel-percentage {
 	align-items: center;
 	display: flex;
-	margin-top: auto;
+	margin-top: 8px;
 }
 
 #fuel-percentage::before {

client/public/stylesheets/panels/unitlist.css

@@ -0,0 +1,92 @@
+#unit-list-panel {
+    bottom:20px;
+    display:flex;
+    flex-direction: column;
+    justify-self:center;
+    position: absolute;
+    z-index:999;
+}
+
+#unit-list-panel h3 {
+    margin-bottom:4px;
+}
+
+#unit-list-panel-content {
+    display:flex;
+    flex-flow: column nowrap;
+    max-height: 200px;
+    row-gap: 4px;
+}
+
+.unit-list-unit {
+    border-radius: var( --border-radius-sm );
+    column-gap: 2px;
+    display:flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+
+
+.unit-list-unit:nth-of-type(even) {
+    background:#ffffff10;
+    overflow:visible;
+}
+
+.unit-list-unit.headers {
+    margin-bottom:3px;
+    margin-right:10px;
+    overflow: hidden;
+}
+
+.unit-list-unit.headers [data-sort-field] {
+    cursor:pointer;
+}
+
+.unit-list-unit.headers > * {
+    background-color: var( --background-grey );
+    text-align: center;
+}
+
+.unit-list-unit > * {
+    font-size:13px;
+    overflow: hidden;
+    padding:2px;
+    width:80px;
+}
+
+.unit-list-unit :first-child {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width:150px;
+}
+
+.unit-list-unit :first-child:hover {
+    overflow:visible;
+}
+
+.unit-list-unit :first-child:hover span {
+    position:relative;
+    z-index:9999;
+}
+
+.unit-list-unit :first-child:hover span:hover {
+    background-color: white;
+    color: var( --background-steel );
+}
+
+.unit-list-unit :nth-child(2) {
+    width:120px;
+}
+
+.unit-list-unit > [data-unit-id] {
+    cursor:pointer;
+}
+
+#unit-list-panel-content > * {
+    cursor:pointer;
+}
+
+#unit-list-panel-content > .unit-list-unit:hover {
+    background-color: var( --background-grey );
+}

client/public/stylesheets/style/style.css

@@ -13,6 +13,7 @@ body {
     display: grid;
     margin: 0;
     padding: 0;
+    position: fixed;
 }
 
 html,
@@ -71,19 +72,23 @@ form {
     padding: 0;
 }
 
-form>div {
-    margin: 20px 0;
+.pill {
+    background-color: var(--background-steel);
+    border-radius: 999px;
+    padding: 4px 8px;
+    width: fit-content;
+    font-weight: bold;
 }
 
-.pill {
-    background-color: var(--background-dark-steel);
-    border-radius: var(--border-radius-sm);
-    padding: 4px 8px;
+.pill-light {
+    background-color: var(--background-grey);
+    border-radius: var(--border-radius-md);
+    padding: 3px 6px;
     width: fit-content;
 }
 
 .ol-scrollable {
-    overflow-y: scroll;
+    overflow-y: auto;
     scrollbar-color: white transparent;
     scrollbar-width: thin;
 }
@@ -117,7 +122,6 @@ form>div {
 .ol-panel {
     background-color: var(--background-steel);
     border-radius: var(--border-radius-md);
-    ;
     box-shadow: 0px 2px 5px #000A;
     color: white;
     font-size: 12px;
@@ -306,29 +310,6 @@ form>div {
     max-width: 16px;
 }
 
-.ol-panel-board {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-}
-
-.ol-panel-board>.panel-section {
-    border-right: 1px solid #555;
-    padding: 0 30px;
-}
-
-.ol-panel-board>.panel-section:first-child {
-    padding-left: 0px;
-}
-
-.ol-panel-board>.panel-section:last-child {
-    padding-right: 0px;
-}
-
-.ol-panel-board>.panel-section:last-of-type {
-    border-right-width: 0;
-}
-
 h1,
 h2,
 h3,
@@ -358,10 +339,32 @@ h4 {
     font-weight: normal;
 }
 
+button.ol-button-white {
+    border: 1px solid white;
+    color: white;
+    font-weight: bold;
+}
+
+button.ol-button-white>svg:first-child {
+    stroke: white;
+    fill: white;
+}
+
+.ol-select-warning {
+    border: 1px solid var(--primary-red);
+    color: var(--primary-red) !important;
+    font-weight: bold !important;
+}
+
+.ol-select-warning::after {
+    stroke: var(--primary-red);
+    fill: var(--primary-red);
+}
+
 button.ol-button-warning {
     border: 1px solid var(--primary-red);
-    color: var(--primary-red);
-    font-weight: bold;
+    color: var(--primary-red) !important;
+    font-weight: bold !important;
 }
 
 button.ol-button-warning>svg:first-child {
@@ -530,7 +533,7 @@ nav.ol-panel> :last-child {
 }
 
 .active .ol-slider::-webkit-slider-thumb {
-    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
+    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, var(--transparent-accent-light-blue) 50%);
 }
 
 .ol-slider::-moz-range-thumb {
@@ -545,7 +548,7 @@ nav.ol-panel> :last-child {
 
 .active .ol-slider::-moz-range-thumb {
     -moz-appearance: none;
-    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
+    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, var(--transparent-accent-light-blue) 50%);
 }
 
 .ol-slider-min-max {
@@ -620,6 +623,12 @@ nav.ol-panel> :last-child {
     align-items: center;
 }
 
+.ol-navbar-buttons-group > div {
+    align-items: center;
+    display:flex;
+    flex-direction: row;
+}
+
 .ol-navbar-buttons-group button {
     border: none;
     height: 32px;
@@ -653,20 +662,65 @@ nav.ol-panel> :last-child {
     stroke: var(--background-steel) !important;
 }
 
-#atc-navbar-control {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
+.ol-navbar-buttons-group .protectable button:first-of-type {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    width:28px;
 }
 
-#atc-navbar-control button svg {
-    height: 24px;
-    width: 24px;
+.ol-navbar-buttons-group > .protectable > button.lock {
+    align-items: center;
+    background-color: var(--primary-red);
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    display:flex;
+    justify-content: center;
+    width:18px;
 }
 
+.ol-navbar-buttons-group > .protectable > button[data-protected].lock {
+    background-color: var(--background-grey);
+}
+
+.ol-navbar-buttons-group > .protectable > button.lock svg {
+    height:10px;
+    width:10px;
+}
+
+@keyframes lock-prompt {
+    100% {
+        opacity: 1;
+    }
+    0% {
+        opacity: 0;
+    }
+}
+
+.ol-navbar-buttons-group > .protectable > button[data-protected].lock.prompt svg {
+    animation: lock-prompt .25s alternate infinite;
+}
+
+.ol-navbar-buttons-group > .protectable > button.lock svg.locked * {
+    fill:white !important;
+}
+
+.ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.unlocked,
+.ol-navbar-buttons-group > .protectable > button[data-protected].lock svg.locked {
+    display:flex;
+}
+
+.ol-navbar-buttons-group > .protectable > button[data-protected].lock svg.unlocked,
+.ol-navbar-buttons-group > .protectable > button:not([data-protected]).lock svg.locked {
+    display:none;
+}
+
+
+
 #roe-buttons-container button,
 #reaction-to-threat-buttons-container button,
-#emissions-countermeasures-buttons-container button {
+#emissions-countermeasures-buttons-container button,
+#shots-scatter-buttons-container button
+#shots-intensity-buttons-container button {
     align-items: center;
     background-color: transparent;
     border: 1px solid var(--accent-light-blue);
@@ -688,17 +742,15 @@ nav.ol-panel> :last-child {
 
 #unit-control-panel .ol-option-button button.selected svg * {
     fill: var(--background-steel);
+    stroke: var(--background-steel);
 }
 
 #rapid-controls {
     display: flex;
     flex-direction: column;
     row-gap: 5px;
-    position: absolute;
     height: fit-content;
     width: fit-content;
-    left: calc(100% + 10px);
-    top: 0px;
 }
 
 #rapid-controls button {
@@ -712,15 +764,27 @@ nav.ol-panel> :last-child {
     stroke: white;
 }
 
+#rapid-controls button:before {
+    display: inline-block;
+    filter: invert(100%);
+    height: 20px;
+    width: 20px;
+}
+
 /****************************************************************************************/
 #splash-screen {
-    background-image: url("/resources/theme/images/splash/1.png");
-    background-position: 100% 50%;
-    background-size: 60%;
     border-radius: var(--border-radius-md);
     overflow: hidden;
-    width: 1200px;
-    z-index: 99999;
+    width: 70%;
+    max-width: 1200px;
+    z-index: 999999;
+}
+
+@media (min-width: 1700px) {
+    #splash-screen {
+        background-position: 100% 50%;
+        background-size: contain;
+    }
 }
 
 #splash-content {
@@ -733,6 +797,12 @@ nav.ol-panel> :last-child {
     width: 50%;
 }
 
+@media (max-width: 1700px) {
+    #splash-content {
+        width: auto;
+    }
+}
+  
 #splash-content::after {
     background-color: var(--background-steel);
     content: "";
@@ -743,7 +813,7 @@ nav.ol-panel> :last-child {
     top: 0;
     transform: rotate(-23deg);
     transform-origin: top right;
-    width: 200px;
+    width: 300px;
     z-index: -1;
 }
 
@@ -772,6 +842,10 @@ nav.ol-panel> :last-child {
     font-size: 11px;
 }
 
+#splash-content #legal-stuff {
+    width: 100%;
+}
+
 #splash-content #legal-stuff h5 {
     text-transform: uppercase;
 }
@@ -782,12 +856,14 @@ nav.ol-panel> :last-child {
     width: 120%;
 }
 
-#splash-content.ol-dialog-content {
-    margin: 0px;
+@media (max-width: 1700px) {
+    #splash-content #legal-stuff p {
+        width: 100%;
+    }
 }
 
-.feature-splashScreen #splash-screen {
-    display: flex;
+#splash-content.ol-dialog-content {
+    margin: 0px;
 }
 
 #gray-out {
@@ -797,7 +873,7 @@ nav.ol-panel> :last-child {
     position: fixed;
     top: 0px;
     width: 100%;
-    z-index: 9999;
+    z-index: 99999;
 }
 
 #authentication-form {
@@ -805,7 +881,10 @@ nav.ol-panel> :last-child {
     column-gap: 10px;
     display: flex;
     flex-direction: row;
-    margin: 10px 0px;
+    margin: 20px 0px;
+    flex-wrap: wrap;
+    width: 100%;
+    row-gap: 10px;
 }
 
 #authentication-form>div {
@@ -1061,7 +1140,9 @@ nav.ol-panel> :last-child {
 }
 
 .ol-coalitionarea-handle-icon,
-.ol-coalitionarea-middle-handle-icon {
+.ol-coalitionarea-middle-handle-icon,
+.ol-destination-preview-icon,
+.ol-destination-preview-handle-icon {
     pointer-events: none;
     z-index: 9999;
     border-radius: 999px;
@@ -1079,6 +1160,13 @@ nav.ol-panel> :last-child {
     height: 16px;
 }
 
+.ol-destination-preview-handle-icon {
+    background-color: #247be2;
+    border: 2px solid white;
+    width: 18px;
+    height: 18px;
+}
+
 dl.ol-data-grid {
     align-items: center;
     display: flex;
@@ -1137,7 +1225,7 @@ dl.ol-data-grid dd {
     background-color: var(--background-slate-blue);
     color: white;
     position: absolute;
-    z-index: 9999;
+    z-index: 999999;
 }
 
 .ol-panel.ol-dialog {
@@ -1167,8 +1255,10 @@ dl.ol-data-grid dd {
 }
 
 .ol-dialog-footer {
+    align-content: center;
     border-top: 1px solid var(--background-grey);
     display: flex;
+    justify-content: center;
     padding-top: 15px;
     row-gap: 10px;
 }

client/public/themes/olympus/images/buttons/emissions/attack.svg

@@ -38,6 +38,7 @@
      inkscape:window-maximized="1"
      inkscape:current-layer="svg4" />
   <path 
+	 style="stroke: none"
      d="m 7.5000002,0 c 0.498,0 0.9375,0.4395 0.9375,0.9375 V 1.2598 C 11.1621,1.6699 13.3301,3.8379002 13.7402,6.5625002 h 0.3223 c 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 H 13.7402 C 13.3301,11.1914 11.1621,13.3594 8.4375002,13.7695 v 0.293 c 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 v -0.293 C 3.8086002,13.3594 1.6406,11.1914 1.2305,8.4375002 h -0.293 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 h 0.293 C 1.6406,3.8379002 3.8086002,1.6699 6.5625002,1.2598 V 0.9375 c 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 z m -4.3652,8.4375002 c 0.3515,1.7284998 1.6992,3.0761998 3.4277,3.4276998 V 11.25 c 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 0.498,0 0.9375,0.4395 0.9375,0.9375 v 0.6152 C 10.1367,11.5137 11.4844,10.166 11.8359,8.4375002 H 11.25 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 h 0.5859 c -0.3515,-1.6992 -1.6992,-3.0469 -3.3983998,-3.3984 v 0.5859 c 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 v -0.5859 c -1.7285,0.3515 -3.0762,1.6992 -3.4277,3.3984 h 0.6152 c 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 z m 4.3652,0 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 z"
      fill="#5ca7ff"
      id="path2" />

client/public/themes/olympus/images/buttons/emissions/defend.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 7.0324294,0 c 0.1172,0 0.2637,0.0293 0.3809,0.0879 l 5.5077996,2.3437 c 0.6445,0.293 1.1425,0.9082 1.1425,1.67 -0.0292,2.9296 -1.2304,8.2324 -6.2694996,10.664 -0.498,0.2344 -1.0547,0.2344 -1.5527,0 -5.0391,-2.4316 -6.24020004,-7.7344 -6.24020004,-10.664 -0.0293,-0.7618 0.4687,-1.377 1.11320004,-1.67 l 5.5078,-2.3437 C 6.7394294,0.0293 6.8859294,0 7.0324294,0 Z m 0,1.9629 V 13.0371 C 11.075429,11.0742 12.159429,6.7676 12.188629,4.1602 Z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/emissions/free.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 10.796771,3.75 c 0,1.31836 -0.7618,2.46094 -1.8750496,3.13476 v 0.61525 c 0,0.5273 -0.43945,0.9375 -0.9375,0.9375 h -2.8125 c -0.52734,0 -0.9375,-0.4102 -0.9375,-0.9375 V 6.88476 c -1.14258,-0.67382 -1.875,-1.8164 -1.875,-3.13476 0,-2.05078 1.875,-3.75 4.21875,-3.75 2.31445,0 4.2187996,1.69922 4.2187996,3.75 z M 4.9373514,5.15625 c 0.49804,0 0.9375,-0.41016 0.9375,-0.9375 0,-0.49805 -0.43946,-0.9375 -0.9375,-0.9375 -0.52735,0 -0.9375,0.43945 -0.9375,0.9375 0,0.52734 0.41015,0.9375 0.9375,0.9375 z m 4.21872,-0.9375 c 0,-0.49805 -0.43943,-0.9375 -0.93748,-0.9375 -0.52734,0 -0.9375,0.43945 -0.9375,0.9375 0,0.52734 0.41016,0.9375 0.9375,0.9375 0.49805,0 0.93748,-0.41016 0.93748,-0.9375 z M 0.10336144,8.02731 c 0.23438,-0.4687 0.79102,-0.6445 1.25976996,-0.4101 l 5.21484,2.6074 5.1854996,-2.6074 c 0.4688,-0.2344 1.0254,-0.0586 1.2598,0.4101 0.2344,0.4688 0.0586,1.0254 -0.4101,1.2598 l -3.9551196,1.9629 3.9551196,1.9922 c 0.4687,0.2344 0.6445,0.791 0.4101,1.2597 -0.2344,0.4688 -0.791,0.6446 -1.2598,0.4102 l -5.1854996,-2.6074 -5.21484,2.6074 c -0.46874996,0.2344 -1.02538996,0.0586 -1.25976996,-0.4102 -0.234374,-0.4687 -0.058593,-1.0253 0.41016,-1.2597 L 4.4685914,11.25001 0.51352144,9.28711 c -0.468753,-0.2344 -0.644534,-0.791 -0.41016,-1.2598 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/emissions/silent.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 9.103975,1.603975 c 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 l -3.0762,3.0761 -3.1055,-3.0761 c -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 -0.3809,0.3515 -0.3809,0.9668 0,1.3183 l 3.0761,3.0762 -3.0761,3.1055 c -0.3809,0.3515 -0.3809,0.9668 0,1.3183 0.3515,0.3809 0.9668,0.3809 1.3183,0 l 3.1055,-3.0761 3.0762,3.0761 c 0.3515,0.3809 0.9668,0.3809 1.3183,0 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 l -3.0761,-3.1055 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/intensity/1.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   viewBox="0 0 15 15"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="1.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     width="30px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="16.808938"
+     inkscape:cx="4.2536893"
+     inkscape:cy="-1.2195892"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="stroke-width:0.659;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers;fill-opacity:1"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107"
+     width="2.8299551"
+     height="3.9513376"
+     x="1.7056587"
+     y="9.5718069" />
+  <rect
+     style="fill:none;stroke-width:0.659001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107-7"
+     width="2.8299551"
+     height="7.6993432"
+     x="6.0053182"
+     y="5.817802" />
+  <rect
+     style="fill:none;stroke-width:0.659001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107-9"
+     width="2.8299551"
+     height="11.89354"
+     x="10.304977"
+     y="1.7128451" />
+</svg>

client/public/themes/olympus/images/buttons/intensity/2.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   viewBox="0 0 15 15"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     width="30px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="16.808938"
+     inkscape:cx="4.2536893"
+     inkscape:cy="-1.2195892"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <rect
+     style="stroke-width:0.659;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers;fill-opacity:1"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107"
+     width="2.8299551"
+     height="3.9513376"
+     x="1.7056587"
+     y="9.5718069" />
+  <rect
+     style="stroke-width:0.659001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers;fill-opacity:1"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107-7"
+     width="2.8299551"
+     height="7.6993432"
+     x="6.0053182"
+     y="5.817802" />
+  <rect
+     style="fill:none;stroke-width:0.659001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
+     fill="#5ca7ff"
+	 stroke="#5ca7ff"
+	 id="rect1107-9"
+     width="2.8299551"
+     height="11.89354"
+     x="10.304977"
+     y="1.7128451" />
+</svg>

client/public/themes/olympus/images/buttons/intensity/3.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   fill="none"
+   version="1.1"
+   viewBox="0 0 15 15"
+   id="svg8"
+   sodipodi:docname="3.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="55.466667"
+     inkscape:cx="7.4909856"
+     inkscape:cy="7.4909856"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <rect
+     x="1.7057"
+     y="9.5718"
+     width="2.83"
+     height="3.9513"
+     style="paint-order:stroke fill markers;stroke-dashoffset:5.6;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:.659;"
+     id="rect2"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff" />
+  <rect
+     x="6.0053"
+     y="5.8178"
+     width="2.83"
+     height="7.6993"
+     style="paint-order:stroke fill markers;stroke-dashoffset:5.6;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:.659;"
+     id="rect4"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff"	 />
+  <rect
+     x="10.305"
+     y="1.7128"
+     width="2.83"
+     height="11.894"
+     style="paint-order:stroke fill markers;stroke-dashoffset:5.6;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:.659;"
+     id="rect6"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff"	 />
+</svg>

client/public/themes/olympus/images/buttons/other/lock-open-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/></svg>

client/public/themes/olympus/images/buttons/other/lock-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>

client/public/themes/olympus/images/buttons/roe/designated.svg

@@ -40,5 +40,6 @@
   <path 
      d="m 7.5000002,0 c 0.498,0 0.9375,0.4395 0.9375,0.9375 V 1.2598 C 11.1621,1.6699 13.3301,3.8379002 13.7402,6.5625002 h 0.3223 c 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 H 13.7402 C 13.3301,11.1914 11.1621,13.3594 8.4375002,13.7695 v 0.293 c 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 v -0.293 C 3.8086002,13.3594 1.6406,11.1914 1.2305,8.4375002 h -0.293 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 h 0.293 C 1.6406,3.8379002 3.8086002,1.6699 6.5625002,1.2598 V 0.9375 c 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 z m -4.3652,8.4375002 c 0.3515,1.7284998 1.6992,3.0761998 3.4277,3.4276998 V 11.25 c 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 0.498,0 0.9375,0.4395 0.9375,0.9375 v 0.6152 C 10.1367,11.5137 11.4844,10.166 11.8359,8.4375002 H 11.25 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 h 0.5859 c -0.3515,-1.6992 -1.6992,-3.0469 -3.3983998,-3.3984 v 0.5859 c 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 v -0.5859 c -1.7285,0.3515 -3.0762,1.6992 -3.4277,3.3984 h 0.6152 c 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 z m 4.3652,0 c -0.5273,0 -0.9375,-0.4102 -0.9375,-0.9375 0,-0.498 0.4102,-0.9375 0.9375,-0.9375 0.498,0 0.9375,0.4395 0.9375,0.9375 0,0.5273 -0.4395,0.9375 -0.9375,0.9375 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/roe/free.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 10.796771,3.75 c 0,1.31836 -0.7618,2.46094 -1.8750496,3.13476 v 0.61525 c 0,0.5273 -0.43945,0.9375 -0.9375,0.9375 h -2.8125 c -0.52734,0 -0.9375,-0.4102 -0.9375,-0.9375 V 6.88476 c -1.14258,-0.67382 -1.875,-1.8164 -1.875,-3.13476 0,-2.05078 1.875,-3.75 4.21875,-3.75 2.31445,0 4.2187996,1.69922 4.2187996,3.75 z M 4.9373514,5.15625 c 0.49804,0 0.9375,-0.41016 0.9375,-0.9375 0,-0.49805 -0.43946,-0.9375 -0.9375,-0.9375 -0.52735,0 -0.9375,0.43945 -0.9375,0.9375 0,0.52734 0.41015,0.9375 0.9375,0.9375 z m 4.21872,-0.9375 c 0,-0.49805 -0.43943,-0.9375 -0.93748,-0.9375 -0.52734,0 -0.9375,0.43945 -0.9375,0.9375 0,0.52734 0.41016,0.9375 0.9375,0.9375 0.49805,0 0.93748,-0.41016 0.93748,-0.9375 z M 0.10336144,8.02731 c 0.23438,-0.4687 0.79102,-0.6445 1.25976996,-0.4101 l 5.21484,2.6074 5.1854996,-2.6074 c 0.4688,-0.2344 1.0254,-0.0586 1.2598,0.4101 0.2344,0.4688 0.0586,1.0254 -0.4101,1.2598 l -3.9551196,1.9629 3.9551196,1.9922 c 0.4687,0.2344 0.6445,0.791 0.4101,1.2597 -0.2344,0.4688 -0.791,0.6446 -1.2598,0.4102 l -5.1854996,-2.6074 -5.21484,2.6074 c -0.46874996,0.2344 -1.02538996,0.0586 -1.25976996,-0.4102 -0.234374,-0.4687 -0.058593,-1.0253 0.41016,-1.2597 L 4.4685914,11.25001 0.51352144,9.28711 c -0.468753,-0.2344 -0.644534,-0.791 -0.41016,-1.2598 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/roe/hold.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 9.103975,1.603975 c 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 l -3.0762,3.0761 -3.1055,-3.0761 c -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 -0.3809,0.3515 -0.3809,0.9668 0,1.3183 l 3.0761,3.0762 -3.0761,3.1055 c -0.3809,0.3515 -0.3809,0.9668 0,1.3183 0.3515,0.3809 0.9668,0.3809 1.3183,0 l 3.1055,-3.0761 3.0762,3.0761 c 0.3515,0.3809 0.9668,0.3809 1.3183,0 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 l -3.0761,-3.1055 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/roe/return.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 7.0324294,0 c 0.1172,0 0.2637,0.0293 0.3809,0.0879 l 5.5077996,2.3437 c 0.6445,0.293 1.1425,0.9082 1.1425,1.67 -0.0292,2.9296 -1.2304,8.2324 -6.2694996,10.664 -0.498,0.2344 -1.0547,0.2344 -1.5527,0 -5.0391,-2.4316 -6.24020004,-7.7344 -6.24020004,-10.664 -0.0293,-0.7618 0.4687,-1.377 1.11320004,-1.67 l 5.5078,-2.3437 C 6.7394294,0.0293 6.8859294,0 7.0324294,0 Z m 0,1.9629 V 13.0371 C 11.075429,11.0742 12.159429,6.7676 12.188629,4.1602 Z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/scatter/1.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   viewBox="0 0 15 15"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="1.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     width="30px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="23.771428"
+     inkscape:cx="2.6712741"
+     inkscape:cy="12.283654"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <path
+     style="opacity:1;fill:none;stroke-width:2.13035;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;stroke-dashoffset:0"
+     id="path940"
+     sodipodi:type="arc"
+     sodipodi:cx="7.614182"
+     sodipodi:cy="12.730443"
+     sodipodi:rx="11.467682"
+     sodipodi:ry="10.686775"
+     sodipodi:start="4.1887902"
+     sodipodi:end="5.2359878"
+     sodipodi:arc-type="slice"
+     d="m 1.880341,3.4754242 a 11.467682,10.686775 0 0 1 11.467682,2e-7 L 7.614182,12.730443 Z"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff"	 />
+</svg>

client/public/themes/olympus/images/buttons/scatter/2.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   viewBox="0 0 15 15"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="2.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     width="30px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="23.771428"
+     inkscape:cx="2.6712741"
+     inkscape:cy="12.283654"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <path
+     style="opacity:1;fill:none;stroke-width:2.13035;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path940"
+     sodipodi:type="arc"
+     sodipodi:cx="7.614182"
+     sodipodi:cy="12.730443"
+     sodipodi:rx="11.467682"
+     sodipodi:ry="10.686775"
+     sodipodi:start="4.3633231"
+     sodipodi:end="5.0614548"
+     sodipodi:arc-type="slice"
+     d="m 3.6920035,2.6881593 a 11.467682,10.686775 0 0 1 7.8443565,-2e-7 L 7.614182,12.730443 Z"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff"	 />
+</svg>

client/public/themes/olympus/images/buttons/scatter/3.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15"
+   height="15"
+   viewBox="0 0 15 15"
+   fill="none"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="3.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     width="30px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="23.771428"
+     inkscape:cx="2.6712741"
+     inkscape:cy="12.283654"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4"
+     inkscape:showpageshadow="2"
+     inkscape:deskcolor="#d1d1d1" />
+  <path
+     style="opacity:1;fill:none;stroke-width:2.13035;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path940"
+     sodipodi:type="arc"
+     sodipodi:cx="7.614182"
+     sodipodi:cy="12.730443"
+     sodipodi:rx="11.467682"
+     sodipodi:ry="10.686775"
+     sodipodi:start="4.5378561"
+     sodipodi:end="4.8869219"
+     sodipodi:arc-type="slice"
+     d="m 5.6228404,2.2060238 a 11.467682,10.686775 0 0 1 3.9826836,10e-8 L 7.614182,12.730443 Z"
+	 fill="#5ca7ff"
+	 stroke="#5ca7ff"	 />
+</svg>

client/public/themes/olympus/images/buttons/threat/evade.svg

@@ -39,7 +39,8 @@
   <path 
      d="m 0.02182384,14.515426 c -0.0453,0.1119 -0.01864,0.2398 0.06662,0.325 0.08526,0.0853 0.21314,0.1119 0.32505,0.0666 l 1.95830996,-0.7833 c 0.15188,-0.0613 0.2891,-0.1505 0.405,-0.2664 l 1.02578,-1.0258 3.03735,0.7993 -0.2504,0.2504 c -0.1772,0.1772 -0.1772,0.4623 0,0.6395 0.1772,0.1772 0.4623,0.1772 0.6394,0 l 0.7461,-0.746 0.4263,-0.4263 0.3197,-0.3198 c 0.1772,-0.1771 0.1772,-0.4622 0,-0.6394 -0.1772,-0.1772 -0.4623,-0.1772 -0.6395,0 l -0.1065,0.1066 -1.9184,-1.9184 0.4356,-0.4356 1.4628,0.0959 c 0.0866,0.0066 0.1718,-0.0253 0.2331,-0.0866 l 0.2132,-0.2130999 c 0.1172,-0.1173 0.1172,-0.3091 0,-0.4263 l -1.2789,-1.2789 -0.8526,0.8526 c -0.1173,0.1172 -0.3091,0.1172 -0.4263,0 -0.1173,-0.1173 -0.1173,-0.3091 0,-0.4263 l 0.8526,-0.8526 -1.2789,-1.2789 c -0.1173,-0.1173 -0.3091,-0.1173 -0.4263,0 l -0.2132,0.2131 c -0.0613,0.0613 -0.0933,0.1465 -0.0866,0.2331 l 0.0959,1.4628 -0.4356,0.4356 -1.91834,-1.9183 0.10657,-0.1066 c 0.17717,-0.1772 0.17717,-0.4623 0,-0.6395 -0.17717,-0.1771 -0.46228,-0.1771 -0.63945,0 l -0.31972,0.3198 -0.4263,0.4263 -0.74602996,0.746 c -0.17717,0.1772 -0.17717,0.4623 0,0.6394 0.17717,0.1772 0.46228,0.1772 0.63944996,0 l 0.25041,-0.2504 0.79936,3.0373999 -1.02578,1.0258 c -0.11590996,0.1159 -0.20516996,0.2531 -0.26644996,0.405 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
   <path 
      d="m 9.0916338,5.3111261 c 2.5638002,-2.3307 8.3905002,-6.43275 11.1873002,-4.19528 3.4961,2.79688 4.1953,9.0895799 -2.7968,16.7808799"
      stroke="#5ca7ff"
@@ -50,13 +51,16 @@
   <path 
      d="m 14.783034,12.805026 -0.1001,0.8985 0.9106,-0.2539 0.0806,0.6152 -0.8301,0.0586 0.5444,0.7251 -0.5542,0.2954 -0.3808,-0.7642 -0.3345,0.7593 -0.5762,-0.2905 0.5396,-0.7251 -0.8252,-0.0635 0.0952,-0.6103 0.8911,0.2539 -0.1001,-0.8985 z"
      fill="#5ca7ff"
-     id="path6" />
+     id="path6" 
+	 style="stroke: none"/>
   <path 
      d="m 13.384534,7.2113261 -0.1001,0.8984 0.9107,-0.2539 0.0805,0.6152 -0.83,0.0586 0.5444,0.7251 -0.5542,0.2954 -0.3809,-0.7641 -0.3344,0.7593 -0.5762,-0.2906 0.5395,-0.7251 -0.8252,-0.0634 0.0953,-0.6104 0.8911,0.2539 -0.1001,-0.8984 z"
      fill="#5ca7ff"
-     id="path8" />
+     id="path8" 
+	 style="stroke: none"/>
   <path 
      d="m 18.977834,7.2113261 -0.1001,0.8984 0.9106,-0.2539 0.0806,0.6152 -0.8301,0.0586 0.5445,0.7251 -0.5542,0.2954 -0.3809,-0.7641 -0.3345,0.7593 -0.5761,-0.2906 0.5395,-0.7251 -0.8252,-0.0634 0.0952,-0.6104 0.8911,0.2539 -0.1001,-0.8984 z"
      fill="#5ca7ff"
-     id="path10" />
+     id="path10" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/threat/manoeuvre.svg

@@ -39,7 +39,8 @@
   <path 
      d="m 0.02182384,14.515426 c -0.0453,0.1119 -0.01864,0.2398 0.06662,0.325 0.08526,0.0853 0.21314,0.1119 0.32505,0.0666 l 1.95830996,-0.7833 c 0.15188,-0.0613 0.2891,-0.1505 0.405,-0.2664 l 1.02578,-1.0258 3.03735,0.7993 -0.2504,0.2504 c -0.1772,0.1772 -0.1772,0.4623 0,0.6395 0.1772,0.1772 0.4623,0.1772 0.6394,0 l 0.7461,-0.746 0.4263,-0.4263 0.3197,-0.3198 c 0.1772,-0.1771 0.1772,-0.4622 0,-0.6394 -0.1772,-0.1772 -0.4623,-0.1772 -0.6395,0 l -0.1065,0.1066 -1.9184,-1.9184 0.4356,-0.4356 1.4628,0.0959 c 0.0866,0.0066 0.1718,-0.0253 0.2331,-0.0866 l 0.2132,-0.2130999 c 0.1172,-0.1173 0.1172,-0.3091 0,-0.4263 l -1.2789,-1.2789 -0.8526,0.8526 c -0.1173,0.1172 -0.3091,0.1172 -0.4263,0 -0.1173,-0.1173 -0.1173,-0.3091 0,-0.4263 l 0.8526,-0.8526 -1.2789,-1.2789 c -0.1173,-0.1173 -0.3091,-0.1173 -0.4263,0 l -0.2132,0.2131 c -0.0613,0.0613 -0.0933,0.1465 -0.0866,0.2331 l 0.0959,1.4628 -0.4356,0.4356 -1.91834,-1.9183 0.10657,-0.1066 c 0.17717,-0.1772 0.17717,-0.4623 0,-0.6395 -0.17717,-0.1771 -0.46228,-0.1771 -0.63945,0 l -0.31972,0.3198 -0.4263,0.4263 -0.74602996,0.746 c -0.17717,0.1772 -0.17717,0.4623 0,0.6394 0.17717,0.1772 0.46228,0.1772 0.63944996,0 l 0.25041,-0.2504 0.79936,3.0373999 -1.02578,1.0258 c -0.11590996,0.1159 -0.20516996,0.2531 -0.26644996,0.405 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
   <path
      d="m 9.0916338,5.3111261 c 2.5638002,-2.3307 8.3905002,-6.43275 11.1873002,-4.19528 3.4961,2.79688 4.1953,9.0895799 -2.7968,16.7808799"
      stroke="#5ca7ff"

client/public/themes/olympus/images/buttons/threat/none.svg

@@ -39,5 +39,6 @@
   <path 
      d="m 9.103975,1.603975 c 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 l -3.0762,3.0761 -3.1055,-3.0761 c -0.3515,-0.3809 -0.9668,-0.3809 -1.3183,0 -0.3809,0.3515 -0.3809,0.9668 0,1.3183 l 3.0761,3.0762 -3.0761,3.1055 c -0.3809,0.3515 -0.3809,0.9668 0,1.3183 0.3515,0.3809 0.9668,0.3809 1.3183,0 l 3.1055,-3.0761 3.0762,3.0761 c 0.3515,0.3809 0.9668,0.3809 1.3183,0 0.3809,-0.3515 0.3809,-0.9668 0,-1.3183 l -3.0761,-3.1055 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/threat/passive.svg

@@ -39,7 +39,8 @@
   <path 
      d="M 0.1977,6.4546 C 0.07745,6.5055 0,6.6237 0,6.7542 0,6.8846 0.07745,7.0028 0.1977,7.0538 l 2.09719,0.8987 c 0.16304,0.0694 0.33629,0.106 0.51361,0.106 h 1.5693 l 1.712,2.9349 H 5.7067 c -0.2711,0 -0.4892,0.2181 -0.4892,0.4891 0,0.2711 0.2181,0.4892 0.4892,0.4892 H 6.848 7.5002 7.9893 c 0.2711,0 0.4892,-0.2181 0.4892,-0.4892 0,-0.271 -0.2181,-0.4891 -0.4892,-0.4891 H 7.8263 V 8.0585 h 0.6664 l 1.0456,1.1923 c 0.0611,0.0713 0.1508,0.1121 0.2445,0.1121 h 0.3261 c 0.1794,0 0.3261,-0.1467 0.3261,-0.3261 V 7.0802 H 9.1306 c -0.1793,0 -0.326,-0.1467 -0.326,-0.326 0,-0.1794 0.1467,-0.3261 0.326,-0.3261 H 10.435 V 4.4715 c 0,-0.1794 -0.1467,-0.3261 -0.3261,-0.3261 H 9.7828 c -0.0937,0 -0.1834,0.0407 -0.2445,0.112 L 8.4927,5.4498 H 7.8263 V 2.5149 h 0.163 c 0.2711,0 0.4892,-0.2181 0.4892,-0.4891 0,-0.2711 -0.2181,-0.4892 -0.4892,-0.4892 H 7.5002 6.848 5.7067 c -0.2711,0 -0.4892,0.2181 -0.4892,0.4892 0,0.271 0.2181,0.4891 0.4892,0.4891 H 6.0898 L 4.3778,5.4498 H 2.8085 c -0.17732,0 -0.35057,0.0367 -0.51361,0.106 z"
      fill="#5ca7ff"
-     id="path2" />
+     id="path2" 
+	 style="stroke: none"/>
   <path 
      d="M 12.8398,6.5498 H 23.2749"
      stroke="#5ca7ff"
@@ -48,17 +49,21 @@
   <path 
      d="m 16.4116,9 -0.1,0.8984 0.9106,-0.2539 0.0806,0.6152 -0.8301,0.0586 0.5444,0.7251 -0.5542,0.2955 L 16.0821,10.5747 15.7476,11.334 15.1714,11.0434 15.711,10.3183 14.8858,10.2549 14.981,9.6445 15.8721,9.8984 15.772,9 Z"
      fill="#5ca7ff"
-     id="path6" />
+     id="path6" 
+	 style="stroke: none"/>
   <path 
      d="m 21.4116,10.6582 -0.1,0.8984 0.9106,-0.2539 0.0806,0.6153 -0.8301,0.0585 0.5444,0.7251 -0.5542,0.2955 -0.3808,-0.7642 -0.3345,0.7593 -0.5762,-0.2906 0.5396,-0.7251 -0.8252,-0.0634 0.0952,-0.6104 0.8911,0.2539 -0.1001,-0.8984 z"
      fill="#5ca7ff"
-     id="path8" />
+     id="path8" 
+	 style="stroke: none"/>
   <path 
      d="m 21.4116,0 -0.1,0.8984 0.9106,-0.2539 0.0806,0.6152 -0.8301,0.0586 0.5444,0.7251 L 21.4629,2.3389 21.0821,1.5747 20.7476,2.334 20.1714,2.0434 20.711,1.3183 19.8858,1.2549 19.981,0.6445 20.8721,0.8984 20.772,0 Z"
      fill="#5ca7ff"
-     id="path10" />
+     id="path10" 
+	 style="stroke: none"/>
   <path 
      d="m 16.4116,1.6582 -0.1,0.8984 0.9106,-0.2539 0.0806,0.6153 -0.8301,0.0585 0.5444,0.7251 L 16.4629,3.9971 16.0821,3.2329 15.7476,3.9922 15.1714,3.7016 15.711,2.9765 14.8858,2.9131 14.981,2.3027 15.8721,2.5566 15.772,1.6582 Z"
      fill="#5ca7ff"
-     id="path12" />
+     id="path12" 
+	 style="stroke: none"/>
 </svg>

client/public/themes/olympus/images/buttons/visibility/helicopter.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="15.75"
+   height="14"
+   viewBox="0 0 15.75 14"
+   fill="none"
+   version="1.1"
+   id="svg7234"
+   sodipodi:docname="helicopter.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata6">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs7238" />
+  <sodipodi:namedview
+     id="namedview7236"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="6.5390625"
+     inkscape:cx="26.041618"
+     inkscape:cy="10.30219"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg7234" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 3.173155,1.0409694 c 0,-0.46651814 0.3476271,-0.84342412 0.7779063,-0.84342412 h 9.3348367 c 0.430278,0 0.777906,0.37690598 0.777906,0.84342412 0,0.4665187 -0.347628,0.8434202 -0.777906,0.8434202 H 9.3963807 V 3.571233 h 0.7779053 c 2.148956,0 3.889518,1.8871557 3.889518,4.2171087 v 1.686841 c 0,0.4665172 -0.347628,0.8434233 -0.777906,0.8434233 H 9.3963807 7.8405774 c -0.4886243,0 -0.9505011,-0.250391 -1.2446479,-0.6747365 L 4.8602324,7.1346873 C 4.7751488,7.0108098 4.6584662,6.9159274 4.5271922,6.8579429 L 1.2089503,5.4188529 C 0.97800953,5.318696 0.80298167,5.1025686 0.7422081,4.8389987 L 0.18309237,2.4088928 C 0.11988251,2.1426888 0.30706869,1.8843896 0.55988607,1.8843896 H 1.2283992 c 0.245524,0 0.4764649,0.1238773 0.6223221,0.3373706 L 2.7842066,3.571233 H 7.8405774 V 1.8843896 H 3.9510613 c -0.4302792,0 -0.7779063,-0.3769015 -0.7779063,-0.8434202 z m 6.2232257,7.5907923 h 3.1116153 v -0.84342 c 0,-1.3969171 -1.045307,-2.5302639 -2.33371,-2.5302639 H 9.3963807 Z m 5.9947173,2.7780193 c 0.303871,0.329462 0.303871,0.864511 0,1.193968 l -0.09481,0.102794 c -0.583429,0.632565 -1.375917,0.988385 -2.200006,0.988385 H 6.2847694 c -0.4302775,0 -0.7779054,-0.376906 -0.7779054,-0.843421 0,-0.466518 0.3476279,-0.843424 0.7779054,-0.843424 h 6.8115166 c 0.413259,0 0.809506,-0.176591 1.101221,-0.492874 l 0.09481,-0.102793 c 0.30387,-0.329461 0.79735,-0.329461 1.101219,0 z"
+     id="path1174-3"
+     style="fill:#202831;fill-opacity:1;stroke-width:0.02531246" />
+</svg>

client/public/themes/olympus/images/icons/burst-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M37.6 4.2C28-2.3 15.2-1.1 7 7s-9.4 21-2.8 30.5l112 163.3L16.6 233.2C6.7 236.4 0 245.6 0 256s6.7 19.6 16.6 22.8l103.1 33.4L66.8 412.8c-4.9 9.3-3.2 20.7 4.3 28.1s18.8 9.2 28.1 4.3l100.6-52.9 33.4 103.1c3.2 9.9 12.4 16.6 22.8 16.6s19.6-6.7 22.8-16.6l33.4-103.1 100.6 52.9c9.3 4.9 20.7 3.2 28.1-4.3s9.2-18.8 4.3-28.1L392.3 312.2l103.1-33.4c9.9-3.2 16.6-12.4 16.6-22.8s-6.7-19.6-16.6-22.8L388.9 198.7l25.7-70.4c3.2-8.8 1-18.6-5.6-25.2s-16.4-8.8-25.2-5.6l-70.4 25.7L278.8 16.6C275.6 6.7 266.4 0 256 0s-19.6 6.7-22.8 16.6l-32.3 99.6L37.6 4.2z"/></svg>

client/public/themes/olympus/images/icons/circle-info-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>

client/public/themes/olympus/images/icons/circle-question-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>