v0.4.8

Added state icons for scenic functions

.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

@@ -1,5 +1,8 @@
 bin
 /scripts/old
+/scripts/python/configurator/dist
+/scripts/python/configurator/build
+/scripts/python/configurator/venv
 .vs
 x64
 core.user
@@ -9,4 +12,10 @@ 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 ("GPLv3") as published by the Free Software Foundation, 
+and the additional terms set out below (the "Additional Terms"). In the event
+that the terms of GPLv3 conflict with the Additional Terms, the 
+Additional Terms 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 
+other dealings in the Software. 
+
+THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
+
+Any party making use of the Software in any manner agrees to be bound by 
+the entirety of this document. 
+
+
+                     GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
@@ -618,57 +647,22 @@ 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.
+  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.
 
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
+2. Entire Agreement
 
-    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>.
+  The text of this document contains the entire understanding between
+you, the licensee, and the authors and/or copyright holders of the
+Software with respect to the subject matter to which it pertains. 
+It supersedes all prior agreements and understandings (if applicable), 
+oral or written, with respect to such matters.
+           

build_package.bat

@@ -0,0 +1,28 @@
+cd src
+msbuild olympus.sln /t:Rebuild /p:Configuration=Release
+cd ..
+
+cd scripts/python/configurator
+call build_configurator.bat
+cd ../../..
+
+cd client
+rmdir /s /q "hgt"
+call npm install
+call npm run emit-declarations
+call npm run build-release
+
+cd "plugins\controltips"
+call npm install
+call npm run build-release
+cd "..\.."
+
+cd "plugins\databasemanager"
+call npm install
+call npm run build-release
+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);
@@ -36,7 +43,7 @@ if (config["server"] != undefined)
 module.exports = app;
 
 const DemoDataGenerator = require('./demo.js');
-var demoDataGenerator = new DemoDataGenerator(app);
+var demoDataGenerator = new DemoDataGenerator(app, config);
 
 
 

client/bin/www

@@ -1,5 +1,22 @@
 #!/usr/bin/env node
 
+console.log('\x1b[36m%s\x1b[0m', "*********************************************************************");
+console.log('\x1b[36m%s\x1b[0m', "*  _____   _____  _____    ____  _                                  *");
+console.log('\x1b[36m%s\x1b[0m', "* |  __ \\ / ____|/ ____|  / __ \\| |                                 *");
+console.log('\x1b[36m%s\x1b[0m', "* | |  | | |    | (___   | |  | | |_   _ _ __ ___  _ __  _   _ ___  *");
+console.log('\x1b[36m%s\x1b[0m', "* | |  | | |     \\___ \\  | |  | | | | | | '_ ` _ \\| '_ \\| | | / __| *");
+console.log('\x1b[36m%s\x1b[0m', "* | |__| | |____ ____) | | |__| | | |_| | | | | | | |_) | |_| \\__ \\ *");
+console.log('\x1b[36m%s\x1b[0m', "* |_____/ \\_____|_____/   \\____/|_|\\__, |_| |_| |_| .__/ \\__,_|___/ *");
+console.log('\x1b[36m%s\x1b[0m', "*                                   __/ |         | |               *");
+console.log('\x1b[36m%s\x1b[0m', "*                                  |___/          |_|               *");
+console.log('\x1b[36m%s\x1b[0m', "*********************************************************************");
+console.log('\x1b[36m%s\x1b[0m', "");
+console.log("Please wait while DCS Olympus Server starts up...");
+
+var fs = require('fs');
+let rawdata = fs.readFileSync('../olympus.json');
+let config = JSON.parse(rawdata);
+
 /**
  * Module dependencies.
  */
@@ -12,8 +29,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.
@@ -88,3 +111,6 @@ function onListening() {
     : 'port ' + addr.port;
   debug('Listening on ' + bind);
 }
+
+console.log("DCS Olympus server v0.4.8 started correctly!")
+console.log("Waiting for connections...")

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,110 +1,20 @@
+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}],
-        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 {
-    constructor(app)
+    constructor(app, config)
     { 
         app.get('/demo/units', (req, res) => this.units(req, res));
         app.get('/demo/weapons', (req, res) => this.weapons(req, res));
@@ -112,15 +22,138 @@ class DemoDataGenerator {
         app.get('/demo/bullseyes', (req, res) => this.bullseyes(req, res));
         app.get('/demo/airbases', (req, res) => this.airbases(req, res));
         app.get('/demo/mission', (req, res) => this.mission(req, res));
+        app.get('/demo/commands', (req, res) => this.command(req, res));
+        app.put('/demo', (req, res) => this.put(req, res));
 
         app.use('/demo', basicAuth({
             users: { 
-                'admin': 'password',
-                'blue': 'bluepassword',
-                'red': 'redpassword'
+                'admin': config["authentication"]["gameMasterPassword"],
+                'blue': config["authentication"]["blueCommanderPassword"],
+                'red': config["authentication"]["redCommanderPassword"]
             },
         }))
 
+        
+        let baseData = { alive: true, human: false, controlled: true, coalition: 2, country: 0, unitName: "Cool guy", groupName: "Cool group 1", state: 13, 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;
+        DEMO_UNIT_DATA[idx].coalition = 0;
+        DEMO_UNIT_DATA[idx].operateAs = 2;
+
+        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;
+        DEMO_UNIT_DATA[idx].coalition = 0;
+        DEMO_UNIT_DATA[idx].operateAs = 1;
+
+        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();
     }
     
@@ -128,48 +161,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'));
     };
@@ -409,7 +447,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
@@ -417,21 +455,24 @@ class DemoDataGenerator {
 
         ret.mission.coalitions = {
             red: [ 
-                'Russia',
-                'China'
+                'RUSSIA',
+                'CHINA'
             ],
             blue: [
-                'United States',
-                'Great Britain'
+                'UK',
+                'USA'
+            ],
+            neutral: [
+                'ITALY'
             ]
         }
 
         ret.mission.commandModeOptions = {
-            restrictSpawns: false,
+            restrictSpawns: true,
             restrictToCoalition: true,
             setupTime: 0,
             spawnPoints: {
-                red: 1000,
+                red: 400,
                 blue: 400
             }, 
             eras: ["WW2", "Early Cold War", "Late Cold War", "Modern"]
@@ -439,7 +480,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";
@@ -454,7 +495,17 @@ class DemoDataGenerator {
         }
         res.send(JSON.stringify(ret));
     }
+
+    command(req, res) {
+        var ret = {commandExecuted: Math.random() > 0.5};
+        res.send(JSON.stringify(ret));
+    }
     
+    put(req, res) {
+        var ret = {commandHash: Math.random().toString(36).slice(2, 19)}
+        res.send(JSON.stringify(ret));
+    }
+
 }
 
 module.exports = DemoDataGenerator;

client/package.json

@@ -2,29 +2,36 @@
   "name": "DCSOlympus",
   "node-main": "./bin/www",
   "main": "http://localhost:3000",
-  "version": "v0.4.3-alpha",
+  "version": "v0.4.8-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",
+    "build-release": "browserify .\\src\\index.ts -o .\\public\\javascripts\\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ] -p [ tinyify ] && 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\"",
+    "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",
+    "js-sha256": "^0.10.1",
+    "leaflet-gesture-handling": "^1.2.2",
     "morgan": "~1.9.1",
     "save": "^2.9.0",
-    "express-basic-auth": "^1.2.1"
+    "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",
@@ -35,14 +42,19 @@
     "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",
+    "tinyify": "^4.0.0",
     "tsify": "^5.0.4",
+    "tslib": "latest",
     "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/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "ControlTipsPlugin",
+  "version": "v0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "browserify ./src/index.ts -p [ tsify --noImplicitAny] > index.js && copy.bat",
+    "build-release": "browserify ./src/index.ts -p [ tsify --noImplicitAny] -p [ tinyify ] > index.js && copy.bat"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@types/node": "^18.16.1",
+    "@types/sortablejs": "^1.15.0",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
+    "concurrently": "^7.6.0",
+    "cp": "^0.2.0",
+    "esmify": "^2.1.1",
+    "nodemon": "^2.0.20",
+    "requirejs": "^2.3.6",
+    "sortablejs": "^1.15.0",
+    "tinyify": "^4.0.0",
+    "tsify": "^5.0.4",
+    "tslib": "latest",
+    "typescript": "^4.9.4",
+    "usng.js": "^0.4.5",
+    "watchify": "^4.0.0"
+  }
+}

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("mapOptionsChanged", () => {
+            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.json

@@ -0,0 +1,32 @@
+{
+  "name": "DatabaseManagerPlugin",
+  "version": "v0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "browserify ./src/index.ts -p [ tsify --noImplicitAny] > index.js && copy.bat",
+    "build-release": "browserify ./src/index.ts -p [ tsify --noImplicitAny] -p [ tinyify ] > 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": {
+    "@babel/preset-env": "^7.21.4",
+    "@types/node": "^18.16.1",
+    "@types/sortablejs": "^1.15.0",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
+    "concurrently": "^7.6.0",
+    "cp": "^0.2.0",
+    "esmify": "^2.1.1",
+    "nodemon": "^2.0.20",
+    "requirejs": "^2.3.6",
+    "sortablejs": "^1.15.0",
+    "tinyify": "^4.0.0",
+    "tsify": "^5.0.4",
+    "tslib": "latest",
+    "typescript": "^4.9.4",
+    "usng.js": "^0.4.5",
+    "watchify": "^4.0.0"
+  }
+}

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,424 @@
+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;
+
+    #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;
+
+        const contextManager = this.#app.getContextManager();
+        contextManager.add( "databaseManager", {
+            "allowUnitCopying": false,
+            "allowUnitPasting": false,
+            "useSpawnMenu": false,
+            "useUnitControlPanel": false,
+            "useUnitInfoPanel": false
+        });
+    
+        /* 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 - 3, 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");
+
+        if ( this.#app )
+            this.#app.getContextManager().setContext( this.getElement().classList.contains("hide") ? "olympus" : "databaseManager" );
+    }
+
+    /** 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/blue.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="640"
+   height="480"
+   id="svg10"
+   sodipodi:docname="blue.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"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <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="0.88166667"
+     inkscape:cx="497.3535"
+     inkscape:cy="301.13421"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <path
+     fill="#bc0000"
+     fill-opacity="1"
+     d="M 0,0 H 640 V 480 H 0 Z"
+     id="path2"
+     style="fill:#0000cd;fill-opacity:1;stroke-width:0.999996" />
+</svg>

client/public/images/countries/codes.json

@@ -1,84 +1,556 @@
 {
-    "RED": "AGGRESSORS",
-    "INS": "INSURGENTS",
-    "DZ" : "ALGERIA",
-    "AR" : "ARGENTINA",
-    "AU" : "AUSTRALIA",
-    "AT" : "AUSTRIA",
-    "BH" : "BAHRAIN",
-    "BY" : "BELARUS",
-    "BE" : "BELGIUM",
-    "BO" : "BOLIVIA",
-    "BR" : "BRAZIL",
-    "BG" : "BULGARIA",
-    "CA" : "CANADA",
-    "CL" : "CHILE",
-    "CN" : "CHINA",
-    "HR" : "CROATIA",
-    "CU" : "CUBA",
-    "CY" : "CYPRUS",
-    "CZ" : "CHEZH_REPUBLIC",
-    "DK" : "DENMARK",
-    "EG" : "EGYPT",
-    "ET" : "ETHIOPIA",
-    "FI" : "FINLAND",
-    "FR" : "FRANCE",
-    "GE" : "GEORGIA",
-    "DE" : "GERMANY",
-    "GH" : "GHANA",
-    "GI" : "Gibraltar",
-    "GR" : "GREECE",
-    "HN" : "HONDURAS",
-    "HU" : "HUNGARY",
-    "IS" : "Iceland",
-    "IN" : "INDIA",
-    "ID" : "INDONESIA",
-    "IR" : "IRAN",
-    "IQ" : "IRAQ",
-    "IE" : "Ireland",
-    "IM" : "Isle Of Man",
-    "IL" : "ISRAEL",
-    "IT" : "ITALY",
-    "JP" : "JAPAN",
-    "JO" : "JORDAN",
-    "KZ" : "KAZAKHSTAN",
-    "KR" : "SOUTH_KOREA",
-    "KW" : "KUWAIT",
-    "LB" : "LEBANON",
-    "LY" : "LIBYIA",
-    "MY" : "MALAYSIA",
-    "MX" : "MEXICO",
-    "MA" : "MOROCCO",
-    "NL" : "THE_NETHERLANDS",
-    "NG" : "NIGERIA",
-    "NO" : "NORWAY",
-    "OM" : "OMAN",
-    "PK" : "PAKISTAN",
-    "PE" : "PERU",
-    "PH" : "PHILIPPINES",
-    "PL" : "POLAND",
-    "PT" : "PORTUGAL",
-    "QA" : "QATAR",
-    "RO" : "ROMANIA",
-    "RU" : "RUSSIA",
-    "SA" : "SAUDI ARABIA",
-    "RS" : "SERBIA",
-    "SK" : "SLOVAKIA",
-    "SI" : "SLOVENIA",
-    "ZA" : "SOUTH AFRICA",
-    "ES" : "SPAIN",
-    "SD" : "SUDAN",
-    "SE" : "SWEDEN",
-    "CH" : "SWITZERLAND",
-    "SY" : "SYRIA",
-    "TH" : "THAILAND",
-    "TN" : "TUNISIA",
-    "TR" : "TURKEY",
-    "UA" : "UKRAINE",
-    "AE" : "UNITED ARAB EMIRATES",
-    "GB" : "UK",
-    "US" : "USA",
-    "VE" : "VENEZUELA",
-    "VN" : "VIETNAM",
-    "YE" : "YEMEN"
+  "AGGRESSORS": {
+    "flagCode": "RED",
+    "liveryCodes": [
+      "RSO"
+    ]
+  },
+  "INSURGENTS": {
+    "flagCode": "UNK",
+    "liveryCodes": [
+      "INS"
+    ]
+  },
+  "ALGERIA": {
+    "flagCode": "DZ",
+    "liveryCodes": [
+      "DZA"
+    ]
+  },
+  "ARGENTINA": {
+    "flagCode": "AR",
+    "liveryCodes": [
+      "ARG"
+    ]
+  },
+  "AUSTRALIA": {
+    "flagCode": "AU",
+    "liveryCodes": [
+      "AUS",
+      "AUSAF"
+    ]
+  },
+  "AUSTRIA": {
+    "flagCode": "AT",
+    "liveryCodes": [
+      "AUT"
+    ]
+  },
+  "BAHRAIN": {
+    "flagCode": "BH",
+    "liveryCodes": [
+      "BHR"
+    ]
+  },
+  "BELARUS": {
+    "flagCode": "BY",
+    "liveryCodes": [
+      "BLR"
+    ]
+  },
+  "BELGIUM": {
+    "flagCode": "BE",
+    "liveryCodes": [
+      "BEL"
+    ]
+  },
+  "BOLIVIA": {
+    "flagCode": "BO",
+    "liveryCodes": [
+      "BOL"
+    ]
+  },
+  "BRAZIL": {
+    "flagCode": "BR",
+    "liveryCodes": [
+      "BRA"
+    ]
+  },
+  "BULGARIA": {
+    "flagCode": "BG",
+    "liveryCodes": [
+      "BGR"
+    ]
+  },
+  "CANADA": {
+    "flagCode": "CA",
+    "liveryCodes": [
+      "CAN"
+    ]
+  },
+  "CHILE": {
+    "flagCode": "CL",
+    "liveryCodes": [
+      "CHL"
+    ]
+  },
+  "CHINA": {
+    "flagCode": "CN",
+    "liveryCodes": [
+      "CHN"
+    ]
+  },
+  "CROATIA": {
+    "flagCode": "HR",
+    "liveryCodes": [
+      "HRV"
+    ]
+  },
+  "CUBA": {
+    "flagCode": "CU",
+    "liveryCodes": [
+      "CUB"
+    ]
+  },
+  "CYPRUS": {
+    "flagCode": "CY",
+    "liveryCodes": [
+      "CYP"
+    ]
+  },
+  "CHEZH_REPUBLIC": {
+    "displayName": "Czech Republic",
+    "flagCode": "CZ",
+    "liveryCodes": [
+      "CZE"
+    ]
+  },
+  "DENMARK": {
+    "flagCode": "DK",
+    "liveryCodes": [
+      "DEN"
+    ]
+  },
+  "EGYPT": {
+    "flagCode": "EG",
+    "liveryCodes": [
+      "EGY",
+      "EGP"
+    ]
+  },
+  "ETHIOPIA": {
+    "flagCode": "ET",
+    "liveryCodes": [
+      "ETH"
+    ]
+  },
+  "FINLAND": {
+    "flagCode": "FI",
+    "liveryCodes": [
+      "FIN"
+    ]
+  },
+  "FRANCE": {
+    "flagCode": "FR",
+    "liveryCodes": [
+      "FRA"
+    ]
+  },
+  "GEORGIA": {
+    "flagCode": "GE",
+    "liveryCodes": [
+      "GRG"
+    ]
+  },
+  "GERMANY": {
+    "flagCode": "DE",
+    "liveryCodes": [
+      "GER"
+    ]
+  },
+  "GHANA": {
+    "flagCode": "GH",
+    "liveryCodes": [
+      "GHA"
+    ]
+  },
+  "GREECE": {
+    "flagCode": "GR",
+    "liveryCodes": [
+      "GRC"
+    ]
+  },
+  "HONDURAS": {
+    "flagCode": "HN",
+    "liveryCodes": [
+      "HND"
+    ]
+  },
+  "HUNGARY": {
+    "flagCode": "HU",
+    "liveryCodes": [
+      "HUN"
+    ]
+  },
+  "INDIA": {
+    "flagCode": "IN",
+    "liveryCodes": [
+      "IND"
+    ]
+  },
+  "INDONESIA": {
+    "flagCode": "ID",
+    "liveryCodes": [
+      "IDN"
+    ]
+  },
+  "IRAN": {
+    "flagCode": "IR",
+    "liveryCodes": [
+      "IRN"
+    ]
+  },
+  "IRAQ": {
+    "flagCode": "IQ",
+    "liveryCodes": [
+      "IRQ"
+    ]
+  },
+  "ISRAEL": {
+    "flagCode": "IL",
+    "liveryCodes": [
+      "ISR"
+    ]
+  },
+  "ITALY": {
+    "flagCode": "IT",
+    "liveryCodes": [
+      "ITA"
+    ]
+  },
+  "JAPAN": {
+    "flagCode": "JP",
+    "liveryCodes": [
+      "JPN"
+    ]
+  },
+  "JORDAN": {
+    "flagCode": "JO",
+    "liveryCodes": [
+      "JOR"
+    ]
+  },
+  "KAZAKHSTAN": {
+    "flagCode": "KZ",
+    "liveryCodes": [
+      "KAZ"
+    ]
+  },
+  "SOUTH_KOREA": {
+    "displayName": "South Korea",
+    "flagCode": "KR",
+    "liveryCodes": [
+      "KOR"
+    ]
+  },
+  "KUWAIT": {
+    "flagCode": "KW",
+    "liveryCodes": [
+      "KWT"
+    ]
+  },
+  "LEBANON": {
+    "flagCode": "LB",
+    "liveryCodes": [
+      "LBN"
+    ]
+  },
+  "MALAYSIA": {
+    "flagCode": "MY",
+    "liveryCodes": [
+      "MYS"
+    ]
+  },
+  "MEXICO": {
+    "flagCode": "MX",
+    "liveryCodes": [
+      "MEX"
+    ]
+  },
+  "MOROCCO": {
+    "flagCode": "MA",
+    "liveryCodes": [
+      "MAR"
+    ]
+  },
+  "THE_NETHERLANDS": {
+    "displayName": "The Netherlands",
+    "flagCode": "NL",
+    "liveryCodes": [
+      "NETH"
+    ]
+  },
+  "NIGERIA": {
+    "flagCode": "NG",
+    "liveryCodes": [
+      "NGA"
+    ]
+  },
+  "NORWAY": {
+    "flagCode": "NO",
+    "liveryCodes": [
+      "NOR"
+    ]
+  },
+  "OMAN": {
+    "flagCode": "OM",
+    "liveryCodes": [
+      "OMN"
+    ]
+  },
+  "PAKISTAN": {
+    "flagCode": "PK",
+    "liveryCodes": [
+      "PAK"
+    ]
+  },
+  "PERU": {
+    "flagCode": "PE",
+    "liveryCodes": [
+      "PER"
+    ]
+  },
+  "PHILIPPINES": {
+    "flagCode": "PH",
+    "liveryCodes": [
+      "PHL"
+    ]
+  },
+  "POLAND": {
+    "flagCode": "PL",
+    "liveryCodes": [
+      "POL"
+    ]
+  },
+  "PORTUGAL": {
+    "flagCode": "PT",
+    "liveryCodes": [
+      "PRT"
+    ]
+  },
+  "QATAR": {
+    "flagCode": "QA",
+    "liveryCodes": [
+      "QAT"
+    ]
+  },
+  "ROMANIA": {
+    "flagCode": "RO",
+    "liveryCodes": [
+      "ROU"
+    ]
+  },
+  "RUSSIA": {
+    "flagCode": "RU",
+    "liveryCodes": [
+      "RUS"
+    ]
+  },
+  "SAUDI_ARABIA": {
+    "displayName": "Saudi Arabia",
+    "flagCode": "SA",
+    "liveryCodes": [
+      "SAU"
+    ]
+  },
+  "SERBIA": {
+    "flagCode": "RS",
+    "liveryCodes": [
+      "SRB"
+    ]
+  },
+  "SLOVAKIA": {
+    "flagCode": "SK",
+    "liveryCodes": [
+      "SVK"
+    ]
+  },
+  "SLOVENIA": {
+    "flagCode": "SI",
+    "liveryCodes": [
+      "SVN"
+    ]
+  },
+  "SOUTH_AFRICA": {
+    "displayName": "South Africa",
+    "flagCode": "ZA",
+    "liveryCodes": []
+  },
+  "SPAIN": {
+    "flagCode": "ES",
+    "liveryCodes": [
+      "SPN",
+      "SPA"
+    ]
+  },
+  "SUDAN": {
+    "flagCode": "SD",
+    "liveryCodes": [
+      "SDN",
+      "SUN"
+    ]
+  },
+  "SWEDEN": {
+    "flagCode": "SE",
+    "liveryCodes": [
+      "SWE"
+    ]
+  },
+  "SWITZERLAND": {
+    "flagCode": "CH",
+    "liveryCodes": [
+      "SUI"
+    ]
+  },
+  "SYRIA": {
+    "flagCode": "SY",
+    "liveryCodes": [
+      "SYR"
+    ]
+  },
+  "THAILAND": {
+    "flagCode": "TH",
+    "liveryCodes": [
+      "THA"
+    ]
+  },
+  "TUNISIA": {
+    "flagCode": "TN",
+    "liveryCodes": [
+      "TUN"
+    ]
+  },
+  "TURKEY": {
+    "flagCode": "TR",
+    "liveryCodes": [
+      "TUR"
+    ]
+  },
+  "UKRAINE": {
+    "flagCode": "UA",
+    "liveryCodes": [
+      "UKR"
+    ]
+  },
+  "UNITED_ARAB_EMIRATES": {
+    "displayName": "United Arab Emirates",
+    "flagCode": "AE",
+    "liveryCodes": [
+      "ARE"
+    ]
+  },
+  "UK": {
+    "displayName": "United Kingdom",
+    "flagCode": "GB",
+    "liveryCodes": [
+      "UK"
+    ]
+  },
+  "USA": {
+    "displayName": "United States of America",
+    "flagCode": "US",
+    "liveryCodes": [
+      "USA",
+      "USAF"
+    ]
+  },
+  "VENEZUELA": {
+    "flagCode": "VE",
+    "liveryCodes": [
+      "VEN"
+    ]
+  },
+  "VIETNAM": {
+    "flagCode": "VN",
+    "liveryCodes": [
+      "VNM"
+    ]
+  },
+  "YEMEN": {
+    "flagCode": "YE",
+    "liveryCodes": [
+      "YEM"
+    ]
+  },
+  "CJTF_BLUE": {
+    "displayName": "Combined Joint Task Force Blue",
+    "flagCode": "BLUE",
+    "liveryCodes": [
+      "BLUE"
+    ]
+  },
+  "SOUTH_OSETIA": {
+    "displayName": "South Ossetia",
+    "flagCode": "UNK",
+    "liveryCodes": []
+  },
+  "NORTH_KOREA": {
+    "displayName": "Democratic People's Republic of Korea",
+    "flagCode": "KP",
+    "liveryCodes": [
+      "PRK"
+    ]
+  },
+  "CJTF_RED": {
+    "displayName": "Combined Joint Task Force Red",
+    "flagCode": "RED",
+    "liveryCodes": [
+      "RED"
+    ]
+  },
+  "ABKHAZIA": {
+    "flagCode": "UNK",
+    "liveryCodes": [
+      "ABH"
+    ]
+  },
+  "ITALIAN_SOCIAL_REPUBLIC": {
+    "displayName": "Italian Social Republic",
+    "flagCode": "SOCIAL",
+    "liveryCodes": [
+      "RSI"
+    ]
+  },
+  "USSR": {
+    "displayName": "USSR",
+    "flagCode": "USSR",
+    "liveryCodes": []
+  },
+  "ECUADOR": {
+    "flagCode": "EC",
+    "liveryCodes": [
+      "ECU"
+    ]
+  },
+  "LIBYA": {
+    "flagCode": "LY",
+    "liveryCodes": [
+      "LBY",
+      "LIB"
+    ]
+  },
+  "UN_PEACEKEEPERS": {
+    "displayName": "United Nations",
+    "flagCode": "UNK",
+    "liveryCodes": [
+      "UN"
+    ]
+  },
+  "GDR": {
+    "flagCode": "UNK",
+    "liveryCodes": [
+      "GDR"
+    ]
+  },
+  "YUGOSLAVIA": {
+    "flagCode": "YUG",
+    "liveryCodes": [
+      "YUG"
+    ]
+  },
+  "THIRDREICH": {
+    "displayName": "Third Reich",
+    "flagCode": "THIRD",
+    "liveryCodes": []
+  }
 }

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/countries/red.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="640"
+   height="480"
+   id="svg10"
+   sodipodi:docname="red.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"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <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="0.88166667"
+     inkscape:cx="497.3535"
+     inkscape:cy="301.13421"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <path
+     fill="#bc0000"
+     fill-opacity="1"
+     d="M 0,0 H 640 V 480 H 0 Z"
+     id="path2"
+     style="fill:#cc0000;fill-opacity:1;stroke-width:0.999996" />
+</svg>

client/public/images/countries/third.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.0"
+   width="640"
+   height="480"
+   viewBox="0 0 640 480"
+   id="svg8"
+   sodipodi:docname="third.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"
+     width="640px"
+     inkscape:zoom="1.058"
+     inkscape:cx="284.97164"
+     inkscape:cy="274.57467"
+     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
+     width="640"
+     height="480"
+     fill="#dd0000"
+     id="rect2"
+     x="0"
+     y="0"
+     style="stroke-width:0.999997" />
+  <circle
+     cx="320"
+     cy="240"
+     r="180"
+     fill="#ffffff"
+     id="circle4"
+     style="stroke-width:1" />
+  <path
+     d="M 472.73507,256.97056 387.88225,172.11774 252.11775,307.88225 167.26494,223.02943 M 336.97057,87.264932 252.11775,172.11774 387.88225,307.88225 303.02944,392.73506"
+     fill="none"
+     stroke="#000000"
+     stroke-width="48"
+     id="path6" />
+</svg>

client/public/images/countries/unk.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="640"
+   height="480"
+   id="svg10"
+   sodipodi:docname="unk.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"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <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="0.88166667"
+     inkscape:cx="497.3535"
+     inkscape:cy="300"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <path
+     fill="#bc0000"
+     fill-opacity="1"
+     d="M 0,0 H 640 V 480 H 0 Z"
+     id="path2"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:0.999996" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:549.6px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1"
+     x="179.23065"
+     y="424.19662"
+     id="text2551"><tspan
+       sodipodi:role="line"
+       id="tspan2549"
+       x="179.23065"
+       y="424.19662"
+       style="stroke-width:1">?</tspan></text>
+</svg>

client/public/images/countries/ussr.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="640"
+   height="480"
+   id="svg10"
+   sodipodi:docname="ussr.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"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.88166667"
+     inkscape:cx="497.3535"
+     inkscape:cy="300"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <path
+     fill="#bc0000"
+     fill-opacity="1"
+     d="M 0,0 H 639.99998 V 480 H 0 Z"
+     id="path2"
+     style="fill:#cc0000;fill-opacity:1;stroke-width:0.999997" />
+  <path
+     id="path11728"
+     d="m 160.0004,30 -6.73546,20.729509 H 131.4688 L 149.10222,63.540898 142.36675,84.2704 160.0004,71.458772 177.63406,84.2704 170.89859,63.540898 188.532,50.729509 h -21.79613 z m 0,10.79999 4.31062,13.266778 h 13.94975 l -11.2856,8.199597 4.31061,13.266777 -11.28538,-8.199363 -11.28538,8.199363 4.31062,-13.266777 -11.28561,-8.199597 h 13.94975 z"
+     style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.15px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+  <g
+     style="fill:#ffd700;fill-opacity:1;stroke-width:1.25"
+     id="g2900"
+     transform="matrix(0.79145503,0,0,0.78939049,3.0638126,3.0127518)">
+    <path
+       id="rect4165-6"
+       d="m 137.43744,171.69421 18.86296,18.9937 17.78834,-17.66589 c 27.05847,29.021 55.43807,56.99501 82.28704,86.12782 4.03444,4.06233 10.59815,4.085 14.66056,0.0506 4.06232,-4.03445 4.08499,-10.59815 0.0506,-14.66056 -28.81871,-27.1901 -57.72545,-54.60143 -86.55328,-81.89095 l 23.96499,-23.80003 -33.34026,-4.61605 z"
+       style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.611489;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <path
+       id="path4179-3"
+       d="m 198.2887,110.1955 c 15.51743,8.7394 27.29872,21.28122 34.2484,34.3924 7.04394,13.28902 10.13959,27.16218 10.20325,38.25433 0.13054,22.74374 -18.43771,41.18184 -41.18183,41.18184 -12.13597,0 -23.04607,-5.24868 -30.58302,-13.60085 l -4.16863,3.51033 c -0.70999,-0.27231 -1.46387,-0.41221 -2.22429,-0.41276 -1.82948,1.9e-4 -3.56621,0.80531 -4.74859,2.20136 -2.97368,0.38896 -5.46251,2.44529 -6.40534,5.29224 -3.13486,6.28843 -8.63524,11.21997 -15.29104,13.4776 -0.0637,0.0216 -0.11992,0.05 -0.1758,0.0783 -3.07749,1.12758 -6.16259,3.1643 -8.78919,5.80245 -5.19155,5.23656 -7.72858,11.93658 -6.30024,16.63822 -0.14098,0.40857 -0.21361,0.83759 -0.21498,1.26979 1.5e-4,2.17082 1.75991,3.93058 3.93073,3.93073 0.54341,-0.002 1.08053,-0.11639 1.57745,-0.33632 4.69369,1.05881 11.06885,-1.54582 16.05444,-6.55917 2.82624,-2.85072 4.94356,-6.22349 5.98303,-9.53062 2.31696,-6.62278 7.29699,-12.01856 13.62281,-15.05312 0.15105,-0.0725 0.27303,-0.14714 0.38218,-0.22358 2.12082,-1.01408 3.67251,-2.92895 4.225,-5.2139 9.70222,11.44481 24.25255,18.75299 40.51876,19.13577 29.83352,0.70205 52.13299,-21.25802 53.16414,-52.83642 0.51894,-15.89259 -5.62993,-36.3847 -19.6412,-53.19089 -10.70835,-12.84441 -26.40987,-23.50795 -44.18699,-28.20777 z"
+       style="fill:#ffd700;fill-opacity:1;stroke:none;stroke-width:0.625044;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+  </g>
+</svg>

client/public/images/countries/yug.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 640 480"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="yug.svg"
+   width="640"
+   height="480"
+   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"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.91840278"
+     inkscape:cx="253.1569"
+     inkscape:cy="286.91115"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     fill="#dd0000"
+     d="M 0,320 H 640 V 480 H 0"
+     id="path2"
+     style="stroke-width:0.999996" />
+  <path
+     fill="#ffffff"
+     d="M 0,160 H 640 V 320 H 0"
+     id="path4"
+     style="stroke-width:0.999996" />
+  <path
+     fill="#003893"
+     d="M 0,0 H 640 V 160 H 0"
+     id="path6"
+     style="stroke-width:0.999996" />
+</svg>

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/aic/aic.css

@@ -1,194 +0,0 @@
-/**************************************/
-
-.olympus-dialog {
-	align-self: center;
-	background:white;
-	border-radius: 10px;
-	display: flex;
-	flex-direction: column;
-	justify-self: center;
-	padding:10px;
-	position:absolute;
-	width:fit-content;
-	z-index: 9999;
-}
-
-.olympus-dialog-close {
-	cursor:pointer;
-	position:absolute;
-	right:10px;
-	top:5px;
-}
-
-.olympus-dialog-header {
-	font-weight:bold;
-}
-
-
-/**************************************/
-
-
-/*****  AIC  *****/
-
-.aic-panel {
-    z-index: 9999;
-}
-
-#aic-control-panel {
-    bottom:30px;
-    position: absolute;
-    left:30px;
-}
-
-
-#aic-control-panel .olympus-button img {
-    max-width: 32px;
-}
-
-
-#aic-toolbox, #aic-callsign-panel {
-	align-items: flex-start;
-	align-self: center;
-	flex-direction: column;
-	row-gap: 10px;
-	display:none;
-	position:absolute;
-}
-
-.aic-panel {
-	background:#eaeaea;
-	border-bottom-right-radius: 10px;
-	border-top-right-radius: 10px;
-	justify-self: left;
-	padding:5px 10px;
-}
-
-.aic-enabled #aic-toolbox, .aic-enabled #aic-callsign-panel {
-	display:flex;
-}
-
-.aic-enabled #aic-callsign-panel {
-	align-self: auto;
-	top: 100px;
-}
-
-.aic-panel h2 {
-	font-size:90%;
-	margin:0;
-	padding:0;
-	text-align: center;
-}
-
-#aic-callsign-display {
-	text-align: center;
-}
-
-#aic-formation-list {
-	display:flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-#aic-formation-list > div {
-	align-items: center;
-	cursor: pointer;
-	display:flex;
-	flex-direction: column;
-	justify-content: center;
-	margin-top:10px;
-	position:relative;
-}
-
-#aic-formation-list .aic-formation-image img {
-	border: 1px solid #ccc;
-	border-radius: 10px;
-	max-width: 50px;
-}
-
-#aic-formation-list .aic-formation-name {
-	font-size:90%;
-}
-
-#aic-formation-list .aic-formation-descriptor {
-	background:white;
-	border-radius: 10px;
-	left:100px;
-	padding:5px;
-	position:absolute;
-	width: max-content;
-}
-
-#aic-teleprompt {
-	background-color: white;
-	border:2px solid black;
-	border-radius: 10px;
-	bottom: 50px;
-	color: black;
-	display: none;
-	justify-content: center;
-	justify-self: center;
-	padding: 10px;
-	position: absolute;
-	width: fit-content;
-	z-index: 9999;
-}
-
-.aic-enabled #aic-teleprompt {
-	display:flex;
-}
-
-#aic-descriptor {
-	display:flex;
-	flex-direction: row;
-}
-
-#aic-descriptor .aic-descriptor-section {
-	display:flex;
-	flex-direction: column;
-	margin:0 10px;
-}
-
-#aic-descriptor .aic-descriptor-section-label {
-	background-color:#eaeaea;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-	padding:.25em;
-	text-align: center;
-}
-
-#aic-descriptor .aic-descriptor-phrase {
-	border-bottom: 1px solid #ccc;
-	display:flex;
-	flex-direction: row;
-	margin-bottom:5px;
-	padding-bottom:2px;
-}
-
-#aic-descriptor .aic-descriptor-phrase:last-of-type {
-	margin-bottom: 0;
-}
-
-#aic-descriptor .aic-descriptor-components .aic-descriptor-component {
-	margin:0 5px;
-	text-align: center;
-}
-
-#aic-descriptor .aic-descriptor-component-label {
-	display:none;
-}
-
-#aic-descriptor .aic-descriptor-component-value:after {
-	content:",";
-	margin-right:5px;
-}
-
-#aic-descriptor .aic-descriptor-component:last-of-type .aic-descriptor-component-value:after {
-	content:"; ";
-}
-
-#aic-descriptor .aic-descriptor-section:last-of-type .aic-descriptor-component:last-of-type .aic-descriptor-component-value:after {
-	content:".";
-}
-
-
-/**************************************/

client/public/stylesheets/atc/atc.css

@@ -1,205 +0,0 @@
-.ol-strip-board .ol-dialog-header {
-    align-items: center;
-    display:flex;
-    justify-content: space-between;
-}
-
-.ol-strip-board-strips {
-    display:flex;
-    flex-direction: column;
-    row-gap: 4px;
-}
-
-.ol-strip-board-strip {
-    align-items: center;
-    border-radius: var( --border-radius-sm );
-    column-gap: 4px;
-    display:flex;
-    flex-flow: row nowrap;
-    row-gap:4px;
-}
-
-.ol-strip-board-strip[data-flight-status="checkedin"] {
-    background-color: #ffffff2A;
-}
-
-.ol-strip-board-strip[data-flight-status="readytotaxi"] {
-    background-color: #ffff0063;
-}
-
-.ol-strip-board-strip[data-flight-status="clearedtotaxi"] {
-    background-color: #00ff0030;
-}
-
-.ol-strip-board-strip[data-flight-status="halted"] {
-    background-color: #FF000040;
-}
-
-.ol-strip-board-strip[data-flight-status="terminated"] {
-    background-color: black;
-}
-
-.ol-strip-board-headers {
-    column-gap: 4px;
-    display:flex;
-    flex-flow:row nowrap;
-    text-align: center;
-}
-
-.ol-strip-board-headers > *, .ol-strip-board-strip > [data-point] {
-    padding: 4px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width:80px;
-}
-
-.ol-strip-board-strip input[type="text"] {
-    appearance: none;
-    background-color: transparent;
-    border:1px solid #ffffff30;
-    border-radius: var( --border-radius-sm );
-    color:white;
-    font-size:12px;
-    font-weight:normal;
-    outline:none;
-    padding: 4px 0;
-    text-align: center;
-    width:100%;
-}
-
-.ol-strip-board-strip[data-time-warning="level-1"] [data-point="timeToGo"] {
-    border:1px solid #cc0000;
-}
-
-.ol-strip-board-headers :nth-child(1) {
-    width:12px;
-}
-
-.ol-strip-board-headers :nth-child(2),
-.ol-strip-board-strip :nth-child(2),
-[data-board-type="ground"] .ol-strip-board-headers :nth-child(3),
-[data-board-type="ground"] .ol-strip-board-strip :nth-child(3) {
-    width:130px;
-}
-
-[data-board-type="ground"] .ol-strip-board-strip :nth-child(5) {
-    text-align: center;
-}
-
-
-
-.ol-strip-board-headers :last-child,
-.ol-strip-board-strip :last-child {
-    width:20px;
-}
-
-
-
-
-
-
-[data-board-type="tower"] .ol-strip-board-strip > * {
-    text-align: center;
-}
-
-[data-board-type="tower"] .ol-strip-board-strip a {
-    color:white;
-}
-
-[data-board-type="tower"] .ol-strip-board-strip > :nth-child(2) {
-    text-align: left;
-}
-
-[data-board-type="tower"] .ol-strip-board-strip :nth-child(3) input,
-[data-board-type="tower"] .ol-strip-board-strip :nth-child(5) input {
-    width:30px;
-}
-
-[data-board-type="tower"] .ol-strip-board-strip :nth-child(3) {
-    font-size:10px;
-}
-
-
-[data-altitude-assigned] [data-point="assignedAltitude"] input,
-[data-speed-assigned] [data-point="assignedSpeed"] input {
-    background-color:#ffffffbb;
-    color: black;
-    font-weight: var( --font-weight-bolder );
-}
-
-[data-warning-altitude] [data-point="altitude"],
-[data-warning-speed] [data-point="speed"] {
-    background:#cc0000;
-    border-radius: var( --border-radius-sm );
-}
-
-
-
-.ol-strip-board-strip > [data-point="name"] {
-    text-overflow: ellipsis;
-    overflow:hidden;
-}
-
-.ol-strip-board-strip .ol-select-value {
-    opacity: .85;
-}
-
-
-.ol-strip-board-add-flight {
-    display:flex;
-    flex-flow: row nowrap;
-    position:relative;
-}
-
-
-.ol-strip-board-add-flight > * {
-    border:none;
-    outline: none;
-    padding:4px 8px;
-}
-
-.add-flight-by-click img {
-    filter:invert();
-    height: 12px;
-}
-
-.ol-strip-board-add-flight input {
-    border-radius: var( --border-radius-sm );
-}
-
-.ol-strip-board-add-flight .ol-auto-suggest {
-    background:white;
-    border-radius: var(--border-radius-sm );
-    color:black;
-    display:none;
-    flex-direction: column;
-    left:0;
-    margin:0;
-    position:absolute;
-    translate:0 -100%;
-    top:0;
-}
-
-.ol-strip-board-add-flight .ol-auto-suggest[data-has-suggestions] {
-    display:flex;
-    row-gap: 4px;
-}
-
-.ol-strip-board-add-flight .ol-auto-suggest[data-has-suggestions] a {
-    cursor: pointer;
-}
-
-
-[data-board-type="ground"] {
-    bottom:20px;
-}
-
-[data-board-type="tower"] {
-    right:10px;
-    top:10px;
-}
-
-[data-board-type="tower"] .ol-auto-suggest {
-    top:30px;
-    translate:0;
-}

client/public/stylesheets/atc/unitdatatable.css

@@ -1,27 +0,0 @@
-#unit-list {
-    display:flex;
-    flex-direction: column;
-    font-size:13px;
-    height: 250px;
-    width:fit-content;
-}
-
-#unit-list > div {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-}
-
-#unit-list > div > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width:100px;
-}
-
-#unit-list > div:first-of-type {
-    text-align: center;
-}
-
-#unit-list > div > div:nth-of-type( 4 ) {
-    text-align: center;
-}

client/public/stylesheets/layout/layout.css

@@ -11,37 +11,12 @@
 	left: 10px;
 	position: absolute;
 	top: 10px;
-	z-index: 9999;
+	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,53 @@
     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"][data-state="miss-on-purpose"] .unit-state {
+    background-image: url("/resources/theme/images/states/miss-on-purpose.svg");
+}
+
+[data-object|="unit"][data-state="scenic-aaa"] .unit-state {
+    background-image: url("/resources/theme/images/states/scenic-aaa.svg");
+}
+
+[data-object|="unit"][data-state="simulate-fire-fight"] .unit-state {
+    background-image: url("/resources/theme/images/states/simulate-fire-fight.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 +364,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/other/contextmenus.css

@@ -30,12 +30,74 @@
     flex-direction: column;
     justify-content: space-between;
     row-gap: 5px;
+    padding: 20px;
 }
 
-#aircraft-spawn-menu,
-#helicopter-spawn-menu,
-#groundunit-spawn-menu,
-#navyunit-spawn-menu {
+#map-contextmenu>div:nth-child(n+4)>div {
+    width: 100%;
+}
+
+.contextmenu-advanced-options,
+.contextmenu-metadata {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    row-gap: 5px;
+    width: 100%;
+}
+
+.contextmenu-advanced-options-toggle,
+.contextmenu-metadata-toggle {
+    display: flex;
+    align-content: center;
+    text-align: left;
+    width: 100%;
+    margin: 5px;
+    column-gap: 5px;
+    cursor: pointer;
+}
+
+.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-metadata-toggle div:first-child {
+    width: fit-content;
+    white-space: nowrap;
+}
+
+.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;
 }
 
@@ -58,11 +120,52 @@
     width: 50px;
 }
 
-#aircraft-spawn-menu .ol-select.is-open .ol-select-options,
-#helicopter-spawn-menu .ol-select.is-open .ol-select-options {
+.unit-spawn-menu .ol-select.is-open .ol-select-options {
     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;
+}
+
+.unit-loadout-list div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: var(--background-steel);
+    padding: 2px 5px 2px 5px;
+}
+
+.unit-loadout-list div:hover {
+    overflow: visible;
+    white-space: nowrap;
+    background-color: var(--background-steel);
+    width: fit-content;
+    border-radius: var(--border-radius-sm);
+}
+
 .deploy-unit-button {
     margin-top: 5px;
     text-align: center;
@@ -82,7 +185,7 @@
     margin: 0px 5px;
 }
 
-.upper-bar button:nth-child(2) {
+.upper-bar button:first-of-type {
     margin-left: auto;
 }
 
@@ -137,31 +240,49 @@
     content: "Create neutral unit";
 }
 
-#aircraft-loadout-preview,
-#helicopter-loadout-preview {
+.unit-label-count-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 5px;
+}
+
+.unit-label-count-container>*:first-child {
+    width: 100%;
+}
+
+.unit-label-count-container button {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
+}
+
+.unit-label-count-container button>*:nth-child(1) {
+    margin-left: auto;
+}
+
+.unit-loadout-preview {
     align-content: space-between;
     align-items: center;
-    column-gap: 20px;
+    column-gap: 10px;
     display: flex;
     flex-direction: row;
     width: 100%;
 }
 
-#aircaft-loadout-list,
-#helicopter-loadout-list {
+.unit-loadout-list {
     align-content: center;
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 5px;
 }
 
-#aircraft-unit-image,
-#helicopter-unit-image {
+.unit-image {
     filter: invert(100%);
-    height: 100px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    width: 100px;
+    width: 25%;
+    aspect-ratio: 1/1;
+    margin: 5px 0px;
 }
 
 #smoke-spawn-menu {
@@ -259,14 +380,25 @@
 #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 {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    column-gap: 10px;
+    width: 100%;
+}
+
+.country-dropdown-element img {
+    height: 20px;
+    aspect-ratio: initial;
+}
 
 /*  Buttons  */
-
 #center-map::before {
     content: url("/resources/theme/images/icons/arrows-to-eye-solid.svg");
 }
@@ -291,10 +423,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");
 }
@@ -486,4 +642,36 @@
 
 #airbase-runways>.runway>.heading:last-of-type {
     flex-direction: row-reverse;
+}
+
+/* Airbase spawn menu */
+#airbase-spawn-contextmenu {
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+    position: absolute;
+    row-gap: 5px;
+    width: 300px;
+    z-index: 9999;
+}
+
+#airbase-spawn-contextmenu>div:nth-child(2) {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding-right: 0px;
+}
+
+#airbase-spawn-contextmenu >div:nth-child(n+3) {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    row-gap: 5px;
+    padding: 20px;
+}
+
+#airbase-spawn-contextmenu>div:nth-child(n+3)>div {
+    width: 100%;
 }

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

@@ -2,14 +2,120 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display: block !important;
 }
 
+
+#roe-buttons-container button,
+#reaction-to-threat-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);
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    width: 30px;
+}
+
+#reaction-to-threat-buttons-container button:not(:first-child) svg {
+    width: 150%;
+    margin: -5px;
+}
+
+#unit-control-panel .ol-option-button button.selected {
+    background-color: white;
+    border-color: white;
+}
+
+#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;
+    height: fit-content;
+    width: fit-content;
+}
+
+#rapid-controls button {
+    padding: 4px;
+}
+
+#rapid-controls button.pulse {
+    animation: pulse 1.5s linear infinite;
+}
+
+#rapid-controls svg {
+    height: 20px;
+    width: 20px;
+    fill: white;
+    stroke: white;
+}
+
+#rapid-controls button:before {
+    display: inline-block;
+    filter: invert(100%);
+    height: 20px;
+    width: 20px;
+}
+
+
+
+
 #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-control-panel h3 {
-	margin-bottom: 8px;
+#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 #selected-units-container {
@@ -25,9 +131,9 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 
 #unit-control-panel #selected-units-container button {
 	align-items: center;
-	border-radius: var(--border-radius-md);
+	border-radius: 20px;
 	display: flex;
-	font-size: 11px;
+	font-size: 13px;
 	height: 32px;
 	justify-content: space-between;
 	margin-right: 5px;
@@ -41,6 +147,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	content: attr(data-label);
 	font-size: 10px;
 	padding: 4px 6px;
+	padding-right: 7px;
 	white-space: nowrap;
 	width: fit-content;
 }
@@ -56,7 +163,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 	display: block;
 	overflow: hidden;
 	padding: 4px;
-	padding-left: 0;
+	padding-left: 7px;
 	text-align: left;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -91,8 +198,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 +209,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 {
@@ -136,78 +249,126 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
 }
 
 #altitude-type-switch[data-value="true"]>.ol-switch-fill::before {
-	content: "AGL";
-}
-
-#altitude-type-switch[data-value="false"]>.ol-switch-fill::before {
 	content: "ASL";
 }
 
-#speed-type-switch[data-value="true"]>.ol-switch-fill::before {
-	content: "GS";
+#altitude-type-switch[data-value="false"]>.ol-switch-fill::before {
+	content: "AGL";
 }
 
-#speed-type-switch[data-value="false"]>.ol-switch-fill::before {
+#speed-type-switch[data-value="true"]>.ol-switch-fill::before {
 	content: "CAS";
 }
 
-#unit-control-panel .ol-slider-value {
+#speed-type-switch[data-value="false"]>.ol-switch-fill::before {
+	content: "GS";
+}
+
+.switch-control .ol-switch {
+	height: 23px;
+	width: 40px;
+}
+
+
+.ol-slider-value {
 	color: var(--accent-light-blue);
 	cursor: pointer;
 	font-size: 14px;
 	font-weight: bold;
 }
 
-#unit-control-panel .switch-control {
+.switch-control {
 	align-items: center;
-	display: grid;
-	grid-template-columns: 1.35fr 0.65fr;
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
 }
 
-#unit-control-panel .switch-control>*:nth-child(2) {
-	justify-self: end;
-}
-
-#unit-control-panel .switch-control>*:nth-child(3) {
-	color: var(--secondary-semitransparent-white);
-}
-
-#unit-control-panel .switch-control h4 {
+.switch-control h4 {
 	margin: 0px;
+	display: flex;
+	align-items: center;
 }
 
-#unit-control-panel .switch-control .ol-switch {
-	height: 25px;
-	width: 60px;
-}
-
-#unit-control-panel .switch-control .ol-switch-fill {
-	background-color: var(--accent-light-blue);
-}
-
-#unit-control-panel .switch-control .ol-switch-fill::after {
-	background-color: white;
-}
-
-#unit-control-panel .switch-control .ol-switch[data-value="true"]>.ol-switch-fill::before {
-	content: "YES";
-}
-
-#unit-control-panel .switch-control .ol-switch[data-value="false"]>.ol-switch-fill::before {
-	content: "NO";
+.switch-control h4 img {
+	height: 15px;
+	margin-left: 10px;
+	cursor: pointer;
+	filter: invert(100%);
+	opacity: 80%;
 }
 
 #advanced-settings-div {
-	column-gap: 5px;
+	align-items: center;
+	column-gap: 8px;
 	display: flex;
+	height: fit-content;
+	position: relative;
 }
 
-#advanced-settings-div>*:nth-child(2) {
-	margin-left: auto;
-}
-
-#advanced-settings-div button {
+#advanced-settings-div > button {
+	background-color: var(--background-grey);
+    box-shadow: 0px 2px 5px #000A;
+	font-size:13px;
 	height: 40px;
+	padding:0 20px;
+}
+
+#delete-options {
+	font-size:13px;
+}
+
+#delete-options.ol-select > .ol-select-value:after {
+	content: "";
+}
+
+#delete-options.ol-select > .ol-select-value svg {
+	background-color: transparent;
+	position: absolute;
+	right:2px;
+	translate:0 1px;
+}
+
+#delete-options.ol-select > .ol-select-value svg * {
+	fill: var(--primary-red);
+}
+
+#delete-options * {
+	background-color: var(--background-steel);
+}
+
+#delete-options.ol-select > .ol-select-value:hover,
+#delete-options .ol-select-options > div:not(.hr):hover,
+#delete-options .ol-select-options > div:not(.hr):hover button,
+#delete-options .ol-select-options > div hr {
+	background-color: var(--background-grey);
+}
+
+#delete-options .ol-select-options > div:first-of-type {
+	margin-top:12px;
+	padding-top:0;
+}
+
+#delete-options .ol-select-options > div:last-of-type {
+	margin-bottom:12px;
+	padding-bottom:0;
+}
+
+#delete-options button {
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+}
+
+#delete-options button svg {
+	background-color: transparent;
+	margin-right: 10px;
+	width: 18px;
+	max-height: 18px;
+}
+
+#delete-options button svg * {
+	stroke: red;
 }
 
 /* Element visibility control */
@@ -217,14 +378,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/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>