weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Multiple map panning fixes and improvements

Browse Source
This commit is contained in:
Pax1601
2023-05-01 21:51:46 +02:00
parent 89a71ef04e
commit a23bdd4b33
15 changed files with 357 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/debug.bat
View File

@@ -1,2 +1,2 @@
start cmd /k "npm run start" start cmd /k "npm run start"
start cmd /k "watchify .\src\index.ts --debug -p [ tsify --noImplicitAny ] -o .\public\javascripts\bundle.js" start cmd /k "watchify .\src\index.ts --debug -o .\public\javascripts\bundle.js -t [ babelify --global true --presets [ @babel/preset-env ] --extensions '.js'] -p [ tsify --noImplicitAny ]

372
client/public/stylesheets/units.css
View File

@@ -1,46 +1,48 @@
:root { :root {
/* Generic marker settings */ /* Generic marker settings */
--unit-centre-x: calc( var( --unit-width ) / 2 ); --unit-centre-x: calc(var(--unit-width) / 2);
--unit-centre-y: calc( var( --unit-height ) / 2 ); --unit-centre-y: calc(var(--unit-height) / 2);
--unit-hotgroup-height: 10px; --unit-hotgroup-height: 10px;
--unit-hotgroup-width: var( --unit-hotgroup-height ); --unit-hotgroup-width: var(--unit-hotgroup-height);
/* Air units' marker settings */ /* Air units' marker settings */
--unit-aircraft-label-x: calc( var( --unit-centre-x ) - ( var( --unit-aircraft-width ) / 2 ) + ( var( --unit-stroke-width ) / 2 ) ); --unit-aircraft-label-x: calc(var(--unit-centre-x) - (var(--unit-aircraft-width) / 2) + (var(--unit-stroke-width) / 2));
--unit-aircraft-label-y: calc( var( --unit-centre-y ) - ( var( --unit-aircraft-height ) / 2 ) + ( var( --unit-stroke-width ) / 2 ) ); --unit-aircraft-label-y: calc(var(--unit-centre-y) - (var(--unit-aircraft-height) / 2) + (var(--unit-stroke-width) / 2));
} }
[data-object|="unit"] { [data-object|="unit"] {
align-items: center; align-items: center;
cursor:pointer; cursor: pointer;
display:flex; display: flex;
justify-content: center; justify-content: center;
position:relative; position: relative;
height: 100%;
width: 100%;
} }
[data-object|="unit"] .unit-selected-spotlight { [data-object|="unit"] .unit-selected-spotlight {
background-color: var( --unit-spotlight-fill ); background-color: var(--unit-spotlight-fill);
border-radius: 50%; border-radius: 50%;
display:none; display: none;
padding: var( --unit-spotlight-radius ); padding: var(--unit-spotlight-radius);
position: absolute; position: absolute;
z-index:1; z-index: 1;
} }
[data-object|="unit"] .unit-vvi { [data-object|="unit"] .unit-vvi {
align-self: center; align-self: center;
background:var( --secondary-gunmetal-grey ); background: var(--secondary-gunmetal-grey);
display:flex; display: flex;
justify-self: center; justify-self: center;
transform-origin: bottom; transform-origin: bottom;
translate:0 -50%; translate: 0 -50%;
padding-bottom: calc( ( var( --unit-aircraft-width ) / 2 ) + var( --unit-stroke-width ) ); padding-bottom: calc((var(--unit-aircraft-width) / 2) + var(--unit-stroke-width));
position:absolute; position: absolute;
width: var( --unit-aircraft-vvi-width ); width: var(--unit-aircraft-vvi-width);
z-index: 3; z-index: 3;
} }
@@ -48,32 +50,32 @@
[data-object|="unit"] .unit-hotgroup { [data-object|="unit"] .unit-hotgroup {
align-content: center; align-content: center;
background-color: black; background-color: black;
border-radius: var( --border-radius-xs ); border-radius: var(--border-radius-xs);
display:none; display: none;
height: var( --unit-hotgroup-height ); height: var(--unit-hotgroup-height);
justify-content: center; justify-content: center;
position:absolute; position: absolute;
transform: rotate( -45deg ); transform: rotate(-45deg);
translate:0 -275%; translate: 0 -275%;
width: var( --unit-hotgroup-width ); width: var(--unit-hotgroup-width);
z-index: 5; z-index: 5;
} }
[data-object|="unit"] .unit-hotgroup-id { [data-object|="unit"] .unit-hotgroup-id {
background-color: transparent; background-color: transparent;
color:white; color: white;
font-size: 9px; font-size: 9px;
font-weight: bolder; font-weight: bolder;
transform:rotate( 45deg ); transform: rotate(45deg);
} }
[data-object|="unit"] .unit-marker-border { [data-object|="unit"] .unit-marker-border {
border-radius: var( --border-radius-sm ); border-radius: var(--border-radius-sm);
display:none; display: none;
height: calc( var( --unit-aircraft-height ) + ( var( --unit-label-border-width ) * 2 ) ); height: calc(var(--unit-aircraft-height) + (var(--unit-label-border-width) * 2));
position:absolute; position: absolute;
width: calc( var( --unit-aircraft-width ) + ( var( --unit-label-border-width ) * 2 ) ); width: calc(var(--unit-aircraft-width) + (var(--unit-label-border-width) * 2));
z-index:2; z-index: 2;
} }
@@ -85,9 +87,9 @@
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
position:absolute; position: absolute;
transform-origin: center; transform-origin: center;
z-index:3; z-index: 3;
} }
@@ -95,43 +97,43 @@
/* Air */ /* Air */
[data-object|="unit-aircraft"] .unit-marker { [data-object|="unit-aircraft"] .unit-marker {
background-image: var( --unit-aircraft-marker-neutral-url ); background-image: var(--unit-aircraft-marker-neutral-url);
height: var( --unit-aircraft-marker-height ); height: var(--unit-aircraft-marker-height);
width: var( --unit-aircraft-marker-width ); width: var(--unit-aircraft-marker-width);
} }
[data-object|="unit-aircraft"]:hover .unit-marker { [data-object|="unit-aircraft"]:hover .unit-marker {
background-image: var( --unit-aircraft-marker-neutral-hover-url ); background-image: var(--unit-aircraft-marker-neutral-hover-url);
} }
[data-object|="unit-aircraft"][data-is-selected] .unit-marker { [data-object|="unit-aircraft"][data-is-selected] .unit-marker {
background-image: var( --unit-aircraft-marker-neutral-selected-url ); background-image: var(--unit-aircraft-marker-neutral-selected-url);
} }
[data-object|="unit-aircraft"][data-coalition="blue"] .unit-marker { [data-object|="unit-aircraft"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-aircraft-marker-blue-url ); background-image: var(--unit-aircraft-marker-blue-url);
} }
[data-object|="unit-aircraft"][data-coalition="blue"]:hover .unit-marker { [data-object|="unit-aircraft"][data-coalition="blue"]:hover .unit-marker {
background-image: var( --unit-aircraft-marker-blue-hover-url ); background-image: var(--unit-aircraft-marker-blue-hover-url);
} }
[data-object|="unit-aircraft"][data-coalition="blue"][data-is-selected] .unit-marker { [data-object|="unit-aircraft"][data-coalition="blue"][data-is-selected] .unit-marker {
background-image: var( --unit-aircraft-marker-blue-selected-url ); background-image: var(--unit-aircraft-marker-blue-selected-url);
} }
[data-object|="unit-aircraft"][data-coalition="red"] .unit-marker { [data-object|="unit-aircraft"][data-coalition="red"] .unit-marker {
background-image: var( --unit-aircraft-marker-red-url ); background-image: var(--unit-aircraft-marker-red-url);
} }
[data-object|="unit-aircraft"][data-coalition="red"]:hover .unit-marker { [data-object|="unit-aircraft"][data-coalition="red"]:hover .unit-marker {
background-image: var( --unit-aircraft-marker-red-hover-url ); background-image: var(--unit-aircraft-marker-red-hover-url);
} }
[data-object|="unit-aircraft"][data-coalition="red"][data-is-selected] .unit-marker { [data-object|="unit-aircraft"][data-coalition="red"][data-is-selected] .unit-marker {
background-image: var( --unit-aircraft-marker-red-selected-url ); background-image: var(--unit-aircraft-marker-red-selected-url);
} }
@@ -140,194 +142,195 @@
/* Ground vehicles (not SAMs) */ /* Ground vehicles (not SAMs) */
[data-object|="unit-groundunit"] .unit-marker { [data-object|="unit-groundunit"] .unit-marker {
background-image: var( --unit-groundunit-marker-neutral-url ); background-image: var(--unit-groundunit-marker-neutral-url);
height: var( --unit-groundunit-marker-height ); height: var(--unit-groundunit-marker-height);
width: var( --unit-groundunit-marker-width ); width: var(--unit-groundunit-marker-width);
} }
[data-object|="unit-groundunit"]:hover .unit-marker { [data-object|="unit-groundunit"]:hover .unit-marker {
background-image: var( --unit-groundunit-marker-neutral-hover-url ); background-image: var(--unit-groundunit-marker-neutral-hover-url);
} }
[data-object|="unit-groundunit"][data-is-selected] .unit-marker { [data-object|="unit-groundunit"][data-is-selected] .unit-marker {
background-image: var( --unit-groundunit-marker-neutral-selected-url ); background-image: var(--unit-groundunit-marker-neutral-selected-url);
} }
[data-object|="unit-groundunit"][data-coalition="blue"] .unit-marker { [data-object|="unit-groundunit"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-groundunit-marker-blue-url ); background-image: var(--unit-groundunit-marker-blue-url);
} }
[data-object|="unit-groundunit"][data-coalition="blue"]:hover .unit-marker { [data-object|="unit-groundunit"][data-coalition="blue"]:hover .unit-marker {
background-image: var( --unit-groundunit-marker-blue-hover-url ); background-image: var(--unit-groundunit-marker-blue-hover-url);
} }
[data-object|="unit-groundunit"][data-coalition="blue"][data-is-selected] .unit-marker { [data-object|="unit-groundunit"][data-coalition="blue"][data-is-selected] .unit-marker {
background-image: var( --unit-groundunit-marker-blue-selected-url ); background-image: var(--unit-groundunit-marker-blue-selected-url);
} }
[data-object|="unit-groundunit"][data-coalition="red"] .unit-marker { [data-object|="unit-groundunit"][data-coalition="red"] .unit-marker {
background-image: var( --unit-groundunit-marker-red-url ); background-image: var(--unit-groundunit-marker-red-url);
} }
[data-object|="unit-groundunit"][data-coalition="red"]:hover .unit-marker { [data-object|="unit-groundunit"][data-coalition="red"]:hover .unit-marker {
background-image: var( --unit-groundunit-marker-red-hover-url ); background-image: var(--unit-groundunit-marker-red-hover-url);
} }
[data-object|="unit-groundunit"][data-coalition="red"][data-is-selected] .unit-marker { [data-object|="unit-groundunit"][data-coalition="red"][data-is-selected] .unit-marker {
background-image: var( --unit-groundunit-marker-red-selected-url ); background-image: var(--unit-groundunit-marker-red-selected-url);
} }
/* SAMs */ /* SAMs */
[data-object|="unit-sam"] .unit-selected-spotlight { [data-object|="unit-sam"] .unit-selected-spotlight {
translate:0 2px; translate: 0 2px;
} }
[data-object|="unit-sam"] .unit-marker { [data-object|="unit-sam"] .unit-marker {
background-image: var( --unit-sam-marker-neutral-url ); background-image: var(--unit-sam-marker-neutral-url);
height: var( --unit-sam-marker-height ); height: var(--unit-sam-marker-height);
width: var( --unit-sam-marker-width ); width: var(--unit-sam-marker-width);
} }
[data-object|="unit-sam"]:hover .unit-marker { [data-object|="unit-sam"]:hover .unit-marker {
background-image: var( --unit-sam-marker-neutral-hover-url ); background-image: var(--unit-sam-marker-neutral-hover-url);
} }
[data-object|="unit-sam"][data-is-selected] .unit-marker { [data-object|="unit-sam"][data-is-selected] .unit-marker {
background-image: var( --unit-sam-marker-neutral-selected-url ); background-image: var(--unit-sam-marker-neutral-selected-url);
} }
[data-object|="unit-sam"][data-coalition="blue"] .unit-marker { [data-object|="unit-sam"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-sam-marker-blue-url ); background-image: var(--unit-sam-marker-blue-url);
} }
[data-object|="unit-sam"][data-coalition="blue"]:hover .unit-marker { [data-object|="unit-sam"][data-coalition="blue"]:hover .unit-marker {
background-image: var( --unit-sam-marker-blue-hover-url ); background-image: var(--unit-sam-marker-blue-hover-url);
} }
[data-object|="unit-sam"][data-coalition="blue"][data-is-selected] .unit-marker { [data-object|="unit-sam"][data-coalition="blue"][data-is-selected] .unit-marker {
background-image: var( --unit-sam-marker-blue-selected-url ); background-image: var(--unit-sam-marker-blue-selected-url);
} }
[data-object|="unit-sam"][data-coalition="red"] .unit-marker { [data-object|="unit-sam"][data-coalition="red"] .unit-marker {
background-image: var( --unit-sam-marker-red-url ); background-image: var(--unit-sam-marker-red-url);
} }
[data-object|="unit-sam"][data-coalition="red"]:hover .unit-marker { [data-object|="unit-sam"][data-coalition="red"]:hover .unit-marker {
background-image: var( --unit-sam-marker-red-hover-url ); background-image: var(--unit-sam-marker-red-hover-url);
} }
[data-object|="unit-sam"][data-coalition="red"][data-is-selected] .unit-marker { [data-object|="unit-sam"][data-coalition="red"][data-is-selected] .unit-marker {
background-image: var( --unit-sam-marker-red-selected-url ); background-image: var(--unit-sam-marker-red-selected-url);
} }
/* navyunit */ /* navyunit */
[data-object|="unit-navyunit"] .unit-selected-spotlight { [data-object|="unit-navyunit"] .unit-selected-spotlight {
translate:0 -2px; translate: 0 -2px;
} }
[data-object|="unit-navyunit"] .unit-marker { [data-object|="unit-navyunit"] .unit-marker {
background-image: var( --unit-navyunit-marker-neutral-url ); background-image: var(--unit-navyunit-marker-neutral-url);
height: var( --unit-navyunit-marker-height ); height: var(--unit-navyunit-marker-height);
width: var( --unit-navyunit-marker-width ); width: var(--unit-navyunit-marker-width);
} }
[data-object|="unit-navyunit"]:hover .unit-marker { [data-object|="unit-navyunit"]:hover .unit-marker {
background-image: var( --unit-navyunit-marker-neutral-hover-url ); background-image: var(--unit-navyunit-marker-neutral-hover-url);
} }
[data-object|="unit-navyunit"][data-is-selected] .unit-marker { [data-object|="unit-navyunit"][data-is-selected] .unit-marker {
background-image: var( --unit-navyunit-marker-neutral-selected-url ); background-image: var(--unit-navyunit-marker-neutral-selected-url);
} }
[data-object|="unit-navyunit"][data-coalition="blue"] .unit-marker { [data-object|="unit-navyunit"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-navyunit-marker-blue-url ); background-image: var(--unit-navyunit-marker-blue-url);
} }
[data-object|="unit-navyunit"][data-coalition="blue"]:hover .unit-marker { [data-object|="unit-navyunit"][data-coalition="blue"]:hover .unit-marker {
background-image: var( --unit-navyunit-marker-blue-hover-url ); background-image: var(--unit-navyunit-marker-blue-hover-url);
} }
[data-object|="unit-navyunit"][data-coalition="blue"][data-is-selected] .unit-marker { [data-object|="unit-navyunit"][data-coalition="blue"][data-is-selected] .unit-marker {
background-image: var( --unit-navyunit-marker-blue-selected-url ); background-image: var(--unit-navyunit-marker-blue-selected-url);
} }
[data-object|="unit-navyunit"][data-coalition="red"] .unit-marker { [data-object|="unit-navyunit"][data-coalition="red"] .unit-marker {
background-image: var( --unit-navyunit-marker-red-url ); background-image: var(--unit-navyunit-marker-red-url);
} }
[data-object|="unit-navyunit"][data-coalition="red"]:hover .unit-marker { [data-object|="unit-navyunit"][data-coalition="red"]:hover .unit-marker {
background-image: var( --unit-navyunit-marker-red-hover-url ); background-image: var(--unit-navyunit-marker-red-hover-url);
} }
[data-object|="unit-navyunit"][data-coalition="red"][data-is-selected] .unit-marker { [data-object|="unit-navyunit"][data-coalition="red"][data-is-selected] .unit-marker {
background-image: var( --unit-navyunit-marker-red-selected-url ); background-image: var(--unit-navyunit-marker-red-selected-url);
} }
/* Building */ /* Building */
[data-object|="unit-building"] .unit-marker { [data-object|="unit-building"] .unit-marker {
background-image: var( --unit-building-marker-neutral-url ); background-image: var(--unit-building-marker-neutral-url);
height: var( --unit-building-marker-height ); height: var(--unit-building-marker-height);
width: var( --unit-building-marker-width ); width: var(--unit-building-marker-width);
} }
[data-object|="unit-building"][data-coalition="blue"] .unit-marker { [data-object|="unit-building"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-building-marker-blue-url ); background-image: var(--unit-building-marker-blue-url);
} }
[data-object|="unit-building"][data-coalition="red"] .unit-marker { [data-object|="unit-building"][data-coalition="red"] .unit-marker {
background-image: var( --unit-building-marker-red-url ); background-image: var(--unit-building-marker-red-url);
} }
/* Weapons */ /* Weapons */
[data-object|="unit-missile"], [data-object|="unit-bomb"] { [data-object|="unit-missile"],
[data-object|="unit-bomb"] {
cursor: default; cursor: default;
} }
[data-object|="unit-missile"] .unit-marker { [data-object|="unit-missile"] .unit-marker {
background-image: var( --unit-missile-marker-neutral-url ); background-image: var(--unit-missile-marker-neutral-url);
height: var( --unit-missile-marker-height ); height: var(--unit-missile-marker-height);
width: var( --unit-missile-marker-width ); width: var(--unit-missile-marker-width);
} }
[data-object|="unit-missile"][data-coalition="blue"] .unit-marker { [data-object|="unit-missile"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-missile-marker-blue-url ); background-image: var(--unit-missile-marker-blue-url);
} }
[data-object|="unit-missile"][data-coalition="red"] .unit-marker { [data-object|="unit-missile"][data-coalition="red"] .unit-marker {
background-image: var( --unit-missile-marker-red-url ); background-image: var(--unit-missile-marker-red-url);
} }
[data-object|="unit-bomb"] .unit-marker { [data-object|="unit-bomb"] .unit-marker {
background-image: var( --unit-bomb-marker-neutral-url ); background-image: var(--unit-bomb-marker-neutral-url);
height: var( --unit-bomb-marker-height ); height: var(--unit-bomb-marker-height);
width: var( --unit-bomb-marker-width ); width: var(--unit-bomb-marker-width);
} }
[data-object|="unit-bomb"][data-coalition="blue"] .unit-marker { [data-object|="unit-bomb"][data-coalition="blue"] .unit-marker {
background-image: var( --unit-bomb-marker-blue-url ); background-image: var(--unit-bomb-marker-blue-url);
} }
[data-object|="unit-bomb"][data-coalition="red"] .unit-marker { [data-object|="unit-bomb"][data-coalition="red"] .unit-marker {
background-image: var( --unit-bomb-marker-red-url ); background-image: var(--unit-bomb-marker-red-url);
} }
@@ -336,12 +339,12 @@
********************************************/ ********************************************/
[data-object|="unit"] .unit-short-label { [data-object|="unit"] .unit-short-label {
color: var( --secondary-gunmetal-grey ); color: var(--secondary-gunmetal-grey);
font-size: var(--unit-font-size); font-size: var(--unit-font-size);
font-weight: var(--unit-font-weight); font-weight: var(--unit-font-weight);
line-height: normal; line-height: normal;
position: absolute; position: absolute;
z-index:10; z-index: 10;
} }
[data-object|="unit-groundunit"] .unit-short-label { [data-object|="unit-groundunit"] .unit-short-label {
@@ -349,81 +352,81 @@
} }
[data-object|="unit-sam"] .unit-short-label { [data-object|="unit-sam"] .unit-short-label {
translate:0 50%; translate: 0 50%;
} }
[data-object|="unit-navyunit"] .unit-short-label { [data-object|="unit-navyunit"] .unit-short-label {
translate:0 -50%; translate: 0 -50%;
} }
[data-object|="unit"] .unit-fuel { [data-object|="unit"] .unit-fuel {
background:white; background: white;
border: var( --unit-aircraft-fuel-border-width ) solid var( --secondary-dark-steel ); border: var(--unit-aircraft-fuel-border-width) solid var(--secondary-dark-steel);
border-radius: var( --border-radius-sm ); border-radius: var(--border-radius-sm);
display:none; display: none;
height: var( --unit-aircraft-fuel-height ); height: var(--unit-aircraft-fuel-height);
position: absolute; position: absolute;
translate:var( --unit-aircraft-fuel-x ) var( --unit-aircraft-fuel-y ); translate: var(--unit-aircraft-fuel-x) var(--unit-aircraft-fuel-y);
width: var( --unit-aircraft-fuel-width ); width: var(--unit-aircraft-fuel-width);
z-index: 5; z-index: 5;
} }
[data-object|="unit"] .unit-fuel-level { [data-object|="unit"] .unit-fuel-level {
background-color: var( --secondary-light-grey ); background-color: var(--secondary-light-grey);
height:100%; height: 100%;
width:100%; width: 100%;
} }
[data-object|="unit"] .unit-ammo { [data-object|="unit"] .unit-ammo {
column-gap: var( --unit-aircraft-ammo-spacing ); column-gap: var(--unit-aircraft-ammo-spacing);
display:none; display: none;
height:fit-content; height: fit-content;
position:absolute; position: absolute;
translate:var( --unit-aircraft-ammo-x ) var( --unit-aircraft-ammo-y ); translate: var(--unit-aircraft-ammo-x) var(--unit-aircraft-ammo-y);
width:fit-content; width: fit-content;
} }
[data-object|="unit"] .unit-ammo > * { [data-object|="unit"] .unit-ammo>* {
background-color: white; background-color: white;
border: var( --unit-aircraft-ammo-border-width ) solid var( --secondary-dark-steel ); border: var(--unit-aircraft-ammo-border-width) solid var(--secondary-dark-steel);
border-radius: 50%; border-radius: 50%;
padding: var( --unit-aircraft-ammo-radius ); padding: var(--unit-aircraft-ammo-radius);
} }
[data-object|="unit"] .unit-summary { [data-object|="unit"] .unit-summary {
pointer-events: none; pointer-events: none;
column-gap: 6px; column-gap: 6px;
color:white; color: white;
display:flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size:11px; font-size: 11px;
font-weight: bold; font-weight: bold;
justify-content: right; justify-content: right;
line-height: 12px; line-height: 12px;
position:absolute; position: absolute;
row-gap: 1px; row-gap: 1px;
text-shadow: text-shadow:
-1px -1px 0 #000, -1px -1px 0 #000,
1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000; 1px 1px 0 #000;
translate: -60px 0; translate: -60px 0;
width:fit-content; width: fit-content;
z-index:20; z-index: 20;
} }
[data-hide-labels] [data-object|="unit"] .unit-summary { [data-hide-labels] [data-object|="unit"] .unit-summary {
display:none; display: none;
} }
[data-object|="unit"] .unit-summary > * { [data-object|="unit"] .unit-summary>* {
padding:1px; padding: 1px;
} }
[data-object|="unit"] .unit-summary .unit-callsign { [data-object|="unit"] .unit-summary .unit-callsign {
color:white; color: white;
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
transform-origin: right; transform-origin: right;
@@ -433,35 +436,35 @@
[data-object|="unit"] .unit-summary .unit-callsign:hover { [data-object|="unit"] .unit-summary .unit-callsign:hover {
direction: rtl; direction: rtl;
overflow:visible; overflow: visible;
} }
[data-object|="unit"]:hover .unit-ammo, [data-object|="unit"]:hover .unit-ammo,
[data-object|="unit"]:hover .unit-fuel { [data-object|="unit"]:hover .unit-fuel {
display:flex; display: flex;
} }
[data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup, [data-object|="unit"][data-is-in-hotgroup] .unit-hotgroup,
[data-object|="unit"][data-is-selected] .unit-ammo, [data-object|="unit"][data-is-selected] .unit-ammo,
[data-object|="unit"][data-is-selected] .unit-fuel, [data-object|="unit"][data-is-selected] .unit-fuel,
[data-object|="unit"][data-is-selected] .unit-selected-spotlight { [data-object|="unit"][data-is-selected] .unit-selected-spotlight {
display:flex; display: flex;
} }
[data-object|="unit"][data-has-fox-1] .unit-ammo-fox-1, [data-object|="unit"][data-has-fox-1] .unit-ammo-fox-1,
[data-object|="unit"][data-has-fox-2] .unit-ammo-fox-2, [data-object|="unit"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-has-fox-3] .unit-ammo-fox-3, [data-object|="unit"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-has-other-ammo] .unit-ammo-other { [data-object|="unit"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --secondary-gunmetal-grey ); background-color: var(--secondary-gunmetal-grey);
} }
[data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label { [data-object|="unit"][data-coalition="blue"][data-is-selected] .unit-short-label {
color: var( --secondary-blue-text ); color: var(--secondary-blue-text);
} }
[data-object|="unit"][data-coalition="blue"] .unit-fuel-level, [data-object|="unit"][data-coalition="blue"] .unit-fuel-level,
@@ -469,16 +472,16 @@
[data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo-fox-2, [data-object|="unit"][data-coalition="blue"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo-fox-3, [data-object|="unit"][data-coalition="blue"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo-other { [data-object|="unit"][data-coalition="blue"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --primary-blue ); background-color: var(--primary-blue);
} }
[data-object|="unit"][data-coalition="blue"] .unit-vvi { [data-object|="unit"][data-coalition="blue"] .unit-vvi {
background-color: var( --secondary-blue-outline ); background-color: var(--secondary-blue-outline);
} }
[data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label { [data-object|="unit"][data-coalition="red"][data-is-selected] .unit-short-label {
color: var( --secondary-red-text ); color: var(--secondary-red-text);
} }
[data-object|="unit"][data-coalition="red"] .unit-fuel-level, [data-object|="unit"][data-coalition="red"] .unit-fuel-level,
@@ -486,18 +489,18 @@
[data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo-fox-2, [data-object|="unit"][data-coalition="red"][data-has-fox-2] .unit-ammo-fox-2,
[data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo-fox-3, [data-object|="unit"][data-coalition="red"][data-has-fox-3] .unit-ammo-fox-3,
[data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo-other { [data-object|="unit"][data-coalition="red"][data-has-other-ammo] .unit-ammo-other {
background-color: var( --primary-red ); background-color: var(--primary-red);
} }
[data-object|="unit"][data-coalition="blue"] .unit-vvi { [data-object|="unit"][data-coalition="blue"] .unit-vvi {
background-color: var( --secondary-red-outline ); background-color: var(--secondary-red-outline);
} }
@keyframes pulse { @keyframes pulse {
50% { 50% {
opacity: 0; opacity: 0;
} }
} }
@@ -508,83 +511,82 @@
[data-object|="unit"] .unit-state { [data-object|="unit"] .unit-state {
background-repeat: no-repeat; background-repeat: no-repeat;
position:absolute; position: absolute;
height:var( --unit-aircraft-state-height ); height: var(--unit-aircraft-state-height);
width:var( --unit-aircraft-state-width ); width: var(--unit-aircraft-state-width);
z-index: 10; z-index: 10;
} }
[data-object|="unit"][data-state="rtb"] .unit-state { [data-object|="unit"][data-state="rtb"] .unit-state {
background-image: var( --unit-aircraft-state-rtb ); background-image: var(--unit-aircraft-state-rtb);
} }
[data-object|="unit"][data-state="land"] .unit-state { [data-object|="unit"][data-state="land"] .unit-state {
background-image: var( --unit-aircraft-state-rtb ); background-image: var(--unit-aircraft-state-rtb);
} }
[data-object|="unit"][data-state="idle"] .unit-state { [data-object|="unit"][data-state="idle"] .unit-state {
background-image: var( --unit-aircraft-state-idle ); background-image: var(--unit-aircraft-state-idle);
} }
[data-object|="unit"][data-state="attack"] .unit-state { [data-object|="unit"][data-state="attack"] .unit-state {
background-image: var( --unit-aircraft-state-attack ); background-image: var(--unit-aircraft-state-attack);
} }
[data-object|="unit"][data-state="follow"] .unit-state { [data-object|="unit"][data-state="follow"] .unit-state {
background-image: var( --unit-aircraft-state-follow ); background-image: var(--unit-aircraft-state-follow);
} }
[data-object|="unit"][data-state="refuel"] .unit-state { [data-object|="unit"][data-state="refuel"] .unit-state {
background-image: var( --unit-aircraft-state-refuel ); background-image: var(--unit-aircraft-state-refuel);
} }
[data-object|="unit"][data-state="human"] .unit-state { [data-object|="unit"][data-state="human"] .unit-state {
background-image: var( --unit-aircraft-state-human ); background-image: var(--unit-aircraft-state-human);
} }
[data-object|="unit"][data-state="dcs"] .unit-state { [data-object|="unit"][data-state="dcs"] .unit-state {
background-image: var( --unit-aircraft-state-dcs ); background-image: var(--unit-aircraft-state-dcs);
} }
/*** DEAD ***/ /*** DEAD ***/
[data-object|="unit-aircraft"][ data-is-dead ] { [data-object|="unit-aircraft"][ data-is-dead] {
cursor: default; cursor: default;
} }
[data-object|="unit-aircraft"][ data-is-dead ] .unit-marker { [data-object|="unit-aircraft"][ data-is-dead] .unit-marker {
background-image: var( --unit-aircraft-marker-neutral-dead-url ); background-image: var(--unit-aircraft-marker-neutral-dead-url);
background-position: 50% 50%; background-position: 50% 50%;
background-size: auto 32px; background-size: auto 32px;
} }
[data-object|="unit-aircraft"][ data-is-dead ][data-coalition="blue"] .unit-marker { [data-object|="unit-aircraft"][ data-is-dead][data-coalition="blue"] .unit-marker {
background-image: var( --unit-aircraft-marker-blue-dead-url ); background-image: var(--unit-aircraft-marker-blue-dead-url);
} }
[data-object|="unit-aircraft"][ data-is-dead ][data-coalition="red"] .unit-marker { [data-object|="unit-aircraft"][ data-is-dead][data-coalition="red"] .unit-marker {
background-image: var( --unit-aircraft-marker-red-dead-url ); background-image: var(--unit-aircraft-marker-red-dead-url);
} }
[data-object|="unit-aircraft"][ data-is-dead ] .unit-selected-spotlight, [data-object|="unit-aircraft"][ data-is-dead] .unit-selected-spotlight,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-short-label, [data-object|="unit-aircraft"][ data-is-dead] .unit-short-label,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-vvi, [data-object|="unit-aircraft"][ data-is-dead] .unit-vvi,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-hotgroup, [data-object|="unit-aircraft"][ data-is-dead] .unit-hotgroup,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-hotgroup-id, [data-object|="unit-aircraft"][ data-is-dead] .unit-hotgroup-id,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-state, [data-object|="unit-aircraft"][ data-is-dead] .unit-state,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-fuel, [data-object|="unit-aircraft"][ data-is-dead] .unit-fuel,
[data-object|="unit-aircraft"][ data-is-dead ] .unit-ammo, [data-object|="unit-aircraft"][ data-is-dead] .unit-ammo,
[data-object|="unit-aircraft"][ data-is-dead ]:hover .unit-fuel, [data-object|="unit-aircraft"][ data-is-dead]:hover .unit-fuel,
[data-object|="unit-aircraft"][ data-is-dead ]:hover .unit-ammo { [data-object|="unit-aircraft"][ data-is-dead]:hover .unit-ammo {
display:none !important; display: none !important;
} }
[data-object|="unit-aircraft"][ data-is-dead ] .unit-summary > * { [data-object|="unit-aircraft"][ data-is-dead] .unit-summary>* {
display:none; display: none;
}
[data-object|="unit-aircraft"][ data-is-dead ] .unit-summary .unit-callsign {
display:block;
} }
[data-object|="unit-aircraft"][ data-is-dead] .unit-summary .unit-callsign {
display: block;
}

34
client/src/index.ts
View File

@@ -192,7 +192,7 @@ function setupEvents() {
case "KeyL": case "KeyL":
document.body.toggleAttribute("data-hide-labels"); document.body.toggleAttribute("data-hide-labels");
break; break;
case "KeyD": case "KeyT":
toggleDemoEnabled(); toggleDemoEnabled();
break; break;
case "Quote": case "Quote":
@@ -201,6 +201,37 @@ function setupEvents() {
case "Space": case "Space":
setPaused(!getPaused()); setPaused(!getPaused());
break; break;
case "KeyW":
case "KeyA":
case "KeyS":
case "KeyD":
case "ArrowLeft":
case "ArrowRight":
case "ArrowUp":
case "ArrowDown":
getMap().handleMapPanning(ev);
break;
}
});
/* Keydown events */
document.addEventListener("keydown", ev => {
if ( keyEventWasInInput( ev ) ) {
return;
}
switch (ev.code) {
case "KeyW":
case "KeyA":
case "KeyS":
case "KeyD":
case "ArrowLeft":
case "ArrowRight":
case "ArrowUp":
case "ArrowDown":
getMap().handleMapPanning(ev);
break;
} }
}); });
@@ -231,7 +262,6 @@ function setupEvents() {
el.classList.toggle( "hide" ); el.classList.toggle( "hide" );
}) })
}); });
} }
export function getMap() { export function getMap() {

2
client/src/map/boxselect.ts
View File

@@ -45,7 +45,7 @@ export var BoxSelect = Handler.extend({
}, },
_onMouseDown: function (e: any) { _onMouseDown: function (e: any) {
if (((e.which !== 1) && (e.button !== 0))) { return false; } if ((e.which !== 1 && e.button !== 0) || !e.shiftKey) { return false; }
// Clear the deferred resetState if it hasn't executed yet, otherwise it // Clear the deferred resetState if it hasn't executed yet, otherwise it
// will interrupt the interaction and orphan a box element in the container. // will interrupt the interaction and orphan a box element in the container.

206
client/src/map/map.ts
View File

@@ -19,8 +19,7 @@ export const MOVE_UNIT = "MOVE_UNIT";
L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect); L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);
export class ClickableMiniMap extends MiniMap { export class ClickableMiniMap extends MiniMap {
constructor(layer: L.TileLayer | L.LayerGroup, options?: MiniMapOptions) constructor(layer: L.TileLayer | L.LayerGroup, options?: MiniMapOptions) {
{
super(layer, options); super(layer, options);
} }
@@ -34,7 +33,11 @@ export class Map extends L.Map {
#state: string; #state: string;
#layer: L.TileLayer | null = null; #layer: L.TileLayer | null = null;
#preventLeftClick: boolean = false; #preventLeftClick: boolean = false;
#leftClickTimer: any = 0; #leftClickTimer: number = 0;
#deafultPanDelta: number = 100;
#panInterval: number | null = null;
#panDeltaX: number;
#panDeltaY: number;
#lastMousePosition: L.Point = new L.Point(0, 0); #lastMousePosition: L.Point = new L.Point(0, 0);
#centerUnit: Unit | null = null; #centerUnit: Unit | null = null;
#miniMap: ClickableMiniMap | null = null; #miniMap: ClickableMiniMap | null = null;
@@ -49,7 +52,7 @@ export class Map extends L.Map {
constructor(ID: string) { constructor(ID: string) {
/* Init the leaflet map */ /* Init the leaflet map */
//@ts-ignore //@ts-ignore
super(ID, { doubleClickZoom: false, zoomControl: false, boxZoom: false, boxSelect: true, zoomAnimation: true, maxBoundsViscosity: 1.0, minZoom: 7 }); super(ID, { doubleClickZoom: false, zoomControl: false, boxZoom: false, boxSelect: true, zoomAnimation: true, maxBoundsViscosity: 1.0, minZoom: 7, keyboard: true, keyboardPanDelta: 0 });
this.setView([37.23, -115.8], 10); this.setView([37.23, -115.8], 10);
this.setLayer("ArcGIS Satellite"); this.setLayer("ArcGIS Satellite");
@@ -57,59 +60,59 @@ export class Map extends L.Map {
/* Minimap */ /* Minimap */
/* Draw the limits of the maps in the minimap*/ /* Draw the limits of the maps in the minimap*/
var latlngs = [[ // NTTR var latlngs = [[ // NTTR
new L.LatLng(39.7982463, -119.985425 ), new L.LatLng(39.7982463, -119.985425),
new L.LatLng(34.4037128, -119.7806729), new L.LatLng(34.4037128, -119.7806729),
new L.LatLng(34.3483316, -112.4529351), new L.LatLng(34.3483316, -112.4529351),
new L.LatLng(39.7372411, -112.1130805), new L.LatLng(39.7372411, -112.1130805),
new L.LatLng(39.7982463, -119.985425 ) new L.LatLng(39.7982463, -119.985425)
], ],
[ // Syria [ // Syria
new L.LatLng(37.3630556, 29.2686111), new L.LatLng(37.3630556, 29.2686111),
new L.LatLng(31.8472222, 29.8975), new L.LatLng(31.8472222, 29.8975),
new L.LatLng(32.1358333, 42.1502778), new L.LatLng(32.1358333, 42.1502778),
new L.LatLng(37.7177778, 42.3716667), new L.LatLng(37.7177778, 42.3716667),
new L.LatLng(37.3630556, 29.2686111) new L.LatLng(37.3630556, 29.2686111)
], ],
[ // Caucasus [ // Caucasus
new L.LatLng(39.6170191, 27.634935), new L.LatLng(39.6170191, 27.634935),
new L.LatLng(38.8735863, 47.1423108), new L.LatLng(38.8735863, 47.1423108),
new L.LatLng(47.3907982, 49.3101946), new L.LatLng(47.3907982, 49.3101946),
new L.LatLng(48.3955879, 26.7753625), new L.LatLng(48.3955879, 26.7753625),
new L.LatLng(39.6170191, 27.634935) new L.LatLng(39.6170191, 27.634935)
], ],
[ // Persian Gulf [ // Persian Gulf
new L.LatLng(32.9355285, 46.5623682), new L.LatLng(32.9355285, 46.5623682),
new L.LatLng(21.729393, 47.572675), new L.LatLng(21.729393, 47.572675),
new L.LatLng(21.8501348, 63.9734737), new L.LatLng(21.8501348, 63.9734737),
new L.LatLng(33.131584, 64.7313594), new L.LatLng(33.131584, 64.7313594),
new L.LatLng(32.9355285, 46.5623682) new L.LatLng(32.9355285, 46.5623682)
], ],
[ // Marianas [ // Marianas
new L.LatLng(22.09, 135.0572222), new L.LatLng(22.09, 135.0572222),
new L.LatLng(10.5777778, 135.7477778), new L.LatLng(10.5777778, 135.7477778),
new L.LatLng(10.7725, 149.3918333), new L.LatLng(10.7725, 149.3918333),
new L.LatLng(22.5127778, 149.5427778), new L.LatLng(22.5127778, 149.5427778),
new L.LatLng(22.09, 135.0572222) new L.LatLng(22.09, 135.0572222)
] ]
]; ];
var minimapLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { minZoom: 0, maxZoom: 13 }); var minimapLayer = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { minZoom: 0, maxZoom: 13 });
this.#miniMapLayerGroup = new L.LayerGroup([minimapLayer]); this.#miniMapLayerGroup = new L.LayerGroup([minimapLayer]);
var miniMapPolyline = new L.Polyline(latlngs, {color: '#202831'}); var miniMapPolyline = new L.Polyline(latlngs, { color: '#202831' });
miniMapPolyline.addTo(this.#miniMapLayerGroup); miniMapPolyline.addTo(this.#miniMapLayerGroup);
/* Scale */ /* Scale */
//@ts-ignore TODO more hacking because the module is provided as a pure javascript module only //@ts-ignore TODO more hacking because the module is provided as a pure javascript module only
L.control.scalenautic({position: "topright", maxWidth: 300, nautic: true, metric: true, imperial: false}).addTo(this); L.control.scalenautic({ position: "topright", maxWidth: 300, nautic: true, metric: true, imperial: false }).addTo(this);
/* Init the state machine */ /* Init the state machine */
this.#state = IDLE; this.#state = IDLE;
/* Register event handles */ /* Register event handles */
this.on("click", (e: any) => this.#onClick(e)); this.on("click", (e: any) => this.#onClick(e));
this.on("dblclick", (e: any) => this.#onDoubleClick(e)); this.on("dblclick", (e: any) => this.#onDoubleClick(e));
this.on("zoomstart", (e: any) => this.#onZoom(e)); this.on("zoomstart", (e: any) => this.#onZoom(e));
this.on("drag", (e: any) => this.centerOnUnit(null)); this.on("drag", (e: any) => this.centerOnUnit(null));
this.on("contextmenu", (e: any) => this.#onContextMenu(e)); this.on("contextmenu", (e: any) => this.#onContextMenu(e));
this.on('selectionend', (e: any) => this.#onSelectionEnd(e)); this.on('selectionend', (e: any) => this.#onSelectionEnd(e));
this.on('mousedown', (e: any) => this.#onMouseDown(e)); this.on('mousedown', (e: any) => this.#onMouseDown(e));
@@ -121,7 +124,7 @@ export class Map extends L.Map {
document.body.toggleAttribute("data-hide-" + ev.detail.coalition); document.body.toggleAttribute("data-hide-" + ev.detail.coalition);
Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility()); Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
}); });
document.addEventListener("toggleUnitVisibility", (ev: CustomEventInit) => { document.addEventListener("toggleUnitVisibility", (ev: CustomEventInit) => {
document.body.toggleAttribute("data-hide-" + ev.detail.category); document.body.toggleAttribute("data-hide-" + ev.detail.category);
Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility()); Object.values(getUnitsManager().getUnits()).forEach((unit: Unit) => unit.updateVisibility());
@@ -131,8 +134,15 @@ export class Map extends L.Map {
if (this.#centerUnit != null && ev.detail == this.#centerUnit) if (this.#centerUnit != null && ev.detail == this.#centerUnit)
this.#panToUnit(this.#centerUnit); this.#panToUnit(this.#centerUnit);
}); });
this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName), this.getLayers()) this.#mapSourceDropdown = new Dropdown("map-type", (layerName: string) => this.setLayer(layerName), this.getLayers())
this.#panDeltaX = 0;
this.#panDeltaY = 0;
this.#panInterval = window.setInterval(() => {
this.panBy(new L.Point(this.#panDeltaX, this.#panDeltaY));
}, 20);
} }
setLayer(layerName: string) { setLayer(layerName: string) {
@@ -187,10 +197,10 @@ export class Map extends L.Map {
setState(state: string) { setState(state: string) {
this.#state = state; this.#state = state;
if (this.#state === IDLE) { if (this.#state === IDLE) {
L.DomUtil.removeClass(this.getContainer(),'crosshair-cursor-enabled'); L.DomUtil.removeClass(this.getContainer(), 'crosshair-cursor-enabled');
} }
else if (this.#state === MOVE_UNIT) { else if (this.#state === MOVE_UNIT) {
L.DomUtil.addClass(this.getContainer(),'crosshair-cursor-enabled'); L.DomUtil.addClass(this.getContainer(), 'crosshair-cursor-enabled');
} }
document.dispatchEvent(new CustomEvent("mapStateChanged")); document.dispatchEvent(new CustomEvent("mapStateChanged"));
} }
@@ -200,8 +210,7 @@ export class Map extends L.Map {
} }
/* Context Menus */ /* Context Menus */
hideAllContextMenus() hideAllContextMenus() {
{
this.hideMapContextMenu(); this.hideMapContextMenu();
this.hideUnitContextMenu(); this.hideUnitContextMenu();
this.hideAirbaseContextMenu(); this.hideAirbaseContextMenu();
@@ -220,7 +229,7 @@ export class Map extends L.Map {
document.dispatchEvent(new CustomEvent("mapContextMenu")); document.dispatchEvent(new CustomEvent("mapContextMenu"));
} }
getMapContextMenu(){ getMapContextMenu() {
return this.#mapContextMenu; return this.#mapContextMenu;
} }
@@ -231,7 +240,7 @@ export class Map extends L.Map {
this.#unitContextMenu.show(x, y, e.latlng); this.#unitContextMenu.show(x, y, e.latlng);
} }
getUnitContextMenu(){ getUnitContextMenu() {
return this.#unitContextMenu; return this.#unitContextMenu;
} }
@@ -247,7 +256,7 @@ export class Map extends L.Map {
this.#airbaseContextMenu.setAirbase(airbase); this.#airbaseContextMenu.setAirbase(airbase);
} }
getAirbaseContextMenu(){ getAirbaseContextMenu() {
return this.#airbaseContextMenu; return this.#airbaseContextMenu;
} }
@@ -270,8 +279,7 @@ export class Map extends L.Map {
} }
centerOnUnit(ID: number | null) { centerOnUnit(ID: number | null) {
if (ID != null) if (ID != null) {
{
this.options.scrollWheelZoom = 'center'; this.options.scrollWheelZoom = 'center';
this.#centerUnit = getUnitsManager().getUnitByID(ID); this.#centerUnit = getUnitsManager().getUnitByID(ID);
} }
@@ -289,16 +297,14 @@ export class Map extends L.Map {
else if (theatre == "MarianaIslands") else if (theatre == "MarianaIslands")
bounds = new L.LatLngBounds([10.5777778, 135.7477778], [22.5127778, 149.5427778]); bounds = new L.LatLngBounds([10.5777778, 135.7477778], [22.5127778, 149.5427778]);
else if (theatre == "Nevada") else if (theatre == "Nevada")
bounds = new L.LatLngBounds([34.4037128, -119.7806729], [39.7372411, -112.1130805]) bounds = new L.LatLngBounds([34.4037128, -119.7806729], [39.7372411, -112.1130805])
else if (theatre == "PersianGulf") else if (theatre == "PersianGulf")
bounds = new L.LatLngBounds([21.729393, 47.572675], [33.131584, 64.7313594]) bounds = new L.LatLngBounds([21.729393, 47.572675], [33.131584, 64.7313594])
else if (theatre == "Falklands") else if (theatre == "Falklands") {
{
// TODO // TODO
} }
else if (theatre == "Caucasus") else if (theatre == "Caucasus") {
{ bounds = new L.LatLngBounds([39.6170191, 27.634935], [47.3907982, 49.3101946])
bounds = new L.LatLngBounds([39.6170191, 27.634935], [47.3907982, 49.3101946])
miniMapZoom = 4; miniMapZoom = 4;
} }
@@ -309,25 +315,65 @@ export class Map extends L.Map {
this.#miniMap.remove(); this.#miniMap.remove();
//@ts-ignore // Needed because some of the inputs are wrong in the original module interface //@ts-ignore // Needed because some of the inputs are wrong in the original module interface
this.#miniMap = new ClickableMiniMap(this.#miniMapLayerGroup, {position: "topright", width: 192*1.5, height: 108*1.5, zoomLevelFixed: miniMapZoom, centerFixed: bounds.getCenter()}).addTo(this); this.#miniMap = new ClickableMiniMap(this.#miniMapLayerGroup, { position: "topright", width: 192 * 1.5, height: 108 * 1.5, zoomLevelFixed: miniMapZoom, centerFixed: bounds.getCenter() }).addTo(this);
this.#miniMap.disableInteractivity(); this.#miniMap.disableInteractivity();
this.#miniMap.getMap().on("click", (e: any) => { this.#miniMap.getMap().on("click", (e: any) => {
if (this.#miniMap) if (this.#miniMap)
this.setView(e.latlng); this.setView(e.latlng);
}) })
} }
getMiniMapLayerGroup() { getMiniMapLayerGroup() {
return this.#miniMapLayerGroup; return this.#miniMapLayerGroup;
} }
handleMapPanning(e: any) {
if (e.type === "keyup"){
switch (e.code) {
case "KeyA":
case "KeyD":
case "ArrowLeft":
case "ArrowRight":
this.#panDeltaX = 0;
break;
case "KeyW":
case "KeyS":
case "ArrowUp":
case "ArrowDown":
this.#panDeltaY = 0
break;
}
}
else {
switch (e.code)
{
case 'KeyD':
case 'ArrowRight':
this.#panDeltaX = this.#deafultPanDelta;
break;
case 'KeyA':
case 'ArrowLeft':
this.#panDeltaX = -this.#deafultPanDelta;
break;
case 'KeyW':
case 'ArrowUp':
this.#panDeltaY = -this.#deafultPanDelta;
break;
case 'KeyS':
case 'ArrowDown':
this.#panDeltaY = this.#deafultPanDelta;
break;
}
}
}
/* Event handlers */ /* Event handlers */
#onClick(e: any) { #onClick(e: any) {
if (!this.#preventLeftClick) { if (!this.#preventLeftClick) {
this.hideAllContextMenus(); this.hideAllContextMenus();
if (this.#state === IDLE) { if (this.#state === IDLE) {
} }
else if (this.#state === MOVE_UNIT) { else if (this.#state === MOVE_UNIT) {
this.setState(IDLE); this.setState(IDLE);
@@ -337,7 +383,7 @@ export class Map extends L.Map {
} }
#onDoubleClick(e: any) { #onDoubleClick(e: any) {
} }
#onContextMenu(e: any) { #onContextMenu(e: any) {
@@ -355,44 +401,34 @@ export class Map extends L.Map {
} }
} }
#onSelectionEnd(e: any) #onSelectionEnd(e: any) {
{
clearTimeout(this.#leftClickTimer); clearTimeout(this.#leftClickTimer);
this.#preventLeftClick = true; this.#preventLeftClick = true;
this.#leftClickTimer = window.setTimeout(() => { this.#leftClickTimer = window.setTimeout(() => {
this.#preventLeftClick = false; this.#preventLeftClick = false;
}, 200); }, 200);
getUnitsManager().selectFromBounds(e.selectionBounds); getUnitsManager().selectFromBounds(e.selectionBounds);
} }
#onMouseDown(e: any) #onMouseDown(e: any) {
{
this.hideAllContextMenus(); this.hideAllContextMenus();
if ((e.originalEvent.which == 1) && (e.originalEvent.button == 0))
this.dragging.disable();
} }
#onMouseUp(e: any) #onMouseUp(e: any) {
{
if ((e.originalEvent.which == 1) && (e.originalEvent.button == 0))
this.dragging.enable();
} }
#onMouseMove(e: any) #onMouseMove(e: any) {
{
this.#lastMousePosition.x = e.originalEvent.x; this.#lastMousePosition.x = e.originalEvent.x;
this.#lastMousePosition.y = e.originalEvent.y; this.#lastMousePosition.y = e.originalEvent.y;
} }
#onZoom(e: any) #onZoom(e: any) {
{
if (this.#centerUnit != null) if (this.#centerUnit != null)
this.#panToUnit(this.#centerUnit); this.#panToUnit(this.#centerUnit);
} }
#panToUnit(unit: Unit) #panToUnit(unit: Unit) {
{
var unitPosition = new L.LatLng(unit.getFlightData().latitude, unit.getFlightData().longitude); var unitPosition = new L.LatLng(unit.getFlightData().latitude, unit.getFlightData().longitude);
this.setView(unitPosition, this.getZoom(), {animate: false}); this.setView(unitPosition, this.getZoom(), { animate: false });
} }
} }

4
client/src/units/unit.ts
View File

@@ -89,7 +89,7 @@ export class Unit extends Marker {
} }
constructor(ID: number, data: UpdateData) { constructor(ID: number, data: UpdateData) {
super(new LatLng(0, 0), { riseOnHover: true }); super(new LatLng(0, 0), { riseOnHover: true, keyboard: false });
this.ID = ID; this.ID = ID;
@@ -121,7 +121,7 @@ export class Unit extends Marker {
var icon = new DivIcon({ var icon = new DivIcon({
html: this.getMarkerHTML(), html: this.getMarkerHTML(),
className: 'leaflet-unit-marker', className: 'leaflet-unit-marker',
iconAnchor: [25, 0], iconAnchor: [25, 25],
iconSize: [50, 50], iconSize: [50, 50],
}); });
this.setIcon(icon); this.setIcon(icon);

2
client/views/connectionstatuspanel.ejs
View File

@@ -1,4 +1,4 @@
<div id="connection-status-panel" class="ol-panel"> <div id="connection-status-panel" class="ol-panel" oncontextmenu="return false;">
<dl class="ol-data-grid"> <dl class="ol-data-grid">
<dt></dt> <dt></dt>
<dd></dd> <dd></dd>

6
client/views/contextmenus.ejs
View File

@@ -1,4 +1,4 @@
<div id="map-contextmenu"> <div id="map-contextmenu" oncontextmenu="return false;">
<div id="active-coalition-label" data-active-coalition="blue"></div> <div id="active-coalition-label" data-active-coalition="blue"></div>
<div id="upper-bar" class="ol-panel"> <div id="upper-bar" class="ol-panel">
<label id="context-menu-switch" class="toggle" for="context-menu-toggle"> <label id="context-menu-switch" class="toggle" for="context-menu-toggle">
@@ -75,11 +75,11 @@
</div> </div>
</div> </div>
<div id="unit-contextmenu" class="ol-panel"> <div id="unit-contextmenu" class="ol-panel" oncontextmenu="return false;">
<!-- Here the available unit options will be shown --> <!-- Here the available unit options will be shown -->
</div> </div>
<div id="airbase-contextmenu" class="ol-panel"> <div id="airbase-contextmenu" class="ol-panel" oncontextmenu="return false;">
<h3 id="airbase-name"></h3> <h3 id="airbase-name"></h3>

6
client/views/dialogs.ejs
View File

@@ -1,4 +1,4 @@
<div id="splash-screen" class="ol-dialog" data-on-click="closeDialog"> <div id="splash-screen" class="ol-dialog" data-on-click="closeDialog" oncontextmenu="return false;">
<div id="splash-content" class="ol-dialog-content"> <div id="splash-content" class="ol-dialog-content">
@@ -17,7 +17,7 @@
</div> </div>
<div id="advanced-settings-dialog" class="ol-panel ol-dialog olympus-dialog-close hide"> <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-close" data-on-click="closeDialog"></div>
<div class="ol-dialog-header"> <div class="ol-dialog-header">
@@ -141,7 +141,7 @@
</div> </div>
<div id="custom-formation-dialog" class="ol-panel ol-dialog olympus-dialog-close hide"> <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-close" data-on-click="closeDialog"></div>
<div class="ol-dialog-header"> <div class="ol-dialog-header">

2
client/views/mouseinfopanel.ejs
View File

@@ -1,4 +1,4 @@
<div id="mouse-info-panel" class="ol-panel"> <div id="mouse-info-panel" class="ol-panel" oncontextmenu="return false;">
<div> <div>
<dl class="ol-data-grid"> <dl class="ol-data-grid">

2
client/views/navbar.ejs
View File

@@ -1,4 +1,4 @@
<nav id="primary-toolbar" class="ol-panel"> <nav id="primary-toolbar" class="ol-panel" oncontextmenu="return false;">
<div id="app-icon" class="ol-select ol-select-image"> <div id="app-icon" class="ol-select ol-select-image">
<div class="ol-select-value icon"> <div class="ol-select-value icon">

2
client/views/popups.ejs
View File

@@ -1,4 +1,4 @@
<div id="info-popup" class="ol-panel ol-popup hide"> <div id="info-popup" class="ol-panel ol-popup hide" oncontextmenu="return false;">
<div> <div>
<!-- Here the content of the popup will be shown --> <!-- Here the content of the popup will be shown -->
</div> </div>

2
client/views/unitcontrolpanel.ejs
View File

@@ -1,4 +1,4 @@
<div id="unit-control-panel" class="ol-panel ol-panel-padding-lg"> <div id="unit-control-panel" class="ol-panel ol-panel-padding-lg" oncontextmenu="return false;">
<h3>Selected Units</h3> <h3>Selected Units</h3>

2
client/views/unitdatatable.ejs
View File

@@ -1,4 +1,4 @@
<div id="unit-data-table" class="ol-panel ol-dialog scrollable"> <div id="unit-data-table" class="ol-panel ol-dialog scrollable" oncontextmenu="return false;">
<div class="ol-dialog-close" data-on-click="closeDialog"></div> <div class="ol-dialog-close" data-on-click="closeDialog"></div>

2
client/views/unitinfopanel.ejs
View File

@@ -1,4 +1,4 @@
<div id="unit-info-panel" class="ol-panel" > <div id="unit-info-panel" class="ol-panel" oncontextmenu="return false;">
<div class="ol-panel-board"> <div class="ol-panel-board">