戰略地圖 - 寒冰啟示錄指揮系統

這是一個專為戰略遊戲「寒冰啟示錄」設計的指揮系統，讓指揮官可以在地圖上標記座標並分配佔領者。

功能特色

• 斜45度角視角: 提供立體的戰略地圖視角
• 太陽城中心: 地圖中央設有太陽城作為參考點
• 四方向延伸: 每個方向延伸50格，總計101x101的戰略網格
• 座標選擇: 點擊地圖上的座標進行選擇
• 佔領者分配: 為選中的座標分配玩家佔領者
• 即時更新: 所有操作即時反映在地圖和面板上

技術架構

前端

• React 18
• Styled Components
• 響應式設計

地圖系統

• 3D變換視角 (rotateX + rotateZ)
• 網格座標系統
• 互動式瓦片

安裝與運行

前置需求

• Node.js 16+
• npm 或 yarn

安裝步驟

cd strategic-map/frontend
npm install
npm start

構建生產版本

npm run build

使用說明

1. 選擇座標: 點擊地圖上的任意座標進行選擇
2. 分配佔領者: 在右側面板中選擇座標並輸入玩家名稱
3. 查看狀態: 已佔領的座標會以不同顏色顯示
4. 清除選擇: 使用清除按鈕重置所有選擇

座標系統

• 中心點: (0, 0) - 太陽城
• X軸: 東西方向 (-50 到 +50)
• Y軸: 南北方向 (-50 到 +50)
• 總計: 101 x 101 = 10,201 個可選座標

顏色編碼

• 紅色: 選中的座標
• 青色: 已佔領的座標
• 深藍: 核心區域 (距離中心 ≤ 5格)
• 藍灰: 內圈區域 (距離中心 ≤ 15格)
• 淺灰: 中圈區域 (距離中心 ≤ 30格)
• 白色: 外圈區域 (距離中心 > 30格)

專案結構

strategic-map/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── StrategicMap.js    # 主要地圖組件
│   │   │   ├── MapTile.js         # 地圖瓦片組件
│   │   │   └── OccupationPanel.js # 佔領者分配面板
│   │   ├── App.js                 # 主應用組件
│   │   └── index.js               # 應用入口
│   ├── public/
│   │   └── index.html             # HTML模板
│   └── package.json               # 依賴配置
└── README.md                      # 專案說明

開發說明

組件架構

• StrategicMap: 負責地圖渲染和座標管理
• MapTile: 單個座標瓦片的顯示和互動
• OccupationPanel: 右側控制面板，管理選擇和分配

狀態管理

• selectedCoordinates: 當前選中的座標列表
• occupations: 已分配佔領者的座標映射

事件處理

• 座標點擊: 切換選擇狀態
• 佔領者分配: 更新座標歸屬
• 清除選擇: 重置所有選擇

未來擴展

• 保存/載入地圖狀態
• 多玩家協作模式
• 路徑規劃功能
• 資源分布標記
• 戰況即時更新
• 移動端適配

授權

本專案僅供學習和個人使用。