#32 - Using chevron arrow as player FOV marker

OpenStudiosCo · Oct 20, 2024 · ece5a67 · ece5a67
1 parent 9e4da79
commit ece5a67
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/client/src/app/scenograph/overlays/map.js b/client/src/app/scenograph/overlays/map.js
@@ -34,6 +34,7 @@ export default class Map {
         // Create the fov icon
         this.fov = document.createElement('div');
         this.fov.id = 'map-fov';
+        this.fov.innerHTML = this.icons.fov;
         this.container.appendChild(this.fov);
 
     }
@@ -44,6 +45,7 @@ export default class Map {
         iconTemplate.innerHTML = document.querySelector('#templates #map_icons').innerHTML;
 
         icons.aircraft = iconTemplate.querySelector('.aircraft').innerHTML;
+        icons.fov = iconTemplate.querySelector('.fov').innerHTML;
         icons.ship = iconTemplate.querySelector('.ship').innerHTML;
         icons.special = iconTemplate.querySelector('.special').innerHTML;
         icons.structure = iconTemplate.querySelector('.structure').innerHTML;

diff --git a/client/src/assets/map_icons/fov.svg b/client/src/assets/map_icons/fov.svg
diff --git a/client/src/styles/overlays/game.styl b/client/src/styles/overlays/game.styl
@@ -110,14 +110,10 @@
         left: @css{ min(2.5vw, 2.5vh) };
 
         #map-fov {
-            --p: 3.5px; /* control the shape (can be percentage) */
-            height: 10px;
-            aspect-ratio: 3/2;
-            clip-path: polygon(var(--p) 100%,calc(100% - var(--p)) 100%,100% 0,0 0);
-            background: radial-gradient(rgba(#FFF, 0.35) 5%, rgba(#FFF, 0.5) 95%);
+            height: 15px;
             position: absolute;
-            left: calc( 50% - 6.5px );
-            top: calc( 50% - 5px );
+            left: calc( 50% - 7.5px );
+            top: calc( 50% - 7.5px );
         }
 
         .marker {

diff --git a/client/src/templates/partials/overlays/map-icons.pug b/client/src/templates/partials/overlays/map-icons.pug
@@ -1,3 +1,5 @@
+.fov
+    include ../../../assets/map_icons/fov.svg
 .aircraft
     include ../../../assets/map_icons/aircraft.svg
 .ship