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/__tests__/Character.test.ts

@@ -10,6 +10,9 @@ const { leafletMock } = vi.hoisted(() => {
     addTo: vi.fn().mockReturnThis(),
     setLatLng: vi.fn().mockReturnThis(),
     setIcon: vi.fn().mockReturnThis(),
+    bindTooltip: vi.fn().mockReturnThis(),
+    setTooltipContent: vi.fn().mockReturnThis(),
+    getLatLng: vi.fn().mockReturnValue({ lat: 0, lng: 0 }),
   }
   const Icon = vi.fn().mockImplementation(function (this: unknown) {
     return {}
@@ -17,6 +20,7 @@ const { leafletMock } = vi.hoisted(() => {
   const L = {
     marker: vi.fn(() => markerMock),
     Icon,
+    point: vi.fn((x: number, y: number) => ({ x, y })),
   }
   return { leafletMock: L }
 })
@@ -30,6 +34,7 @@ vi.mock('leaflet', () => ({
 
 vi.mock('~/lib/LeafletCustomTypes', () => ({
   HnHMaxZoom: 6,
+  TileSize: 100,
 }))
 
 function getL(): L {
@@ -89,6 +94,21 @@ describe('createCharacter', () => {
     expect(mapview.map.unproject).toHaveBeenCalled()
   })
 
+  it('add creates marker without title and binds Leaflet tooltip', () => {
+    const char = createCharacter(makeCharData({ position: { x: 100, y: 200 } }), getL())
+    const mapview = makeMapViewRef(1)
+    char.add(mapview)
+    expect(leafletMock.marker).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.not.objectContaining({ title: expect.anything() })
+    )
+    const marker = char.leafletMarker as { bindTooltip: ReturnType<typeof vi.fn> }
+    expect(marker.bindTooltip).toHaveBeenCalledWith(
+      'Hero · 1, 2',
+      expect.objectContaining({ direction: 'top', permanent: false })
+    )
+  })
+
   it('add does not create marker for different map', () => {
     const char = createCharacter(makeCharData({ map: 2 }), getL())
     const mapview = makeMapViewRef(1)
@@ -132,4 +152,36 @@ describe('createCharacter', () => {
     char.update(mapview, makeCharData({ ownedByMe: true }))
     expect(marker.setIcon).toHaveBeenCalledTimes(1)
   })
+
+  it('update with position change updates tooltip content when marker exists', () => {
+    const char = createCharacter(makeCharData(), getL())
+    const mapview = makeMapViewRef(1)
+    char.add(mapview)
+    const marker = char.leafletMarker as { setTooltipContent: ReturnType<typeof vi.fn> }
+    marker.setTooltipContent.mockClear()
+    char.update(mapview, makeCharData({ position: { x: 350, y: 450 } }))
+    expect(marker.setTooltipContent).toHaveBeenCalledWith('Hero · 3, 4')
+  })
+
+  it('remove cancels active position animation', () => {
+    const cancelSpy = vi.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
+    let rafCallback: (() => void) | null = null
+    vi.spyOn(global, 'requestAnimationFrame').mockImplementation((cb: (() => void) | (FrameRequestCallback)) => {
+      rafCallback = typeof cb === 'function' ? cb : () => {}
+      return 1
+    })
+    const char = createCharacter(makeCharData(), getL())
+    const mapview = makeMapViewRef(1)
+    mapview.map.unproject = vi.fn(() => ({ lat: 1, lng: 1 }))
+    char.add(mapview)
+    const marker = char.leafletMarker as { getLatLng: ReturnType<typeof vi.fn> }
+    marker.getLatLng.mockReturnValue({ lat: 0, lng: 0 })
+    char.update(mapview, makeCharData({ position: { x: 200, y: 200 } }))
+    expect(rafCallback).not.toBeNull()
+    cancelSpy.mockClear()
+    char.remove(mapview)
+    expect(cancelSpy).toHaveBeenCalledWith(1)
+    cancelSpy.mockRestore()
+    vi.restoreAllMocks()
+  })
 })