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

Changed style of unitinfopanel

Browse Source
This commit is contained in:
dpassoni 2023-01-24 18:50:08 +01:00
parent 4e7f6c6c39
commit b8b2590323
20 changed files with 383 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
client/public/images/icons/altitude.svg Normal file
View File

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="altitude.svg"
id="svg4"
version="1.1"
viewBox="0 0 640 512">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
inkscape:current-layer="svg4"
inkscape:window-maximized="1"
inkscape:window-y="-8"
inkscape:window-x="-8"
inkscape:cy="268.97402"
inkscape:cx="234.71843"
inkscape:zoom="0.81953125"
showgrid="false"
id="namedview6"
inkscape:window-height="1017"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
<path
style="stroke-width:0.671054"
id="path837"
d="m 132.70945,183.88092 c 1.69844,5.99526 5.81278,10.98349 11.34732,13.76423 l 78.2866,39.30502 a 44.034591,44.034591 0 0 0 19.91285,4.68197 l 218.9503,-0.63901 c 20.12229,-0.0591 40.33567,-4.43039 57.76997,-14.71021 19.57187,-11.5398 26.98708,-23.29049 27.05015,-34.19915 0.0781,-10.90862 -7.19705,-22.61379 -26.62131,-34.03766 -17.30329,-10.17501 -37.46953,-14.4286 -57.5888,-14.37553 L 387.68668,143.88712 281.39609,28.67846 a 11.944098,11.944098 0 0 0 -10.45221,-6.09982 l -49.47892,0.14718 c -8.02791,0.0207 -13.87346,7.77572 -11.71221,15.53701 l 64.00366,105.95731 -77.66813,0.22982 -32.34806,-43.70043 a 11.947453,11.947453 0 0 0 -9.63675,-4.8399 l -30.19994,0.0916 c -7.85685,0.0242 -13.67748,7.47621 -11.81606,15.14656 z" />
<path
id="path2"
d="M 624,448 H 16 c -8.84,0 -16,7.16 -16,16 v 32 c 0,8.84 7.16,16 16,16 h 608 c 8.84,0 16,-7.16 16,-16 v -32 c 0,-8.84 -7.16,-16 -16,-16 z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
client/public/images/icons/fuel.svg Normal file
View 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="M336 448H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm157.2-340.7l-81-81c-6.2-6.2-16.4-6.2-22.6 0l-11.3 11.3c-6.2 6.2-6.2 16.4 0 22.6L416 97.9V160c0 28.1 20.9 51.3 48 55.2V376c0 13.2-10.8 24-24 24s-24-10.8-24-24v-32c0-48.6-39.4-88-88-88h-8V64c0-35.3-28.7-64-64-64H96C60.7 0 32 28.7 32 64v352h288V304h8c22.1 0 40 17.9 40 40v27.8c0 37.7 27 72 64.5 75.9 43 4.3 79.5-29.5 79.5-71.7V152.6c0-17-6.8-33.3-18.8-45.3zM256 192H96V64h160v128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

1
client/public/images/icons/heading.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M347.94 129.86L203.6 195.83a31.938 31.938 0 0 0-15.77 15.77l-65.97 144.34c-7.61 16.65 9.54 33.81 26.2 26.2l144.34-65.97a31.938 31.938 0 0 0 15.77-15.77l65.97-144.34c7.61-16.66-9.54-33.81-26.2-26.2zm-77.36 148.72c-12.47 12.47-32.69 12.47-45.16 0-12.47-12.47-12.47-32.69 0-45.16 12.47-12.47 32.69-12.47 45.16 0 12.47 12.47 12.47 32.69 0 45.16zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 448c-110.28 0-200-89.72-200-200S137.72 56 248 56s200 89.72 200 200-89.72 200-200 200z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

1
client/public/images/icons/speed.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M288 32C128.94 32 0 160.94 0 320c0 52.8 14.25 102.26 39.06 144.8 5.61 9.62 16.3 15.2 27.44 15.2h443c11.14 0 21.83-5.58 27.44-15.2C561.75 422.26 576 372.8 576 320c0-159.06-128.94-288-288-288zm0 64c14.71 0 26.58 10.13 30.32 23.65-1.11 2.26-2.64 4.23-3.45 6.67l-9.22 27.67c-5.13 3.49-10.97 6.01-17.64 6.01-17.67 0-32-14.33-32-32S270.33 96 288 96zM96 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm48-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm246.77-72.41l-61.33 184C343.13 347.33 352 364.54 352 384c0 11.72-3.38 22.55-8.88 32H232.88c-5.5-9.45-8.88-20.28-8.88-32 0-33.94 26.5-61.43 59.9-63.59l61.34-184.01c4.17-12.56 17.73-19.45 30.36-15.17 12.57 4.19 19.35 17.79 15.17 30.36zm14.66 57.2l15.52-46.55c3.47-1.29 7.13-2.23 11.05-2.23 17.67 0 32 14.33 32 32s-14.33 32-32 32c-11.38-.01-20.89-6.28-26.57-15.22zM480 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
client/public/javascripts/bundle.js
View File

File diff suppressed because one or more lines are too long

8
client/public/stylesheets/connectionstatuspanel.css
View File

@ -1,5 +1,13 @@
#connection-status-panel {
display: flex;
align-items: center;
padding-left: 15px;
padding-right: 4px;
}
#status-string {
font-size: 14px;
color: white;
}
.olympus-status-disconnected::after {

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

@ -15,6 +15,7 @@
display: flex;
text-shadow: none;
box-shadow: 0px 2px 5px #000A;
padding-left: 15px;
}
.olympus-dropdown::before {
@ -81,6 +82,7 @@
cursor: pointer;
opacity: 1;
font-size: 13px;
padding-left: 5px;
}
.olympus-dropdown-element:hover {

86
client/public/stylesheets/layout.css Normal file
View File

@ -0,0 +1,86 @@
/* Page style */
body {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
#map-container {
height: 100%;
width: 100%;
min-width: 820px;
}
#unit-info-panel {
position: fixed;
height: 160px;
width: 800px;
left: 10px;
bottom: 10px;
z-index: 1000;
}
#map-source-dropdown {
position: absolute;
left: 10px;
top: 10px;
width: 200px;
color: black;
}
#scenario-dropdown {
position: absolute;
left: 220px;
top: 10px;
width: 200px;
}
#visibility-control-panel {
position: absolute;
left: 430px;
height: 30px;
width: 110;
top: 10px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
#unit-control-panel {
position: absolute;
left: 50%;
margin-left: -60px;
height: 30px;
width: 120px;
top: 10px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
#connection-status-panel {
position: absolute;
height: 30px;
width: 140px;
top: 10px;
right: 10px;
z-index: 1000;
}
@media only screen and (max-width: 1440px) {
#unit-control-panel {
top: 50px;
}
}

25
client/public/stylesheets/panels.css
View File

@ -4,30 +4,5 @@
font-size: 12px;
transition: bottom 0.2s;
border-radius: 15px;
font-family: "Lucida Console", "Courier New", monospace !important;
box-shadow: 0px 2px 5px #000A;
}
.olympus-panel table {
margin: 5px;
width: 100%;
}
.olympus-panel-title {
font-size: 14px;
color: white;
margin: 5px;
}
.olympus-panel-label {
font-size: 12px;
color: var(--title-color);
margin: 5px;
width: 100px;
}
.olympus-panel-content {
font-size: 12px;
color: var(--text-color);
margin: 5px;
}

12
client/public/stylesheets/selectionwheel.css
View File

@ -13,8 +13,7 @@
.olympus-wheel {
width: 100%;
border-radius: 50%;
background-color: var(--active-coalition-color);
opacity: 0.8;
background-color: var(--background-color-dark);
-webkit-mask: radial-gradient(transparent 30%, #000 31%);
mask: radial-gradient(transparent 30%, #000 31%);
transition: background-color 0.2s;
@ -45,11 +44,11 @@
height: 45px;
/*filter: invert(100%);*/
transition: width var(--animation_duration), height var(--animation_duration);
filter: drop-shadow(1px 1px 0px var(--highlight-color)) drop-shadow(1px -1px 0px var(--highlight-color)) drop-shadow(-1px 1px 0px var(--highlight-color)) drop-shadow(-1px -1px 0px var(--highlight-color));
filter: invert(100%);
}
.selection-wheel-button:hover {
filter: drop-shadow(1px 1px 2px var(--highlight-color)) drop-shadow(1px -1px 2px var(--highlight-color)) drop-shadow(-1px 1px 2px var(--highlight-color)) drop-shadow(-1px -1px 2px var(--highlight-color));
}
.selection-wheel-button:hover .selection-wheel-image {
@ -75,8 +74,7 @@
display: inline-block;
width: 60px;
height: 34px;
background-color: #fffa;
border: 1px solid var(--active-coalition-color);
background-color: var(--active-coalition-color);
border-radius: 17px;
margin-left: -30px;
margin-top: -17px;
@ -90,7 +88,7 @@
width: 26px;
left: 4px;
bottom: 4px;
background-color: var(--active-coalition-color);
background-color: white;
-webkit-transition: 0.2s;
transition: 0.2s;
border-radius: 50%;

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

@ -1,13 +1,20 @@
@import url("panels.css");
@import url("button.css");
@import url("dropdown.css");
@import url("selectionwheel.css");
@import url("selectionscroll.css");
@import url("unitmarker.css");
@import url("airbasemarker.css");
@import url("panels.css");
@import url("connectionstatuspanel.css");
@import url("button.css");
@import url("unitcontrolpanel.css");
@import url("visibilitycontrolpanel.css");
@import url("airbasemarker.css");
@import url("unitinfopanel.css");
@import url("layout.css");
/* Variables definitions */
:root {
@ -22,92 +29,55 @@
--highlight-color: #FFFFFFAA;
}
/* Page style */
body {
padding: 0;
margin: 0;
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
html {
font-family: 'Open Sans', sans-serif;
}
#map-container {
height: 100%;
width: 100%;
min-width: 820px;
.rectangular-container {
padding: 0.5em;
background-color: gray;
border-radius: 5px;
width: fit-content;
height: fit-content;
text-align: center;
color: white;
font-size: 12px;
}
#unit-info-panel {
position: fixed;
height: 100px;
width: 800px;
left: 10px;
bottom: 10px;
z-index: 1000;
display: flex;
.rectangular-container-dark {
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.2em;
padding-bottom: 0.2em;
background-color: #151b20;
border-radius: 5px;
width: fit-content;
height: fit-content;
text-align: center;
color: white;
font-size: 12px;
}
#map-source-dropdown {
position: absolute;
left: 10px;
top: 10px;
width: 150px;
.rounded-container {
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;
}
#scenario-dropdown {
position: absolute;
left: 170px;
top: 10px;
width: 150px;
.vl {
border-left: 1px solid #555;
width: 1px !important;
display: inline-block;
}
#unit-control-panel {
position: absolute;
left: 50%;
margin-left: -60px;
height: 30px;
width: 120px;
top: 10px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
#visibility-control-panel {
position: absolute;
left: 340;
height: 30px;
width: 110;
top: 10px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
#connection-status-panel {
position: absolute;
height: 30px;
width: 140px;
top: 10px;
right: 10px;
z-index: 1000;
display: flex;
align-items: center;
padding-left: 4px;
padding-right: 4px;
}
@media only screen and (max-width: 1440px) {
#unit-control-panel {
top: 50px;
}
}

121
client/public/stylesheets/unitinfopanel.css Normal file
View File

@ -0,0 +1,121 @@
/* Panel properties */
#unit-info-panel {
display: flex;
flex-direction: row;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
/* Common */
#unit-info-panel>div {
height: 100%;
width: 100%;
}
#unit-info-panel>.vl {
margin-left: 30px;
margin-right: 30px;
}
/* Sections */
#unit-info-panel #general {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: flex-start;
column-gap: 5px;
row-gap: 5px;
align-content: flex-start;
}
#unit-info-panel #flight-data {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
align-items: center;
align-content: space-between;
}
#unit-info-panel #loadout-data {
display: flex;
flex-flow: row;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
row-gap: 5px;
}
/* General section */
#general #name {
color: white;
font-size: 18px;
width: 100%;
padding-bottom: 5px;
font-weight: 600;
}
#general #task {
width: 100%;
}
/* Flight data section */
#flight-data #flight-data-label {
color: white;
font-size: 14px;
width: 100%;
font-weight: 600;
}
#flight-data #latitude {
width: 50%;
color: white;
font-size: 13px;
text-align: center;
font-weight: 600;
color: #8bff63;
}
#flight-data #longitude {
width: 50%;
color: white;
font-size: 13px;
text-align: center;
font-weight: 600;
color: #5ca7ff;
}
.flight-data-label, .flight-data-value {
color: white;
font-size: 12px;
padding-left: 10px;
}
.flight-data-icon {
width: 10%;
padding: 2px;
filter: invert(100%);
}
.flight-data-label {
width: 58%;
}
.flight-data-value {
width: 30%;
font-weight: 600;
text-align: right;
}
/* Loadout section */
#loadout-data #loadout-label {
color: white;
font-size: 14px;
width: 100%;
font-weight: 600;
}

2
client/src/controls/dropdown.ts
View File

@ -13,6 +13,8 @@ export class Dropdown {
this.#container?.addEventListener("click", () => {
this.#open ? this.close() : this.open();
})
if (this.#container != null && this.#options.length > 0)
this.#container.innerHTML = this.#options[0];
}
open() {

2
client/src/panels/unitinfopanel.ts
View File

@ -10,7 +10,7 @@ export class UnitInfoPanel {
this.#display = '';
if (this.#element != null) {
this.#display = this.#element.style.display;
this.hide();
this.show();
}
}

0
client/views/connectionstatus.ejs → client/views/connectionstatuspanel.ejs
View File

15
client/views/index.ejs
View File

@ -4,18 +4,21 @@
<title>Olympus client</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/leaflet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="map-container"></div>
<%- include('unitinfo.ejs') %>
<%- include('selectionwheel.ejs') %>
<%- include('selectionscroll.ejs') %>
<div class="olympus-dropdown" id="map-source-dropdown">Satellite</div>
<div class="olympus-dropdown" id="scenario-dropdown">Nevada</div>
<%- include('unitcontrol.ejs') %>
<%- include('visibilitycontrol.ejs') %>
<%- include('connectionstatus.ejs') %>
<div class="olympus-dropdown" id="map-source-dropdown"></div>
<div class="olympus-dropdown" id="scenario-dropdown"></div>
<%- include('unitinfopanel.ejs') %>
<%- include('unitcontrolpanel.ejs') %>
<%- include('visibilitycontrolpanel.ejs') %>
<%- include('connectionstatuspanel.ejs') %>
<script src="javascripts/bundle.js"></script>
</body>

0
client/views/unitcontrol.ejs → client/views/unitcontrolpanel.ejs
View File

78
client/views/unitinfo.ejs
View File

@ -1,78 +0,0 @@
<div class="olympus-panel" id="unit-info-panel">
<table>
<tr>
<td colspan="4" class="olympus-panel-title">
UNIT INFO
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Name:
</td>
<td class="olympus-panel-content" id="unit-name">
</td>
<td class="olympus-panel-label">
Group:
</td>
<td class="olympus-panel-content" id="group-name">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Heading:
</td>
<td class="olympus-panel-content" id="heading">
</td>
<td class="olympus-panel-label">
Altitude:
</td>
<td class="olympus-panel-content" id="altitude">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Ground speed:
</td>
<td class="olympus-panel-content" id="groundspeed">
</td>
<td class="olympus-panel-label">
Fuel:
</td>
<td class="olympus-panel-content" id="fuel">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Position:
</td>
<td class="olympus-panel-content" colspan="3" id="position">
</td>
<td>
</td>
</tr>
</table>
<table class="panel-table" id="tactical-info-table">
<tr>
<td colspan="4" class="olympus-panel-title">
TACTICAL INFO
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Current task:
</td>
<td class="olympus-panel-content" colspan="3" id="task">
</td>
</tr>
<tr>
<td class="olympus-panel-label">
Weapons:
</td>
<td class="olympus-panel-content" colspan="3" id="loadout">
</td>
</tr>
<tr>
<td style="height:100%"></td>
</tr>
</table>
</div>

35
client/views/unitinfopanel.ejs Normal file
View File

@ -0,0 +1,35 @@
<div class="olympus-panel padding-large" id="unit-info-panel">
<div id="general">
<div id="name">Olympus-6</div>
<div class="rectangular-container">F-15C</div>
<div class="rectangular-container">Olympus-1</div>
<div class="rounded-container" id="task">Reaching destination</div>
</div>
<div class="vl h-margin-largest"></div>
<div id="flight-data">
<div id="flight-data-label">Flight data</div>
<div id="latitude">N37°17'33.25"</div>
<div id="longitude">W115°42'14.70"</div>
<img class="flight-data-icon" src="images/icons/speed.svg">
<div class="flight-data-label">Ground Speed</div>
<div class="flight-data-value">308 kts</div>
<img class="flight-data-icon" src="images/icons/altitude.svg">
<div class="flight-data-label">Altitude</div>
<div class="flight-data-value">1064 ft</div>
<img class="flight-data-icon" src="images/icons/heading.svg">
<div class="flight-data-label">Heading</div>
<div class="flight-data-value">67</div>
</div>
<div class="vl h-margin-largest"></div>
<div id="loadout-data">
<div id="loadout-label">Loadout</div>
<img class="flight-data-icon" src="images/icons/fuel.svg">
<div class="flight-data-label">Fuel</div>
<div class="flight-data-value">15%</div>
<div class="rectangular-container-dark">2x AIM-120B</div>
<div class="rectangular-container-dark">2x AIM-9P</div>
<div class="rectangular-container-dark">100x 50mm HE</div>
<div class="rectangular-container-dark">2x AGM-68</div>
</div>
</div>

0
client/views/visibilitycontrol.ejs → client/views/visibilitycontrolpanel.ejs
View File