Enhance map functionality and API documentation

- Updated API documentation for the `rebuildZooms` endpoint to clarify its long execution time and response behavior.
- Modified MapView component to manage tile cache invalidation after rebuilding zoom levels, ensuring fresh tile display.
- Introduced a new composable for handling tile cache invalidation state after admin actions.
- Enhanced character icon creation to reflect ownership status with distinct colors.
- Improved loading state handling in various components for better user experience during data fetching.

frontend-nuxt/lib/__tests__/Character.test.ts

@@ -5,10 +5,15 @@ vi.mock('leaflet', () => {
     on: vi.fn().mockReturnThis(),
     addTo: vi.fn().mockReturnThis(),
     setLatLng: vi.fn().mockReturnThis(),
+    setIcon: vi.fn().mockReturnThis(),
   }
   return {
-    default: { marker: vi.fn(() => markerMock) },
+    default: {
+      marker: vi.fn(() => markerMock),
+      Icon: vi.fn().mockImplementation(() => ({})),
+    },
     marker: vi.fn(() => markerMock),
+    Icon: vi.fn().mockImplementation(() => ({})),
   }
 })
 
@@ -16,8 +21,13 @@ vi.mock('~/lib/LeafletCustomTypes', () => ({
   HnHMaxZoom: 6,
 }))
 
+import type L from 'leaflet'
 import { createCharacter, type CharacterData, type CharacterMapViewRef } from '../Character'
 
+function getL(): L {
+  return require('leaflet').default
+}
+
 function makeCharData(overrides: Partial<CharacterData> = {}): CharacterData {
   return {
     name: 'Hero',
@@ -49,7 +59,7 @@ describe('createCharacter', () => {
   })
 
   it('creates character with correct properties', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     expect(char.id).toBe(1)
     expect(char.name).toBe('Hero')
     expect(char.position).toEqual({ x: 100, y: 200 })
@@ -60,26 +70,26 @@ describe('createCharacter', () => {
   })
 
   it('starts with null leaflet marker', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     expect(char.leafletMarker).toBeNull()
   })
 
   it('add creates marker when character is on correct map', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     const mapview = makeMapViewRef(1)
     char.add(mapview)
     expect(mapview.map.unproject).toHaveBeenCalled()
   })
 
   it('add does not create marker for different map', () => {
-    const char = createCharacter(makeCharData({ map: 2 }))
+    const char = createCharacter(makeCharData({ map: 2 }), getL())
     const mapview = makeMapViewRef(1)
     char.add(mapview)
     expect(mapview.map.unproject).not.toHaveBeenCalled()
   })
 
   it('update changes position and map', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     const mapview = makeMapViewRef(1)
 
     char.update(mapview, {
@@ -93,15 +103,25 @@ describe('createCharacter', () => {
   })
 
   it('remove on a character without leaflet marker does nothing', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     const mapview = makeMapViewRef(1)
     char.remove(mapview) // should not throw
     expect(char.leafletMarker).toBeNull()
   })
 
   it('setClickCallback works', () => {
-    const char = createCharacter(makeCharData())
+    const char = createCharacter(makeCharData(), getL())
     const cb = vi.fn()
     char.setClickCallback(cb)
   })
+
+  it('update with changed ownedByMe updates marker icon', () => {
+    const char = createCharacter(makeCharData({ ownedByMe: false }), getL())
+    const mapview = makeMapViewRef(1)
+    char.add(mapview)
+    const marker = char.leafletMarker as { setIcon: ReturnType<typeof vi.fn> }
+    expect(marker.setIcon).not.toHaveBeenCalled()
+    char.update(mapview, makeCharData({ ownedByMe: true }))
+    expect(marker.setIcon).toHaveBeenCalledTimes(1)
+  })
 })