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.
2026-02-24 23:32:50 +03:00
parent 605a31567e
commit 82cb8a13f5
39 changed files with 1788 additions and 2631 deletions
--- a/frontend-nuxt/lib/Marker.ts
+++ b/frontend-nuxt/lib/Marker.ts
@@ -0,0 +1,114 @@
+import { HnHMaxZoom, ImageIcon } from '~/lib/LeafletCustomTypes'
+import * as L from 'leaflet'
+
+export interface MarkerData {
+  id: number
+  position: { x: number; y: number }
+  name: string
+  image: string
+  hidden: boolean
+  map: number
+}
+
+export interface MapViewRef {
+  map: L.Map
+  mapid: number
+  markerLayer: L.LayerGroup
+}
+
+function detectType(name: string): string {
+  if (name === 'gfx/invobjs/small/bush' || name === 'gfx/invobjs/small/bumling') return 'quest'
+  if (name === 'custom') return 'custom'
+  return name.substring('gfx/terobjs/mm/'.length)
+}
+
+export class Marker {
+  id: number
+  position: { x: number; y: number }
+  name: string
+  image: string
+  type: string
+  marker: L.Marker | null = null
+  text: string
+  value: number
+  hidden: boolean
+  map: number
+  onClick: ((e: L.LeafletMouseEvent) => void) | null = null
+  onContext: ((e: L.LeafletMouseEvent) => void) | null = null
+
+  constructor(markerData: MarkerData) {
+    this.id = markerData.id
+    this.position = markerData.position
+    this.name = markerData.name
+    this.image = markerData.image
+    this.type = detectType(this.image)
+    this.text = this.name
+    this.value = this.id
+    this.hidden = markerData.hidden
+    this.map = markerData.map
+  }
+
+  remove(_mapview: MapViewRef): void {
+    if (this.marker) {
+      this.marker.remove()
+      this.marker = null
+    }
+  }
+
+  add(mapview: MapViewRef): void {
+    if (!this.hidden) {
+      let icon: L.Icon
+      if (this.image === 'gfx/terobjs/mm/custom') {
+        icon = new ImageIcon({
+          iconUrl: 'gfx/terobjs/mm/custom.png',
+          iconSize: [21, 23],
+          iconAnchor: [11, 21],
+          popupAnchor: [1, 3],
+          tooltipAnchor: [1, 3],
+        })
+      } else {
+        icon = new ImageIcon({ iconUrl: `${this.image}.png`, iconSize: [32, 32] })
+      }
+
+      const position = mapview.map.unproject([this.position.x, this.position.y], HnHMaxZoom)
+      this.marker = L.marker(position, { icon, title: this.name })
+      this.marker.addTo(mapview.markerLayer)
+      this.marker.on('click', this.callClickCallback.bind(this))
+      this.marker.on('contextmenu', this.callContextCallback.bind(this))
+    }
+  }
+
+  update(mapview: MapViewRef, updated: MarkerData): void {
+    this.position = updated.position
+    this.name = updated.name
+    this.hidden = updated.hidden
+    this.map = updated.map
+    if (this.marker) {
+      const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
+      this.marker.setLatLng(position)
+    }
+  }
+
+  jumpTo(map: L.Map): void {
+    if (this.marker) {
+      const position = map.unproject([this.position.x, this.position.y], HnHMaxZoom)
+      this.marker.setLatLng(position)
+    }
+  }
+
+  setClickCallback(callback: (e: L.LeafletMouseEvent) => void): void {
+    this.onClick = callback
+  }
+
+  callClickCallback(e: L.LeafletMouseEvent): void {
+    if (this.onClick != null) this.onClick(e)
+  }
+
+  setContextMenu(callback: (e: L.LeafletMouseEvent) => void): void {
+    this.onContext = callback
+  }
+
+  callContextCallback(e: L.LeafletMouseEvent): void {
+    if (this.onContext != null) this.onContext(e)
+  }
+}