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 tristate coalition switch

Browse Source
This commit is contained in:
Pax1601 2023-05-05 17:11:28 +02:00
parent fcf1e2d94a
commit e0636b53f0
6 changed files with 106 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
client/public/stylesheets/contextmenus.css
View File

@ -70,8 +70,6 @@
align-self: stretch;
}
#aircraft-spawn-menu .ol-select.is-open .ol-select-options {
max-height: 300px;
}
@ -131,6 +129,16 @@
background-color: var(--primary-red)
}
[data-active-coalition="neutral"].toggle-fill,
[data-active-coalition="neutral"].unit-spawn-button:hover,
[data-active-coalition="neutral"].unit-spawn-button.is-open,
[data-active-coalition="neutral"]#active-coalition-label,
[data-active-coalition="neutral"].deploy-unit-button,
[data-active-coalition="neutral"]#spawn-airbase-aircraft-button
{
background-color: var(--primary-neutral)
}
[data-active-coalition="blue"].deploy-unit-button:disabled {
background-color: transparent;
border: 1px solid var(--primary-blue);
@ -141,6 +149,21 @@
border: 1px solid var(--primary-red);
cursor: default;
}
[data-active-coalition="neutral"].deploy-unit-button:disabled {
background-color: transparent;
border: 1px solid var(--primary-neutral);
cursor: default;
}
[data-active-coalition="blue"].toggle-fill::after {
transform: translateX(0);
}
[data-active-coalition="red"].toggle-fill::after {
transform: translateX(var(--height));
}
[data-active-coalition="neutral"].toggle-fill::after {
transform: translateX(calc(var(--height) / 2));
}
[data-active-coalition="blue"]#active-coalition-label::after {
content: "Create blue unit";
@ -148,6 +171,9 @@
[data-active-coalition="red"]#active-coalition-label::after {
content: "Create red unit";
}
[data-active-coalition="neutral"]#active-coalition-label::after {
content: "Create neutral unit";
}
#loadout-preview {
display: flex;
@ -330,4 +356,39 @@
row-gap: 5px;
width: 180px;
z-index: 1000;
}
}
.toggle {
--width: 40px;
--height: calc(var(--width) / 2);
--border-radius: calc(var(--height) / 2);
display: inline-block;
cursor: pointer;
}
.toggle-input {
display: none;
}
.toggle-fill {
position: relative;
width: var(--width);
height: var(--height);
border-radius: var(--border-radius);
transition: background-color 0.2s;
}
.toggle-fill::after {
content: "";
position: absolute;
top: 2;
left: 2;
height: calc(var(--height) - 4px);
width: calc(var(--height) - 4px);
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
border-radius: var(--border-radius);
transition: transform 0.2s;
}

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

@ -411,7 +411,7 @@ nav.ol-panel> :last-child {
.highlight-coalition,
.highlight-neutral {
background-color: var(--primary-grey);
background-color: var(--primary-neutral);
color: var(--secondary-gunmetal-grey)
}
@ -448,7 +448,7 @@ nav.ol-panel> :last-child {
}
.accent-neutral {
color: var(--primary-grey);
color: var(--primary-neutral);
font-weight: var(--font-weight-bolder);
}
@ -531,7 +531,7 @@ nav.ol-panel> :last-child {
width: fit-content;
height: fit-content;
text-align: center;
color: var(--primary-grey);
color: var(--primary-neutral);
font-size: 12px;
z-index: 2000;
font-weight: var(--font-weight-bolder);
@ -630,44 +630,6 @@ body[data-hide-navyunit] #unit-visibility-control-navyunit {
padding: 4px;
}
.toggle {
--width: 40px;
--height: calc(var(--width) / 2);
--border-radius: calc(var(--height) / 2);
display: inline-block;
cursor: pointer;
}
.toggle-input {
display: none;
}
.toggle-fill {
position: relative;
width: var(--width);
height: var(--height);
border-radius: var(--border-radius);
transition: background-color 0.2s;
}
.toggle-fill::after {
content: "";
position: absolute;
top: 2;
left: 2;
height: calc(var(--height) - 4px);
width: calc(var(--height) - 4px);
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
border-radius: var(--border-radius);
transition: transform 0.2s;
}
.toggle-input:checked~.toggle-fill::after {
transform: translateX(var(--height));
}
#roe-buttons-container button {
background-color: transparent;
border: 1px solid var(--accent-light-blue);

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

@ -38,7 +38,7 @@ body.feature-forceShowUnitControlPanel #unit-control-panel {
}
#unit-control-panel #selected-units-container button::before {
background-color: var( --primary-grey );
background-color: var( --primary-neutral );
border-radius: var( --border-radius-md );
content: attr( data-short-label );
margin:0 5px;

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

@ -3,35 +3,35 @@
/** Colours **/
/*** Coalition: neutral **/
--primary-grey : #CFD9E8;
--secondary-neutral : #111111;
--primary-neutral : #949ba7;
--secondary-neutral-outline : #111111;
--secondary-neutral-text : #111111;
/*** Coalition: blue **/
--primary-blue : #247be2;
--secondary-blue-outline : #082e44;
--secondary-blue-text : #017DC1;
--primary-blue : #247be2;
--secondary-blue-outline : #082e44;
--secondary-blue-text : #017DC1;
/*** Coalition: red **/
--primary-red : #ff5858;
--secondary-red-outline : #262222;
--secondary-red-text : #D42121;
--primary-red : #ff5858;
--secondary-red-outline : #262222;
--secondary-red-text : #D42121;
--accent-green : #8bff63;
--accent-light-blue : #5ca7ff;
--accent-light-red : #F5B6B6;
--accent-green : #8bff63;
--accent-light-blue : #5ca7ff;
--accent-light-red : #F5B6B6;
--background-grey : #3d4651;
--background-slate-blue : #363c43;
--background-offwhite : #f2f2f3;
--background-steel : #202831;
--background-grey : #3d4651;
--background-slate-blue : #363c43;
--background-offwhite : #f2f2f3;
--background-steel : #202831;
--secondary-dark-steel : #181e25;
--secondary-gunmetal-grey : #2f2f2f;
--secondary-light-grey : #797e83;
--secondary-yellow : #ffd46893;
--secondary-dark-steel : #181e25;
--secondary-gunmetal-grey : #2f2f2f;
--secondary-light-grey : #797e83;
--secondary-yellow : #ffd46893;
--background-hover : #f2f2f333;
--background-hover : #f2f2f333;
--nav-text : #ECECEC;

20
client/src/controls/mapcontextmenu.ts
View File

@ -25,7 +25,8 @@ export class MapContextMenu extends ContextMenu {
constructor(id: string) {
super(id);
this.getContainer()?.querySelector("#context-menu-switch")?.addEventListener('change', (e) => this.#onSwitch(e));
this.getContainer()?.querySelector("#context-menu-switch")?.addEventListener('click', (e) => this.#onToggleLeftClick(e));
this.getContainer()?.querySelector("#context-menu-switch")?.addEventListener('contextmenu', (e) => this.#onToggleRightClick(e));
this.#aircraftRoleDropdown = new Dropdown("aircraft-role-options", (role: string) => this.#setAircraftRole(role));
this.#aircraftTypeDropdown = new Dropdown("aircraft-type-options", (type: string) => this.#setAircraftType(type));
@ -103,15 +104,28 @@ export class MapContextMenu extends ContextMenu {
this.#spawnOptions.latlng = latlng;
}
#onSwitch(e: any) {
#onToggleLeftClick(e: any) {
if (this.getContainer() != null) {
if (e.srcElement.checked)
if (e.srcElement.dataset.activeCoalition == "blue")
setActiveCoalition("neutral");
else if (e.srcElement.dataset.activeCoalition == "neutral")
setActiveCoalition("red");
else
setActiveCoalition("blue");
}
}
#onToggleRightClick(e: any) {
if (this.getContainer() != null) {
if (e.srcElement.dataset.activeCoalition == "red")
setActiveCoalition("neutral");
else if (e.srcElement.dataset.activeCoalition == "neutral")
setActiveCoalition("blue");
else
setActiveCoalition("red");
}
}
/********* Aircraft spawn menu *********/
#setAircraftRole(role: string) {
this.#spawnOptions.role = role;

1
client/views/contextmenus.ejs
View File

@ -2,7 +2,6 @@
<div id="active-coalition-label" data-active-coalition="blue"></div>
<div id="upper-bar" class="ol-panel">
<label id="context-menu-switch" class="toggle" for="context-menu-toggle">
<input class="toggle-input" name="" type="checkbox" id="context-menu-toggle">
<div data-active-coalition="blue" class="toggle-fill"></div>
</label>
<button data-active-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="contextMenuShow"