mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Started building react app
This commit is contained in:
Davide Passoni
parent
61dc9c8b31
commit
42c7a36da7
21
frontend/react/.eslintrc.cjs
Normal file
21
frontend/react/.eslintrc.cjs
Normal file
@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react/jsx-no-target-blank': 'off',
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
24
frontend/react/.gitignore
vendored
Normal file
24
frontend/react/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
frontend/react/README.md
Normal file
8
frontend/react/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
13
frontend/react/index.html
Normal file
13
frontend/react/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="h-screen w-screen"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
37
frontend/react/package.json
Normal file
37
frontend/react/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "react",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=8080",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@types/leaflet": "^1.9.8",
|
||||
"@types/react-leaflet": "^3.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-control-mini-map": "^0.4.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-leaflet": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.6",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"vite": "^5.2.0"
|
||||
}
|
||||
}
|
||||
6
frontend/react/postcss.config.js
Normal file
6
frontend/react/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
1
frontend/react/public/vite.svg
Normal file
1
frontend/react/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
40
frontend/react/src/App.css
Normal file
40
frontend/react/src/App.css
Normal file
@ -0,0 +1,40 @@
|
||||
#root {
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
28
frontend/react/src/App.tsx
Normal file
28
frontend/react/src/App.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import React from 'react'
|
||||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
|
||||
import { MapContainer, TileLayer } from 'react-leaflet'
|
||||
|
||||
import { Map } from './map/map'
|
||||
import { Header } from './ui/header'
|
||||
|
||||
var map: Map;
|
||||
const position = [51.505, -0.09]
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<MapContainer center={position} zoom={13} className='absolute w-full h-full top-0 left-0'>
|
||||
<TileLayer
|
||||
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
|
||||
/>
|
||||
</MapContainer>
|
||||
<Header></Header>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
1
frontend/react/src/assets/react.svg
Normal file
1
frontend/react/src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
324
frontend/react/src/constants/constants.ts
Normal file
324
frontend/react/src/constants/constants.ts
Normal file
@ -0,0 +1,324 @@
|
||||
import { LatLng, LatLngBounds } from "leaflet";
|
||||
//import { MapMarkerVisibilityControl } from "../map/map";
|
||||
|
||||
export const UNITS_URI = "units";
|
||||
export const WEAPONS_URI = "weapons";
|
||||
export const LOGS_URI = "logs";
|
||||
export const AIRBASES_URI = "airbases";
|
||||
export const BULLSEYE_URI = "bullseyes";
|
||||
export const MISSION_URI = "mission";
|
||||
export const COMMANDS_URI = "commands";
|
||||
|
||||
export const NONE = "None";
|
||||
export const GAME_MASTER = "Game master";
|
||||
export const BLUE_COMMANDER = "Blue commander";
|
||||
export const RED_COMMANDER = "Red commander";
|
||||
|
||||
export const VISUAL = 1;
|
||||
export const OPTIC = 2;
|
||||
export const RADAR = 4;
|
||||
export const IRST = 8;
|
||||
export const RWR = 16;
|
||||
export const DLINK = 32;
|
||||
|
||||
export const states: string[] = ["none", "idle", "reach-destination", "attack", "follow", "land", "refuel", "AWACS", "tanker", "bomb-point", "carpet-bomb", "bomb-building", "fire-at-area", "simulate-fire-fight", "scenic-aaa", "miss-on-purpose", "land-at-point"];
|
||||
export const ROEs: string[] = ["free", "designated", "", "return", "hold"];
|
||||
export const reactionsToThreat: string[] = ["none", "manoeuvre", "passive", "evade"];
|
||||
export const emissionsCountermeasures: string[] = ["silent", "attack", "defend", "free"];
|
||||
|
||||
export const ERAS = [{
|
||||
"name": "Early Cold War",
|
||||
"chronologicalOrder": 2
|
||||
}, {
|
||||
"name": "Late Cold War",
|
||||
"chronologicalOrder": 4
|
||||
}, {
|
||||
"name": "Mid Cold War",
|
||||
"chronologicalOrder": 3
|
||||
}, {
|
||||
"name": "Modern",
|
||||
"chronologicalOrder": 5
|
||||
}, {
|
||||
"name": "WW2",
|
||||
"chronologicalOrder": 1
|
||||
}];
|
||||
|
||||
export const ROEDescriptions: string[] = [
|
||||
"Free (Attack anyone)",
|
||||
"Designated (Attack the designated target only) \nWARNING: Ground and Navy units don't respect this ROE, it will be equivalent to weapons FREE.",
|
||||
"",
|
||||
"Return (Only fire if fired upon) \nWARNING: Ground and Navy units don't respect this ROE, it will be equivalent to weapons FREE.",
|
||||
"Hold (Never fire)"
|
||||
];
|
||||
|
||||
export const reactionsToThreatDescriptions: string[] = [
|
||||
"None (No reaction)",
|
||||
"Manoeuvre (no countermeasures)",
|
||||
"Passive (Countermeasures only, no manoeuvre)",
|
||||
"Evade (Countermeasures and manoeuvers)"
|
||||
];
|
||||
|
||||
export const emissionsCountermeasuresDescriptions: string[] = [
|
||||
"Silent (Radar OFF, no ECM)",
|
||||
"Attack (Radar only for targeting, ECM only if locked)",
|
||||
"Defend (Radar for searching, ECM if locked)",
|
||||
"Always on (Radar and ECM always on)"
|
||||
];
|
||||
|
||||
export const shotsScatterDescriptions: string[] = [
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a large scatter",
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a medium scatter",
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a small scatter (Radar guided units will track shots when the enemy unit is close)"
|
||||
];
|
||||
|
||||
export const shotsIntensityDescriptions: string[] = [
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a low rate of fire",
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a medium rate of fire",
|
||||
"When performing scenic shooting tasks like simulated firefights, will shoot with a high rate of fire"
|
||||
];
|
||||
|
||||
export const minSpeedValues: { [key: string]: number } = { Aircraft: 100, Helicopter: 0, NavyUnit: 0, GroundUnit: 0 };
|
||||
export const maxSpeedValues: { [key: string]: number } = { Aircraft: 800, Helicopter: 300, NavyUnit: 60, GroundUnit: 60 };
|
||||
export const speedIncrements: { [key: string]: number } = { Aircraft: 25, Helicopter: 10, NavyUnit: 5, GroundUnit: 5 };
|
||||
export const minAltitudeValues: { [key: string]: number } = { Aircraft: 0, Helicopter: 0 };
|
||||
export const maxAltitudeValues: { [key: string]: number } = { Aircraft: 50000, Helicopter: 10000 };
|
||||
export const altitudeIncrements: { [key: string]: number } = { Aircraft: 500, Helicopter: 100 };
|
||||
|
||||
export const minimapBoundaries = {
|
||||
"Nevada": [ // NTTR
|
||||
new LatLng(39.7982463, -119.985425),
|
||||
new LatLng(34.4037128, -119.7806729),
|
||||
new LatLng(34.3483316, -112.4529351),
|
||||
new LatLng(39.7372411, -112.1130805),
|
||||
new LatLng(39.7982463, -119.985425)
|
||||
],
|
||||
"Syria": [ // Syria
|
||||
new LatLng(37.3630556, 29.2686111),
|
||||
new LatLng(31.8472222, 29.8975),
|
||||
new LatLng(32.1358333, 42.1502778),
|
||||
new LatLng(37.7177778, 42.3716667),
|
||||
new LatLng(37.3630556, 29.2686111)
|
||||
],
|
||||
"Caucasus": [ // Caucasus
|
||||
new LatLng(39.6170191, 27.634935),
|
||||
new LatLng(38.8735863, 47.1423108),
|
||||
new LatLng(47.3907982, 49.3101946),
|
||||
new LatLng(48.3955879, 26.7753625),
|
||||
new LatLng(39.6170191, 27.634935)
|
||||
],
|
||||
"PersianGulf": [ // Persian Gulf
|
||||
new LatLng(32.9355285, 46.5623682),
|
||||
new LatLng(21.729393, 47.572675),
|
||||
new LatLng(21.8501348, 63.9734737),
|
||||
new LatLng(33.131584, 64.7313594),
|
||||
new LatLng(32.9355285, 46.5623682)
|
||||
],
|
||||
"MarianaIslands": [ // Marianas
|
||||
new LatLng(22.09, 135.0572222),
|
||||
new LatLng(10.5777778, 135.7477778),
|
||||
new LatLng(10.7725, 149.3918333),
|
||||
new LatLng(22.5127778, 149.5427778),
|
||||
new LatLng(22.09, 135.0572222)
|
||||
],
|
||||
"Falklands": [ // South Atlantic
|
||||
new LatLng(-49.097217, -79.418267),
|
||||
new LatLng(-56.874517, -79.418267),
|
||||
new LatLng(-56.874517, -43.316433),
|
||||
new LatLng(-49.097217, -43.316433),
|
||||
new LatLng(-49.097217, -79.418267)
|
||||
],
|
||||
"Normandy": [ // Normandy
|
||||
new LatLng(50.44, -3.29),
|
||||
new LatLng(48.12, -3.29),
|
||||
new LatLng(48.12, 3.70),
|
||||
new LatLng(50.44, 3.70),
|
||||
new LatLng(50.44, -3.29)
|
||||
],
|
||||
"SinaiMap": [ // Sinai
|
||||
new LatLng(34.312222, 28.523333),
|
||||
new LatLng(25.946944, 28.523333),
|
||||
new LatLng(25.946944, 36.897778),
|
||||
new LatLng(34.312222, 36.897778),
|
||||
new LatLng(34.312222, 28.523333)
|
||||
]
|
||||
};
|
||||
|
||||
export const mapBounds = {
|
||||
"Syria": { bounds: new LatLngBounds([31.8472222, 29.8975], [37.7177778, 42.3716667]), zoom: 5 },
|
||||
"MarianaIslands": { bounds: new LatLngBounds([10.5777778, 135.7477778], [22.5127778, 149.5427778]), zoom: 5 },
|
||||
"Nevada": { bounds: new LatLngBounds([34.4037128, -119.7806729], [39.7372411, -112.1130805]), zoom: 5 },
|
||||
"PersianGulf": { bounds: new LatLngBounds([21.729393, 47.572675], [33.131584, 64.7313594]), zoom: 4 },
|
||||
"Caucasus": { bounds: new LatLngBounds([39.6170191, 27.634935], [47.3907982, 49.3101946]), zoom: 4 },
|
||||
"Falklands": { bounds: new LatLngBounds([-49.097217, -79.418267], [-56.874517, -43.316433]), zoom: 3 },
|
||||
"Normandy": { bounds: new LatLngBounds([50.44, -3.29], [48.12, 3.70]), zoom: 5 },
|
||||
"SinaiMap": { bounds: new LatLngBounds([34.312222, 28.523333], [25.946944, 36.897778]), zoom: 4 },
|
||||
}
|
||||
|
||||
export const DCSMapsZoomLevelsByTheatre: { [key: string]: { minNativeZoom?: number, maxNativeZoom?: number, minZoom?: number }[] } = {
|
||||
"Syria": [],
|
||||
"MarianaIslands": [{ minNativeZoom: 1, maxNativeZoom: 13, }, { minNativeZoom: 14, maxNativeZoom: 18, minZoom: 14 }],
|
||||
"Nevada": [],
|
||||
"PersianGulf": [],
|
||||
"Caucasus": [],
|
||||
"Falklands": [],
|
||||
"Normandy": [],
|
||||
"SinaiMap": [],
|
||||
}
|
||||
|
||||
export const defaultMapLayers = {
|
||||
"ArcGIS Satellite": {
|
||||
urlTemplate: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
minZoom: 1,
|
||||
maxZoom: 19,
|
||||
attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Mapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
|
||||
},
|
||||
"OpenStreetMap Mapnik": {
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
minZoom: 1,
|
||||
maxZoom: 20,
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}
|
||||
}
|
||||
|
||||
/* Map constants */
|
||||
export const IDLE = "Idle";
|
||||
export const MOVE_UNIT = "Move unit";
|
||||
export const COALITIONAREA_DRAW_POLYGON = "Draw Coalition Area";
|
||||
export const visibilityControls: string[] = ["human", "dcs", "aircraft", "helicopter", "groundunit-sam", "groundunit", "navyunit", "airbase"];
|
||||
export const visibilityControlsTypes: string[][] = [["human"], ["dcs"], ["aircraft"], ["helicopter"], ["groundunit-sam"], ["groundunit"], ["navyunit"], ["airbase"]];
|
||||
export const visibilityControlsTooltips: string[] = ["Toggle human players visibility", "Toggle DCS controlled units visibility", "Toggle aircrafts visibility", "Toggle helicopter visibility", "Toggle SAM units visibility", "Toggle ground units (not SAM) visibility", "Toggle navy units visibility", "Toggle airbases visibility"];
|
||||
|
||||
//export const MAP_MARKER_CONTROLS: MapMarkerVisibilityControl[] = [{
|
||||
// "name": "Human",
|
||||
// "image": "visibility/human.svg",
|
||||
// "toggles": ["human"],
|
||||
// "tooltip": "Toggle human players' visibility"
|
||||
//}, {
|
||||
// "image": "visibility/olympus.svg",
|
||||
// "isProtected": false,
|
||||
// "name": "Olympus",
|
||||
// "protectable": false,
|
||||
// "toggles": ["olympus"],
|
||||
// "tooltip": "Toggle Olympus-controlled units' visibility"
|
||||
//}, {
|
||||
// "image": "visibility/dcs.svg",
|
||||
// "isProtected": true,
|
||||
// "name": "DCS",
|
||||
// "protectable": true,
|
||||
// "toggles": ["dcs"],
|
||||
// "tooltip": "Toggle DCS-controlled units' visibility"
|
||||
//}, {
|
||||
// "category": "Aircraft",
|
||||
// "image": "visibility/aircraft.svg",
|
||||
// "name": "Aircraft",
|
||||
// "toggles": ["aircraft"],
|
||||
// "tooltip": "Toggle aircraft's visibility"
|
||||
//}, {
|
||||
// "category": "Helicopter",
|
||||
// "image": "visibility/helicopter.svg",
|
||||
// "name": "Helicopter",
|
||||
// "toggles": ["helicopter"],
|
||||
// "tooltip": "Toggle helicopters' visibility"
|
||||
//}, {
|
||||
// "category": "AirDefence",
|
||||
// "image": "visibility/groundunit-sam.svg",
|
||||
// "name": "Air defence",
|
||||
// "toggles": ["groundunit-sam"],
|
||||
// "tooltip": "Toggle air defence units' visibility"
|
||||
//}, {
|
||||
// "image": "visibility/groundunit.svg",
|
||||
// "name": "Ground units",
|
||||
// "toggles": ["groundunit"],
|
||||
// "tooltip": "Toggle ground units' visibility"
|
||||
//}, {
|
||||
// "category": "GroundUnit",
|
||||
// "image": "visibility/navyunit.svg",
|
||||
// "name": "Naval",
|
||||
// "toggles": ["navyunit"],
|
||||
// "tooltip": "Toggle naval units' visibility"
|
||||
//}, {
|
||||
// "image": "visibility/airbase.svg",
|
||||
// "name": "Airbase",
|
||||
// "toggles": ["airbase"],
|
||||
// "tooltip": "Toggle airbase' visibility"
|
||||
//}];
|
||||
|
||||
export const IADSTypes = ["AAA", "SAM Site", "Radar (EWR)"];
|
||||
export const IADSDensities: { [key: string]: number } = { "AAA": 0.8, "SAM Site": 0.1, "Radar (EWR)": 0.05 };
|
||||
export const GROUND_UNIT_AIR_DEFENCE_REGEX: RegExp = /(\b(AAA|SAM|MANPADS?|[mM]anpads?)|[sS]tinger\b)/;
|
||||
export const HIDE_GROUP_MEMBERS = "Hide group members when zoomed out";
|
||||
export const SHOW_UNIT_LABELS = "Show unit labels (L)";
|
||||
export const SHOW_UNITS_ENGAGEMENT_RINGS = "Show units threat range rings (Q)";
|
||||
export const HIDE_UNITS_SHORT_RANGE_RINGS = "Hide short range units threat range rings (R)";
|
||||
export const SHOW_UNITS_ACQUISITION_RINGS = "Show units detection range rings (E)";
|
||||
export const FILL_SELECTED_RING = "Fill the threat range rings of selected units (F)";
|
||||
export const SHOW_UNIT_CONTACTS = "Show selected units contact lines";
|
||||
export const SHOW_UNIT_PATHS = "Show selected unit paths";
|
||||
export const SHOW_UNIT_TARGETS = "Show selected unit targets";
|
||||
export const DCS_LINK_PORT = "DCS Camera link port";
|
||||
export const DCS_LINK_RATIO = "DCS Camera zoom";
|
||||
|
||||
export enum DataIndexes {
|
||||
startOfData = 0,
|
||||
category,
|
||||
alive,
|
||||
human,
|
||||
controlled,
|
||||
coalition,
|
||||
country,
|
||||
name,
|
||||
unitName,
|
||||
groupName,
|
||||
state,
|
||||
task,
|
||||
hasTask,
|
||||
position,
|
||||
speed,
|
||||
horizontalVelocity,
|
||||
verticalVelocity,
|
||||
heading,
|
||||
track,
|
||||
isActiveTanker,
|
||||
isActiveAWACS,
|
||||
onOff,
|
||||
followRoads,
|
||||
fuel,
|
||||
desiredSpeed,
|
||||
desiredSpeedType,
|
||||
desiredAltitude,
|
||||
desiredAltitudeType,
|
||||
leaderID,
|
||||
formationOffset,
|
||||
targetID,
|
||||
targetPosition,
|
||||
ROE,
|
||||
reactionToThreat,
|
||||
emissionsCountermeasures,
|
||||
TACAN,
|
||||
radio,
|
||||
generalSettings,
|
||||
ammo,
|
||||
contacts,
|
||||
activePath,
|
||||
isLeader,
|
||||
operateAs,
|
||||
shotsScatter,
|
||||
shotsIntensity,
|
||||
health,
|
||||
endOfData = 255
|
||||
};
|
||||
|
||||
export const MGRS_PRECISION_10KM = 2;
|
||||
export const MGRS_PRECISION_1KM = 3;
|
||||
export const MGRS_PRECISION_100M = 4;
|
||||
export const MGRS_PRECISION_10M = 5;
|
||||
export const MGRS_PRECISION_1M = 6;
|
||||
|
||||
export const DELETE_CYCLE_TIME = 0.05;
|
||||
export const DELETE_SLOW_THRESHOLD = 50;
|
||||
|
||||
export const GROUPING_ZOOM_TRANSITION = 13;
|
||||
|
||||
export const MAX_SHOTS_SCATTER = 3;
|
||||
export const MAX_SHOTS_INTENSITY = 3;
|
||||
export const SHOTS_SCATTER_DEGREES = 10;
|
||||
78
frontend/react/src/index.css
Normal file
78
frontend/react/src/index.css
Normal file
@ -0,0 +1,78 @@
|
||||
@import "./leaflet/leaflet.css";
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.z-ui {
|
||||
z-index: 2000;
|
||||
}
|
||||
292
frontend/react/src/interfaces.ts
Normal file
292
frontend/react/src/interfaces.ts
Normal file
@ -0,0 +1,292 @@
|
||||
import { LatLng } from "leaflet";
|
||||
|
||||
class Airbase {
|
||||
|
||||
}
|
||||
|
||||
export interface ContextMenuOption {
|
||||
tooltip: string;
|
||||
src: string;
|
||||
callback: CallableFunction;
|
||||
}
|
||||
|
||||
export interface AirbasesData {
|
||||
airbases: { [key: string]: any },
|
||||
sessionHash: string;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export interface BullseyesData {
|
||||
bullseyes: { [key: string]: { latitude: number, longitude: number, coalition: string } },
|
||||
sessionHash: string;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export interface MissionData {
|
||||
mission: {
|
||||
theatre: string,
|
||||
dateAndTime: DateAndTime;
|
||||
commandModeOptions: CommandModeOptions;
|
||||
coalitions: { red: string[], blue: string[] };
|
||||
}
|
||||
time: number;
|
||||
sessionHash: string;
|
||||
}
|
||||
|
||||
export interface CommandModeOptions {
|
||||
commandMode: string;
|
||||
restrictSpawns: boolean;
|
||||
restrictToCoalition: boolean;
|
||||
setupTime: number;
|
||||
spawnPoints: {
|
||||
red: number,
|
||||
blue: number
|
||||
},
|
||||
eras: string[]
|
||||
}
|
||||
|
||||
export interface DateAndTime {
|
||||
date: { Year: number, Month: number, Day: number };
|
||||
time: { h: number, m: number, s: number };
|
||||
elapsedTime: number;
|
||||
startTime: number;
|
||||
}
|
||||
|
||||
export interface LogData {
|
||||
logs: { [key: string]: string },
|
||||
sessionHash: string;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export interface ServerRequestOptions {
|
||||
time?: number;
|
||||
commandHash?: string;
|
||||
}
|
||||
|
||||
export interface UnitSpawnTable {
|
||||
unitType: string,
|
||||
location: LatLng,
|
||||
altitude?: number,
|
||||
loadout?: string,
|
||||
skill: string,
|
||||
liveryID: string
|
||||
}
|
||||
|
||||
export interface ObjectIconOptions {
|
||||
showState: boolean,
|
||||
showVvi: boolean,
|
||||
showHealth: boolean,
|
||||
showHotgroup: boolean,
|
||||
showUnitIcon: boolean,
|
||||
showShortLabel: boolean,
|
||||
showFuel: boolean,
|
||||
showAmmo: boolean,
|
||||
showSummary: boolean,
|
||||
showCallsign: boolean,
|
||||
rotateToHeading: boolean
|
||||
}
|
||||
|
||||
export interface GeneralSettings {
|
||||
prohibitJettison: boolean;
|
||||
prohibitAA: boolean;
|
||||
prohibitAG: boolean;
|
||||
prohibitAfterburner: boolean;
|
||||
prohibitAirWpn: boolean;
|
||||
}
|
||||
|
||||
export interface TACAN {
|
||||
isOn: boolean;
|
||||
channel: number;
|
||||
XY: string;
|
||||
callsign: string;
|
||||
}
|
||||
|
||||
export interface Radio {
|
||||
frequency: number;
|
||||
callsign: number;
|
||||
callsignNumber: number;
|
||||
}
|
||||
|
||||
export interface Ammo {
|
||||
quantity: number,
|
||||
name: string,
|
||||
guidance: number,
|
||||
category: number,
|
||||
missileCategory: number
|
||||
}
|
||||
|
||||
export interface Contact {
|
||||
ID: number,
|
||||
detectionMethod: number
|
||||
}
|
||||
|
||||
export interface Offset {
|
||||
x: number,
|
||||
y: number,
|
||||
z: number
|
||||
}
|
||||
|
||||
export interface UnitData {
|
||||
category: string,
|
||||
categoryDisplayName: string,
|
||||
ID: number;
|
||||
alive: boolean;
|
||||
human: boolean;
|
||||
controlled: boolean;
|
||||
coalition: string;
|
||||
country: number;
|
||||
name: string;
|
||||
unitName: string;
|
||||
groupName: string;
|
||||
state: string;
|
||||
task: string;
|
||||
hasTask: boolean;
|
||||
position: LatLng;
|
||||
speed: number;
|
||||
horizontalVelocity: number;
|
||||
verticalVelocity: number;
|
||||
heading: number;
|
||||
track: number;
|
||||
isActiveTanker: boolean;
|
||||
isActiveAWACS: boolean;
|
||||
onOff: boolean;
|
||||
followRoads: boolean;
|
||||
fuel: number;
|
||||
desiredSpeed: number;
|
||||
desiredSpeedType: string;
|
||||
desiredAltitude: number;
|
||||
desiredAltitudeType: string;
|
||||
leaderID: number;
|
||||
formationOffset: Offset;
|
||||
targetID: number;
|
||||
targetPosition: LatLng;
|
||||
ROE: string;
|
||||
reactionToThreat: string;
|
||||
emissionsCountermeasures: string;
|
||||
TACAN: TACAN;
|
||||
radio: Radio;
|
||||
generalSettings: GeneralSettings;
|
||||
ammo: Ammo[];
|
||||
contacts: Contact[];
|
||||
activePath: LatLng[];
|
||||
isLeader: boolean;
|
||||
operateAs: string;
|
||||
shotsScatter: number;
|
||||
shotsIntensity: number;
|
||||
health: number;
|
||||
}
|
||||
|
||||
export interface LoadoutItemBlueprint {
|
||||
name: string;
|
||||
quantity: number;
|
||||
effectiveAgainst?: string;
|
||||
}
|
||||
|
||||
export interface LoadoutBlueprint {
|
||||
fuel: number;
|
||||
items: LoadoutItemBlueprint[];
|
||||
roles: string[];
|
||||
code: string;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface UnitBlueprint {
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
coalition: string;
|
||||
era: string;
|
||||
label: string;
|
||||
shortLabel: string;
|
||||
type?: string;
|
||||
loadouts?: LoadoutBlueprint[];
|
||||
filename?: string;
|
||||
liveries?: { [key: string]: { name: string, countries: string[] } };
|
||||
cost?: number;
|
||||
barrelHeight?: number;
|
||||
muzzleVelocity?: number;
|
||||
aimTime?: number;
|
||||
shotsToFire?: number;
|
||||
shotsBaseInterval?: number;
|
||||
shotsBaseScatter?: number;
|
||||
description?: string;
|
||||
abilities?: string;
|
||||
tags?: string;
|
||||
acquisitionRange?: number;
|
||||
engagementRange?: number;
|
||||
targetingRange?: number;
|
||||
aimMethodRange?: number;
|
||||
alertnessTimeConstant?: number;
|
||||
canTargetPoint?: boolean;
|
||||
canRearm?: boolean;
|
||||
canAAA?: boolean;
|
||||
indirectFire?: boolean;
|
||||
markerFile?: string;
|
||||
unitWhenGrouped?: string;
|
||||
}
|
||||
|
||||
export interface UnitSpawnOptions {
|
||||
roleType: string;
|
||||
name: string;
|
||||
latlng: LatLng;
|
||||
coalition: string;
|
||||
count: number;
|
||||
country: string;
|
||||
skill: string;
|
||||
loadout: LoadoutBlueprint | undefined;
|
||||
airbase: Airbase | undefined;
|
||||
liveryID: string | undefined;
|
||||
altitude: number | undefined;
|
||||
}
|
||||
|
||||
export interface AirbaseOptions {
|
||||
name: string,
|
||||
position: L.LatLng
|
||||
}
|
||||
|
||||
export interface AirbaseChartData {
|
||||
elevation: string,
|
||||
ICAO: string,
|
||||
TACAN: string,
|
||||
runways: AirbaseChartRunwayData[]
|
||||
}
|
||||
|
||||
export interface AirbaseChartRunwayHeadingData {
|
||||
[index: string]: {
|
||||
magHeading: string,
|
||||
ILS: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface AirbaseChartRunwayData {
|
||||
headings: AirbaseChartRunwayHeadingData[],
|
||||
length: string
|
||||
}
|
||||
|
||||
export interface Listener {
|
||||
callback: CallableFunction;
|
||||
name?: string
|
||||
}
|
||||
|
||||
export interface ShortcutOptions {
|
||||
altKey?: boolean;
|
||||
callback: CallableFunction;
|
||||
context?: string;
|
||||
ctrlKey?: boolean;
|
||||
name?: string;
|
||||
shiftKey?: boolean;
|
||||
}
|
||||
|
||||
export interface ShortcutKeyboardOptions extends ShortcutOptions {
|
||||
code: string;
|
||||
event?: "keydown" | "keyup";
|
||||
}
|
||||
|
||||
export interface ShortcutMouseOptions extends ShortcutOptions {
|
||||
button: number;
|
||||
event: "mousedown" | "mouseup";
|
||||
}
|
||||
|
||||
export interface Manager {
|
||||
add: CallableFunction;
|
||||
}
|
||||
10
frontend/react/src/main.jsx
Normal file
10
frontend/react/src/main.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
6
frontend/react/src/map/map.ts
Normal file
6
frontend/react/src/map/map.ts
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
import * as L from "leaflet"
|
||||
|
||||
export class Map extends L.Map {
|
||||
|
||||
}
|
||||
29
frontend/react/src/ui/header.tsx
Normal file
29
frontend/react/src/ui/header.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import { StateButton } from './statebuttons';
|
||||
import { faPlus, faGamepad, faRuler, faPencil } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
library.add(faPlus, faGamepad, faRuler, faPencil)
|
||||
|
||||
type HeaderProps = {
|
||||
|
||||
}
|
||||
|
||||
type HeaderState = {
|
||||
|
||||
}
|
||||
|
||||
export class Header extends React.Component<HeaderProps, HeaderState> {
|
||||
render() {
|
||||
return (
|
||||
<div className='absolute top-0 left-0 h-16 w-full z-ui bg-background-steel flex flex-row items-center px-5'>
|
||||
<div className="flex flex-row items-center gap-1">
|
||||
<StateButton icon="fa-solid fa-plus"></StateButton>
|
||||
<StateButton icon="fa-solid fa-gamepad"></StateButton>
|
||||
<StateButton icon="fa-solid fa-ruler"></StateButton>
|
||||
<StateButton icon="fa-solid fa-pencil"></StateButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
30
frontend/react/src/ui/statebuttons.tsx
Normal file
30
frontend/react/src/ui/statebuttons.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { IconProp } from '@fortawesome/fontawesome-svg-core'
|
||||
|
||||
type ButtonProperties = {
|
||||
icon: string
|
||||
}
|
||||
|
||||
type ButtonState = {
|
||||
active: boolean
|
||||
}
|
||||
|
||||
export class StateButton extends React.Component<ButtonProperties, ButtonState> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
active: true
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
var computedClassName = "";
|
||||
computedClassName += this.state.active? 'bg-white text-background-steel': 'bg-transparent text-white border-white';
|
||||
|
||||
return (
|
||||
<FontAwesomeIcon icon={this.props.icon as IconProp} className={computedClassName + " rounded w-5 h-5 p-2 border-2"} onClick={() => this.setState({active: !this.state.active})}>
|
||||
</FontAwesomeIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
18
frontend/react/tailwind.config.js
Normal file
18
frontend/react/tailwind.config.js
Normal file
@ -0,0 +1,18 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: {
|
||||
steel: "#202831"
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
7
frontend/react/vite.config.js
Normal file
7
frontend/react/vite.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
<div id="airbase-contextmenu" class="ol-panel" oncontextmenu="return false;">
|
||||
<h3 id="airbase-name"></h3>
|
||||
|
||||
<dl id="airbase-chart-data" class="ol-data-grid">
|
||||
<dt>ICAO</dt>
|
||||
<dd data-point="ICAO"></dd>
|
||||
<dt>Coalition</dt>
|
||||
<dd data-point="coalition"></dd>
|
||||
<dt>Elevation</dt>
|
||||
<dd><span data-point="elevation"></span>ft</dd>
|
||||
<dt>TACAN</dt>
|
||||
<dd data-point="TACAN"></dd>
|
||||
</dl>
|
||||
|
||||
<h4>Runways</h4>
|
||||
<div id="airbase-runways">
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<button id="spawn-airbase-aircraft-button" data-coalition="blue" title="Spawn aircraft" data-on-click="contextMenuSpawnAirbase" class="deploy-unit-button">Spawn</button>
|
||||
<button id="land-here-button" title="Land here" data-on-click="contextMenuLandAirbase" class="hide">Land here</button>
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
<div id="airbase-spawn-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
|
||||
<div id="airbase-active-coalition-label" data-coalition="blue"></div>
|
||||
<div class="upper-bar ol-panel">
|
||||
<button data-coalition="blue" id="airbase-aircraft-spawn-button" title="Spawn aircraft" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/aircraft.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="airbase-helicopter-spawn-button" title="Spawn helicopter" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "helicopter" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/helicopter.svg" inject-svg></button>
|
||||
</div>
|
||||
<div id="airbase-aircraft-spawn-menu" class="ol-context-menu-panel ol-panel hide">
|
||||
<!-- Here the aircraft spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="airbase-helicopter-spawn-menu" class="ol-context-menu-panel ol-panel hide">
|
||||
<!-- Here the helicopter spawn menu will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
@ -1,67 +0,0 @@
|
||||
<div id="coalition-area-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
|
||||
<div id="area-coalition-label" data-coalition="blue"></div>
|
||||
<div class="upper-bar ol-panel">
|
||||
<div class="switch-control coalition no-label"><div id="coalition-area-switch" class="ol-switch"></div></div>
|
||||
<button data-coalition="blue" id="iads-button" title="Create Integrated Air Defense System" data-on-click="coalitionAreaContextMenuShow"
|
||||
data-on-click-params='{ "type": "iads" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/sam.svg" inject-svg></button>
|
||||
<!--<button data-coalition="blue" id="cap-button" title="Create Combat Air Patrols" data-on-click="coalitionAreaContextMenuShow"
|
||||
data-on-click-params='{ "type": "cap" }' class="ol-context-menu-button"></button>-->
|
||||
<button data-coalition="blue" id="coalitionarea-back-button" title="Send to back" data-on-click="coalitionAreaBringToBack"
|
||||
class="ol-context-menu-button"><img src="/resources/theme/images/buttons/other/back.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="coalitionarea-delete-button" title="Delete area" data-on-click="coalitionAreaDelete"
|
||||
class="ol-context-menu-button"><img src="/resources/theme/images/buttons/other/delete.svg" inject-svg></button>
|
||||
</div>
|
||||
<div id="iads-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<div id="iads-units-type-options" class="ol-select">
|
||||
<div class="ol-select-value">Unit types</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the iads unit types checkboxes will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ol-select-container">
|
||||
<div id="iads-era-options" class="ol-select">
|
||||
<div class="ol-select-value">Units eras</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the iads unit era buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ol-select-container">
|
||||
<div id="iads-range-options" class="ol-select">
|
||||
<div class="ol-select-value">Units ranges</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the iads unit range buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div id="coalition-units-checkbox" class="ol-checkbox">
|
||||
<label title="Use coalition specific units only (e.g. Patriot sites for blue coalition, SA-2s for red coalition)">
|
||||
<input type="checkbox"/>
|
||||
Coalition specific units
|
||||
</label>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div id="iads-density-slider" class="ol-slider-container">
|
||||
<dl class="ol-data-grid">
|
||||
<dt> IADS density </dt> <dd> <div class="ol-slider-value"></div> </dd>
|
||||
</dl>
|
||||
<input title="An high density value will cause more units to be deployed" type="range" min="0" max="100" value="0" class="ol-slider">
|
||||
</div>
|
||||
<div id="iads-distribution-slider" class="ol-slider-container">
|
||||
<dl class="ol-data-grid">
|
||||
<dt> IADS distribution </dt> <dd> <div class="ol-slider-value"></div> </dd>
|
||||
</dl>
|
||||
<input title="If distrubution is low units will be concentrated around towns, otherwise they will spread around the map more evenly" type="range" min="0" max="100" value="0" class="ol-slider">
|
||||
</div>
|
||||
<div id="force-coalition" class="ol-checkbox">
|
||||
<label title="Force the use of coalition appropriate units only">
|
||||
<input type="checkbox"/>
|
||||
Force coalition appropriate units
|
||||
</label>
|
||||
</div>
|
||||
<button class="create-iads-button" title="" data-coalition="blue" data-on-click="contextMenuCreateIads">Add units to IADS</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,71 +0,0 @@
|
||||
<div id="map-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
|
||||
<div id="active-coalition-label" data-coalition="blue"></div>
|
||||
<div id="spawn-mode-tabs">
|
||||
<button id="spawn-tab-history" class="ol-context-menu-button spawn-mode-tab"><img src="resources/theme/images/buttons/other/clock-rotate-left-solid.svg" inject-svg></button>
|
||||
<button id="spawn-tab-new" class="ol-context-menu-button spawn-mode-tab" data-show-label><img src="resources/theme/images/buttons/other/arrow-down-solid.svg" inject-svg></button>
|
||||
</div>
|
||||
<div class="spawn-mode ol-panel ol-context-menu-panel hide">
|
||||
<h4>Spawn history</h4>
|
||||
<div id="spawn-history-menu" class="ol-scrollable">
|
||||
<p>You do not have any units to show.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spawn-mode">
|
||||
<div class="upper-bar ol-panel">
|
||||
<div class="switch-control coalition no-label"><div id="coalition-switch" class="ol-switch"></div></div>
|
||||
<button data-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "aircraft" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/aircraft.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="helicopter-spawn-button" title="Spawn helicopter" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "helicopter" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/helicopter.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="air-defence-spawn-button" title="Spawn air defence unit" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "air-defence" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/sam.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="groundunit-spawn-button" title="Spawn ground unit" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "groundunit" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/groundunit.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="coalition-area-button" title="Edit coalition area" data-on-click="editCoalitionArea"
|
||||
class="ol-context-menu-button"><img src="/resources/theme/images/buttons/other/edit.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="more-options-button" title="More options" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "more" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/more.svg" inject-svg></button>
|
||||
|
||||
</div>
|
||||
<div id="more-options-button-bar" class="upper-bar ol-panel hide">
|
||||
<button data-coalition="blue" id="navyunit-spawn-button" title="Spawn navy unit" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "navyunit" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/navyunit.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "smoke" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/smoke.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="explosion-spawn-button" title="Explosion" data-on-click="mapContextMenuShow"
|
||||
data-on-click-params='{ "type": "explosion" }' class="ol-context-menu-button"><img src="/resources/theme/images/buttons/spawn/explosion.svg" inject-svg></button>
|
||||
<button data-coalition="blue" id="polygon-draw-button" title="Enter polygon draw mode" data-on-click="toggleCoalitionAreaDraw"
|
||||
data-on-click-params='{"type": "polygon"}' class="ol-context-menu-button"><img src="resources/theme/images/buttons/tools/draw-polygon-solid.svg" inject-svg></button>
|
||||
</div>
|
||||
<div id="aircraft-spawn-menu" class="ol-context-menu-panel ol-panel hide">
|
||||
<!-- Here the aircraft spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="helicopter-spawn-menu" class="ol-context-menu-panel ol-panel hide">
|
||||
<!-- Here the helicopter spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="air-defence-spawn-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<!-- Here the air defence units' spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="groundunit-spawn-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<!-- Here the ground units' spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="navyunit-spawn-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<!-- Here the navy units' spawn menu will be shown -->
|
||||
</div>
|
||||
<div id="smoke-spawn-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<button class="smoke-button" title="" data-smoke-color="white" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "white" }'>White smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="blue" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "blue" }'>Blue smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="red" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "red" }'>Red smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="green" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "green" }'>Green smoke</button>
|
||||
<button class="smoke-button" title="" data-smoke-color="orange" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "orange" }'>Orange smoke</button>
|
||||
</div>
|
||||
<div id="explosion-menu" class="ol-panel ol-context-menu-panel hide">
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "normal", "strength": 1 }'>Small explosion</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "normal", "strength": 10 }'>Big explosion</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "phosphorous"}'>White phosphorous</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "napalm"}'>Napalm</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "secondary"}'>Explosion with debries</button>
|
||||
<button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "explosionType": "fire"}'>Static fire</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
<div id="unit-contextmenu" class="ol-panel" oncontextmenu="return false;">
|
||||
<!-- Here the available unit options will be shown -->
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
<%- include('dialogs/advancedsettings.ejs') %>
|
||||
<%- include('dialogs/commandmodesettings.ejs') %>
|
||||
<%- include('dialogs/customformation.ejs') %>
|
||||
<%- include('dialogs/importexport.ejs', {
|
||||
"dialogId": "unit-export-dialog",
|
||||
"submitButtonText": "Export units to file",
|
||||
"textContent": "Select the unit categories you would like to export. Note: only ground and naval units can be exported at this time.",
|
||||
"title": "Export",
|
||||
"showFilenameInput": true
|
||||
}) %>
|
||||
<%- include('dialogs/importexport.ejs', {
|
||||
"dialogId": "unit-import-dialog",
|
||||
"submitButtonText": "Import units into mission",
|
||||
"textContent": "Select the unit categories you would like to import.",
|
||||
"title": "Import",
|
||||
"showFilenameInput": false
|
||||
}) %>
|
||||
<%- include('dialogs/slowdelete.ejs') %>
|
||||
<%- include('dialogs/splash.ejs') %>
|
||||
@ -1,162 +0,0 @@
|
||||
<div id="advanced-settings-dialog" class="ol-panel ol-dialog olympus-dialog-close hide" oncontextmenu="return false;">
|
||||
<div class="ol-dialog-close" data-on-click="closeDialog"></div>
|
||||
|
||||
<div class="ol-dialog-header">
|
||||
<h3 id="unit-name">Olympus 1-1</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
|
||||
<!-- General settings -->
|
||||
<div id="general-settings">
|
||||
<div class="ol-group">
|
||||
<h4>General settings</h4>
|
||||
<hr>
|
||||
</div>
|
||||
<div id="general-settings-grid">
|
||||
<div id="prohibit-jettison-checkbox" class="ol-checkbox air-unit-checkbox">
|
||||
<label title="The unit will not jettison external stores">
|
||||
<input type="checkbox"/>
|
||||
Prohibit jettison
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="prohibit-afterburner-checkbox" class="ol-checkbox air-unit-checkbox">
|
||||
<label title="The unit will not engage the afterburner">
|
||||
<input type="checkbox" />
|
||||
Prohibit afterburner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="prohibit-AA-checkbox" class="ol-checkbox air-unit-checkbox">
|
||||
<label title="The unit will not engage airborne targets">
|
||||
<input type="checkbox" />
|
||||
Prohibit A/A
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="prohibit-AG-checkbox" class="ol-checkbox air-unit-checkbox">
|
||||
<label title="The unit will not engage ground targets">
|
||||
<input type="checkbox" />
|
||||
Prohibit A/G
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="prohibit-air-wpn-checkbox" class="ol-checkbox">
|
||||
<label title="The unit will not engage air weapons (e.g. SAM sites will not engage HARMs)">
|
||||
<input type="checkbox" />
|
||||
Prohibit air wpn engage
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasking -->
|
||||
<!--
|
||||
<div id="tasking">
|
||||
<div class="ol-group">
|
||||
<h4>Tasking</h4>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="tanker-checkbox" class="ol-checkbox">
|
||||
<label title="The unit will operate as Air to Air Refuelling tanker for airplanes that have a compatible refuelling system">
|
||||
<input type="checkbox" />
|
||||
Operate as AAR tanker
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="AWACS-checkbox" class="ol-checkbox">
|
||||
<label title="The unit will operate as AWACS on datalink">
|
||||
<input type="checkbox" />
|
||||
Operate as AWACS
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- TACAN options -->
|
||||
<div id="TACAN-options">
|
||||
<div class="ol-group">
|
||||
<h4>TACAN options</h4>
|
||||
<hr>
|
||||
</div>
|
||||
<div id="TACAN-checkbox" class="ol-checkbox">
|
||||
<label title="Turn ON the TACAN">
|
||||
<input type="checkbox" />
|
||||
Activate TACAN
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>TACAN: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="TACAN-channel" class="ol-text-input">
|
||||
<input type="number" min="1" max="126" step="1" value="40">
|
||||
</div>
|
||||
|
||||
<div id="TACAN-XY" class="ol-select">
|
||||
<div class="ol-select-value">X</div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="TACAN-callsign" class="ol-text-input">
|
||||
<input type="text" maxlength="3" value="TKR" style="width: 50px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Radio options -->
|
||||
<div id="radio-options">
|
||||
<div class="ol-group">
|
||||
<h4>Radio options</h4>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label> Radio frequency: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="radio-mhz" class="ol-text-input">
|
||||
<input type="number" min="1" max="999" step="1" value="260">
|
||||
</div>
|
||||
|
||||
<div id="radio-decimals" class="ol-select">
|
||||
<div class="ol-select-value">.000</div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label> Radio callsign: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="radio-callsign" class="ol-select">
|
||||
<div class="ol-select-value"></div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
-
|
||||
</label>
|
||||
|
||||
<div id="radio-callsign-number" class="ol-text-input">
|
||||
<input type="number" min="1" max="999" step="1" value="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button class="ol-button-apply" data-on-click="applyAdvancedSettings">Apply</button>
|
||||
<button class="ol-button-close" data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,72 +0,0 @@
|
||||
<div id="command-mode-settings-dialog" class="ol-panel ol-dialog olympus-dialog-close hide" oncontextmenu="return false;">
|
||||
<div class="ol-dialog-close" data-on-click="closeDialog"></div>
|
||||
|
||||
<div class="ol-dialog-header">
|
||||
<h3 id="unit-name">Command mode settings</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<div id="restrict-spawns" class="ol-checkbox">
|
||||
<label title="If false, no spawn restrictions will be applied">
|
||||
<input type="checkbox" data-on-click="toggleSpawnRestrictions"/>
|
||||
Enable spawn restrictions
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="restrict-to-coalition" class="ol-checkbox">
|
||||
<label title="If true, commanders will be allowed to only spawn units that belong to their coalition. E.g. blue commanders will be able to spawn F/A-18 Hornets, but not MiG-29s.">
|
||||
<input type="checkbox"/>
|
||||
Restrict units to coalition
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Setup time: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="setup-time" class="ol-text-input">
|
||||
<input type="number" min="-99999" max="99999" step="1" value="10" />
|
||||
</div>
|
||||
<label>minutes</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Available eras: </label>
|
||||
|
||||
<div id="command-mode-era-options" class="ol-select">
|
||||
<div class="ol-select-value">Select eras</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where all the available era buttons will be shown-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<h4>Spawn points</h4>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Blue spawn points: </label>
|
||||
<div id="blue-spawn-points" class="ol-text-input">
|
||||
<input type="number" min="0" max="999999" step="1" value="1000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Red spawn points: </label>
|
||||
<div id="red-spawn-points" class="ol-text-input">
|
||||
<input type="number" min="0" max="999999" step="1" value="1000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button class="ol-button-apply" data-on-click="applycommandModeOptions">Apply</button>
|
||||
<button class="ol-button-close" data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,48 +0,0 @@
|
||||
<div id="custom-formation-dialog" class="ol-panel ol-dialog olympus-dialog-close hide" oncontextmenu="return false;">
|
||||
<div class="ol-dialog-close" data-on-click="closeDialog"></div>
|
||||
|
||||
<div class="ol-dialog-header">
|
||||
<h3 id="unit-name">Custom formation</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<div class="formation-position-clock">
|
||||
<div class="clock-hand" style="top: 0px; left: 50px;"><input type="radio" id="formation-1" name="formation-position" value="1"></div>
|
||||
<div class="clock-hand" style="top: 14px; left: 14px;"><input type="radio" id="formation-2" name="formation-position" value="2"></div>
|
||||
<div class="clock-hand" style="top: 50px; left: 0px; "><input type="radio" id="formation-3" name="formation-position" value="3"></div>
|
||||
<div class="clock-hand" style="top: 86px; left: 14px;"><input type="radio" id="formation-4" name="formation-position" value="4"></div>
|
||||
<div class="clock-hand" style="top: 100px; left: 50px;"><input type="radio" id="formation-5" name="formation-position" value="5"></div>
|
||||
<div class="clock-hand" style="top: 86px; left: 86px;"><input type="radio" id="formation-6" name="formation-position" value="6" checked></div>
|
||||
<div class="clock-hand" style="top: 50px; left: 100px"><input type="radio" id="formation-7" name="formation-position" value="7"></div>
|
||||
<div class="clock-hand" style="top: 14px; left: 86px;"><input type="radio" id="formation-8" name="formation-position" value="8"></div>
|
||||
<div style="top: 50px; left: 50px;" id="reference-system"></div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Distance: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="distance" class="ol-text-input">
|
||||
<input type="number" min="0" max="999999" step="1" value="150">
|
||||
</div>
|
||||
<label>ft</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>Up-down: </label>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="up-down" class="ol-text-input">
|
||||
<input type="number" min="-99999" max="99999" step="1" value="30">
|
||||
</div>
|
||||
<label>ft</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button class="ol-button-apply" data-on-click="applyCustomFormation">Apply</button>
|
||||
<button class="ol-button-close" data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,43 +0,0 @@
|
||||
<div id="<%= dialogId %>" class="ol-panel ol-dialog file-import-export hide" oncontextmenu="return false;">
|
||||
<div class="ol-dialog-header">
|
||||
<h3><%= title %></h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
|
||||
<div class="import-form" data-on-error="hide">
|
||||
<p><%= textContent %></p>
|
||||
|
||||
<% if (showFilenameInput) { %>
|
||||
<div class="export-filename-container">
|
||||
<label>Filename:</label>
|
||||
<input id="export-filename">
|
||||
<img src="resources/theme/images/icons/keyboard-solid.svg">
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<table class="categories-coalitions">
|
||||
<thead>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="import-errors" data-on-error="show">
|
||||
|
||||
<p>Data could not be imported because:</p>
|
||||
|
||||
<ul class="import-error-reasons"></ul>
|
||||
|
||||
<div>Please correct the error(s) and run the import again.</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button class="start-transfer" data-on-error="hide"><%= submitButtonText %></button>
|
||||
<button data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -1,21 +0,0 @@
|
||||
<div id="slow-delete-dialog" class="ol-panel ol-dialog hide" oncontextmenu="return false;">
|
||||
<div class="ol-dialog-header">
|
||||
<h3>Confirm deletion method</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<p>You are trying to delete a large amount of units (<span class="deletion-count"></span>), which can cause the server to lag for players.</p>
|
||||
<p>You may:
|
||||
<ul>
|
||||
<li>delete in batches (less lag but Olympus cannot process any additional orders until<br /> all units have been deleted);</li>
|
||||
<li>delete immediately (you can continue to give Olympus orders but players may<br />experience lag while this happens);</li>
|
||||
<li>cancel this instruction.</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button data-action="delete-slow">Delete in batches (~<span class="deletion-time"></span>s)</button>
|
||||
<button data-action="delete-immediate">Delete immediately</button>
|
||||
<button data-action="delete-cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,51 +0,0 @@
|
||||
<div id="splash-screen" class="ol-dialog" oncontextmenu="return false;">
|
||||
<div id="splash-content" class="ol-dialog-content">
|
||||
<div id="app-summary">
|
||||
<h2>DCS Olympus</h2>
|
||||
<h4>Dynamic Unit Command</h4>
|
||||
<div class="app-version">Version <span class="app-version-number">{{OLYMPUS_VERSION_NUMBER}}</span></div>
|
||||
<div class="app-version">Latest version <span id="latest-version" class="app-version-number"></span></div>
|
||||
</div>
|
||||
|
||||
<form id="authentication-form">
|
||||
<div><h5>Display Name</h5> <input type="text" id="username" name="username" required autocomplete="username" placeholder="Enter display name..."></div>
|
||||
<div><h5>Password</h5> <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Enter game master/commander password..."></div>
|
||||
<button type="submit" id="connection-button" class="ol-button-apply">Connect</button>
|
||||
</form>
|
||||
|
||||
<h5 id="login-status"><br></h5>
|
||||
|
||||
<div id="legal-stuff" class="ol-scrollable">
|
||||
<h5>DISCLAIMER</h5>
|
||||
<p>
|
||||
Copyright (C) 2023 Veltro & Gang
|
||||
</p>
|
||||
<p>
|
||||
DCS Olympus (the "MATERIAL" or "Software") is provided completely free
|
||||
to users subject to the it under both the terms of version 3 of the GNU
|
||||
General Public License as published by the Free Software Foundation, and
|
||||
the additional terms set out below; except where such terms conflict with this
|
||||
disclaimer, in which case, the terms of this disclaimer shall prevail.
|
||||
</p>
|
||||
<p>
|
||||
The authors and/or copyright holders of the Software have not received any
|
||||
financial benefit in connection with the Software. In any event, the
|
||||
Software is provided “as is”, without warranty of any kind, express or
|
||||
implied, including but not limited to the warranties of merchantability,
|
||||
fitness for a particular purpose and non-infringement. In no event shall
|
||||
the authors and/or copyright holders be liable for any claim, damages or
|
||||
other liability, whether in an action of contract, tort or otherwise,
|
||||
arising from, out of or in connection with the Software or the use or o
|
||||
ther dealings in the Software.
|
||||
</p>
|
||||
<p>
|
||||
Any party making use of the Software in any manner agrees to be
|
||||
bound by the terms set out in this disclaimer, version 3 of the GNU
|
||||
General Public Licence, and the Additional Terms below.
|
||||
</p>
|
||||
<p>
|
||||
THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
<div id="info-popup" class="ol-popup hide" oncontextmenu="return false;">
|
||||
|
||||
</div>
|
||||
@ -1,7 +0,0 @@
|
||||
<div id="connection-status-panel" class="ol-panel" oncontextmenu="return false;">
|
||||
<div id="connection-status-message">
|
||||
<abbr title="Elapsed time. Click to toggle." class="time-display mission-elapsed-time"></abbr>
|
||||
<abbr title="Mission time (local). Click to toggle." class="time-display mission-time"></abbr>
|
||||
</div>
|
||||
<div id="connection-status-light"></div>
|
||||
</div>
|
||||
@ -1,3 +0,0 @@
|
||||
<div id="hotgroup-panel">
|
||||
<!-- Here is where the various hotgroup buttons will show up -->
|
||||
</div>
|
||||
@ -1,22 +0,0 @@
|
||||
<div id="log-panel" oncontextmenu="return false;">
|
||||
<div class="ol-panel" data-on-click="toggleLogPanel">
|
||||
<div id="log-panel-header">Server log</div>
|
||||
|
||||
<div id="log-panel-header-right">
|
||||
<div id="server-status-panel" oncontextmenu="return false;">
|
||||
<dl>
|
||||
<dt><abbr title="Server frame rate (approx)">FPS</abbr>:</dt>
|
||||
<dd id="server-frame-rate"></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><abbr title="Server load">Load</abbr>:</dt>
|
||||
<dd id="server-load"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
<img src="/resources/theme/images/icons/chevron-down.svg" inject-svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="ol-panel ol-scrollable closed">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,63 +0,0 @@
|
||||
<div id="mouse-info-panel" class="ol-panel" oncontextmenu="return false;">
|
||||
|
||||
<div id="measuring-tool" class="mouse-tool hide">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-measure-position" class="svg-icon"><img src="/resources/theme/images/icons/pin.svg" inject-svg></div>
|
||||
<div id="measure-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unit-bullseye-tool" class="mouse-tool hide">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-unit-position" class="svg-icon" data-tooltip="Bearing/range from selected unit"><img src="/resources/theme/images/icons/plane.svg" inject-svg></div>
|
||||
<div id="unit-position" class="br-info" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bullseyes-tool" class="mouse-tool">
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-bullseye-2" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="blue"></div>
|
||||
<div id="bullseye-2" class="br-info" data-coalition="blue" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-bullseye-1" data-tooltip="Bearing/range from this bullseye" data-label="BE" data-coalition="red"></div>
|
||||
<div id="bullseye-1" class="br-info" data-coalition="red" data-bearing="---" data-distance="---" data-distance-units="NM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="coordinates-tool" class="mouse-tool" data-location-system="LatLng">
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="MGRS">
|
||||
<div id="ref-mouse-position-mgrs"></div>
|
||||
<div id="mouse-position-mgrs" class="coordinates"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="LatLng">
|
||||
<div id="ref-mouse-position-latitude" data-location-system="LatLng"></div>
|
||||
<div id="mouse-position-latitude" class="coordinates" data-location-system="LatLng"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="LatLng">
|
||||
<div id="ref-mouse-position-longitude" data-location-system="LatLng"></div>
|
||||
<div id="mouse-position-longitude" class="coordinates" data-location-system="LatLng"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="UTM">
|
||||
<div id="ref-mouse-position-utm-northing" data-location-system="UTM"></div>
|
||||
<div id="mouse-position-utm-northing" class="coordinates" data-location-system="UTM"></div>
|
||||
</div>
|
||||
|
||||
<div class="mouse-tool-item" data-location-system="UTM">
|
||||
<div id="ref-mouse-position-utm-easting" data-location-system="UTM"></div>
|
||||
<div id="mouse-position-utm-easting" class="coordinates" data-location-system="UTM"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mouse-tool-item">
|
||||
<div id="ref-mouse-position-elevation" data-label="H"></div>
|
||||
<div id="mouse-position-elevation" class="elevation" data-value="---"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,10 +0,0 @@
|
||||
<div id="server-status-panel" class="ol-panel" oncontextmenu="return false;">
|
||||
<dl class="ol-data-grid">
|
||||
<dt>Server frame rate:</dt>
|
||||
<dd id="server-frame-rate"></dd>
|
||||
</dl>
|
||||
<dl class="ol-data-grid">
|
||||
<dt>Olympus load:</dt>
|
||||
<dd id="server-load"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
@ -1,168 +0,0 @@
|
||||
<div id="unit-control-panel" oncontextmenu="return false;">
|
||||
<div class="ol-panel"><img src="resources/theme/images/icons/gamepad-solid.svg" inject-svg></div>
|
||||
|
||||
<div class="ol-panel ol-panel-padding-lg" id="unit-control-panel-content">
|
||||
<h3>Selected Units<span class="num-selected-units"></span></h3>
|
||||
|
||||
<div id="unit-selection">
|
||||
|
||||
<div id="selected-units-container" class="ol-scrollable">
|
||||
<!-- This is where all the unit selection buttons will be shown-->
|
||||
<!-- <button class="pill highlight-coalition" data-coalition="blue" data-label="18">Olympus 1-1</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="unit-controls" class="ol-scrollable">
|
||||
<div id="flight-data">
|
||||
<div id="speed-slider" class="ol-slider-container flight-control-ol-slider">
|
||||
<dl class="ol-data-grid">
|
||||
<dt>Speed</dt>
|
||||
<dd>
|
||||
<div class="ol-slider-value"></div>
|
||||
<div id="speed-type-switch" class="ol-switch"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
<input type="range" min="0" max="100" value="0" class="ol-slider">
|
||||
<div class="ol-slider-min-max"></div>
|
||||
</div>
|
||||
<div id="altitude-slider" class="ol-slider-container flight-control-ol-slider">
|
||||
<dl class="ol-data-grid">
|
||||
<dt> Altitude
|
||||
</dt>
|
||||
<dd>
|
||||
<div class="ol-slider-value"></div>
|
||||
<div id="altitude-type-switch" class="ol-switch"></div>
|
||||
</dd>
|
||||
</dl>
|
||||
<input type="range" min="0" max="100" value="0" class="ol-slider">
|
||||
<div class="ol-slider-min-max"></div>
|
||||
</div>
|
||||
<h5 id="categories-tooltip">Multiple categories selected</h5>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="roe">
|
||||
<h4>Rules of engagement</h4>
|
||||
<div id="roe-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
<!-- This is where the roe buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="threat">
|
||||
<h4>Reaction to threat</h4>
|
||||
<div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
<!-- This is where the reaction to threat buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="emissions-countermeasures">
|
||||
<h4>Radar & ECM</h4>
|
||||
<div id="emissions-countermeasures-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
<!-- This is where the emissions/countermeasures buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shots-scatter">
|
||||
<h4>Shots scatter</h4>
|
||||
<div id="shots-scatter-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
<!-- This is where the shots scatter buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shots-intensity">
|
||||
<h4>Shots intensity</h4>
|
||||
<div id="shots-intensity-buttons-container" class="ol-group ol-button-box ol-option-button">
|
||||
<!-- This is where the shots intensity buttons will be shown -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tanker-on" class="switch-control yes-no">
|
||||
<h4>Enable tanker <img src="/resources/theme/images/icons/circle-question-regular.svg"
|
||||
title="Instructs the unit to operate as AAR tanker. A/A TACAN, radio frequency and callsign set in Settings dialog.">
|
||||
</h4>
|
||||
<div id="tanker-on-switch" class="ol-switch"></div>
|
||||
</div>
|
||||
|
||||
<div id="AWACS-on" class="switch-control yes-no">
|
||||
<h4>Airborne Early Warning <img src="/resources/theme/images/icons/circle-question-regular.svg"
|
||||
title="Enables datalink and AI radio calls. Radio frequency and callsign set in Settings dialog.">
|
||||
</h4>
|
||||
<div id="AWACS-on-switch" class="ol-switch"></div>
|
||||
</div>
|
||||
|
||||
<div id="operate-as" class="switch-control coalition">
|
||||
<h4>Operate as <img src="/resources/theme/images/icons/circle-question-regular.svg"
|
||||
title="Determines if the unit will target red or blue units when performing scenic tasks."></h4>
|
||||
<div id="operate-as-switch" class="ol-switch"></div>
|
||||
</div>
|
||||
|
||||
<div id="ai-on-off" class="switch-control yes-no">
|
||||
<h4>Unit active <img src="/resources/theme/images/icons/circle-question-regular.svg"
|
||||
title="Toggling this disables unit AI completely. It will no longer move, react or emit radio waves.">
|
||||
</h4>
|
||||
<div id="on-off-switch" class="ol-switch" title=""></div>
|
||||
</div>
|
||||
|
||||
<div id="follow-roads" class="switch-control yes-no">
|
||||
<h4>Follow roads <img src="/resources/theme/images/icons/circle-question-regular.svg"
|
||||
title="WARNING: follow roads movements can cause lag"></h4>
|
||||
<div id="follow-roads-switch" class="ol-switch"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="advanced-settings-div">
|
||||
<button id="advanced-settings-button" class="ol-button-settings ol-box-shadow"
|
||||
data-on-click="showAdvancedSettings">Settings</button>
|
||||
<div id="delete-options" class="ol-select">
|
||||
<div class="ol-select-value ol-select-warning">
|
||||
Delete unit
|
||||
</div>
|
||||
<div class="ol-select-options">
|
||||
<div><button class="ol-button-white" data-on-click="deleteSelectedUnits"
|
||||
title="Immediately remove the unit from the simulation"><img
|
||||
src="/resources/theme/images/icons/trash-can-regular.svg" inject-svg>Delete</button>
|
||||
</div>
|
||||
<div class="hr">
|
||||
<hr>
|
||||
</div>
|
||||
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits"
|
||||
data-on-click-params='{ "type": "normal" }' title="Normal explosion"><img
|
||||
src="/resources/theme/images/icons/explosion-solid.svg" inject-svg>Blow up</button>
|
||||
</div>
|
||||
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits"
|
||||
data-on-click-params='{ "type": "secondary" }' title="Small explosion with debries"><img
|
||||
src="/resources/theme/images/icons/burst-solid.svg" inject-svg>Cook off</button></div>
|
||||
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits"
|
||||
data-on-click-params='{ "type": "phosphorous" }' title="White phosphorous explosion"><img
|
||||
src="/resources/theme/images/icons/smog-solid.svg" inject-svg>Phosp.</button></div>
|
||||
<div><button class="ol-button-warning" data-on-click="explodeSelectedUnits"
|
||||
data-on-click-params='{ "type": "napalm" }' title="Napalm"><img
|
||||
src="/resources/theme/images/icons/fire-solid.svg" inject-svg>Napalm</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rapid-controls" class="ol-panel">
|
||||
<button id="climb" title="Increase units altitude" class="ol-button" data-on-click="selectedUnitsChangeAltitude"
|
||||
data-on-click-params='{ "type": "climb" }'><img src="/resources/theme/images/icons/climb.svg"
|
||||
inject-svg></button>
|
||||
<button id="descend" title="Descrease units altitude" class="ol-button"
|
||||
data-on-click="selectedUnitsChangeAltitude" data-on-click-params='{ "type": "descend" }'><img
|
||||
src="/resources/theme/images/icons/descent.svg" inject-svg></button>
|
||||
<button id="fast" title="Increase units speed" class="ol-button" data-on-click="selectedUnitsChangeSpeed"
|
||||
data-on-click-params='{ "type": "fast" }'><img src="/resources/theme/images/icons/speed-increase.svg"
|
||||
inject-svg></button>
|
||||
<button id="slow" title="Decrease units speed" class="ol-button" data-on-click="selectedUnitsChangeSpeed"
|
||||
data-on-click-params='{ "type": "slow" }'><img src="/resources/theme/images/icons/speed-decrease.svg"
|
||||
inject-svg></button>
|
||||
<button id="stop" title="Stop unit and go back to idle state" class="ol-button"
|
||||
data-on-click="selectedUnitsChangeSpeed" data-on-click-params='{ "type": "stop" }'><img
|
||||
src="/resources/theme/images/icons/hand-solid.svg" inject-svg></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,29 +0,0 @@
|
||||
<div id="unit-info-panel" class="ol-panel" oncontextmenu="return false;">
|
||||
<img src="resources/theme/images/icons/circle-info-solid.svg" inject-svg>
|
||||
|
||||
<div id="general" class="panel-section">
|
||||
<h3 id="unit-name"></h3>
|
||||
<div class="ol-group">
|
||||
<div id="unit-label"></div>
|
||||
<div id="unit-control"></div>
|
||||
</div>
|
||||
<div id="unit-group" class="pill" data-group-name=""></div>
|
||||
<div id="current-task" class="pill highlight-coalition" data-coalition="blue" data-current-task=""></div>
|
||||
</div>
|
||||
|
||||
<div id="loadout-container" class="panel-section">
|
||||
|
||||
<div id="loadout">
|
||||
<img id="loadout-silhouette"/>
|
||||
<div id="loadout-items" class="ol-scrollable">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fuel-percentage" data-percentage=""></div>
|
||||
<div id="fuel-display">
|
||||
<div id="fuel-bar" class="highlight-coalition" data-coalition="blue" style="width:30%;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,11 +0,0 @@
|
||||
<div id="unit-list-panel" class="ol-panel hide">
|
||||
<h3>Unit List</h3>
|
||||
<div class="unit-list-unit headers">
|
||||
<div data-sort-field="unitName">Name</div>
|
||||
<div data-sort-field="name">Vehicle</div>
|
||||
<div data-sort-field="category">Category</div>
|
||||
<div data-sort-field="coalition">Coalition</div>
|
||||
<div>Human/AI</div>
|
||||
</div>
|
||||
<div id="unit-list-panel-content" class="ol-scrollable"></div>
|
||||
</div>
|
||||
@ -1,8 +0,0 @@
|
||||
<nav id="command-mode-toolbar" class="ol-panel hide" oncontextmenu="return false;">
|
||||
<img src="resources/theme/images/icons/person-military-pointing-solid.svg" inject-svg>
|
||||
<span id="command-mode"></span>
|
||||
<div id="spawn-points-container">Spawn points<span id="spawn-points"></span></div>
|
||||
<span id="command-mode-phase"></span>
|
||||
<button id="command-mode-settings-button" class="ol-button" data-on-click="showCommandModeDialog"><img
|
||||
src="/resources/theme/images/icons/gears-solid.svg" inject-svg>Settings</button>
|
||||
</nav>
|
||||
@ -1,110 +0,0 @@
|
||||
<nav id="primary-toolbar" class="ol-panel" oncontextmenu="return false;">
|
||||
<div id="app-icon" class="ol-select ol-select-image">
|
||||
<div class="ol-select-value icon">
|
||||
<img src="images/icon.png" class="main-logo" />
|
||||
</div>
|
||||
<div class="ol-select-options">
|
||||
<div id="toolbar-summary">
|
||||
<h3>DCS Olympus</h3>
|
||||
<div class="accent-green app-version-number">version {{OLYMPUS_VERSION_NUMBER}}.{{OLYMPUS_COMMIT_HASH}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/wWXyVVBZT7" target="_blank">Discord</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/Pax1601/DCSOlympus" target="_blank">Github</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/Pax1601/DCSOlympus/wiki/User-Guide" target="_blank">User guide</a>
|
||||
</div>
|
||||
<div data-on-click="exportToFile">
|
||||
<button>Export to file</button>
|
||||
</div>
|
||||
<div data-on-click="importFromFile">
|
||||
<button>Import from file</button>
|
||||
</div>
|
||||
<div data-on-click="reloadPage">
|
||||
<a href="" target="_blank" data-on-click="reloadPage">Restart Olympus</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="map-type" class="ol-select">
|
||||
<div class="ol-select-value"><img src="resources/theme/images/icons/map-source.svg" inject-svg /><span
|
||||
class="ol-select-value-text">DCS Map</span></div>
|
||||
<div class="ol-select-options">
|
||||
<!-- Here the available map sources will be listed-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-visibility-options" class="ol-select">
|
||||
<div class="ol-select-value"><img src="/resources/theme/images/icons/gears-solid.svg" inject-svg />Options
|
||||
</div>
|
||||
<div class="ol-select-options">
|
||||
<!-- This is where the advanced visibility options will be listed -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="ol-panel" oncontextmenu="return false;">
|
||||
<div id="view-label" class="ol-panel-tab">
|
||||
<img src="resources/theme/images/icons/eye-solid.svg" inject-svg />
|
||||
<span>View</span>
|
||||
</div>
|
||||
<div id="unit-visibility-control" class="ol-group ol-navbar-buttons-group">
|
||||
<!-- Here the available visibility controls will be listed -->
|
||||
</div>
|
||||
|
||||
<div id="coalition-visibility-control" class="ol-group ol-navbar-buttons-group">
|
||||
<div>
|
||||
<button id="coalition-visibility-control-blue" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "blue" }' title="Toggle Blue coalition visibility"><img
|
||||
src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition"
|
||||
data-coalition="blue" inject-svg /></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="coalition-visibility-control-red" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "red" }' title="Toggle Red coalition visibility"><img
|
||||
src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition"
|
||||
data-coalition="red" inject-svg /></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="coalition-visibility-control-neutral" data-on-click="toggleCoalitionVisibility"
|
||||
data-on-click-params='{ "coalition": "neutral" }' title="Toggle Neutral coalition visibility"><img
|
||||
src="/resources/theme/images/buttons/visibility/shield.svg" class="fill-coalition"
|
||||
data-coalition="neutral" inject-svg /></button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="ol-panel" oncontextmenu="return false;">
|
||||
<div id="camera-label" class="ol-panel-tab">
|
||||
<img src="resources/theme/images/icons/camera.svg" inject-svg />
|
||||
<span>Camera</span>
|
||||
</div>
|
||||
<div id="camera-control" class="ol-group ol-navbar-buttons-group">
|
||||
<div>
|
||||
<button class="off red" id="camera-link-control" data-on-click="toggleCameraLinkStatus"
|
||||
title="Camera link to DCS is not available"><img src="/resources/theme/images/buttons/camera/linked.svg"
|
||||
inject-svg /></button>
|
||||
</div>
|
||||
|
||||
<div id="camera-link-type-switch" class="ol-switch"></div>
|
||||
|
||||
<!--
|
||||
<div>
|
||||
<button class="off" id="camera-slew-to-position" data-on-click="slewCameraToPosition" title="Camera link to DCS is not available"><img src="/resources/theme/images/buttons/camera/slew.svg" inject-svg /></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button style="color: black" id="camera-link-control-map" data-on-click="toggleCameraLinkMapType"
|
||||
title="Camera link to DCS is not available"><img src="/resources/theme/images/buttons/camera/F10.svg"
|
||||
inject-svg /></button>
|
||||
</div>
|
||||
|
||||
-->
|
||||
</div>
|
||||
</nav>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user