From c34be61599d1dc617701839f44fb2cf0178e8e22 Mon Sep 17 00:00:00 2001
From: Oliveriver <oliveriver1@gmail.com>
Date: Thu, 17 Oct 2024 23:32:21 +0100
Subject: [PATCH] Cleaner SVGs for unit icons

---
 client/src/assets/icons/Army.svg              |  3 --
 client/src/assets/icons/ArmyIcon.svg          |  4 ++
 client/src/assets/icons/Fleet.svg             |  3 --
 client/src/assets/icons/FleetIcon.svg         |  6 +++
 .../src/components/world/boards/UnitIcon.tsx  | 44 ++++++++++---------
 5 files changed, 33 insertions(+), 27 deletions(-)
 delete mode 100644 client/src/assets/icons/Army.svg
 create mode 100644 client/src/assets/icons/ArmyIcon.svg
 delete mode 100644 client/src/assets/icons/Fleet.svg
 create mode 100644 client/src/assets/icons/FleetIcon.svg

diff --git a/client/src/assets/icons/Army.svg b/client/src/assets/icons/Army.svg
deleted file mode 100644
index 6fa5245..0000000
--- a/client/src/assets/icons/Army.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
-    <circle cx=14 cy=14 r=12 fill=currentColor/>
-</svg>
\ No newline at end of file
diff --git a/client/src/assets/icons/ArmyIcon.svg b/client/src/assets/icons/ArmyIcon.svg
new file mode 100644
index 0000000..00a5c4a
--- /dev/null
+++ b/client/src/assets/icons/ArmyIcon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
+  <circle cx=14 cy=14 r=14 fill=currentColor/>
+  <text dy=2 x=50% y=50% text-anchor=middle dominant-baseline=middle font-size=16>A</text>
+</svg>
\ No newline at end of file
diff --git a/client/src/assets/icons/Fleet.svg b/client/src/assets/icons/Fleet.svg
deleted file mode 100644
index 049f844..0000000
--- a/client/src/assets/icons/Fleet.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
-    <polygon points="0.22282,6.04574 14,24 27.77718,6.04574" fill=currentColor/>
-</svg>  
\ No newline at end of file
diff --git a/client/src/assets/icons/FleetIcon.svg b/client/src/assets/icons/FleetIcon.svg
new file mode 100644
index 0000000..c7bd7b9
--- /dev/null
+++ b/client/src/assets/icons/FleetIcon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
+  <!-- Uncomment line 3 and comment out line 4 to have triangular fleets -->
+  <!-- <polygon points="0.22282,6.04574 14,24 27.77718,6.04574" fill=currentColor/> -->
+  <circle cx=14 cy=14 r=14 fill=currentColor/>
+  <text dy=2 x=50% y=50% text-anchor=middle dominant-baseline=middle font-size=16>F</text>
+</svg>  
\ No newline at end of file
diff --git a/client/src/components/world/boards/UnitIcon.tsx b/client/src/components/world/boards/UnitIcon.tsx
index b5018bf..d2ae46b 100644
--- a/client/src/components/world/boards/UnitIcon.tsx
+++ b/client/src/components/world/boards/UnitIcon.tsx
@@ -2,9 +2,8 @@ import { getNationColour } from '../../../types/enums/nation';
 import Unit from '../../../types/unit';
 import UnitType from '../../../types/enums/unitType';
 import { unitWidth } from '../../../utils/constants';
-
-import ArmyIcon from '../../../assets/icons/Army.svg?react';
-import FleetIcon from '../../../assets/icons/Fleet.svg?react';
+import ArmyIcon from '../../../assets/icons/ArmyIcon.svg?react';
+import FleetIcon from '../../../assets/icons/FleetIcon.svg?react';
 
 type UnitIconProps = {
   unit: Unit;
@@ -14,26 +13,29 @@ type UnitIconProps = {
 
 const UnitIcon = ({ unit, scaleFactor = 1, variant = 'world' }: UnitIconProps) => {
   const isWorldVariant = variant === 'world';
-  const shadow = unit.mustRetreat ? '0px 0px 2px red' : '0px 0px 2px black';
-  const Svg = (unit.type === UnitType.Army ? ArmyIcon : FleetIcon);
+  const Svg = unit.type === UnitType.Army ? ArmyIcon : FleetIcon;
 
   return (
-    <Svg
-      className="flex justify-center"
-      style={{
-        color: getNationColour(unit.owner),
-        filter: isWorldVariant ? `drop-shadow(${shadow})` : '',
-        width: unitWidth * scaleFactor,
-        height: unitWidth * scaleFactor,
-        margin: isWorldVariant ? -(unitWidth * scaleFactor) / 2 : 0,
-        zIndex: unit.mustRetreat ? 30 : 10,
-        position: isWorldVariant ? 'absolute' : 'relative',
-        pointerEvents: isWorldVariant ? 'none' : 'auto',
-      }}
-    >
-    </Svg>
+    <>
+      <Svg
+        className="flex justify-center overflow-visible"
+        style={{
+          color: getNationColour(unit.owner),
+          filter:
+            isWorldVariant && !unit.mustRetreat ? 'drop-shadow(0px 0px 1px rgb(0 0 0 / 0.8))' : '',
+          width: unitWidth * scaleFactor,
+          height: unitWidth * scaleFactor,
+          margin: isWorldVariant ? -(unitWidth * scaleFactor) / 2 : 0,
+          zIndex: unit.mustRetreat ? 30 : 10,
+          position: isWorldVariant ? 'absolute' : 'relative',
+          pointerEvents: isWorldVariant ? 'none' : 'auto',
+        }}
+      />
+      {isWorldVariant && unit.mustRetreat && (
+        <div style={{ boxShadow: '0px 0px 35px 35px red', zIndex: 5 }} />
+      )}
+    </>
   );
-}
-
+};
 
 export default UnitIcon;