Dongshan Next Map Development

Dongshan Next Map Development Guidelines

This skill codifies the architectural patterns and systems of the Dongshan Next Map project. Follow these guidelines strictly to ensure code consistency and system stability.

🏗️ Architecture Overview

The project uses a strict 3-Layer Architecture.

graph TD
    UI[UI/HUD Layer] -->|Reads| State[State Layer]
    UI -->|Calls| Systems[Systems Layer]
    Systems -->|Reads/Writes| State
    Systems -->|Uses| API[API Layer]
    API -->|Queries| DB[Database Layer]

1. UI/HUD Layer (Presentation)

• Location: src/components/hud/
• Role: Pure presentation. NO complex logic.
• Rules:
  • Use fixed positioning for HUD overlays.
  • Set pointer-events: none on containers, auto on interactive elements.
  • Read data ONLY from Zustand stores.
  • NEVER directly modify Three.js objects; update store state instead.

2. Systems Layer (Logic)

• Location: src/systems/
• Role: Reusable business logic and calculations.
• Pattern: Static Classes with pure functions where possible.
• Key Systems:
  • LBSManager: GPS <-> Three.js coordinate conversion.
  • InteractionSystem: Click detection and proximity triggers.
  • SaveSystem: LocalStorage and Cloud sync.
  • QuestSystem: Quest tracking and rewards.
  • InventorySystem: Item management.

3. State Layer (Data)

• Location: src/store/
• Role: Single source of truth.
• Tech: Zustand + Persist middleware.
• Stores:
  • playerStore: User progress, inventory, stats.
  • gameStore: Scenarios, levels, active models, quests.
  • uiStore: Dialogs, menus, notifications.
  • locationStore: GPS coordinates, map state.

🛠️ Development Patterns

1. Adding a New Quest

To add a quest, you typically work with QuestSystem and gameStore.

import { QuestSystem } from '@/systems/QuestSystem';

// In a logic controller or initial load
QuestSystem.startQuest({
  id: 'quest_id',
  title: 'Quest Title',
  description: 'Quest Description',
  objectives: [
    {
      id: 'obj_1',
      description: 'Collect 5 items',
      type: 'collect', // or 'talk', 'explore'
      total: 5,
      progress: 0,
      completed: false
    }
  ],
  rewards: {
    experience: 100,
    coins: 50
  }
});

2. Handling Interactions

Do not write interaction logic in components. Use InteractionSystem.

import { InteractionSystem } from '@/systems/InteractionSystem';

// In your 3D component (e.g., inside an onClick handler)
const handleClick = () => {
  InteractionSystem.handleModelClick(modelId, userLocation);
};

3. Creating UI Components

Follow the HUD pattern to ensure separation from 3D.

// src/components/hud/MyNewPanel.tsx
import { useUIStore } from '@/store/uiStore';

export default function MyNewPanel() {
  const isOpen = useUIStore(s => s.isMyPanelOpen);
  
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 pointer-events-none flex justify-center items-center">
        <div className="pointer-events-auto bg-black/80 p-4 rounded text-white">
            {/* Content */}
        </div>
    </div>
  );
}

4. Coordinate Conversion

ALWAYS use LBSManager for positioning.

import { LBSManager } from '@/systems/LBSManager';

// Convert GPS to scene position
const position = LBSManager.latLngToXYZ(lat, lng, altitude);

⚠️ Critical Rules

1. NO useState for Global State: If data needs to be shared or persisted, put it in a Zustand store.
2. Separate UI from 3D: 2D UI elements should rarely be HTML/CSS overlays, not generic HTML inside Three.js Canvas unless using regular HTML overlays is impossible.
3. Static Systems: Keep systems stateless. They should read from stores and accept arguments.
4. Type Safety: Always define interfaces for new data structures in src/types/.

📚 Reference

• Mapbox Integration: src/components/MapBase.tsx
• 3D Layers: src/components/3d/Game3DLayers.tsx
• Store Definitions: src/store/*.ts
• System Implementations: src/systems/*.ts