Initial commit: Leaflet map showing Pokémon GO spots in Taiwan
Features: - Static single-page Leaflet map with pokémon markers - LINE Seed TW font, custom-styled popups - Blue glow for normal pokémon, gold glow for 100% IV - Custom zoom + locate control bar - Live remaining-time calculation from expire_time
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
.DS_Store
|
||||||
|
*_BACKUP_*
|
||||||
70
CLAUDE.md
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## 專案概觀
|
||||||
|
|
||||||
|
這是一個純前端的靜態網頁,用 Leaflet 在台灣地圖上顯示寶可夢(Pokémon GO)出沒點資料。沒有建置系統、沒有套件管理、沒有測試,也不是 git repo。
|
||||||
|
|
||||||
|
整個專案只有三個真正的組件:
|
||||||
|
- `index.html`:主畫面。fetch `spots.json` 後,為每筆資料在地圖上建立帶圖示的 marker 與 popup。
|
||||||
|
- `spots.json`:資料來源。頂層是 `{ "items": [...] }`,也相容頂層直接是陣列(`toList()` 會處理兩種)。
|
||||||
|
- `img/<id>.png`:寶可夢圖鑑編號對應的圖示(已備齊 1–1000)。
|
||||||
|
|
||||||
|
## 常用指令
|
||||||
|
|
||||||
|
沒有 build / lint / test。直接開啟本機伺服器即可:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 在專案根目錄起 server,直接訪問 http://localhost:8000/ 即可
|
||||||
|
python3 -m http.server 8000
|
||||||
|
```
|
||||||
|
|
||||||
|
圖示 URL 使用相對路徑 `img/${item.id}.png`(`index.html:139`),本地與生產都能運作。生產部署在 `https://<host>/pokemon/` 下,Caddy 把 `/opt/caddy/www/pokemon` 作為該路徑的 root。
|
||||||
|
|
||||||
|
### 批次下載寶可夢圖示
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./download_poke_imgs.sh [START] [END] # 預設 1..1000
|
||||||
|
CONCURRENCY=16 ./download_poke_imgs.sh 1 1025 # 自訂並行數
|
||||||
|
```
|
||||||
|
|
||||||
|
會從 `https://twpkinfo.com/images/poke1/<id>.png` 下載到 `img/`,已存在則跳過,用 `.part` 暫存避免半成品。
|
||||||
|
|
||||||
|
## 資料結構與相容性注意事項
|
||||||
|
|
||||||
|
`spots.json` 的每筆 item 欄位命名可能混用兩種來源,`index.html` 的 `buildPopup()` 與 marker 建立邏輯都必須容錯:
|
||||||
|
|
||||||
|
- 座標欄位有三組別名:`latitude`/`longitude`、`Latitude_Adjusted`/`Longitude_Adjusted`、`Latitude_Raw`/`Longitude_Raw`。程式碼用 `??` 鏈依序 fallback(`index.html:81-82`、`index.html:134-135`)。**新增欄位讀取時請沿用同一套 fallback 模式**,不要只讀單一命名。
|
||||||
|
- 數值欄位(`iv_pct`、`iv_atk`、`iv_def`、`iv_sta`、`cp`、`level`)一律用 `isNum()` 驗證後才顯示,否則顯示 `—`。缺欄位不視為錯誤。
|
||||||
|
- `is_perfect` 也可用 `iv_pct === 100` 推導(`index.html:93`)。
|
||||||
|
- **剩餘秒數用 `liveRemaining()` 動態算**(`index.html:59-64`):以 `expire_time`(unix 秒)扣 `Date.now()/1000`,避免直接用 JSON 內寫死的 `remaining`。popup 透過 `bindPopup(() => buildPopup(item))`(`index.html:147`)延後到開啟時才建,確保每次開都是最新值。
|
||||||
|
|
||||||
|
## popup 互動的三種狀態
|
||||||
|
|
||||||
|
地圖同時支援 hover / click 固定 / 外部點擊取消,三者共用一個 module-scope 的 `pinnedPopup` 來協調:
|
||||||
|
|
||||||
|
- **hover**:開 popup + marker 放大 class `hovered`;離開時若**不是**目前被固定的,就關閉。
|
||||||
|
- **click marker**:若目前有其他 pinned popup 先關掉它、移除其放大樣式,再固定新的。
|
||||||
|
- **click 地圖空白處**:關閉 pinned popup。
|
||||||
|
|
||||||
|
修改互動行為時要同步更新這三個 handler,否則容易出現「popup 關不掉」或「圖示放大沒復原」的狀態不一致。
|
||||||
|
|
||||||
|
## 載入錯誤提示
|
||||||
|
|
||||||
|
`showLoadError(msg)`(`index.html:113-122`)會在地圖右上角顯示紅框 Leaflet control。三種情境會觸發:HTTP 非 2xx、JSON 解析失敗、有效座標為零。修改 fetch 流程時請維持這層使用者可見的回饋,不要退回只剩 `console.error`。
|
||||||
|
|
||||||
|
## 部署
|
||||||
|
|
||||||
|
生產機在 `192.168.42.104`,Caddy 服務根目錄為 `/opt/caddy/www/pokemon`。更新方式:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
scp index.html 192.168.42.104:/opt/caddy/www/pokemon/index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
(資料檔 `spots.json` 由其他流程寫入,別一起覆蓋。)
|
||||||
|
|
||||||
|
## 其他檔案
|
||||||
|
|
||||||
|
- `index.html_BACKUP_20251104153704`:手動時間戳備份。由於此專案不是 git repo,這類檔案是唯一的版本保險;**不要隨意刪除**,除非使用者明確要求。
|
||||||
|
- `IV100.png`:為 100% IV 完美個體預留的標示圖(目前 `index.html` 尚未引用)。
|
||||||
32
download_poke_imgs.sh
Executable file
@@ -0,0 +1,32 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
set -euo pipefail
|
||||||
|
|
||||||
|
BASE_URL="https://twpkinfo.com/images/poke1"
|
||||||
|
OUT_DIR="img"
|
||||||
|
START="${1:-1}"
|
||||||
|
END="${2:-1000}"
|
||||||
|
CONCURRENCY="${CONCURRENCY:-8}" # 可調整並行數量
|
||||||
|
|
||||||
|
mkdir -p "$OUT_DIR"
|
||||||
|
|
||||||
|
seq "$START" "$END" | xargs -I{} -P "$CONCURRENCY" bash -c '
|
||||||
|
i="$1"
|
||||||
|
url="'$BASE_URL'/${i}.png"
|
||||||
|
out="'$OUT_DIR'/${i}.png"
|
||||||
|
|
||||||
|
# 已存在就跳過
|
||||||
|
if [[ -s "$out" ]]; then
|
||||||
|
echo "✅ skip (exists): $out"
|
||||||
|
exit 0
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 嘗試下載
|
||||||
|
if curl -fsSL --retry 3 --connect-timeout 10 -A "Mozilla/5.0" -o "$out.part" "$url"; then
|
||||||
|
mv "$out.part" "$out"
|
||||||
|
echo "⬇️ ok: $url -> $out"
|
||||||
|
else
|
||||||
|
rm -f "$out.part"
|
||||||
|
echo "❌ not found or failed: $url"
|
||||||
|
fi
|
||||||
|
' _ {}
|
||||||
|
|
||||||
BIN
img/10.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/100.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
img/1000.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/101.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
img/102.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/103.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/104.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/105.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
img/106.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/107.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/108.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/109.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/11.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
img/110.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/111.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/112.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/113.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
img/114.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/115.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/116.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/117.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/118.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
img/119.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/12.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/120.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/121.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
img/122.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/123.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/124.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/125.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/126.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/127.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/128.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/129.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/13.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
img/130.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
img/131.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/132.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
img/133.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/134.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
img/135.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
img/136.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/137.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/138.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/139.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/14.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/140.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
img/141.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/142.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/143.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
img/144.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/145.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
img/146.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/147.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/148.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/149.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/15.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/150.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/151.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
img/152.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/153.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/154.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/155.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/156.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/157.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/158.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/159.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/16.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/160.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/161.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/162.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/163.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/164.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/165.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/166.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
img/167.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/168.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/169.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/17.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/170.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/171.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/172.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
img/173.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
img/174.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
img/175.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/176.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
img/177.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/178.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/179.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/18.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
img/180.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/181.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
img/182.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/183.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
img/184.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |