Update project documentation and improve frontend functionality

- Updated the backend documentation in CONTRIBUTING.md and README.md to reflect changes in application structure and API endpoints.
- Enhanced the frontend components in MapView.vue for better handling of context menu actions.
- Added new types and interfaces in TypeScript for improved type safety in the frontend.
- Introduced new utility classes for managing characters and markers in the map.
- Updated .gitignore to include .vscode directory for better development environment management.

frontend-nuxt/lib/Character.ts

@@ -0,0 +1,83 @@
+import { HnHMaxZoom } from '~/lib/LeafletCustomTypes'
+import * as L from 'leaflet'
+
+export interface CharacterData {
+  name: string
+  position: { x: number; y: number }
+  type: string
+  id: number
+  map: number
+}
+
+export interface MapViewRef {
+  map: L.Map
+  mapid: number
+  markerLayer?: L.LayerGroup
+}
+
+export class Character {
+  name: string
+  position: { x: number; y: number }
+  type: string
+  id: number
+  map: number
+  marker: L.Marker | null = null
+  text: string
+  value: number
+  onClick: ((e: L.LeafletMouseEvent) => void) | null = null
+
+  constructor(characterData: CharacterData) {
+    this.name = characterData.name
+    this.position = characterData.position
+    this.type = characterData.type
+    this.id = characterData.id
+    this.map = characterData.map
+    this.text = this.name
+    this.value = this.id
+  }
+
+  getId(): string {
+    return `${this.name}`
+  }
+
+  remove(mapview: MapViewRef): void {
+    if (this.marker) {
+      const layer = mapview.markerLayer ?? mapview.map
+      layer.removeLayer(this.marker)
+      this.marker = null
+    }
+  }
+
+  add(mapview: MapViewRef): void {
+    if (this.map === mapview.mapid) {
+      const position = mapview.map.unproject([this.position.x, this.position.y], HnHMaxZoom)
+      this.marker = L.marker(position, { title: this.name })
+      this.marker.on('click', this.callCallback.bind(this))
+      const targetLayer = mapview.markerLayer ?? mapview.map
+      this.marker.addTo(targetLayer)
+    }
+  }
+
+  update(mapview: MapViewRef, updated: CharacterData): void {
+    if (this.map !== updated.map) {
+      this.remove(mapview)
+    }
+    this.map = updated.map
+    this.position = updated.position
+    if (!this.marker && this.map === mapview.mapid) {
+      this.add(mapview)
+    }
+    if (this.marker) {
+      const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
+      this.marker.setLatLng(position)
+    }
+  }
+
+  setClickCallback(callback: (e: L.LeafletMouseEvent) => void): void {
+    this.onClick = callback
+  }
+
+  callCallback(e: L.LeafletMouseEvent): void {
+    if (this.onClick != null) this.onClick(e)
+  }
+}