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

Added air units with SVG/HTML hybrid.

Browse Source
This commit is contained in:
PeekabooSteam 2023-03-04 13:40:44 +00:00
parent 492c61a97e
commit 4f3d404cb7
9 changed files with 1151 additions and 749 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/public/stylesheets/olympus.css
View File

@ -26,37 +26,6 @@
--font-weight-bolder : 600;
/* Generic marker settings */
--unit-marker-border-radius: 3px;
--unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 );
--unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 );
--unit-marker-font-size: 12px;
--unit-marker-font-weight: bold;
--unit-marker-height: 100px;
--unit-marker-spotlight-fill: var( --secondary-yellow );
--unit-marker-spotlight-opacity: 68%;
--unit-marker-spotlight-radius: 28px;
--unit-marker-stroke-width: 2px;
--unit-marker-width: 150px;
--unit-marker-hotgroup-height: 12px;
--unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
/* Air units' marker settings */
--unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) );
--unit-marker-air-ammo-radius: 3px;
--unit-marker-air-ammo-y: calc( var( --unit-marker-height ) - 8px );
--unit-marker-air-fuel-height: 6px;
--unit-marker-air-fuel-width: 36px;
--unit-marker-air-fuel-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-fuel-width ) / 2 ) );
--unit-marker-air-fuel-y: calc( var( --unit-marker-height ) - 21px );
--unit-marker-air-height: 28px;
--unit-marker-air-vvi-rotation-offset: -180deg;
--unit-marker-air-width: var( --unit-marker-air-height );
--unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
--unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
}
@ -236,6 +205,10 @@ nav .ol-select .ol-select-options li button {
/*
svg.unit {
height: var( --unit-marker-height );
width: var( --unit-marker-width );
@ -373,7 +346,6 @@ svg.unit .unit-summary text {
/*** Default style **/
svg.unit[data-coalition="blue"] rect.unit-marker {
fill: var( --primary-blue );
@ -414,8 +386,6 @@ svg.unit[data-coalition="red"] rect.unit-fuel-level {
/*** Selected style **/
svg.unit[data-is-selected="true"] .unit-spotlight {
cx:50%;
@ -465,4 +435,7 @@ svg.unit[data-coalition="red"][data-has-fox-2="true"] circle.unit-ammo-fox-2,
svg.unit[data-coalition="red"][data-has-fox-3="true"] circle.unit-ammo-fox-3,
svg.unit[data-coalition="red"][data-has-other-ammo="true"] circle.unit-ammo-other {
fill: var( --primary-red );
}
}
/* */

1
client/public/stylesheets/style.css
View File

@ -2,7 +2,6 @@
@import url("slider.css");
@import url("dropdown.css");
@import url("selectionwheel.css");
@import url("contextmenu.css");
@import url("unitmarker.css");

5
client/public/stylesheets/uikit.css
View File

@ -46,6 +46,7 @@ section {
align-items: center;
display:flex;
flex-direction: column;
min-width: 100px;
}
.caption {
@ -76,11 +77,11 @@ section {
#overlaying-planes {
background-color:#99ccff;
padding:20px;
padding:60px;
position:relative;
}
#overlaying-planes svg:nth-of-type(2) {
#overlaying-planes .unit:nth-of-type(2) {
position: absolute;
left: 40px;
top: 10px;

255
client/public/stylesheets/units.css Normal file
View File

@ -0,0 +1,255 @@
:root {
/* Generic marker settings */
--unit-marker-centre-x: calc( var( --unit-marker-width ) / 2 );
--unit-marker-centre-y: calc( var( --unit-marker-height ) / 2 );
--unit-marker-hotgroup-height: 10px;
--unit-marker-hotgroup-width: var( --unit-marker-hotgroup-height );
/* Air units' marker settings */
--unit-marker-air-label-x: calc( var( --unit-marker-centre-x ) - ( var( --unit-marker-air-width ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
--unit-marker-air-label-y: calc( var( --unit-marker-centre-y ) - ( var( --unit-marker-air-height ) / 2 ) + ( var( --unit-marker-stroke-width ) / 2 ) );
}
div.unit {
align-items: center;
cursor:pointer;
display:flex;
justify-content: center;
position:relative;
}
div.unit .unit-selected-spotlight {
background-color: var( --unit-marker-spotlight-fill );
border-radius: 50%;
display:none;
padding: var( --unit-marker-spotlight-radius );
position: absolute;
}
div.unit .unit-vvi {
align-self: center;
background:black;
display:flex;
justify-self: center;
transform-origin: bottom;
translate:0 -50%;
padding-bottom: calc( ( var( --unit-marker-air-width ) / 2 ) + var( --unit-marker-stroke-width ) );
position:absolute;
width: var( --unit-marker-air-vvi-width );
}
div.unit .unit-hotgroup {
align-content: center;
background-color: black;
border-radius: var( --border-radius-xs );
display:none;
height: var( --unit-marker-hotgroup-height );
justify-content: center;
position:absolute;
transform: rotate( -45deg );
translate:0 -24px;
width: var( --unit-marker-hotgroup-width );
}
div.unit .unit-hotgroup-id {
background-color: transparent;
color:white;
font-size: 9px;
font-weight: bolder;
transform:rotate( 45deg );
}
div.unit .unit-marker-border {
background-color: white;
border-radius: var( --border-radius-sm );
display:none;
height: calc( var( --unit-marker-air-height ) + ( var( --unit-marker-label-border-width ) * 2 ) );
position:absolute;
width: calc( var( --unit-marker-air-width ) + ( var( --unit-marker-label-border-width ) * 2 ) );
}
div.unit:hover .unit-marker-border,
div.unit[data-is-selected="true"] .unit-marker-border {
display:block;
}
div.unit svg {
border-radius: var( --border-radius-sm );
height: var( --unit-marker-height );
width: var( --unit-marker-width );
z-index:1;
}
div.unit svg rect.unit-marker {
fill: var( --primary-grey );
height: calc( var( --unit-marker-air-height ) - var( --unit-marker-stroke-width ) );
rx: var( --unit-marker-stroke-width );
ry: var( --unit-marker-stroke-width );
stroke: var( --secondary-neutral );
stroke-linejoin: round;
stroke-width: var( --unit-marker-stroke-width );
width: calc( var( --unit-marker-air-width ) - var( --unit-marker-stroke-width ) );
x: var(--unit-marker-air-label-x);
y: var(--unit-marker-air-label-y);
}
div.unit .unit-short-label {
font-size: var(--unit-marker-font-size);
font-weight: var(--unit-marker-font-weight);
position: absolute;
z-index:10;
}
div.unit .unit-fuel {
background:white;
border: var( --unit-marker-air-fuel-border-width ) solid var( --secondary-dark-steel );
border-radius: var( --border-radius-sm );
display:none;
height: var( --unit-marker-air-fuel-height );
position: absolute;
translate:var( --unit-marker-air-fuel-x ) 20px;
width: var( --unit-marker-air-fuel-width );
}
div.unit .unit-fuel-level {
background-color: var( --secondary-light-grey );
height:100%;
width:100%;
}
div.unit .unit-ammo {
column-gap: var( --unit-marker-air-ammo-spacing );
display:none;
height:fit-content;
position:absolute;
translate:var( --unit-marker-air-ammo-x ) var( --unit-marker-air-ammo-y );
width:fit-content;
}
div.unit .unit-ammo > * {
background-color: white;
border: var( --unit-marker-air-ammo-border-width ) solid var( --secondary-dark-steel );
border-radius: 50%;
padding: var( --unit-marker-air-ammo-radius );
}
div.unit .unit-summary {
column-gap: 6px;
color:white;
display:flex;
flex-wrap: wrap;
font-size:11px;
font-weight: bold;
justify-content: right;
paint-order: stroke fill;
position:absolute;
row-gap: 1px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
translate: -55px 0;
width:fit-content;
z-index:20;
}
div.unit .unit-summary > * {
padding:1px;
}
div.unit .unit-summary .unit-callsign {
color:white;
overflow: hidden;
text-align: right;
transform-origin: right;
white-space: nowrap;
width: 80px;
}
div.unit .unit-summary .unit-callsign:hover {
direction: rtl;
overflow:visible;
}
div.unit[data-pilot="ai"]:hover .unit-ammo,
div.unit[data-pilot="ai"]:hover .unit-fuel {
display:flex;
}
div.unit[data-is-in-hotgroup="true"] .unit-hotgroup,
div.unit[data-pilot="ai"][data-is-selected="true"] .unit-ammo,
div.unit[data-pilot="ai"][data-is-selected="true"] .unit-fuel,
div.unit[data-is-selected="true"] .unit-selected-spotlight {
display:flex;
}
div.unit[data-has-fox-1="true"] .unit-ammo-fox-1,
div.unit[data-has-fox-2="true"] .unit-ammo-fox-2,
div.unit[data-has-fox-3="true"] .unit-ammo-fox-3,
div.unit[data-has-other-ammo="true"] .unit-ammo-other {
background-color: var( --primary-grey );
}
div.unit[data-coalition="blue"] rect.unit-marker {
fill:var( --primary-blue );
stroke: var( --secondary-blue-outline );
}
div.unit[data-coalition="blue"][data-is-selected="true"] .unit-short-label {
color: var( --secondary-blue-text );
}
div.unit[data-coalition="blue"] .unit-fuel-level,
div.unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo-fox-1,
div.unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo-fox-2,
div.unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo-fox-3,
div.unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo-other {
background-color: var( --primary-blue );
}
div.unit[data-coalition="red"] rect.unit-marker {
fill:var( --primary-red );
stroke: var( --secondary-red-outline );
}
div.unit[data-coalition="red"][data-is-selected="true"] .unit-short-label {
color: var( --secondary-red-text );
}
div.unit[data-coalition="red"] .unit-fuel-level,
div.unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo-fox-1,
div.unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo-fox-2,
div.unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo-fox-3,
div.unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo-other {
background-color: var( --primary-red );
}
@keyframes pulse {
50% {
opacity: 0;
}
}
div.unit[data-pilot="ai"][data-has-low-fuel="true"] .unit-fuel {
animation: pulse 1.5s linear infinite;
}
div.unit[data-is-selected="true"] rect.unit-marker {
fill:white;
}

80
client/public/themes/olympus/olympus.css Normal file
View File

@ -0,0 +1,80 @@
:root {
/** Colours **/
/*** Coalition: neutral **/
--primary-grey : #CFD9E8;
--secondary-neutral : #111111;
/*** Coalition: blue **/
--primary-blue : #247be2;
--secondary-blue-outline : #082e44;
--secondary-blue-text : #017DC1;
/*** Coalition: red **/
--primary-red : #ff5858;
--secondary-red-outline : #262222;
--secondary-red-text : #D42121;
--accent-green : #8bff63;
--accent-light-blue : #5ca7ff;
--background-grey : #3d4651;
--background-offwhite : #f2f2f3;
--background-steel : #202831;
--secondary-dark-steel : #181e25;
--secondary-gunmetal-grey : #2f2f2f;
--secondary-light-grey : #797e83;
--secondary-yellow : #ffd46893;
--nav-text : #ECECEC;
/*** General border radii **/
--border-radius-xs : 2px;
--border-radius-sm : 5px;
--border-radius-md : 10px;
--border-radius-lg : 15px;
/*** Font stuff **/
--font-weight-bolder : 600;
/*** Unit marker settings ***/
/*** All markers **/
--unit-marker-border-radius: var( --border-radius-xs );
--unit-marker-font-size: 12px;
--unit-marker-font-weight: bolder;
--unit-marker-height: 32px;
--unit-marker-label-border-width: 3px;
--unit-marker-spotlight-fill: var( --secondary-yellow );
--unit-marker-spotlight-radius: 28px;
--unit-marker-stroke-width: 3px;
--unit-marker-width: 32px;
/* Air units' marker settings */
--unit-marker-air-ammo-gap: calc( 2px + var( --unit-marker-stroke-width ) );
--unit-marker-air-ammo-border-radius: 50%;
--unit-marker-air-ammo-border-width: 2px;
--unit-marker-air-ammo-radius: 2px;
--unit-marker-air-ammo-spacing: 2px;
--unit-marker-air-ammo-x:0px;
--unit-marker-air-ammo-y:28px;
--unit-marker-air-fuel-border-width: 2px;
--unit-marker-air-fuel-height: 6px;
--unit-marker-air-fuel-width: 36px;
--unit-marker-air-fuel-x:0px;
--unit-marker-air-fuel-y:20px;
--unit-marker-air-height: 28px;
--unit-marker-air-vvi-width: 4px;
--unit-marker-air-width: var( --unit-marker-air-height );
}

1508
client/public/uikit.html
View File

File diff suppressed because it is too large Load Diff

2
client/src/index.ts
View File

@ -7,7 +7,7 @@ import { Dropdown } from "./controls/dropdown";
import { ConnectionStatusPanel } from "./panels/connectionstatuspanel";
import { MissionData } from "./missiondata/missiondata";
import { UnitControlPanel } from "./panels/unitcontrolpanel";
import { MouseInfoPanel } from "./panels/mouseinfopanel";
import { MouseInfoPanel } from "./panels/mouseInfoPanel";
import { Slider } from "./controls/slider";
import { AIC } from "./aic/aic";

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

@ -2,8 +2,8 @@ import * as L from "leaflet"
import { getContextMenu, getUnitsManager, getActiveCoalition, getMouseInfoPanel } from "..";
import { spawnAircraft, spawnGroundUnit, spawnSmoke } from "../server/server";
import { bearing, distance, zeroAppend } from "../other/utils";
import { aircraftDatabase } from "../units/aircraftdatabase";
import { unitTypes } from "../units/unittypes";
import { aircraftDatabase } from "../units/aircraftDatabase";
import { unitTypes } from "../units/unitTypes";
import { BoxSelect } from "./boxselect";
L.Map.addInitHook('addHandler', 'boxSelect', BoxSelect);

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

@ -2,7 +2,7 @@ import { Marker, LatLng, Polyline, Icon, DivIcon } from 'leaflet';
import { getMap, getUnitsManager } from '..';
import { rad2deg } from '../other/utils';
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, landAt, setAltitude, setReactionToThreat, setROE, setSpeed } from '../server/server';
import { aircraftDatabase } from './aircraftdatabase';
import { aircraftDatabase } from './aircraftDatabase';
var pathIcon = new Icon({
iconUrl: 'images/marker-icon.png',