mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Reworked unit as as state machine, added formations, added measuring on map, added copy-paste
This commit is contained in:
Pax1601
@@ -1,11 +1,8 @@
|
||||
Change cursor when in moving mode
|
||||
Show airfields and enable airfield spawn
|
||||
RTB
|
||||
tanker
|
||||
scenario dropdown
|
||||
explosion
|
||||
wrong name for ground units
|
||||
ground units don't move
|
||||
improve map zIndex
|
||||
fuel is wrong (either 0 or 1, its is casting it to int somewhere)
|
||||
weapons should not be selected
|
||||
weapons should not be selectable
|
||||
266
client/package-lock.json
generated
266
client/package-lock.json
generated
@@ -1,10 +1,11 @@
|
||||
{
|
||||
"name": "client",
|
||||
"name": "DCSOlympus",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "DCSOlympus",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@types/geojson": "^7946.0.10",
|
||||
@@ -21,6 +22,7 @@
|
||||
"devDependencies": {
|
||||
"browserify": "^17.0.0",
|
||||
"concurrently": "^7.6.0",
|
||||
"nodemon": "^2.0.20",
|
||||
"tsify": "^5.0.4",
|
||||
"typescript": "^4.9.4",
|
||||
"watchify": "^4.0.0"
|
||||
@@ -39,6 +41,12 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
@@ -1507,6 +1515,12 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/ignore-by-default": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
||||
"integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/inflight": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
||||
@@ -1971,6 +1985,94 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon": {
|
||||
"version": "2.0.20",
|
||||
"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz",
|
||||
"integrity": "sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.5.2",
|
||||
"debug": "^3.2.7",
|
||||
"ignore-by-default": "^1.0.1",
|
||||
"minimatch": "^3.1.2",
|
||||
"pstree.remy": "^1.1.8",
|
||||
"semver": "^5.7.1",
|
||||
"simple-update-notifier": "^1.0.7",
|
||||
"supports-color": "^5.5.0",
|
||||
"touch": "^3.1.0",
|
||||
"undefsafe": "^2.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"nodemon": "bin/nodemon.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/nodemon"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon/node_modules/debug": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon/node_modules/has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/nodemon/node_modules/semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/nodemon/node_modules/supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/nopt": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
|
||||
"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"abbrev": "1"
|
||||
},
|
||||
"bin": {
|
||||
"nopt": "bin/nopt.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
@@ -2178,6 +2280,12 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/pstree.remy": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
|
||||
"integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/public-encrypt": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
|
||||
@@ -2485,6 +2593,27 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/simple-update-notifier": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
|
||||
"integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"semver": "~7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-update-notifier/node_modules/semver": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
|
||||
"integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@@ -2766,6 +2895,18 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/touch": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
|
||||
"integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"nopt": "~1.0.10"
|
||||
},
|
||||
"bin": {
|
||||
"nodetouch": "bin/nodetouch.js"
|
||||
}
|
||||
},
|
||||
"node_modules/tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
@@ -2876,6 +3017,12 @@
|
||||
"undeclared-identifiers": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/undefsafe": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
|
||||
"integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
@@ -3088,6 +3235,12 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
|
||||
"dev": true
|
||||
},
|
||||
"accepts": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
@@ -4280,6 +4433,12 @@
|
||||
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
|
||||
"dev": true
|
||||
},
|
||||
"ignore-by-default": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
|
||||
"integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
|
||||
"dev": true
|
||||
},
|
||||
"inflight": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
||||
@@ -4647,6 +4806,71 @@
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
|
||||
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
|
||||
},
|
||||
"nodemon": {
|
||||
"version": "2.0.20",
|
||||
"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.20.tgz",
|
||||
"integrity": "sha512-Km2mWHKKY5GzRg6i1j5OxOHQtuvVsgskLfigG25yTtbyfRGn/GNvIbRyOf1PSCKJ2aT/58TiuUsuOU5UToVViw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "^3.5.2",
|
||||
"debug": "^3.2.7",
|
||||
"ignore-by-default": "^1.0.1",
|
||||
"minimatch": "^3.1.2",
|
||||
"pstree.remy": "^1.1.8",
|
||||
"semver": "^5.7.1",
|
||||
"simple-update-notifier": "^1.0.7",
|
||||
"supports-color": "^5.5.0",
|
||||
"touch": "^3.1.0",
|
||||
"undefsafe": "^2.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
|
||||
"dev": true
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"dev": true
|
||||
},
|
||||
"semver": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"nopt": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
|
||||
"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"abbrev": "1"
|
||||
}
|
||||
},
|
||||
"normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
@@ -4815,6 +5039,12 @@
|
||||
"ipaddr.js": "1.9.1"
|
||||
}
|
||||
},
|
||||
"pstree.remy": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
|
||||
"integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
|
||||
"dev": true
|
||||
},
|
||||
"public-encrypt": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
|
||||
@@ -5069,6 +5299,23 @@
|
||||
"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
|
||||
"dev": true
|
||||
},
|
||||
"simple-update-notifier": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
|
||||
"integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver": "~7.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
|
||||
"integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@@ -5300,6 +5547,15 @@
|
||||
"is-number": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"touch": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
|
||||
"integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"nopt": "~1.0.10"
|
||||
}
|
||||
},
|
||||
"tree-kill": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
|
||||
@@ -5384,6 +5640,12 @@
|
||||
"xtend": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"undefsafe": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
|
||||
"integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
|
||||
"dev": true
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
@@ -5544,4 +5806,4 @@
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "DCS Olympus",
|
||||
"name": "DCSOlympus",
|
||||
"node-main": "./bin/www",
|
||||
"main": "http://localhost:3000",
|
||||
"version": "0.0.0",
|
||||
@@ -24,8 +24,9 @@
|
||||
"devDependencies": {
|
||||
"browserify": "^17.0.0",
|
||||
"concurrently": "^7.6.0",
|
||||
"nodemon": "^2.0.20",
|
||||
"tsify": "^5.0.4",
|
||||
"typescript": "^4.9.4",
|
||||
"watchify": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
client/public/images/BEBlue.png
Normal file
BIN
client/public/images/BEBlue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
client/public/images/BERed.png
Normal file
BIN
client/public/images/BERed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
client/public/images/bullseye.png
Normal file
BIN
client/public/images/bullseye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
client/public/images/bullseye.xcf
Normal file
BIN
client/public/images/bullseye.xcf
Normal file
Binary file not shown.
BIN
client/public/images/bullseye0.png
Normal file
BIN
client/public/images/bullseye0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
client/public/images/bullseye1.png
Normal file
BIN
client/public/images/bullseye1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
client/public/images/bullseye2.png
Normal file
BIN
client/public/images/bullseye2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
1
client/public/images/buttons/create.svg
Normal file
1
client/public/images/buttons/create.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>
|
||||
|
After Width: | Height: | Size: 491 B |
1
client/public/images/buttons/erase.svg
Normal file
1
client/public/images/buttons/erase.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"/></svg>
|
||||
|
After Width: | Height: | Size: 553 B |
54
client/public/images/icons/formation-end.svg
Normal file
54
client/public/images/icons/formation-end.svg
Normal file
@@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 9.5249998 9.5250003"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="formation-end.svg"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
width="36px"
|
||||
inkscape:zoom="16.000001"
|
||||
inkscape:cx="14.406249"
|
||||
inkscape:cy="20.906249"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.05833, 0.529167;stroke-dashoffset:1.48167;stroke-opacity:1"
|
||||
d="M 7.509551,4.8476603 H 4.2913461"
|
||||
id="path1369"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.05833, 0.529167;stroke-dashoffset:1.48167;stroke-opacity:1"
|
||||
d="M 4.2913461,0.24555387 V 4.8476603"
|
||||
id="path2640"
|
||||
sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
54
client/public/images/icons/formation-middle.svg
Normal file
54
client/public/images/icons/formation-middle.svg
Normal file
@@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="36"
|
||||
height="36"
|
||||
viewBox="0 0 9.5249998 9.5250003"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="formation-middle.svg"
|
||||
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">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
width="36px"
|
||||
inkscape:zoom="16.000001"
|
||||
inkscape:cx="14.406249"
|
||||
inkscape:cy="20.906249"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.05833, 0.529167;stroke-dashoffset:1.48167;stroke-opacity:1"
|
||||
d="M 7.509551,4.8476603 H 4.2913461"
|
||||
id="path1369"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.529167;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1.05833, 0.529167;stroke-dashoffset:1.48167;stroke-opacity:1"
|
||||
d="m 4.2913461,0.24555387 0,9.06695013"
|
||||
id="path2640"
|
||||
sodipodi:nodetypes="cc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
client/public/images/icons/formation.png
Normal file
BIN
client/public/images/icons/formation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
client/public/images/icons/leader.png
Normal file
BIN
client/public/images/icons/leader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
1
client/public/images/icons/ruler.svg
Normal file
1
client/public/images/icons/ruler.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 821 B |
BIN
client/public/images/icons/singleton.png
Normal file
BIN
client/public/images/icons/singleton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
client/public/images/pin.png
Normal file
BIN
client/public/images/pin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
1
client/public/images/pin.svg
Normal file
1
client/public/images/pin.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M112 316.94v156.69l22.02 33.02c4.75 7.12 15.22 7.12 19.97 0L176 473.63V316.94c-10.39 1.92-21.06 3.06-32 3.06s-21.61-1.14-32-3.06zM144 0C64.47 0 0 64.47 0 144s64.47 144 144 144 144-64.47 144-144S223.53 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.62-5.38 12-12 12s-12-5.38-12-12c0-50.73 41.28-92 92-92 6.62 0 12 5.38 12 12s-5.38 12-12 12z"/></svg>
|
||||
|
After Width: | Height: | Size: 549 B |
BIN
client/public/images/unit.png
Normal file
BIN
client/public/images/unit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
0
client/public/javascripts/placeholder
Normal file
0
client/public/javascripts/placeholder
Normal file
@@ -56,16 +56,15 @@ body {
|
||||
}
|
||||
|
||||
#unit-control-buttons {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
right: 10px;
|
||||
right: 270px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#unit-control-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
height: fit-content;
|
||||
@@ -77,12 +76,21 @@ body {
|
||||
#connection-status-panel {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
width: 140px;
|
||||
width: 160px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#mouse-info-panel {
|
||||
position: absolute;
|
||||
height: fit-content;
|
||||
width: 160px;
|
||||
bottom: 50px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#unit-control-buttons {
|
||||
top: 50px;
|
||||
|
||||
31
client/public/stylesheets/mouseinfopanel.css
Normal file
31
client/public/stylesheets/mouseinfopanel.css
Normal file
@@ -0,0 +1,31 @@
|
||||
#mouse-info-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
#mouse-info-panel .rectangular-container{
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #FFF3;
|
||||
}
|
||||
|
||||
#mouse-info-panel img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#measure-position-container{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#unit-position-container{
|
||||
display: none;
|
||||
}
|
||||
@@ -1,20 +1,40 @@
|
||||
.olympus-selection-scroll-container {
|
||||
position: fixed;
|
||||
background-color: var(--background-color-dark);
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
transition: bottom 0.2s;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 2px 5px #000A;
|
||||
width: 180px;
|
||||
border-radius: 5px;
|
||||
width: 220px;
|
||||
height: fit-content;
|
||||
z-index: 1000;
|
||||
z-index: 2000;
|
||||
max-height: 400px;
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#olympus-selection-scroll-top-bar {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background-color: #333D;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: calc(400px - 60px);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll::-webkit-scrollbar {
|
||||
@@ -34,48 +54,51 @@
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-element {
|
||||
margin: 2px;
|
||||
border-bottom: 1px solid #FFF5;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 15px;
|
||||
background-color: var(--background-color-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-element:hover {
|
||||
background-color: var(--highlight-color);
|
||||
.olympus-selection-scroll:last-child {
|
||||
border-radius: 5px;
|
||||
border-bottom: 0px transparent !important;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-container label {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-container input {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: calc(50% - 10px);
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background-color: var(--active-coalition-color);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-switch:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
@@ -85,7 +108,12 @@
|
||||
}
|
||||
|
||||
input:checked+.olympus-selection-scroll-switch:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
-webkit-transform: translateX(16px);
|
||||
-ms-transform: translateX(16px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.olympus-selection-scroll-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -12,6 +12,7 @@
|
||||
@import url("unitcontrolpanel.css");
|
||||
@import url("visibilitycontrolpanel.css");
|
||||
@import url("unitinfopanel.css");
|
||||
@import url("mouseinfopanel.css");
|
||||
|
||||
@import url("layout.css");
|
||||
|
||||
@@ -19,14 +20,14 @@
|
||||
/* Variables definitions */
|
||||
:root {
|
||||
--background-color-dark: #202831;
|
||||
--background-color-light: #aaaaaa;
|
||||
--background-color-light: #AAA;
|
||||
--title-color: #d3e9ff;
|
||||
--text-color: white;
|
||||
--blue-coalition-color: #2196F3;
|
||||
--blue-coalition-color: #247be2;
|
||||
--red-coalition-color: #f32121;
|
||||
--neutral-coalition-color: #AAAAAA;
|
||||
--neutral-coalition-color: #202831;
|
||||
--active-coalition-color: var(--blue-coalition-color);
|
||||
--highlight-color: #FFFFFFAA;
|
||||
--highlight-color: #FFF5;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -69,15 +70,90 @@ html {
|
||||
}
|
||||
|
||||
.rounded-container {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
background-color: #247be2;
|
||||
border-radius: 10px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
border-radius: 9999px;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.rounded-container.blue {
|
||||
background-color: var(--blue-coalition-color);
|
||||
border: 1px solid var(--blue-coalition-color);
|
||||
}
|
||||
|
||||
.rounded-container.red {
|
||||
background-color: var(--red-coalition-color);
|
||||
border: 1px solid var(--red-coalition-color);
|
||||
}
|
||||
|
||||
.rounded-container.neutral {
|
||||
background-color: var(--neutral-coalition-color);
|
||||
}
|
||||
|
||||
.rounded-container-small {
|
||||
padding: 0.2em;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
background-color: #FFFA;
|
||||
font-size: 11px;
|
||||
border-radius: 9999px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.rectangular-button {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
color: var(--highlight-color);
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--highlight-color);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
}
|
||||
|
||||
.rectangular-button.blue {
|
||||
border: 1px solid var(--blue-coalition-color);
|
||||
color: var(--blue-coalition-color);
|
||||
}
|
||||
|
||||
.rectangular-button.red {
|
||||
border: 1px solid var(--red-coalition-color);
|
||||
color: var(--red-coalition-color);
|
||||
}
|
||||
|
||||
.rectangular-button.white {
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rectangular-button.white>img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.rectangular-button>img {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.rectangular-button.red {
|
||||
border: 1px solid var(--red-coalition-color);
|
||||
}
|
||||
|
||||
.vl {
|
||||
@@ -85,3 +161,10 @@ html {
|
||||
width: 1px !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hl {
|
||||
border-top: 1px solid #555;
|
||||
height: 1px !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,24 +13,86 @@
|
||||
|
||||
#unit-control-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
row-gap: 5px;
|
||||
row-gap: 10px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
#unit-info-panel>div {
|
||||
height: 100%;
|
||||
#selected-units-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#unit-control-panel .rounded-container {
|
||||
width: 100%;
|
||||
#formation-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 5px;
|
||||
column-gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#roe-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 5px;
|
||||
column-gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#threat-reaction-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 5px;
|
||||
column-gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#selected-units-container .rounded-container {
|
||||
width: calc(100% - 25px);
|
||||
cursor: pointer;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
#selected-units-container .rounded-container.not-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#selected-units-container .rounded-container .rounded-container-small {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#selected-units-container img {
|
||||
height: calc(100% + 6px);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
#selected-units-container img.blue {
|
||||
filter: invert(81%) sepia(6%) saturate(1685%) hue-rotate(181deg) brightness(103%) contrast(92%);
|
||||
}
|
||||
|
||||
#selected-units-container img.red {
|
||||
filter: invert(93%) sepia(97%) saturate(1174%) hue-rotate(291deg) brightness(105%) contrast(97%);
|
||||
}
|
||||
|
||||
#unit-control-panel #title-label {
|
||||
@@ -38,4 +100,10 @@
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#unit-control-panel #section-label {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { LatLng } from "leaflet";
|
||||
import { setActiveCoalition } from "..";
|
||||
import { getActiveCoalition, setActiveCoalition } from "..";
|
||||
|
||||
export class SelectionScroll {
|
||||
#container: HTMLElement | null;
|
||||
@@ -15,14 +15,17 @@ export class SelectionScroll {
|
||||
}
|
||||
}
|
||||
|
||||
show(x: number, y: number, options: any, callback: CallableFunction, showCoalition: boolean) {
|
||||
show(x: number, y: number, title: string, options: any, callback: CallableFunction, showCoalition: boolean) {
|
||||
/* Hide to remove buttons, if present */
|
||||
this.hide();
|
||||
|
||||
if (this.#container != null && options.length >= 1) {
|
||||
var titleDiv = this.#container.querySelector("#olympus-selection-scroll-top-bar")?.querySelector(".olympus-selection-scroll-title");
|
||||
if (titleDiv)
|
||||
titleDiv.innerHTML = title;
|
||||
this.#container.style.display = this.#display;
|
||||
this.#container.style.left = x - 110 + "px";
|
||||
this.#container.style.top = y - 110 + "px";
|
||||
this.#container.style.left = x - this.#container.offsetWidth / 2 + "px";
|
||||
this.#container.style.top = y - 20 + "px";
|
||||
var scroll = this.#container.querySelector(".olympus-selection-scroll");
|
||||
if (scroll != null)
|
||||
{
|
||||
@@ -40,6 +43,20 @@ export class SelectionScroll {
|
||||
scroll.appendChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the coalition switch if required */
|
||||
var switchContainer = <HTMLElement>this.#container.querySelector("#olympus-selection-scroll-top-bar")?.querySelector("#coalition-switch-container");
|
||||
if (showCoalition == false) {
|
||||
switchContainer.style.display = "none";
|
||||
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--neutral-coalition-color"));
|
||||
}
|
||||
else {
|
||||
switchContainer.style.display = "block";
|
||||
if (getActiveCoalition() == "blue")
|
||||
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
|
||||
else
|
||||
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -89,7 +89,7 @@ export function attackUnit(ID: number, targetID: number) {
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " attack " + getUnitsManager().getUnitByID(targetID).unitName);
|
||||
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " attack " + getUnitsManager().getUnitByID(targetID).unitName);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -105,7 +105,7 @@ export function cloneUnit(ID: number) {
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
|
||||
//console.log("Unit " + getUnitsManager().getUnitByID(ID).unitName + " cloned");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -121,7 +121,7 @@ export function changeSpeed(ID: number, speedChange: string) {
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
|
||||
//console.log(getUnitsManager().getUnitByID(ID).unitName + " speed change request: " + speedChange);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -137,12 +137,28 @@ export function changeAltitude(ID: number, altitudeChange: string) {
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log(getUnitsManager().getUnitByID(ID).unitName + " altitude change request: " + altitudeChange);
|
||||
//console.log(getUnitsManager().getUnitByID(ID).unitName + " altitude change request: " + altitudeChange);
|
||||
}
|
||||
};
|
||||
|
||||
var command = {"ID": ID, "change": altitudeChange}
|
||||
var data = {"changeAltitude": command}
|
||||
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
export function createFormation(ID: number, isLeader: boolean, wingmenIDs: number[]) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("PUT", RESTaddress);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
//console.log(getUnitsManager().getUnitByID(ID).unitName + " created formation with: " + wingmenIDs);
|
||||
}
|
||||
};
|
||||
|
||||
var command = {"ID": ID, "wingmenIDs": wingmenIDs, "isLeader": isLeader}
|
||||
var data = {"setLeader": command}
|
||||
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
@@ -8,19 +8,24 @@ import { Dropdown } from "./controls/dropdown";
|
||||
import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
|
||||
import { Button } from "./controls/button";
|
||||
import { MissionData } from "./missiondata/missiondata";
|
||||
import { UnitControlPanel } from "./panels/unitcontrolpanel";
|
||||
import { MouseInfoPanel } from "./panels/mouseInfoPanel";
|
||||
|
||||
/* TODO: should this be a class? */
|
||||
var map: Map;
|
||||
var selectionWheel: SelectionWheel;
|
||||
var selectionScroll: SelectionScroll;
|
||||
|
||||
var unitsManager: UnitsManager;
|
||||
var missionData: MissionData;
|
||||
|
||||
var unitInfoPanel: UnitInfoPanel;
|
||||
var activeCoalition: string;
|
||||
var connectionStatusPanel: ConnectionStatusPanel;
|
||||
var unitControlPanel: UnitControlPanel;
|
||||
var mouseInfoPanel: MouseInfoPanel;
|
||||
|
||||
var scenarioDropdown: Dropdown;
|
||||
var mapSourceDropdown: Dropdown;
|
||||
var connected: boolean;
|
||||
var connectionStatusPanel: ConnectionStatusPanel;
|
||||
var missionData: MissionData;
|
||||
|
||||
var slowButton: Button;
|
||||
var fastButton: Button;
|
||||
@@ -31,6 +36,9 @@ var aiVisibilityButton: Button;
|
||||
var weaponVisibilityButton: Button;
|
||||
var deadVisibilityButton: Button;
|
||||
|
||||
var connected: boolean;
|
||||
var activeCoalition: string;
|
||||
|
||||
function setup() {
|
||||
/* Initialize */
|
||||
map = new Map('map-container');
|
||||
@@ -38,9 +46,11 @@ function setup() {
|
||||
selectionScroll = new SelectionScroll("selection-scroll");
|
||||
unitsManager = new UnitsManager();
|
||||
unitInfoPanel = new UnitInfoPanel("unit-info-panel");
|
||||
unitControlPanel = new UnitControlPanel("unit-control-panel");
|
||||
scenarioDropdown = new Dropdown("scenario-dropdown", ["Caucasus", "Syria", "Marianas", "Nevada", "South Atlantic", "The channel"], () => { });
|
||||
mapSourceDropdown = new Dropdown("map-source-dropdown", map.getLayers(), (option: string) => map.setLayer(option));
|
||||
connectionStatusPanel = new ConnectionStatusPanel("connection-status-panel");
|
||||
mouseInfoPanel = new MouseInfoPanel("mouse-info-panel");
|
||||
missionData = new MissionData();
|
||||
|
||||
/* Unit control buttons */
|
||||
@@ -82,6 +92,10 @@ export function getMap() {
|
||||
return map;
|
||||
}
|
||||
|
||||
export function getMissionData() {
|
||||
return missionData;
|
||||
}
|
||||
|
||||
export function getSelectionWheel() {
|
||||
return selectionWheel;
|
||||
}
|
||||
@@ -98,6 +112,14 @@ export function getUnitInfoPanel() {
|
||||
return unitInfoPanel;
|
||||
}
|
||||
|
||||
export function getUnitControlPanel() {
|
||||
return unitControlPanel;
|
||||
}
|
||||
|
||||
export function getMouseInfoPanel() {
|
||||
return mouseInfoPanel;
|
||||
}
|
||||
|
||||
export function setActiveCoalition(newActiveCoalition: string) {
|
||||
activeCoalition = newActiveCoalition;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@ export var BoxSelect = Handler.extend({
|
||||
},
|
||||
|
||||
_onMouseDown: function (e: any) {
|
||||
if (((e.which !== 3) && (e.button !== 2))) { return false; }
|
||||
if (((e.which !== 1) && (e.button !== 0))) { return false; }
|
||||
|
||||
// Clear the deferred resetState if it hasn't executed yet, otherwise it
|
||||
// will interrupt the interaction and orphan a box element in the container.
|
||||
@@ -107,7 +107,7 @@ export var BoxSelect = Handler.extend({
|
||||
},
|
||||
|
||||
_onMouseUp: function (e: any) {
|
||||
if ((e.which !== 3) && (e.button !== 2)) { return; }
|
||||
if ((e.which !== 1) && (e.button !== 0)) { return; }
|
||||
|
||||
this._finish();
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as L from "leaflet"
|
||||
import { getSelectionWheel, getSelectionScroll, getUnitsManager, getActiveCoalition } from "..";
|
||||
import { getSelectionWheel, getSelectionScroll, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
|
||||
import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../dcs/dcs";
|
||||
import { payloadNames } from "../units/payloadNames";
|
||||
import { unitTypes } from "../units/unitTypes";
|
||||
@@ -21,8 +21,11 @@ export interface SpawnEvent extends ClickEvent{
|
||||
export class Map extends L.Map {
|
||||
#state: string;
|
||||
#layer?: L.TileLayer;
|
||||
#preventRightClick: boolean = false;
|
||||
#rightClickTimer: number = 0;
|
||||
#preventLeftClick: boolean = false;
|
||||
#leftClickTimer: number = 0;
|
||||
#measurePoint: L.LatLng | null;
|
||||
#measureIcon: L.Icon;
|
||||
#measureMarker: L.Marker;
|
||||
|
||||
constructor(ID: string) {
|
||||
/* Init the leaflet map */
|
||||
@@ -34,12 +37,19 @@ export class Map extends L.Map {
|
||||
|
||||
/* Init the state machine */
|
||||
this.#state = "IDLE";
|
||||
this.#measurePoint = null;
|
||||
|
||||
this.#measureIcon = new L.Icon({ iconUrl: 'images/pin.png', iconAnchor: [16, 32]});
|
||||
this.#measureMarker = new L.Marker([0, 0], {icon: this.#measureIcon});
|
||||
|
||||
/* Register event handles */
|
||||
this.on("click", (e: any) => this.#onClick(e));
|
||||
this.on("dblclick", (e: any) => this.#onDoubleClick(e));
|
||||
this.on("contextmenu", (e: any) => this.#onContextMenu(e));
|
||||
this.on('selectionend', (e: any) => this.#onSelectionEnd(e));
|
||||
this.on('mousedown', (e: any) => this.#onMouseDown(e));
|
||||
this.on('mouseup', (e: any) => this.#onMouseUp(e));
|
||||
this.on('mousemove', (e: any) => this.#onMouseMove(e));
|
||||
}
|
||||
|
||||
setLayer(layerName: string) {
|
||||
@@ -124,10 +134,10 @@ export class Map extends L.Map {
|
||||
}
|
||||
|
||||
/* Selection scroll */
|
||||
showSelectionScroll(e: ClickEvent | SpawnEvent, options: any, callback: CallableFunction, showCoalition: boolean = false) {
|
||||
showSelectionScroll(e: ClickEvent | SpawnEvent, title: string, options: any, callback: CallableFunction, showCoalition: boolean = false) {
|
||||
var x = e.x;
|
||||
var y = e.y;
|
||||
getSelectionScroll().show(x, y, options, callback, showCoalition);
|
||||
getSelectionScroll().show(x, y, title, options, callback, showCoalition);
|
||||
}
|
||||
|
||||
hideSelectionScroll() {
|
||||
@@ -136,51 +146,97 @@ export class Map extends L.Map {
|
||||
|
||||
/* Event handlers */
|
||||
#onClick(e: any) {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
if (this.#state === "IDLE") {
|
||||
|
||||
}
|
||||
else if (this.#state === "MOVE_UNIT") {
|
||||
if (!e.originalEvent.ctrlKey) {
|
||||
getUnitsManager().clearDestinations();
|
||||
if (!this.#preventLeftClick) {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
if (this.#state === "IDLE") {
|
||||
if (e.originalEvent.ctrlKey)
|
||||
if (!this.#measurePoint)
|
||||
{
|
||||
this.#measurePoint = e.latlng;
|
||||
this.#measureMarker.setLatLng(e.latlng);
|
||||
this.#measureMarker.addTo(this);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.#measurePoint = null;
|
||||
if (this.hasLayer(this.#measureMarker))
|
||||
this.removeLayer(this.#measureMarker);
|
||||
}
|
||||
}
|
||||
getUnitsManager().addDestination(e.latlng)
|
||||
}
|
||||
}
|
||||
|
||||
#onDoubleClick(e: any) {
|
||||
var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: null, coalitionID: null};
|
||||
if (this.#state == "IDLE") {
|
||||
var options = [
|
||||
{ "tooltip": "Spawn air unit", "src": "spawnAir.png", "callback": () => this.#aircraftSpawnMenu(spawnEvent) },
|
||||
{ "tooltip": "Spawn ground unit", "src": "spawnGround.png", "callback": () => this.#groundUnitSpawnMenu(spawnEvent) },
|
||||
{ "tooltip": "Smoke", "src": "spawnSmoke.png", "callback": () => this.#smokeSpawnMenu(spawnEvent) },
|
||||
//{ "tooltip": "Explosion", "src": "spawnExplosion.png", "callback": () => this.#explosionSpawnMenu(e) }
|
||||
]
|
||||
this.showSelectionScroll(spawnEvent, options, () => {}, true);
|
||||
}
|
||||
}
|
||||
|
||||
#onContextMenu(e: any) {
|
||||
this.#rightClickTimer = setTimeout(() => {
|
||||
if (!this.#preventRightClick) {
|
||||
else if (this.#state === "MOVE_UNIT") {
|
||||
this.setState("IDLE");
|
||||
getUnitsManager().deselectAllUnits();
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
}
|
||||
this.#preventRightClick = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
#onDoubleClick(e: any) {
|
||||
|
||||
}
|
||||
|
||||
#onContextMenu(e: any) {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
if (this.#state === "IDLE") {
|
||||
var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: null, coalitionID: null};
|
||||
if (this.#state == "IDLE") {
|
||||
var options = [
|
||||
{ "tooltip": "Spawn air unit", "src": "spawnAir.png", "callback": () => this.#aircraftSpawnMenu(spawnEvent) },
|
||||
{ "tooltip": "Spawn ground unit", "src": "spawnGround.png", "callback": () => this.#groundUnitSpawnMenu(spawnEvent) },
|
||||
{ "tooltip": "Smoke", "src": "spawnSmoke.png", "callback": () => this.#smokeSpawnMenu(spawnEvent) },
|
||||
//{ "tooltip": "Explosion", "src": "spawnExplosion.png", "callback": () => this.#explosionSpawnMenu(e) }
|
||||
]
|
||||
this.showSelectionScroll(spawnEvent, "Action", options, () => {}, false);
|
||||
}
|
||||
}
|
||||
else if (this.#state === "MOVE_UNIT") {
|
||||
if (!e.originalEvent.ctrlKey) {
|
||||
getUnitsManager().selectedUnitsClearDestinations();
|
||||
}
|
||||
getUnitsManager().selectedUnitsAddDestination(e.latlng)
|
||||
}
|
||||
}
|
||||
|
||||
#onSelectionEnd(e: any)
|
||||
{
|
||||
clearTimeout(this.#rightClickTimer);
|
||||
this.#preventRightClick = true;
|
||||
clearTimeout(this.#leftClickTimer);
|
||||
this.#preventLeftClick = true;
|
||||
this.#leftClickTimer = setTimeout(() => {
|
||||
this.#preventLeftClick = false;
|
||||
}, 200);
|
||||
getUnitsManager().selectFromBounds(e.selectionBounds);
|
||||
}
|
||||
|
||||
#onMouseDown(e: any)
|
||||
{
|
||||
if ((e.originalEvent.which == 1) && (e.originalEvent.button == 0))
|
||||
{
|
||||
this.dragging.disable();
|
||||
}
|
||||
}
|
||||
|
||||
#onMouseUp(e: any)
|
||||
{
|
||||
if ((e.originalEvent.which == 1) && (e.originalEvent.button == 0))
|
||||
{
|
||||
this.dragging.enable();
|
||||
}
|
||||
}
|
||||
|
||||
#onMouseMove(e: any)
|
||||
{
|
||||
var selectedUnitPosition = null;
|
||||
var selectedUnits = getUnitsManager().getSelectedUnits();
|
||||
if (selectedUnits && selectedUnits.length == 1)
|
||||
{
|
||||
selectedUnitPosition = new L.LatLng(selectedUnits[0].latitude, selectedUnits[0].longitude);
|
||||
}
|
||||
getMouseInfoPanel().update(<L.LatLng>e.latlng, this.#measurePoint, selectedUnitPosition);
|
||||
}
|
||||
|
||||
/* Spawn from air base */
|
||||
spawnFromAirbase(e: SpawnEvent)
|
||||
{
|
||||
@@ -198,7 +254,7 @@ export class Map extends L.Map {
|
||||
{'coalition': true, 'tooltip': 'Radar', 'src': 'spawnRadar.png', 'callback': () => this.#selectGroundUnit(e, "Radar")},
|
||||
{'coalition': true, 'tooltip': 'Unarmed', 'src': 'spawnUnarmed.png', 'callback': () => this.#selectGroundUnit(e, "Unarmed")}
|
||||
]
|
||||
this.showSelectionScroll(e, options, () => {}, true);
|
||||
this.showSelectionScroll(e, "Spawn ground unit", options, () => {}, true);
|
||||
}
|
||||
|
||||
#smokeSpawnMenu(e: SpawnEvent) {
|
||||
@@ -211,7 +267,7 @@ export class Map extends L.Map {
|
||||
{'tooltip': 'Green smoke', 'src': 'spawnSmoke.png', 'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('green', e.latlng)}, 'tint': 'green'},
|
||||
{'tooltip': 'Orange smoke', 'src': 'spawnSmoke.png', 'callback': () => {this.hideSelectionWheel(); this.hideSelectionScroll(); spawnSmoke('orange', e.latlng)}, 'tint': 'orange'},
|
||||
]
|
||||
this.showSelectionScroll(e, options, () => {}, true);
|
||||
this.showSelectionScroll(e, "Spawn smoke", options, () => {}, false);
|
||||
}
|
||||
|
||||
#explosionSpawnMenu(e: SpawnEvent) {
|
||||
@@ -228,7 +284,10 @@ export class Map extends L.Map {
|
||||
{ 'coalition': true, 'tooltip': 'Drone', 'src': 'spawnDrone.png', 'callback': () => this.#selectAircraft(e, "drone") },
|
||||
{ 'coalition': true, 'tooltip': 'Transport', 'src': 'spawnTransport.png', 'callback': () => this.#selectAircraft(e, "transport") },
|
||||
]
|
||||
this.showSelectionScroll(e, options, () => {}, true);
|
||||
if (e.airbaseName != null)
|
||||
this.showSelectionScroll(e, "Spawn at " + e.airbaseName, options, () => {}, true);
|
||||
else
|
||||
this.showSelectionScroll(e, "Spawn air unit", options, () => {}, true);
|
||||
}
|
||||
|
||||
/* Show unit selection for air units */
|
||||
@@ -240,11 +299,11 @@ export class Map extends L.Map {
|
||||
options.sort();
|
||||
else
|
||||
options = [];
|
||||
this.showSelectionScroll(e, options, (unitType: string) => {
|
||||
this.showSelectionScroll(e, "Select aircraft", options, (unitType: string) => {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
this.#unitSelectPayload(e, unitType);
|
||||
});
|
||||
}, true);
|
||||
}
|
||||
|
||||
/* Show weapon selection for air units */
|
||||
@@ -255,11 +314,11 @@ export class Map extends L.Map {
|
||||
options = payloadNames[unitType]
|
||||
if (options != undefined && options.length > 0) {
|
||||
options.sort();
|
||||
this.showSelectionScroll({x: e.x, y: e.y, latlng: e.latlng}, options, (payloadName: string) => {
|
||||
this.showSelectionScroll({x: e.x, y: e.y, latlng: e.latlng}, "Select loadout", options, (payloadName: string) => {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
spawnAircraft(unitType, e.latlng, getActiveCoalition(), payloadName, e.airbaseName);
|
||||
});
|
||||
}, true);
|
||||
}
|
||||
else {
|
||||
spawnAircraft(unitType, e.latlng, getActiveCoalition());
|
||||
@@ -273,10 +332,10 @@ export class Map extends L.Map {
|
||||
this.hideSelectionScroll();
|
||||
var options = unitTypes.vehicles[group];
|
||||
options.sort();
|
||||
this.showSelectionScroll(e, options, (unitType: string) => {
|
||||
this.showSelectionScroll(e, "Select ground unit", options, (unitType: string) => {
|
||||
this.hideSelectionWheel();
|
||||
this.hideSelectionScroll();
|
||||
spawnGroundUnit(unitType, e.latlng, getActiveCoalition());
|
||||
});
|
||||
}, true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,56 @@
|
||||
import { Marker, LatLng } from "leaflet";
|
||||
import { getMap } from "..";
|
||||
import { Marker, LatLng, Icon } from "leaflet";
|
||||
import { getMap, getUnitsManager } from "..";
|
||||
import { SpawnEvent } from "../map/map";
|
||||
import { AirbaseMarker } from "./airbasemarker";
|
||||
|
||||
var bullseyeIcons = [
|
||||
new Icon({ iconUrl: 'images/bullseye0.png', iconAnchor: [30, 30]}),
|
||||
new Icon({ iconUrl: 'images/bullseye1.png', iconAnchor: [30, 30]}),
|
||||
new Icon({ iconUrl: 'images/bullseye2.png', iconAnchor: [30, 30]})
|
||||
]
|
||||
|
||||
export class MissionData
|
||||
{
|
||||
//#bullseye : any; //TODO declare interface
|
||||
//#bullseyeMarker : Marker;
|
||||
#bullseyes : any; //TODO declare interface
|
||||
#bullseyeMarkers: any;
|
||||
#airbases : any; //TODO declare interface
|
||||
#airbasesMarkers: {[name: string]: AirbaseMarker};
|
||||
|
||||
constructor()
|
||||
{
|
||||
//this.#bullseye = undefined;
|
||||
//this.#bullseyeMarker = undefined;
|
||||
this.#bullseyes = undefined;
|
||||
this.#bullseyeMarkers = [
|
||||
new Marker([0, 0], {icon: bullseyeIcons[0]}).addTo(getMap()),
|
||||
new Marker([0, 0], {icon: bullseyeIcons[1]}).addTo(getMap()),
|
||||
new Marker([0, 0], {icon: bullseyeIcons[2]}).addTo(getMap())
|
||||
]
|
||||
this.#airbasesMarkers = {};
|
||||
}
|
||||
|
||||
update(data: any)
|
||||
{
|
||||
//this.#bullseye = data.missionData.bullseye;
|
||||
this.#bullseyes = data.bullseye;
|
||||
this.#airbases = data.airbases;
|
||||
//this.#drawBullseye();
|
||||
this.#drawAirbases();
|
||||
if (this.#bullseyes != null && this.#airbases != null)
|
||||
{
|
||||
this.#drawBullseye();
|
||||
this.#drawAirbases();
|
||||
}
|
||||
}
|
||||
|
||||
//#drawBullseye()
|
||||
//{
|
||||
// if (this.#bullseyeMarker === undefined)
|
||||
// {
|
||||
// this.#bullseyeMarker = new Marker([this.#bullseye.lat, this.#bullseye.lng]).addTo(map.getMap());
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// this.#bullseyeMarker.setLatLng(new LatLng(this.#bullseye.lat, this.#bullseye.lng));
|
||||
// }
|
||||
//}
|
||||
getBullseyes()
|
||||
{
|
||||
return this.#bullseyes;
|
||||
}
|
||||
|
||||
#drawBullseye()
|
||||
{
|
||||
for (let idx in this.#bullseyes)
|
||||
{
|
||||
var bullseye = this.#bullseyes[idx];
|
||||
this.#bullseyeMarkers[idx].setLatLng(new LatLng(bullseye.lat, bullseye.lng));
|
||||
}
|
||||
}
|
||||
|
||||
#drawAirbases()
|
||||
{
|
||||
@@ -48,7 +63,7 @@ export class MissionData
|
||||
position: new LatLng(airbase.lat, airbase.lng),
|
||||
name: airbase.callsign,
|
||||
src: "images/airbase.png"}).addTo(getMap());
|
||||
this.#airbasesMarkers[idx].on('click', (e) => this.#onAirbaseClick(e));
|
||||
this.#airbasesMarkers[idx].on('contextmenu', (e) => this.#onAirbaseClick(e));
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -59,7 +74,25 @@ export class MissionData
|
||||
|
||||
#onAirbaseClick(e: any)
|
||||
{
|
||||
var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: e.sourceTarget.getName(), coalitionID: e.sourceTarget.getCoalitionID()};
|
||||
getMap().spawnFromAirbase(spawnEvent);
|
||||
var options = [];
|
||||
if (getUnitsManager().getSelectedUnits().length > 0)
|
||||
options = ["Spawn unit", "Land here"];
|
||||
else
|
||||
options = ["Spawn unit"];
|
||||
getMap().showSelectionScroll(e.originalEvent, e.sourceTarget.getName(), options, (option: string) => this.#onAirbaseOptionSelection(e, option), false);
|
||||
|
||||
}
|
||||
|
||||
#onAirbaseOptionSelection(e: any, option: string) {
|
||||
if (option === "Spawn unit") {
|
||||
var spawnEvent: SpawnEvent = {x: e.originalEvent.x, y: e.originalEvent.y, latlng: e.latlng, airbaseName: e.sourceTarget.getName(), coalitionID: e.sourceTarget.getCoalitionID()};
|
||||
getMap().spawnFromAirbase(spawnEvent);
|
||||
}
|
||||
else if (option === "Land here")
|
||||
{
|
||||
getMap().hideSelectionWheel();
|
||||
getMap().hideSelectionScroll();
|
||||
getUnitsManager().selectedUnitsLandAt(e.latlng);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,7 @@ export function bearing(lat1: number, lon1: number, lat2: number, lon2: number)
|
||||
return brng;
|
||||
}
|
||||
|
||||
const zeroPad = function (num: number, places: number) {
|
||||
export const zeroPad = function (num: number, places: number) {
|
||||
var string = String(num);
|
||||
while (string.length < places) {
|
||||
string += "0";
|
||||
@@ -34,6 +34,14 @@ const zeroPad = function (num: number, places: number) {
|
||||
return string;
|
||||
}
|
||||
|
||||
export const zeroAppend = function (num: number, places: number) {
|
||||
var string = String(num);
|
||||
while (string.length < places) {
|
||||
string = "0" + string;
|
||||
}
|
||||
return string;
|
||||
}
|
||||
|
||||
export function ConvertDDToDMS(D: number, lng: boolean) {
|
||||
var dir = D < 0 ? (lng ? "W" : "S") : lng ? "E" : "N";
|
||||
var deg = 0 | (D < 0 ? (D = -D) : D);
|
||||
|
||||
73
client/src/panels/mouseInfoPanel.ts
Normal file
73
client/src/panels/mouseInfoPanel.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { LatLng } from "leaflet";
|
||||
import { getMissionData } from "..";
|
||||
import { distance, bearing, zeroPad, zeroAppend } from "../other/utils";
|
||||
import { Unit } from "../units/unit";
|
||||
|
||||
export class MouseInfoPanel {
|
||||
#element: HTMLElement
|
||||
#display: string;
|
||||
|
||||
constructor(ID: string) {
|
||||
this.#element = <HTMLElement>document.getElementById(ID);
|
||||
this.#display = '';
|
||||
if (this.#element != null) {
|
||||
this.#display = this.#element.style.display;
|
||||
var el = <HTMLElement>this.#element.querySelector(`#measure-position`);
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.#element.style.display = this.#display;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.#element.style.display = "none";
|
||||
}
|
||||
|
||||
update(mousePosition: LatLng, measurePosition: LatLng | null, unitPosition: LatLng | null) {
|
||||
var bullseyes = getMissionData().getBullseyes();
|
||||
for (let idx in bullseyes)
|
||||
{
|
||||
var dist = distance(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
|
||||
var bear = bearing(bullseyes[idx].lat, bullseyes[idx].lng, mousePosition.lat, mousePosition.lng);
|
||||
var el = <HTMLElement>this.#element.querySelector(`#bullseye-${idx}`);
|
||||
if (el != null)
|
||||
el.innerHTML = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
|
||||
}
|
||||
|
||||
if (measurePosition) {
|
||||
var dist = distance(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
|
||||
var bear = bearing(measurePosition.lat, measurePosition.lng, mousePosition.lat, mousePosition.lng);
|
||||
var el = <HTMLElement>this.#element.querySelector(`#measure-position`);
|
||||
if (el != null)
|
||||
{
|
||||
el.innerHTML = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
|
||||
if (el.parentElement != null)
|
||||
el.parentElement.style.display = 'flex'; //TODO: don't like that its hardcoded
|
||||
}
|
||||
}
|
||||
else {
|
||||
var el = <HTMLElement>this.#element.querySelector(`#measure-position`);
|
||||
if (el != null && el.parentElement != null)
|
||||
el.parentElement.style.display = 'none';
|
||||
}
|
||||
|
||||
if (unitPosition) {
|
||||
var dist = distance(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
|
||||
var bear = bearing(unitPosition.lat, unitPosition.lng, mousePosition.lat, mousePosition.lng);
|
||||
var el = <HTMLElement>this.#element.querySelector(`#unit-position`);
|
||||
if (el != null)
|
||||
{
|
||||
el.innerHTML = `${zeroAppend(Math.floor(bear), 3)}° / ${zeroAppend(Math.floor(dist*0.000539957), 3)} NM`
|
||||
if (el.parentElement != null)
|
||||
el.parentElement.style.display = 'flex'; //TODO: don't like that its hardcoded
|
||||
}
|
||||
}
|
||||
else {
|
||||
var el = <HTMLElement>this.#element.querySelector(`#unit-position`);
|
||||
if (el != null && el.parentElement != null)
|
||||
el.parentElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
185
client/src/panels/unitcontrolpanel.ts
Normal file
185
client/src/panels/unitcontrolpanel.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
import { imageOverlay } from "leaflet";
|
||||
import { getUnitsManager } from "..";
|
||||
import { ConvertDDToDMS, rad2deg } from "../other/utils";
|
||||
import { AirUnit, Unit } from "../units/unit";
|
||||
|
||||
export class UnitControlPanel {
|
||||
#element: HTMLElement
|
||||
#display: string;
|
||||
|
||||
constructor(ID: string) {
|
||||
this.#element = <HTMLElement>document.getElementById(ID);
|
||||
this.#display = '';
|
||||
if (this.#element != null) {
|
||||
this.#display = this.#element.style.display;
|
||||
var formationCreationContainer = <HTMLElement>(this.#element.querySelector("#formation-creation-container"));
|
||||
if (formationCreationContainer != null)
|
||||
{
|
||||
var createButton = <HTMLElement>formationCreationContainer.querySelector("#create-formation");
|
||||
createButton?.addEventListener("click", () => getUnitsManager().selectedUnitsCreateFormation());
|
||||
|
||||
var undoButton = <HTMLElement>formationCreationContainer.querySelector("#undo-formation");
|
||||
undoButton?.addEventListener("click", () => getUnitsManager().selectedUnitsUndoFormation());
|
||||
}
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.#element.style.display = this.#display;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.#element.style.display = "none";
|
||||
}
|
||||
|
||||
update(units: Unit[]) {
|
||||
if (this.#element != null)
|
||||
{
|
||||
var selectedUnitsContainer = <HTMLElement>(this.#element.querySelector("#selected-units-container"));
|
||||
var formationCreationContainer = <HTMLElement>(this.#element.querySelector("#formation-creation-container"));
|
||||
if (selectedUnitsContainer != null && formationCreationContainer != null)
|
||||
{
|
||||
this.#addUnitsButtons(units, selectedUnitsContainer);
|
||||
this.#showFormationButtons(units, formationCreationContainer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#addUnitsButtons(units: Unit[], selectedUnitsContainer: HTMLElement)
|
||||
{
|
||||
/* Remove any pre-existing unit button */
|
||||
var elements = selectedUnitsContainer.getElementsByClassName("js-unit-container");
|
||||
while (elements.length > 0)
|
||||
selectedUnitsContainer.removeChild(elements[0])
|
||||
|
||||
/* Create all the units buttons */
|
||||
for (let unit of units)
|
||||
{
|
||||
this.#addUnitButton(unit, selectedUnitsContainer);
|
||||
if (unit.isLeader)
|
||||
for (let wingman of unit.getWingmen())
|
||||
this.#addUnitButton(wingman, selectedUnitsContainer);
|
||||
}
|
||||
}
|
||||
|
||||
#addUnitButton(unit: Unit, container: HTMLElement)
|
||||
{
|
||||
var el = document.createElement("div");
|
||||
|
||||
/* Unit name (actually type, but DCS calls it name for some reason) */
|
||||
var nameDiv = document.createElement("div");
|
||||
nameDiv.classList.add("rounded-container-small");
|
||||
if (unit.name.length >= 7)
|
||||
nameDiv.innerHTML = `${unit.name.substring(0, 4)} ...`;
|
||||
else
|
||||
nameDiv.innerHTML = `${unit.name}`;
|
||||
|
||||
/* Unit icon */
|
||||
var icon = document.createElement("img");
|
||||
if (unit.isLeader)
|
||||
icon.src = "images/icons/formation.png"
|
||||
else if (unit.isWingman)
|
||||
{
|
||||
var wingmen = unit.getLeader()?.getWingmen();
|
||||
if (wingmen && wingmen.lastIndexOf(unit) == wingmen.length - 1)
|
||||
icon.src = "images/icons/formation-end.svg"
|
||||
else
|
||||
icon.src = "images/icons/formation-middle.svg"
|
||||
}
|
||||
|
||||
else
|
||||
icon.src = "images/icons/singleton.png"
|
||||
|
||||
el.innerHTML = unit.unitName;
|
||||
|
||||
el.prepend(nameDiv);
|
||||
|
||||
/* Show the icon only for air units */
|
||||
if ((unit instanceof AirUnit))
|
||||
el.append(icon);
|
||||
|
||||
el.classList.add("rounded-container", "js-unit-container");
|
||||
|
||||
if (!unit.getSelected())
|
||||
el.classList.add("not-selected")
|
||||
|
||||
/* Set background color */
|
||||
if (unit.coalitionID == 1)
|
||||
{
|
||||
el.classList.add("red");
|
||||
icon.classList.add("red");
|
||||
}
|
||||
else if (unit.coalitionID == 2)
|
||||
{
|
||||
el.classList.add("blue");
|
||||
icon.classList.add("blue");
|
||||
}
|
||||
else
|
||||
{
|
||||
el.classList.add("neutral");
|
||||
icon.classList.add("neutral");
|
||||
}
|
||||
|
||||
el.addEventListener("click", () => getUnitsManager().selectUnit(unit.ID));
|
||||
container.appendChild(el);
|
||||
}
|
||||
|
||||
#showFormationButtons(units: Unit[], formationCreationContainer: HTMLElement)
|
||||
{
|
||||
var createButton = <HTMLElement>formationCreationContainer.querySelector("#create-formation");
|
||||
var undoButton = <HTMLElement>formationCreationContainer.querySelector("#undo-formation");
|
||||
if (createButton && undoButton && this.#checkAllUnitsAir(units))
|
||||
{
|
||||
if (!this.#checkUnitsAlreadyInFormation(units))
|
||||
{
|
||||
createButton.style.display = '';
|
||||
undoButton.style.display = 'none';
|
||||
}
|
||||
else if (this.#checkUnitsAlreadyInFormation(units) && this.#checkAllUnitsSameFormation(units))
|
||||
{
|
||||
createButton.style.display = 'none';
|
||||
undoButton.style.display = '';
|
||||
}
|
||||
else
|
||||
{
|
||||
createButton.style.display = 'none';
|
||||
undoButton.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#checkAllUnitsAir(units: Unit[])
|
||||
{
|
||||
for (let unit of units)
|
||||
if (!(unit instanceof AirUnit))
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
#checkAllUnitsSameFormation(units: Unit[])
|
||||
{
|
||||
var leaderFound = false;
|
||||
for (let unit of units)
|
||||
{
|
||||
if (unit.isLeader)
|
||||
{
|
||||
if (leaderFound)
|
||||
return false
|
||||
else
|
||||
leaderFound = true;
|
||||
}
|
||||
if (!unit.isLeader)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
#checkUnitsAlreadyInFormation(units: Unit[])
|
||||
{
|
||||
for (let unit of units)
|
||||
if (unit.isLeader)
|
||||
return true
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -48,6 +48,15 @@ export class UnitInfoPanel {
|
||||
this.#element.querySelector("#latitude")!.innerHTML = ConvertDDToDMS(unit.latitude, false);
|
||||
this.#element.querySelector("#longitude")!.innerHTML = ConvertDDToDMS(unit.longitude, true);
|
||||
this.#element.querySelector("#task")!.innerHTML = unit.currentTask !== ""? unit.currentTask: "Not controlled";
|
||||
|
||||
this.#element.querySelector("#task")!.classList.remove("red", "blue", "neutral");
|
||||
if (unit.coalitionID == 1)
|
||||
this.#element.querySelector("#task")!.classList.add("red");
|
||||
else if (unit.coalitionID == 2)
|
||||
this.#element.querySelector("#task")!.classList.add("blue");
|
||||
else
|
||||
this.#element.querySelector("#task")!.classList.add("neutral");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { Marker, LatLng, Polyline, Icon } from 'leaflet';
|
||||
import { ConvertDDToDMS } from '../other/utils';
|
||||
import { getMap, getUnitsManager, getVisibilitySettings } from '..';
|
||||
import { UnitMarker, MarkerOptions, AircraftMarker, HelicopterMarker, GroundUnitMarker, NavyUnitMarker, WeaponMarker } from './unitmarker';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed } from '../dcs/dcs';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader } from '../dcs/dcs';
|
||||
|
||||
var pathIcon = new Icon({
|
||||
iconUrl: 'images/marker-icon.png',
|
||||
@@ -12,9 +12,6 @@ var pathIcon = new Icon({
|
||||
|
||||
export class Unit {
|
||||
ID: number = -1;
|
||||
leader: boolean = false;
|
||||
wingman: boolean = false;
|
||||
wingmen: Unit[] = [];
|
||||
formation: string = "";
|
||||
name: string = "";
|
||||
unitName: string = "";
|
||||
@@ -33,7 +30,13 @@ export class Unit {
|
||||
activePath: any = null;
|
||||
ammo: any = null;
|
||||
targets: any = null;
|
||||
|
||||
hasTask: boolean = false;
|
||||
isLeader: boolean = false;
|
||||
isWingman: boolean = false;
|
||||
leaderID: number = 0;
|
||||
wingmen: Unit[] = [];
|
||||
wingmenIDs: number[] = [];
|
||||
|
||||
#selectable: boolean;
|
||||
#selected: boolean = false;
|
||||
#preventClick: boolean = false;
|
||||
@@ -61,42 +64,36 @@ export class Unit {
|
||||
this.#marker = marker;
|
||||
this.#marker.on('click', (e) => this.#onClick(e));
|
||||
this.#marker.on('dblclick', (e) => this.#onDoubleClick(e));
|
||||
this.#marker.on('contextmenu', (e) => this.#onContextMenu(e));
|
||||
|
||||
this.#pathPolyline = new Polyline([], { color: '#2d3e50', weight: 3, opacity: 0.5, smoothFactor: 1 });
|
||||
this.#pathPolyline.addTo(getMap());
|
||||
this.#targetsPolylines = [];
|
||||
}
|
||||
|
||||
update(response: JSON) {
|
||||
update(response: any) {
|
||||
for (let entry in response) {
|
||||
// @ts-ignore
|
||||
// @ts-ignore TODO handle better
|
||||
this[entry] = response[entry];
|
||||
}
|
||||
|
||||
// TODO handle better
|
||||
if (response['activePath'] == undefined)
|
||||
this.activePath = null
|
||||
|
||||
/* Dead units can't be selected */
|
||||
this.setSelected(this.getSelected() && this.alive)
|
||||
|
||||
this.#updateMarker();
|
||||
|
||||
this.#clearTargets();
|
||||
if (this.getSelected())
|
||||
if (this.getSelected() && this.activePath != null)
|
||||
{
|
||||
this.#drawPath();
|
||||
this.#drawTargets();
|
||||
}
|
||||
else
|
||||
this.#clearPath();
|
||||
|
||||
/*
|
||||
this.wingmen = [];
|
||||
if (response["wingmenIDs"] != null)
|
||||
{
|
||||
for (let ID of response["wingmenIDs"])
|
||||
{
|
||||
this.wingmen.push(unitsManager.getUnitByID(ID));
|
||||
}
|
||||
}
|
||||
*/
|
||||
this.#clearPath();
|
||||
}
|
||||
|
||||
setSelected(selected: boolean) {
|
||||
@@ -105,6 +102,7 @@ export class Unit {
|
||||
this.#selected = selected;
|
||||
this.#marker.setSelected(selected);
|
||||
getUnitsManager().onUnitSelection();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -140,6 +138,28 @@ export class Unit {
|
||||
return false;
|
||||
}
|
||||
|
||||
getLeader() {
|
||||
return getUnitsManager().getUnitByID(this.leaderID);
|
||||
}
|
||||
|
||||
getFormation() {
|
||||
return [<Unit>this].concat(this.getWingmen())
|
||||
}
|
||||
|
||||
getWingmen() {
|
||||
var wingmen: Unit[] = [];
|
||||
if (this.wingmenIDs != null)
|
||||
{
|
||||
for (let ID of this.wingmenIDs)
|
||||
{
|
||||
var unit = getUnitsManager().getUnitByID(ID)
|
||||
if (unit)
|
||||
wingmen.push(unit);
|
||||
}
|
||||
}
|
||||
return wingmen;
|
||||
}
|
||||
|
||||
#onClick(e: any) {
|
||||
this.#timer = setTimeout(() => {
|
||||
if (!this.#preventClick) {
|
||||
@@ -157,22 +177,21 @@ export class Unit {
|
||||
#onDoubleClick(e: any) {
|
||||
clearTimeout(this.#timer);
|
||||
this.#preventClick = true;
|
||||
}
|
||||
|
||||
#onContextMenu(e: any) {
|
||||
var options = [
|
||||
'Attack',
|
||||
'Follow'
|
||||
]
|
||||
|
||||
//if (!this.leader && !this.wingman) {
|
||||
// options.push({ 'tooltip': 'Create formation', 'src': 'formation.png', 'callback': () => { getMap().hideSelectionWheel(); /*unitsManager.createFormation(this.ID);*/ } });
|
||||
//}
|
||||
|
||||
getMap().showSelectionScroll(e.originalEvent, options, (action: string) => this.#executeAction(action));
|
||||
getMap().showSelectionScroll(e.originalEvent, "Action: " + this.unitName, options, (action: string) => this.#executeAction(action));
|
||||
}
|
||||
|
||||
#executeAction(action: string) {
|
||||
getMap().hideSelectionScroll();
|
||||
if (action === "Attack")
|
||||
getUnitsManager().attackUnit(this.ID);
|
||||
getUnitsManager().selectedUnitsAttackUnit(this.ID);
|
||||
}
|
||||
|
||||
#updateMarker() {
|
||||
@@ -318,25 +337,13 @@ export class Unit {
|
||||
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
setLeader(wingmenIDs)
|
||||
{
|
||||
// TODO move in dedicated file
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("PUT", RESTaddress);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
console.log(this.unitName + " created formation with: " + wingmenIDs);
|
||||
}
|
||||
};
|
||||
|
||||
var command = {"ID": this.ID, "wingmenIDs": wingmenIDs}
|
||||
var data = {"setLeader": command}
|
||||
|
||||
xhr.send(JSON.stringify(data));
|
||||
}
|
||||
*/
|
||||
|
||||
setLeader(isLeader: boolean, wingmenIDs: number[] = [])
|
||||
{
|
||||
setLeader(this.ID, isLeader, wingmenIDs);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class AirUnit extends Unit {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { LatLng, LatLngBounds } from "leaflet";
|
||||
import { getMap, getUnitInfoPanel } from "..";
|
||||
import { getMap, getUnitControlPanel, getUnitInfoPanel } from "..";
|
||||
import { Unit, GroundUnit } from "./unit";
|
||||
import { cloneUnit } from "../dcs/dcs";
|
||||
|
||||
export class UnitsManager {
|
||||
#units: { [ID: number]: Unit };
|
||||
@@ -9,6 +10,13 @@ export class UnitsManager {
|
||||
constructor() {
|
||||
this.#units = {};
|
||||
this.#copiedUnits = [];
|
||||
|
||||
document.addEventListener('copy', () => this.copyUnits());
|
||||
document.addEventListener('paste', () => this.pasteUnits());
|
||||
}
|
||||
|
||||
getUnits() {
|
||||
return this.#units;
|
||||
}
|
||||
|
||||
addUnit(ID: number, data: any) {
|
||||
@@ -27,7 +35,10 @@ export class UnitsManager {
|
||||
}
|
||||
|
||||
getUnitByID(ID: number) {
|
||||
return this.#units[ID];
|
||||
if (ID in this.#units)
|
||||
return this.#units[ID];
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
removeUnit(ID: number) {
|
||||
@@ -40,6 +51,13 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
selectUnit(ID: number, deselectAllUnits: boolean = true)
|
||||
{
|
||||
if (deselectAllUnits)
|
||||
this.deselectAllUnits();
|
||||
this.#units[ID]?.setSelected(true);
|
||||
}
|
||||
|
||||
update(data: any) {
|
||||
for (let ID in data["units"]) {
|
||||
/* Create the unit if missing from the local array, then update the data. Drawing is handled by leaflet. */
|
||||
@@ -49,6 +67,7 @@ export class UnitsManager {
|
||||
this.#units[parseInt(ID)].update(data["units"][ID]);
|
||||
}
|
||||
|
||||
/* Update the unit info panel */
|
||||
if (this.getSelectedUnits().length == 1) {
|
||||
getUnitInfoPanel().show();
|
||||
getUnitInfoPanel().update(this.getSelectedUnits()[0]);
|
||||
@@ -67,6 +86,8 @@ export class UnitsManager {
|
||||
getMap().setState("IDLE");
|
||||
//unitControlPanel.setEnabled(false);
|
||||
}
|
||||
|
||||
this.#updateUnitControlPanel();
|
||||
}
|
||||
|
||||
selectFromBounds(bounds: LatLngBounds)
|
||||
@@ -92,7 +113,35 @@ export class UnitsManager {
|
||||
return selectedUnits;
|
||||
}
|
||||
|
||||
addDestination(latlng: L.LatLng) {
|
||||
getSelectedLeaders() {
|
||||
var leaders: Unit[] = [];
|
||||
for (let idx in this.getSelectedUnits())
|
||||
{
|
||||
var unit = this.getSelectedUnits()[idx];
|
||||
if (unit.isLeader)
|
||||
leaders.push(unit);
|
||||
else if (unit.isWingman)
|
||||
{
|
||||
var leader = unit.getLeader();
|
||||
if (leader && !leaders.includes(leader))
|
||||
leaders.push(leader);
|
||||
}
|
||||
}
|
||||
return leaders;
|
||||
}
|
||||
|
||||
getSelectedSingletons() {
|
||||
var singletons: Unit[] = [];
|
||||
for (let idx in this.getSelectedUnits())
|
||||
{
|
||||
var unit = this.getSelectedUnits()[idx];
|
||||
if (!unit.isLeader && !unit.isWingman)
|
||||
singletons.push(unit);
|
||||
}
|
||||
return singletons;
|
||||
}
|
||||
|
||||
selectedUnitsAddDestination(latlng: L.LatLng) {
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
for (let idx in selectedUnits) {
|
||||
var commandedUnit = selectedUnits[idx];
|
||||
@@ -104,7 +153,7 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
clearDestinations() {
|
||||
selectedUnitsClearDestinations() {
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
for (let idx in selectedUnits) {
|
||||
var commandedUnit = selectedUnits[idx];
|
||||
@@ -116,6 +165,11 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
selectedUnitsLandAt(latlng: LatLng)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
selectedUnitsChangeSpeed(speedChange: string)
|
||||
{
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
@@ -134,33 +188,21 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
// handleKeyEvent(e)
|
||||
// {
|
||||
// if (e.originalEvent.code === 'KeyC' && e.originalEvent.ctrlKey)
|
||||
// {
|
||||
// this.copyUnits();
|
||||
// }
|
||||
// else if (e.originalEvent.code === 'KeyV' && e.originalEvent.ctrlKey)
|
||||
// {
|
||||
// this.pasteUnits();
|
||||
// }
|
||||
// }
|
||||
copyUnits()
|
||||
{
|
||||
this.#copiedUnits = this.getSelectedUnits();
|
||||
}
|
||||
|
||||
// copyUnits()
|
||||
// {
|
||||
// this.#copiedUnits = this.getSelectedUnits();
|
||||
// }
|
||||
pasteUnits()
|
||||
{
|
||||
for (let idx in this.#copiedUnits)
|
||||
{
|
||||
var unit = this.#copiedUnits[idx];
|
||||
cloneUnit(unit.ID);
|
||||
}
|
||||
}
|
||||
|
||||
// pasteUnits()
|
||||
// {
|
||||
// for (let idx in this.#copiedUnits)
|
||||
// {
|
||||
// var unit = this.#copiedUnits[idx];
|
||||
// cloneUnit(unit.ID);
|
||||
// }
|
||||
// }
|
||||
|
||||
attackUnit(ID: number) {
|
||||
selectedUnitsAttackUnit(ID: number) {
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
for (let idx in selectedUnits) {
|
||||
/* If a unit is a wingman, send the command to its leader */
|
||||
@@ -173,59 +215,70 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
// createFormation(ID)
|
||||
// {
|
||||
// var selectedUnits = this.getSelectedUnits();
|
||||
// var wingmenIDs = [];
|
||||
// for (let idx in selectedUnits)
|
||||
// {
|
||||
// if (selectedUnits[idx].wingman)
|
||||
// {
|
||||
// showMessage(selectedUnits[idx].unitName + " is already in a formation.");
|
||||
// return;
|
||||
// }
|
||||
// else if (selectedUnits[idx].leader)
|
||||
// {
|
||||
// showMessage(selectedUnits[idx].unitName + " is already in a formation.");
|
||||
// return;
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// /* TODO
|
||||
// if (selectedUnits[idx].category !== this.getUnitByID(ID).category)
|
||||
// {
|
||||
// showMessage("All units must be of the same category to create a formation.");
|
||||
// }
|
||||
// */
|
||||
// if (selectedUnits[idx].ID != ID)
|
||||
// {
|
||||
// wingmenIDs.push(selectedUnits[idx].ID);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// if (wingmenIDs.length > 0)
|
||||
// {
|
||||
// this.getUnitByID(ID).setLeader(wingmenIDs);
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// showMessage("At least 2 units must be selected to create a formation.");
|
||||
// }
|
||||
// }
|
||||
selectedUnitsCreateFormation(ID: number | null = null)
|
||||
{
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
if (selectedUnits.length >= 2)
|
||||
{
|
||||
if (ID == null)
|
||||
ID = selectedUnits[0].ID
|
||||
|
||||
var wingmenIDs = [];
|
||||
for (let idx in selectedUnits)
|
||||
{
|
||||
if (selectedUnits[idx].isWingman)
|
||||
{
|
||||
console.log(selectedUnits[idx].unitName + " is already in a formation.");
|
||||
return;
|
||||
}
|
||||
else if (selectedUnits[idx].isLeader)
|
||||
{
|
||||
console.log(selectedUnits[idx].unitName + " is already in a formation.");
|
||||
return;
|
||||
}
|
||||
else
|
||||
{
|
||||
/* TODO
|
||||
if (selectedUnits[idx].category !== this.getUnitByID(ID).category)
|
||||
{
|
||||
showMessage("All units must be of the same category to create a formation.");
|
||||
}
|
||||
*/
|
||||
if (selectedUnits[idx].ID != ID)
|
||||
{
|
||||
wingmenIDs.push(selectedUnits[idx].ID);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (wingmenIDs.length > 0)
|
||||
{
|
||||
this.getUnitByID(ID)?.setLeader(true, wingmenIDs);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("At least 2 units must be selected to create a formation.");
|
||||
}
|
||||
}
|
||||
setTimeout(() => this.#updateUnitControlPanel(), 1000); // TODO find better method, may fail
|
||||
}
|
||||
|
||||
// getLeader(ID)
|
||||
// {
|
||||
// for (let idx in this.#units)
|
||||
// {
|
||||
// var unit = this.#units[idx];
|
||||
// if (unit.leader)
|
||||
// {
|
||||
// if (unit.wingmen.includes(this.getUnitByID(ID)))
|
||||
// {
|
||||
// return unit;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// showMessage("Error: no leader found for this unit")
|
||||
// }
|
||||
selectedUnitsUndoFormation(ID: number | null = null)
|
||||
{
|
||||
for (let leader of this.getSelectedLeaders())
|
||||
{
|
||||
leader.setLeader(false);
|
||||
}
|
||||
setTimeout(() => this.#updateUnitControlPanel(), 1000); // TODO find better method, may fail
|
||||
}
|
||||
|
||||
#updateUnitControlPanel() {
|
||||
/* Update the unit control panel */
|
||||
if (this.getSelectedUnits().length > 0) {
|
||||
getUnitControlPanel().show();
|
||||
getUnitControlPanel().update(this.getSelectedLeaders().concat(this.getSelectedSingletons()));
|
||||
}
|
||||
else {
|
||||
getUnitControlPanel().hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@
|
||||
<%- include('unitcontrolpanel.ejs') %>
|
||||
<%- include('visibilitycontrolpanel.ejs') %>
|
||||
<%- include('connectionstatuspanel.ejs') %>
|
||||
<%- include('mouseinfopanel.ejs') %>
|
||||
<script src="javascripts/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
6
client/views/mouseinfopanel.ejs
Normal file
6
client/views/mouseinfopanel.ejs
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="olympus-panel" id="mouse-info-panel">
|
||||
<div id="measure-position-container" class="rectangular-container"><img src="images/pin.png"><div id="measure-position">---° / --- NM</div></div>
|
||||
<div id="unit-position-container" class="rectangular-container"><img src="images/unit.png"><div id="unit-position">---° / --- NM</div></div>
|
||||
<div class="rectangular-container"><img src="images/BEBlue.png"><div id="bullseye-2">---° / --- NM</div></div>
|
||||
<div class="rectangular-container"><img src="images/BERed.png"><div id="bullseye-1">---° / --- NM</div></div>
|
||||
</div>
|
||||
@@ -1,8 +1,11 @@
|
||||
<div id="selection-scroll" class="olympus-selection-scroll-container">
|
||||
<label id="coalition-switch-container">
|
||||
<input type="checkbox" id="coalition-switch"> <span
|
||||
class="olympus-selection-scroll-slider olympus-selection-scroll-switch"></span>
|
||||
</label>
|
||||
<div id="olympus-selection-scroll-top-bar">
|
||||
<div class="olympus-selection-scroll-title"></div>
|
||||
<label id="coalition-switch-container">
|
||||
<input type="checkbox" id="coalition-switch"> <span
|
||||
class="olympus-selection-scroll-slider olympus-selection-scroll-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="olympus-selection-scroll">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,12 +1,52 @@
|
||||
<div class="olympus-panel" id="unit-control-buttons">
|
||||
<div class="olympus-button" id="slow-button"></div>
|
||||
<div class="olympus-button" id="fast-button"></div>
|
||||
<div class="olympus-button" id="descend-button"></div>
|
||||
<div class="olympus-button" id="climb-button"></div>
|
||||
</div>
|
||||
|
||||
<div class="olympus-panel" id="unit-control-panel">
|
||||
<div class="olympus-panel" id="unit-control-buttons">
|
||||
<div class="olympus-button" id="slow-button"></div>
|
||||
<div class="olympus-button" id="fast-button"></div>
|
||||
<div class="olympus-button" id="descend-button"></div>
|
||||
<div class="olympus-button" id="climb-button"></div>
|
||||
</div>
|
||||
|
||||
<div id="title-label">Selected units</div>
|
||||
<div class="rounded-container">Olympus-1</div>
|
||||
<div class="rounded-container">Olympus-2</div>
|
||||
|
||||
<div id="selected-units-container">
|
||||
<!-- This is where all the unit selection buttons will be shown-->
|
||||
</div>
|
||||
|
||||
<div id="formation-creation-container">
|
||||
<div class="rectangular-button white" id="create-formation"><img src="images\buttons\create.svg">Create formation</div>
|
||||
<div class="rectangular-button white" id="undo-formation"><img src="images\buttons\erase.svg">Undo formation</div>
|
||||
</div>
|
||||
<div class="hl"></div>
|
||||
|
||||
<!--
|
||||
<div id="section-label">Formation</div>
|
||||
<div id="formation-buttons-container">
|
||||
<div class="rectangular-button">Echelon</div>
|
||||
<div class="rectangular-button">Fingertip</div>
|
||||
<div class="rectangular-button">Trail</div>
|
||||
<div class="rectangular-button">Line abreast</div>
|
||||
</div>
|
||||
|
||||
<div class="hl"></div>
|
||||
|
||||
<div id="section-label">Rules of engagement</div>
|
||||
<div id="roe-buttons-container">
|
||||
<div class="rectangular-button">Free</div>
|
||||
<div class="rectangular-button">Designated free</div>
|
||||
<div class="rectangular-button">Designated</div>
|
||||
<div class="rectangular-button">Return</div>
|
||||
<div class="rectangular-button">Hold</div>
|
||||
</div>
|
||||
|
||||
<div class="hl"></div>
|
||||
|
||||
<div id="section-label">Reaction to threat</div>
|
||||
<div id="threat-reaction-buttons-container">
|
||||
<div class="rectangular-button">None</div>
|
||||
<div class="rectangular-button">Passive</div>
|
||||
<div class="rectangular-button">Evade</div>
|
||||
<div class="rectangular-button">Escape</div>
|
||||
<div class="rectangular-button">Abort</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
Reference in New Issue
Block a user