From 28aba627335b184dde091bdc80fbecc86c3f91f5 Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 12 Mar 2023 18:08:06 +0000
Subject: [PATCH] Added missiles.

---
 client/public/stylesheets/units.css      | 29 +++++++++++++----
 client/public/themes/olympus/olympus.css |  9 ++++++
 client/views/uikit.ejs                   | 40 ++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css
index 9efc9c3c..8a188acd 100644
--- a/client/public/stylesheets/units.css
+++ b/client/public/stylesheets/units.css
@@ -219,6 +219,29 @@
 
 
 
+/*  Weapons  */
+
+[data-object="unit-weapon-missile"] .unit-marker {
+    background-image: var( --unit-weapons-missile-marker-neutral-url );
+    height: var( --unit-weapons-missile-marker-height );
+    width: var( --unit-weapons-missile-marker-width );
+}
+
+
+[data-object="unit-weapon-missile"][data-coalition="blue"] .unit-marker {
+    background-image: var( --unit-weapons-missile-marker-blue-url );
+}
+
+
+[data-object="unit-weapon-missile"][data-coalition="red"] .unit-marker {
+    background-image: var( --unit-weapons-missile-marker-red-url );
+}
+
+
+/********************************************
+*  Labels
+********************************************/
+
 [data-object|="unit"] .unit-short-label {
     color: var( --secondary-gunmetal-grey );
     font-size: var(--unit-font-size);
@@ -475,9 +498,3 @@
     display:block;
 }
 
-
-
-/******************************
-    Weapons
-******************************/
-
diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css
index b6cef38e..f03e141d 100644
--- a/client/public/themes/olympus/olympus.css
+++ b/client/public/themes/olympus/olympus.css
@@ -166,6 +166,15 @@
     --unit-building-marker-red-url: url( "/themes/olympus/images/icon_building_red.svg" );
 
 
+    /***  Weapons  ***/
+    --unit-weapons-missile-marker-height: 33px;
+    --unit-weapons-missile-marker-width: 17px;
+
+    --unit-weapons-missile-marker-blue-url: url( "/themes/olympus/images/icon_missile_blue.svg" );
+    --unit-weapons-missile-marker-neutral-url: url( "/themes/olympus/images/icon_missile_neutral.svg" );
+    --unit-weapons-missile-marker-red-url: url( "/themes/olympus/images/icon_missile_red.svg" );
+
+
     /***  Context menu  ***/
     --spawn-aircraft-url: url( "/themes/olympus/images/spawn_aircraft.svg" );
     --spawn-ground-url: url( "/themes/olympus/images/spawn_ground.svg" );
diff --git a/client/views/uikit.ejs b/client/views/uikit.ejs
index a34de8c5..80956c2c 100644
--- a/client/views/uikit.ejs
+++ b/client/views/uikit.ejs
@@ -22,6 +22,7 @@
                 <div class="section-header">Buttons</div>
                 <div class="section-header">Ground Units</div>
                 <div class="section-header">Planes</div>
+                <div class="section-header">Weapons</div>
                 <div class="section-header">.ol-panel</div>
                 <div class="section-header">Icons</div>
             </div>
@@ -779,6 +780,45 @@
 
             </section>
 
+            <section>
+
+                <div class="content">
+
+                    <div class="content-header">Missile</div>
+    
+                    <div class="content-body">
+
+                        <div class="example">
+
+                            <div data-object="unit-weapon-missile">
+                                <div class="unit-marker"></div>
+                            </div>
+
+                        </div>
+                            
+
+                        <div class="example">
+
+                            <div data-object="unit-weapon-missile" data-coalition="blue">
+                                <div class="unit-marker" style="transform: rotate( 90deg );"></div>
+                            </div>
+
+                        </div>
+
+                        <div class="example">
+
+                            <div data-object="unit-weapon-missile" data-coalition="red">
+                                <div class="unit-marker" style="transform: rotate( 225deg );"></div>
+                            </div>
+
+                        </div>
+                    
+                    </div>
+
+                </div>
+
+            </section>
+
             <section>
 
                 <div class="content">