custom unit sprites (#16)

* Custom Unit Sprites

* fixed winter cropping

* fixed retreat shadows

* minor changes

* added default unit files

client/src/components/world/boards/UnitIcon.tsx

@@ -1,7 +1,11 @@
 import { getNationColour } from '../../../types/enums/nation';
-import Unit, { displayUnit } from '../../../types/unit';
+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';
+
 type UnitIconProps = {
   unit: Unit;
   scaleFactor?: number;
@@ -10,14 +14,15 @@ type UnitIconProps = {
 
 const UnitIcon = ({ unit, scaleFactor = 1, variant = 'world' }: UnitIconProps) => {
   const isWorldVariant = variant === 'world';
-  const shadow = unit.mustRetreat ? '0px 0px 20px 15px red' : '0px 0px 2px black';
+  const shadow = unit.mustRetreat ? '0px 0px 2px red' : '0px 0px 2px black';
+  const Svg = (unit.type === UnitType.Army ? ArmyIcon : FleetIcon);
 
   return (
-    <div
-      className="flex justify-center items-center rounded-full"
+    <Svg
+      className="flex justify-center"
       style={{
-        backgroundColor: getNationColour(unit.owner),
-        boxShadow: isWorldVariant ? shadow : '',
+        color: getNationColour(unit.owner),
+        filter: isWorldVariant ? `drop-shadow(${shadow})` : '',
         width: unitWidth * scaleFactor,
         height: unitWidth * scaleFactor,
         margin: isWorldVariant ? -(unitWidth * scaleFactor) / 2 : 0,
@@ -26,9 +31,9 @@ const UnitIcon = ({ unit, scaleFactor = 1, variant = 'world' }: UnitIconProps) =
         pointerEvents: isWorldVariant ? 'none' : 'auto',
       }}
     >
-      <p style={{ fontSize: 16 * scaleFactor }}>{displayUnit(unit)}</p>
-    </div>
+    </Svg>
   );
-};
+}
+
 
 export default UnitIcon;

client/src/types/unit.ts

@@ -7,6 +7,4 @@ type Unit = {
   mustRetreat: boolean;
 };
 
-export const displayUnit = (unit: Unit | null) => (unit?.type === UnitType.Fleet ? 'F' : 'A');
-
 export default Unit;