Enhance character marker functionality and tooltip integration

- Updated character icon properties for improved visual representation.
- Introduced tooltip binding to character markers, displaying coordinates and character names.
- Implemented smooth position animation for character markers during updates.
- Added tests to verify tooltip content updates and animation cancellation on removal.

frontend-nuxt/lib/Character.ts

@@ -1,6 +1,6 @@
 import type L from 'leaflet'
 import { getColorForCharacterId, type CharacterColors } from '~/lib/characterColors'
-import { HnHMaxZoom } from '~/lib/LeafletCustomTypes'
+import { HnHMaxZoom, TileSize } from '~/lib/LeafletCustomTypes'
 
 export type LeafletApi = L
 
@@ -16,9 +16,10 @@ function buildCharacterIconUrl(colors: CharacterColors): string {
 export function createCharacterIcon(L: LeafletApi, colors: CharacterColors): L.Icon {
   return new L.Icon({
     iconUrl: buildCharacterIconUrl(colors),
-    iconSize: [24, 32],
-    iconAnchor: [12, 32],
+    iconSize: [25, 32],
+    iconAnchor: [12, 17],
     popupAnchor: [0, -32],
+    tooltipAnchor: [12, 0],
   })
 }
 
@@ -54,10 +55,17 @@ export interface MapCharacter {
   setClickCallback: (callback: (e: L.LeafletMouseEvent) => void) => void
 }
 
+const CHARACTER_MOVE_DURATION_MS = 280
+
+function easeOutQuad(t: number): number {
+  return t * (2 - t)
+}
+
 export function createCharacter(data: CharacterData, L: LeafletApi): MapCharacter {
   let leafletMarker: L.Marker | null = null
   let onClick: ((e: L.LeafletMouseEvent) => void) | null = null
   let ownedByMe = data.ownedByMe ?? false
+  let animationFrameId: number | null = null
   const colors = getColorForCharacterId(data.id, { ownedByMe })
   let characterIcon = createCharacterIcon(L, colors)
 
@@ -81,6 +89,10 @@ export function createCharacter(data: CharacterData, L: LeafletApi): MapCharacte
     },
 
     remove(mapview: CharacterMapViewRef): void {
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId)
+        animationFrameId = null
+      }
       if (leafletMarker) {
         const layer = mapview.markerLayer ?? mapview.map
         layer.removeLayer(leafletMarker)
@@ -91,12 +103,22 @@ export function createCharacter(data: CharacterData, L: LeafletApi): MapCharacte
     add(mapview: CharacterMapViewRef): void {
       if (character.map === mapview.mapid) {
         const position = mapview.map.unproject([character.position.x, character.position.y], HnHMaxZoom)
-        leafletMarker = L.marker(position, { icon: characterIcon, title: character.name })
+        leafletMarker = L.marker(position, { icon: characterIcon })
+        const gridX = Math.floor(character.position.x / TileSize)
+        const gridY = Math.floor(character.position.y / TileSize)
+        const tooltipContent = `${character.name} · ${gridX}, ${gridY}`
+        leafletMarker.bindTooltip(tooltipContent, {
+          direction: 'top',
+          permanent: false,
+          offset: L.point(-10.5, -18),
+        })
         leafletMarker.on('click', (e: L.LeafletMouseEvent) => {
           if (onClick) onClick(e)
         })
         const targetLayer = mapview.markerLayer ?? mapview.map
         leafletMarker.addTo(targetLayer)
+        const markerEl = (leafletMarker as unknown as { getElement?: () => HTMLElement }).getElement?.()
+        if (markerEl) markerEl.setAttribute('aria-label', character.name)
       }
     },
 
@@ -114,11 +136,51 @@ export function createCharacter(data: CharacterData, L: LeafletApi): MapCharacte
       character.position = { ...updated.position }
       if (!leafletMarker && character.map === mapview.mapid) {
         character.add(mapview)
+        return
       }
-      if (leafletMarker) {
-        const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
-        leafletMarker.setLatLng(position)
+      if (!leafletMarker) return
+
+      const newLatLng = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
+
+      const updateTooltip = (): void => {
+        const gridX = Math.floor(character.position.x / TileSize)
+        const gridY = Math.floor(character.position.y / TileSize)
+        leafletMarker?.setTooltipContent(`${character.name} · ${gridX}, ${gridY}`)
       }
+
+      const from = leafletMarker.getLatLng()
+      const latDelta = newLatLng.lat - from.lat
+      const lngDelta = newLatLng.lng - from.lng
+      const distSq = latDelta * latDelta + lngDelta * lngDelta
+      if (distSq < 1e-12) {
+        updateTooltip()
+        return
+      }
+
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId)
+        animationFrameId = null
+      }
+      const start = typeof performance !== 'undefined' ? performance.now() : Date.now()
+      const duration = CHARACTER_MOVE_DURATION_MS
+
+      const tick = (): void => {
+        const elapsed = (typeof performance !== 'undefined' ? performance.now() : Date.now()) - start
+        const t = Math.min(1, elapsed / duration)
+        const eased = easeOutQuad(t)
+        leafletMarker?.setLatLng({
+          lat: from.lat + latDelta * eased,
+          lng: from.lng + lngDelta * eased,
+        })
+        if (t >= 1) {
+          animationFrameId = null
+          leafletMarker?.setLatLng(newLatLng)
+          updateTooltip()
+          return
+        }
+        animationFrameId = requestAnimationFrame(tick)
+      }
+      animationFrameId = requestAnimationFrame(tick)
     },
 
     setClickCallback(callback: (e: L.LeafletMouseEvent) => void): void {