From 2852d7194366908d641bfd607517ccb3aa6dba50 Mon Sep 17 00:00:00 2001
From: Jonas Geertsen Lund <jgl21@student.aau.dk>
Date: Thu, 7 Nov 2024 15:44:21 +0100
Subject: [PATCH] Add mouseover and mouseout effect on vessels

---
 src/components/vesselMarkerOverlay.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/vesselMarkerOverlay.tsx b/src/components/vesselMarkerOverlay.tsx
index ef41ff5..9bf9cf0 100644
--- a/src/components/vesselMarkerOverlay.tsx
+++ b/src/components/vesselMarkerOverlay.tsx
@@ -71,7 +71,6 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
           setSelectedVesselmmsi((selectedVesselmmsi) =>
             selectedVesselmmsi === vessel.simpleVessel.mmsi ? undefined : vessel.simpleVessel.mmsi
           )
-
         markerOptions.push(
           displayVesselToSpriteMarkerOption(
             vessel,
@@ -80,7 +79,8 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
             circleTexture,
             selectedCircleTexture,
             selectedVesselmmsi === vessel.simpleVessel.mmsi,
-            onClick
+            onClick,
+            () => overlay.redraw()
           )
         )
       }
@@ -139,7 +139,8 @@ function displayVesselToSpriteMarkerOption(
   circleTexture: PIXI.Texture,
   selectedCircleTexture: PIXI.Texture,
   isSelected: boolean,
-  onClick: () => void
+  onClick: () => void,
+  redraw: () => void
 ): ISpriteMarkerOptions {
   const { simpleVessel, monitoredInfo } = vessel
 
@@ -165,6 +166,14 @@ function displayVesselToSpriteMarkerOption(
   sprite.eventMode = 'dynamic'
   sprite.cursor = 'pointer'
   sprite.on('click', onClick)
+  sprite.on('mouseover', () => {
+    sprite.alpha = monitoredInfo ? 1 : 0.7
+    redraw()
+  })
+  sprite.on('mouseout', () => {
+    sprite.alpha = monitoredInfo ? 1 : 0.3
+    redraw()
+  })
 
   const size = isSelected ? 20 : 13
   const position: L.LatLngTuple = [simpleVessel.location.point.lat, simpleVessel.location.point.lon]