diff --git a/client/public/stylesheets/contextmenus.css b/client/public/stylesheets/contextmenus.css
index c854f221..573bba4b 100644
--- a/client/public/stylesheets/contextmenus.css
+++ b/client/public/stylesheets/contextmenus.css
@@ -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;
-}
\ No newline at end of file
+}
+
+.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;
+}
+
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index af55c114..bb1f2e46 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -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);
diff --git a/client/public/stylesheets/unitcontrolpanel.css b/client/public/stylesheets/unitcontrolpanel.css
index ba50dc42..94f7b1c9 100644
--- a/client/public/stylesheets/unitcontrolpanel.css
+++ b/client/public/stylesheets/unitcontrolpanel.css
@@ -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;
diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css
index 5f128e79..ed623daa 100644
--- a/client/public/themes/olympus/olympus.css
+++ b/client/public/themes/olympus/olympus.css
@@ -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;
diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts
index bde299e5..929dad05 100644
--- a/client/src/controls/mapcontextmenu.ts
+++ b/client/src/controls/mapcontextmenu.ts
@@ -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;
diff --git a/client/views/contextmenus.ejs b/client/views/contextmenus.ejs
index 884642a9..30628b6c 100644
--- a/client/views/contextmenus.ejs
+++ b/client/views/contextmenus.ejs
@@ -2,7 +2,6 @@