Merge branch 'v0.1.0' of https://github.com/Pax1601/DCSOlympus into v0.1.0

client/public/stylesheets/contextmenu.css

@@ -2,51 +2,67 @@
     position: absolute;
 }
 
-.content #contextmenu {
-    position: relative;
-}
-
-#aircraft-spawn-menu {
-    height: 191px;
-}
-
-.ol-contextmenu {
+#contextmenu {
     display: flex;
     flex-direction: column;
     row-gap: 5px;
-    width: 200px;
+    width: 230px;
     height: fit-content;
     z-index: 1000;
 }
 
-.ol-contextmenu>div:first-child{
+#aircraft-spawn-menu {
+    height: fit-content;
+}
+
+#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;
+}
+
+#contextmenu>div:nth-child(2){
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    padding-right: 0px;
 }
 
-.ol-contextmenu>ul{
+#contextmenu>ul{
     max-height: 200px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
-.ol-contextmenu .ol-panel {
+#contextmenu .ol-panel {
     width: 100%;
     border-radius: var(--border-radius-sm);
 }
 
-.ol-contextmenu ul {
+#contextmenu ul {
     margin: 0px;
 }
 
-.ol-contextmenu button {
+#contextmenu>div:nth-child(3)>button {
     width: 100%;
     text-align: left;
 }
 
-.ol-contextmenu>div:nth-child(2){
+#contextmenu>div:nth-child(3){
     display: flex;
     flex-direction: column;
     
@@ -55,33 +71,101 @@
     row-gap: 5px;
 }
 
-.ol-contextmenu .ol-select-container{
+#contextmenu .ol-select-container{
     width: 100%;
     flex:0 0 auto;
     align-self: stretch;
 }
 
-#deploy-unit-button {
+#contextmenu>div:nth-child(3)>button:last-of-type {
     width: 100%;
     text-align: center;
 }
 
 #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";
+}
+
+#loadout-preview {
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+    align-items: center;
+    width: 100%;
+    column-gap: 20px;
+}
+
+#loadout-list {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    height: 100%;
+}
+
+#unit-image {
+    width: 100px;
+    filter: invert(100%);
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

client/public/stylesheets/olympus.css

@@ -575,8 +575,6 @@ nav.ol-panel> :last-child {
     width: 15px;
 }
 
-
-
 #unit-visibility-control {
     align-items: center;
 }
@@ -671,11 +669,3 @@ body[data-hide-naval] #unit-visibility-control-naval {
 .toggle-input:checked ~ .toggle-fill::after {
     transform: translateX(var(--height));
 }
-
-[data-active-coalition="blue"] {
-    background-color: var(--primary-blue)
-}
-
-[data-active-coalition="red"] {
-    background-color:var(--primary-red)
-}

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)">
   <metadata
      id="metadata14">
     <rdf:RDF>
@@ -23,53 +23,54 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <defs
      id="defs12" />
   <sodipodi:namedview
-     inkscape:current-layer="svg8"
-     inkscape:window-maximized="1"
-     inkscape:window-y="-8"
-     inkscape:window-x="-8"
-     inkscape:cy="22.261162"
-     inkscape:cx="31.929932"
-     inkscape:zoom="18.782524"
-     showgrid="false"
-     id="namedview10"
-     inkscape:window-height="1017"
-     inkscape:window-width="1920"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
      bordercolor="#666666"
-     pagecolor="#ffffff" />
+     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" />
   <rect
-     style="fill:none"
-     id="rect2"
+     x="0.5"
+     y="0.5"
+     width="31"
+     height="31"
+     rx="7.5"
      fill="white"
-     rx="7.5"
-     height="31"
-     width="31"
-     y="0.5"
-     x="0.5" />
+     id="rect2"
+     style="fill:none" />
   <path
-     style="fill:#ffffff;fill-opacity:1"
-     id="path4"
+     d="m 22.011184,13.780381 c 1.003947,0 2.775568,0.85633 2.775568,1.889757 0,1.063016 -1.771621,1.889759 -2.775568,1.889759 h -3.454693 l -2.952773,5.196833 c -0.177205,0.295233 -0.502027,0.472439 -0.826742,0.472439 h -1.653592 c -0.324822,0 -0.560988,-0.295235 -0.472439,-0.590577 l 1.446906,-5.078695 H 11.086009 L 9.786807,19.272448 C 9.698217,19.390585 9.58011,19.449654 9.432472,19.449654 H 8.192315 c -0.236219,0 -0.413381,-0.177206 -0.413381,-0.413371 0,-0.02959 0,-0.05907 0,-0.08855 L 8.723813,15.670138 7.778934,12.422131 c 0,-0.02959 0,-0.05907 0,-0.118137 0,-0.206685 0.177162,-0.413371 0.413381,-0.413371 h 1.240157 c 0.147638,0 0.265743,0.08855 0.354335,0.206686 l 1.299202,1.683072 h 3.011842 L 12.650945,8.7311863 C 12.562399,8.435909 12.798562,8.1111082 13.123384,8.1111082 h 1.653592 c 0.324715,0 0.649537,0.2066963 0.826742,0.5019629 l 2.952773,5.1673099 z"
      fill="#202831"
-     d="M21.3047 14C22.2344 14 23.875 14.793 23.875 15.75C23.875 16.7344 22.2344 17.5 21.3047 17.5H18.1055L15.3711 22.3125C15.207 22.5859 14.9062 22.75 14.6055 22.75H13.0742C12.7734 22.75 12.5547 22.4766 12.6367 22.2031L13.9766 17.5H11.1875L9.98438 19.0859C9.90234 19.1953 9.79297 19.25 9.65625 19.25H8.50781C8.28906 19.25 8.125 19.0859 8.125 18.8672C8.125 18.8398 8.125 18.8125 8.125 18.7852L9 15.75L8.125 12.7422C8.125 12.7148 8.125 12.6875 8.125 12.6328C8.125 12.4414 8.28906 12.25 8.50781 12.25H9.65625C9.79297 12.25 9.90234 12.332 9.98438 12.4414L11.1875 14H13.9766L12.6367 9.32422C12.5547 9.05078 12.7734 8.75 13.0742 8.75H14.6055C14.9062 8.75 15.207 8.94141 15.3711 9.21484L18.1055 14H21.3047Z" />
+     id="path4"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.07987" />
   <rect
-     style="fill:none;stroke:none"
-     id="rect6"
-     stroke="white"
-     rx="7.5"
-     height="31"
-     width="31"
+     x="0.5"
      y="0.5"
-     x="0.5" />
+     width="31"
+     height="31"
+     rx="7.5"
+     stroke="white"
+     id="rect6"
+     style="fill:none;stroke:none" />
 </svg>

client/public/themes/olympus/images/spawn_smoke.svg

@@ -0,0 +1,76 @@
+<?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"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   fill="none"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="spawn_smoke.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="18.782524"
+     inkscape:cx="15.515904"
+     inkscape:cy="14.452888"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg15" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.0296135;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 7.4791847,12.531786 c 0,2.38189 1.8897313,4.31437 4.2189373,4.31437 h 3.612465 c 0.662138,0.596221 1.529364,0.958747 2.481554,0.958747 0.952191,0 1.819416,-0.362526 2.481555,-0.958747 h 0.799841 c 1.813557,0 3.281394,-1.501042 3.281394,-3.355622 0,-1.85458 -1.467837,-3.355621 -3.281394,-3.355621 -0.313492,0 -0.615263,0.04495 -0.902385,0.128832 -0.626981,-1.2164128 -1.878013,-2.04633 -3.316553,-2.04633 -0.95512,0 -1.828206,0.3655228 -2.493274,0.9677373 C 13.634731,8.5799418 12.708908,8.217415 11.698122,8.217415 c -2.329206,0 -4.2189373,1.932479 -4.2189373,4.314371 z m 17.1101313,6.711242 h -9.844184 c -0.389665,0 -0.703157,0.320582 -0.703157,0.719061 0,0.398479 0.313492,0.719062 0.703157,0.719062 h 9.844184 c 0.389667,0 0.703157,-0.320583 0.703157,-0.719062 0,-0.398479 -0.31349,-0.719061 -0.703157,-0.719061 z m -1.875082,2.876246 H 19.43284 c -0.389666,0 -0.703158,0.320582 -0.703158,0.719063 0,0.398479 0.313492,0.71906 0.703158,0.71906 h 3.281394 c 0.389665,0 0.703156,-0.320581 0.703156,-0.71906 0,-0.398481 -0.313491,-0.719063 -0.703156,-0.719063 z m -5.625249,0 H 7.2447992 c -0.3896663,0 -0.7031566,0.320582 -0.7031566,0.719063 0,0.398479 0.3134903,0.71906 0.7031566,0.71906 h 9.8441858 c 0.389666,0 0.703156,-0.320581 0.703156,-0.71906 0,-0.398481 -0.31349,-0.719063 -0.703156,-0.719063 z m -3.984552,-2.157185 c 0,-0.398479 -0.313489,-0.719061 -0.703155,-0.719061 H 9.354267 c -0.389665,0 -0.703155,0.320582 -0.703155,0.719061 0,0.398479 0.31349,0.719062 0.703155,0.719062 h 3.047011 c 0.389666,0 0.703155,-0.320583 0.703155,-0.719062 z"
+     id="path2-7" />
+  <rect
+     x="0.5"
+     y="0.5"
+     width="31"
+     height="31"
+     rx="7.5"
+     stroke="white"
+     id="rect8"
+     style="fill:none;stroke:none" />
+  <defs
+     id="defs13">
+    <clipPath
+       id="clip0_277_1705">
+      <rect
+         width="19"
+         height="19"
+         fill="white"
+         transform="translate(6.5 6.5)"
+         id="rect10" />
+    </clipPath>
+  </defs>
+</svg>

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" );
 
 }