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 airbase icons, started airbase spawn menu (WiP)

Browse Source 
Added unit action menu
This commit is contained in:
dpassoni
2023-03-13 17:14:39 +01:00
parent bb55a2d0c1
commit a53dfcecf5
20 changed files with 458 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
client/public/stylesheets/airbases.css
View File

@@ -1,41 +1,44 @@
.airbase-marker-container {
height: 60px;
width: 60px;
left: -30px;
top: -30px;
border: 1px transparent solid;
:root {
--airbase-marker-height: 63px;
--airbase-marker-width: 63px;
}
[data-object|="airbase"] {
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
position: relative;
}
[data-hide-airbase] #map-container [data-object|="airbase"] {
display: none;
}
/******************************
Marker
******************************/
[data-object|="airbase"] .airbase {
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
transform-origin: center;
z-index: 3;
}
.airbase-marker-image {
height: 60px;
width: 60px;
left: 0px;
top: 0px;
display: block;
position: absolute;
filter: drop-shadow(1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(-1px -1px 0 white);
opacity: 0.8;
/* Airbase */
[data-object|="airbase"] .airbase-marker {
background-image: var(--airbase-marker-neutral-url);
height: var(--airbase-marker-height);
width: var(--airbase-marker-width);
}
.blue.airbase-marker-image {
filter: invert(40%) sepia(94%) saturate(2477%) hue-rotate(197deg) brightness(92%) contrast(91%) drop-shadow(1px 1px #FFFA) drop-shadow(1px -1px #FFFA) drop-shadow(-1px 1px 0px #FFFA) drop-shadow(-1px -1px #FFFA);
[data-object|="airbase"][data-coalition="red"] .airbase-marker {
background-image: var(--airbase-marker-red-url);
}
.red.airbase-marker-image {
filter:invert(32%) sepia(91%) saturate(5128%) hue-rotate(349deg) brightness(97%) contrast(97%) drop-shadow(1px 1px #FFFA) drop-shadow(1px -1px #FFFA) drop-shadow(-1px 1px 0px #FFFA) drop-shadow(-1px -1px #FFFA);
}
.neutral.airbase-marker-image {
filter: invert(71%) sepia(12%) saturate(9%) hue-rotate(319deg) brightness(92%) contrast(96%) drop-shadow(1px 1px #000A) drop-shadow(1px -1px #000A) drop-shadow(-1px 1px 0px #000A) drop-shadow(-1px -1px #000A);
}
.airbase-marker-name {
bottom: -20px;
position: absolute;
text-align: center;
font: 800 14px Arial;
white-space: nowrap;
-webkit-text-fill-color: white;
-webkit-text-stroke: 1px;
}
[data-object|="airbase"][data-coalition="blue"] .airbase-marker {
background-image: var(--airbase-marker-blue-url);
}

37
client/public/stylesheets/contextmenu.css → client/public/stylesheets/contextmenus.css
View File

@@ -1,8 +1,5 @@
#contextmenu {
#map-contextmenu {
position: absolute;
}
#contextmenu {
display: flex;
flex-direction: column;
row-gap: 5px;
@@ -38,7 +35,7 @@
margin-right: 10px;
}
#contextmenu>div:nth-child(2){
#map-contextmenu>div:nth-child(2){
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -46,22 +43,22 @@
padding-right: 0px;
}
#contextmenu>ul{
#map-contextmenu>ul{
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
#contextmenu .ol-panel {
#map-contextmenu .ol-panel {
width: 100%;
border-radius: var(--border-radius-sm);
}
#contextmenu ul {
#map-contextmenu ul {
margin: 0px;
}
#contextmenu>div:nth-child(n+3){
#map-contextmenu>div:nth-child(n+3){
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -69,7 +66,7 @@
row-gap: 5px;
}
#contextmenu .ol-select-container{
#map-contextmenu .ol-select-container{
width: 100%;
flex:0 0 auto;
align-self: stretch;
@@ -205,4 +202,24 @@
[data-smoke-color="green"]::before{ background-color: green; }
[data-smoke-color="orange"]::before{ background-color: orange; }
/* Unit context menu */
#unit-contextmenu {
position: absolute;
display: flex;
flex-direction: column;
row-gap: 5px;
width: 150px;
height: fit-content;
z-index: 1000;
}
/* Airbase context menu */
#airbase-contextmenu {
position: absolute;
display: flex;
flex-direction: column;
row-gap: 5px;
width: 230px;
height: fit-content;
z-index: 1000;
}

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

@@ -1,6 +1,6 @@
@import url("layout.css");
@import url("airbases.css");
@import url("contextmenu.css");
@import url("contextmenus.css");
@import url("units.css");
/* Variables definitions */

10
client/public/themes/olympus/images/icon_airbase_blue.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4998 46.9756C40.0468 46.9756 46.9756 40.0468 46.9756 31.4998C46.9756 22.9528 40.0468 16.024 31.4998 16.024C22.9528 16.024 16.024 22.9528 16.024 31.4998C16.024 40.0468 22.9528 46.9756 31.4998 46.9756ZM31.4998 52.734C43.2271 52.734 52.734 43.2271 52.734 31.4998C52.734 19.7725 43.2271 10.2656 31.4998 10.2656C19.7725 10.2656 10.2656 19.7725 10.2656 31.4998C10.2656 43.2271 19.7725 52.734 31.4998 52.734Z" fill="white"/>
<path d="M35.3291 61L37.3291 61L37.3291 59L37.3291 49.2532L37.3291 47.2532L35.3291 47.2532L27.6709 47.2532L25.6709 47.2532L25.6709 49.2532L25.6709 59L25.6709 61L27.6709 61L35.3291 61Z" fill="#247BE2" stroke="white" stroke-width="4"/>
<path d="M47.2529 35.3291V37.3291H49.2529H58.9998H60.9998V35.3291V27.6709V25.6709L58.9998 25.6709H49.2529H47.2529V27.6709V35.3291Z" fill="#247BE2" stroke="white" stroke-width="4"/>
<path d="M35.3291 15.7471L37.3291 15.7471L37.3291 13.7471L37.3291 4.00023L37.3291 2.00023L35.3291 2.00023L27.6709 2.00023L25.6709 2.00023L25.6709 4.00023L25.6709 13.7471L25.6709 15.7471L27.6709 15.7471L35.3291 15.7471Z" fill="#247BE2" stroke="white" stroke-width="4"/>
<path d="M2 35.3291V37.3291H4H13.7468H15.7468V35.3291L15.7468 27.6709V25.6709L13.7468 25.6709H4H2V27.6709L2 35.3291Z" fill="#247BE2" stroke="white" stroke-width="4"/>
<circle cx="31.5001" cy="31.5001" r="15.4494" fill="white" stroke="#247BE2" stroke-width="6"/>
<line x1="25.7895" y1="23.9132" x2="36.5242" y2="38.6028" stroke="#247BE2" stroke-width="2" stroke-linecap="square"/>
<line x1="38.9357" y1="33.9313" x2="25.9313" y2="33.0643" stroke="#247BE2" stroke-width="2" stroke-linecap="square"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

10
client/public/themes/olympus/images/icon_airbase_neutral.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4998 46.9756C40.0468 46.9756 46.9756 40.0468 46.9756 31.4998C46.9756 22.9528 40.0468 16.024 31.4998 16.024C22.9528 16.024 16.024 22.9528 16.024 31.4998C16.024 40.0468 22.9528 46.9756 31.4998 46.9756ZM31.4998 52.734C43.2271 52.734 52.734 43.2271 52.734 31.4998C52.734 19.7725 43.2271 10.2656 31.4998 10.2656C19.7725 10.2656 10.2656 19.7725 10.2656 31.4998C10.2656 43.2271 19.7725 52.734 31.4998 52.734Z" fill="white"/>
<path d="M35.3291 61L37.3291 61L37.3291 59L37.3291 49.2532L37.3291 47.2532L35.3291 47.2532L27.6709 47.2532L25.6709 47.2532L25.6709 49.2532L25.6709 59L25.6709 61L27.6709 61L35.3291 61Z" fill="#CFD9E8" stroke="white" stroke-width="4"/>
<path d="M47.2529 35.3291V37.3291H49.2529H58.9998H60.9998V35.3291V27.6709V25.6709L58.9998 25.6709H49.2529H47.2529V27.6709V35.3291Z" fill="#CFD9E8" stroke="white" stroke-width="4"/>
<path d="M35.3291 15.7471L37.3291 15.7471L37.3291 13.7471L37.3291 4.00023L37.3291 2.00023L35.3291 2.00023L27.6709 2.00023L25.6709 2.00023L25.6709 4.00023L25.6709 13.7471L25.6709 15.7471L27.6709 15.7471L35.3291 15.7471Z" fill="#CFD9E8" stroke="white" stroke-width="4"/>
<path d="M2 35.3291V37.3291H4H13.7468H15.7468V35.3291L15.7468 27.6709V25.6709L13.7468 25.6709H4H2V27.6709L2 35.3291Z" fill="#CFD9E8" stroke="white" stroke-width="4"/>
<circle cx="31.5001" cy="31.5001" r="15.4494" fill="white" stroke="#CFD9E8" stroke-width="6"/>
<line x1="25.7895" y1="23.9132" x2="36.5242" y2="38.6028" stroke="#CFD9E8" stroke-width="2" stroke-linecap="square"/>
<line x1="38.9357" y1="33.9313" x2="25.9313" y2="33.0643" stroke="#CFD9E8" stroke-width="2" stroke-linecap="square"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

10
client/public/themes/olympus/images/icon_airbase_red.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.4998 46.9756C40.0468 46.9756 46.9756 40.0468 46.9756 31.4998C46.9756 22.9528 40.0468 16.024 31.4998 16.024C22.9528 16.024 16.024 22.9528 16.024 31.4998C16.024 40.0468 22.9528 46.9756 31.4998 46.9756ZM31.4998 52.734C43.2271 52.734 52.734 43.2271 52.734 31.4998C52.734 19.7725 43.2271 10.2656 31.4998 10.2656C19.7725 10.2656 10.2656 19.7725 10.2656 31.4998C10.2656 43.2271 19.7725 52.734 31.4998 52.734Z" fill="white"/>
<path d="M35.3291 61L37.3291 61L37.3291 59L37.3291 49.2532L37.3291 47.2532L35.3291 47.2532L27.6709 47.2532L25.6709 47.2532L25.6709 49.2532L25.6709 59L25.6709 61L27.6709 61L35.3291 61Z" fill="#ff5858" stroke="white" stroke-width="4"/>
<path d="M47.2529 35.3291V37.3291H49.2529H58.9998H60.9998V35.3291V27.6709V25.6709L58.9998 25.6709H49.2529H47.2529V27.6709V35.3291Z" fill="#ff5858" stroke="white" stroke-width="4"/>
<path d="M35.3291 15.7471L37.3291 15.7471L37.3291 13.7471L37.3291 4.00023L37.3291 2.00023L35.3291 2.00023L27.6709 2.00023L25.6709 2.00023L25.6709 4.00023L25.6709 13.7471L25.6709 15.7471L27.6709 15.7471L35.3291 15.7471Z" fill="#ff5858" stroke="white" stroke-width="4"/>
<path d="M2 35.3291V37.3291H4H13.7468H15.7468V35.3291L15.7468 27.6709V25.6709L13.7468 25.6709H4H2V27.6709L2 35.3291Z" fill="#ff5858" stroke="white" stroke-width="4"/>
<circle cx="31.5001" cy="31.5001" r="15.4494" fill="white" stroke="#ff5858" stroke-width="6"/>
<line x1="25.7895" y1="23.9132" x2="36.5242" y2="38.6028" stroke="#ff5858" stroke-width="2" stroke-linecap="square"/>
<line x1="38.9357" y1="33.9313" x2="25.9313" y2="33.0643" stroke="#ff5858" stroke-width="2" stroke-linecap="square"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

8
client/public/themes/olympus/olympus.css
View File

@@ -179,4 +179,12 @@
--spawn-aircraft-url: url( "/themes/olympus/images/spawn_aircraft.svg" );
--spawn-ground-url: url( "/themes/olympus/images/spawn_ground.svg" );
--spawn-smoke-url: url( "/themes/olympus/images/spawn_smoke.svg" );
/*** Airbase ***/
--airbase-marker-height: 63px;
--airbase-marker-width: 63px;
--airbase-marker-blue-url: url( "/themes/olympus/images/icon_airbase_blue.svg" );
--airbase-marker-neutral-url: url( "/themes/olympus/images/icon_airbase_neutral.svg" );
--airbase-marker-red-url: url( "/themes/olympus/images/icon_airbase_red.svg" );
}