diff --git a/client/public/stylesheets/contextmenu.css b/client/public/stylesheets/contextmenu.css
index 762bd936..b7889ee4 100644
--- a/client/public/stylesheets/contextmenu.css
+++ b/client/public/stylesheets/contextmenu.css
@@ -2,28 +2,44 @@
position: absolute;
}
-.content #contextmenu {
- position: relative;
-}
-
#aircraft-spawn-menu {
height: 191px;
}
+#active-coalition-label {
+ position: absolute;
+ top: -28px;
+ border-radius: 999px;
+ width: fit-content;
+ height: fit-content;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ font-weight: 600;
+ color: var(--nav-text);
+ font-size: 12px;
+}
+
+#context-menu-switch {
+ margin-right: 10px;
+}
+
.ol-contextmenu {
display: flex;
flex-direction: column;
row-gap: 5px;
- width: 200px;
+ width: fit-content;
height: fit-content;
z-index: 1000;
}
-.ol-contextmenu>div:first-child{
+.ol-contextmenu>div:nth-child(2){
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
+ padding-right: 0px;
}
.ol-contextmenu>ul{
@@ -41,12 +57,12 @@
margin: 0px;
}
-.ol-contextmenu button {
+.ol-contextmenu>div:nth-child(3)>button {
width: 100%;
text-align: left;
}
-.ol-contextmenu>div:nth-child(2){
+.ol-contextmenu>div:nth-child(3){
display: flex;
flex-direction: column;
@@ -68,20 +84,65 @@
#unit-spawn-aircraft {
background-image: var( --spawn-aircraft-url );
+ background-size: 48px;
}
#unit-spawn-ground {
background-image: var( --spawn-ground-url );
+ background-size: 48px;
}
-#unit-spawn button {
+#unit-spawn-smoke {
+ background-image: var( --spawn-smoke-url );
+ background-size: 48px;
+}
+
+.unit-spawn-button {
border: none;
- height: 32px;
- width: 32px;
+ height: 48px;
+ width: 48px;
+ margin-top: -10px;
+ margin-bottom: -10px;
+ border-radius: 0px;
}
-#unit-spawn button:not(:hover){
- background-color: transparent !important;
+.unit-spawn-button:last-of-type {
+ border-top-right-radius: var(--border-radius-sm);
+ border-bottom-right-radius: var(--border-radius-sm);
}
+[data-active-coalition=blue].toggle-fill,
+[data-active-coalition=blue].unit-spawn-button:hover,
+[data-active-coalition=blue].unit-spawn-button.is-open,
+[data-active-coalition=blue]#active-coalition-label,
+[data-active-coalition=blue]#deploy-unit-button
+{
+ background-color: var(--primary-blue)
+}
+[data-active-coalition=red].toggle-fill,
+[data-active-coalition=red].unit-spawn-button:hover,
+[data-active-coalition=red].unit-spawn-button.is-open,
+[data-active-coalition=red]#active-coalition-label,
+[data-active-coalition=red]#deploy-unit-button
+{
+ background-color: var(--primary-red)
+}
+
+[data-active-coalition=blue]#deploy-unit-button:disabled {
+ background-color: transparent;
+ border: 1px solid var(--primary-blue);
+ cursor: default;
+}
+[data-active-coalition=red]#deploy-unit-button:disabled {
+ background-color: transparent;
+ border: 1px solid var(--primary-red);
+ cursor: default;
+}
+
+[data-active-coalition=blue]#active-coalition-label::after {
+ content: "Create blue unit";
+}
+[data-active-coalition=red]#active-coalition-label::after {
+ content: "Create red unit";
+}
\ No newline at end of file
diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 32b97909..5c4a4bf6 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -558,8 +558,6 @@ nav.ol-panel> :last-child {
width: 15px;
}
-
-
#unit-visibility-control {
align-items: center;
}
@@ -655,5 +653,4 @@ body[data-hide-naval] #unit-visibility-control-naval {
transform: translateX(var(--height));
}
-[data-coalition=blue], [data-active-coalition=blue] {background-color: var(--primary-blue)}
-[data-coalition=red], [data-active-coalition=red] {background-color:var(--primary-red)}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/client/public/themes/olympus/images/spawn_aircraft.svg b/client/public/themes/olympus/images/spawn_aircraft.svg
index e8793e30..beb45a25 100644
--- a/client/public/themes/olympus/images/spawn_aircraft.svg
+++ b/client/public/themes/olympus/images/spawn_aircraft.svg
@@ -7,14 +7,14 @@
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="spawn_aircraft.svg"
- id="svg8"
- version="1.1"
- fill="none"
- viewBox="0 0 32 32"
+ width="32"
height="32"
- width="32">
+ viewBox="0 0 32 32"
+ fill="none"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="spawn_aircraft.svg"
+ inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
@@ -23,53 +23,54 @@
image/svg+xml
-
+
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1017"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="18.782524"
+ inkscape:cx="26.073424"
+ inkscape:cy="15.446316"
+ inkscape:window-x="1912"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg8" />
+ id="rect2"
+ style="fill:none" />
+ id="path4"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:1.07987" />
+ width="31"
+ height="31"
+ rx="7.5"
+ stroke="white"
+ id="rect6"
+ style="fill:none;stroke:none" />
diff --git a/client/public/themes/olympus/images/spawn_smoke.svg b/client/public/themes/olympus/images/spawn_smoke.svg
new file mode 100644
index 00000000..468c0c95
--- /dev/null
+++ b/client/public/themes/olympus/images/spawn_smoke.svg
@@ -0,0 +1,76 @@
+
+
diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css
index 42e78949..cc033bc7 100644
--- a/client/public/themes/olympus/olympus.css
+++ b/client/public/themes/olympus/olympus.css
@@ -167,5 +167,6 @@
--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" );
}
\ No newline at end of file
diff --git a/client/src/controls/contextmenu.ts b/client/src/controls/contextmenu.ts
index 0786e0e6..ef94d6d0 100644
--- a/client/src/controls/contextmenu.ts
+++ b/client/src/controls/contextmenu.ts
@@ -34,7 +34,8 @@ export class ContextMenu {
//this.#unitsNumberDropdown = new Dropdown("#units-options", this.#setAircraftType, [""]);
document.addEventListener("contextMenuShow", (e: any) => {
- this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.unitType !== "aircraft");
+ this.#container?.querySelector("#aircraft-spawn-menu")?.classList.toggle("hide", e.detail.type !== "aircraft");
+ this.#container?.querySelector("#unit-spawn-aircraft")?.classList.toggle("is-open", e.detail.type === "aircraft");
})
document.addEventListener("contextMenuDeployAircraft", () => {
@@ -100,7 +101,10 @@ export class ContextMenu {
{
var loadout = aircraftDatabase.getLoadoutsByName(this.#spawnOptions.type, loadoutName);
if (loadout)
+ {
this.#spawnOptions.loadout = loadout.code;
+ (this.#container?.querySelector("#deploy-unit-button")).disabled = false;
+ }
}
}
diff --git a/client/views/contextmenu.ejs b/client/views/contextmenu.ejs
index 1482020f..29705adb 100644
--- a/client/views/contextmenu.ejs
+++ b/client/views/contextmenu.ejs
@@ -1,16 +1,16 @@
-
+
\ No newline at end of file