diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ParkMap.astro | 67 | ||||
| -rw-r--r-- | src/components/ParksFilters.astro | 4 | ||||
| -rw-r--r-- | src/components/ParksTable.astro | 19 |
3 files changed, 52 insertions, 38 deletions
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro index b7ac130..a0a26e6 100644 --- a/src/components/ParkMap.astro +++ b/src/components/ParkMap.astro @@ -132,20 +132,20 @@ align-items: center; justify-content: center; box-sizing: border-box; - width: 16px; - height: 16px; + width: 18px; + height: 18px; border: 1px solid #c8e6c9; border-radius: 4px; background: #e8f5e9; color: #2e7d32; - font-size: 10px; + font-size: 11px; font-weight: 700; line-height: 1; } :global(.park-popup-ico svg) { display: block; - width: 12px; - height: 12px; + width: 14px; + height: 14px; } :global(.park-popup-ico-water) { border-color: #90caf9; @@ -160,7 +160,12 @@ :global(.park-popup-ico-pond) { border-color: #81d4fa; background: #e1f5fe; - color: #0277bd; + color: #29b6f6; + } + :global(.park-popup-ico-pet) { + border-color: #ffcc80; + background: #fff3e0; + color: #ef6c00; } :global(.park-popup-meta) { margin-top: 0.1rem; @@ -630,7 +635,7 @@ color: #f9a825; } :global(.park-play-pond) { - color: #0277bd; + color: #29b6f6; } :global(.park-play-rope) { color: #00838f; @@ -1071,8 +1076,18 @@ .filter((s) => DISASTER_KEEP.test(s)) .join("、"); const waterRaw = String(rec?.["水飲み場"] || "").trim(); - // 水飲み場は数量ではなく有無だけを示す。 - const water = waterRaw ? (/[?？]/.test(waterRaw) ? "あり？" : "あり") : "なし"; + // 水飲み場は数量ではなく有無だけを、分かるように表示する。 + const water = waterRaw + ? /[?？]/.test(waterRaw) + ? "水飲み場あり？" + : "水飲み場あり" + : "水飲み場なし"; + // ○/〇 などの表記は「〜あり」にして意味が分かるようにする。 + const presence = (label: string, value: unknown) => { + const v = String(value ?? "").trim(); + if (!v) return ""; + return /^[○〇◯あり有1]+$/.test(v) ? `${label}あり` : v; + }; // ボール遊びは、試合形式の可否を括弧書きで添える。 const ballText = String(rec?.["ボール遊び"] || "").trim(); const matchText = String(rec?.["試合形式のボール遊び"] || "").trim(); @@ -1084,14 +1099,14 @@ トイレ: "便", 水飲み場: WATER_DROP_ICON, "ベンチ・椅子": PARK_ICONS.bench.svg, - テーブル: "台", + 野外卓: PARK_ICONS.picnic.svg, "シェルター等": "屋", 草地広場: "草", 多目的広場: "広", - 築山: "山", + 築山: PARK_ICONS.mountain.svg, じゃぶじゃぶ池: PARK_ICONS.pond.svg, - ボール遊び: "球", - ペット: "犬", + ボール遊び: PARK_ICONS.ball.svg, + ペット: PARK_ICONS.dog.svg, 時計: "時", 防災用具: "災", }; @@ -1100,15 +1115,15 @@ ["トイレ", rec?.["トイレ"]], ["水飲み場", water], ["ベンチ・椅子", rec?.["ベンチ・椅子"]], - ["テーブル", rec?.["テーブル"]], + ["野外卓", rec?.["野外卓"]], ["シェルター等", rec?.["シェルター等"]], - ["草地広場", rec?.["草地広場"]], - ["多目的広場", rec?.["多目的広場"]], - ["築山", rec?.["築山"]], - ["じゃぶじゃぶ池", rec?.["じゃぶじゃぶ池"]], + ["草地広場", presence("草地広場", rec?.["草地広場"])], + ["多目的広場", presence("多目的広場", rec?.["多目的広場"])], + ["築山", presence("築山", rec?.["築山"])], + ["じゃぶじゃぶ池", presence("じゃぶじゃぶ池", rec?.["じゃぶじゃぶ池"])], ["ボール遊び", ball], ["ペット", rec?.["ペット"]], - ["時計", rec?.["時計"]], + ["時計", presence("時計", rec?.["時計"])], ["防災用具", disaster], ].filter(([, value]) => value && String(value).trim()); const detailHtml = rows @@ -1121,7 +1136,9 @@ ? "park-popup-ico park-popup-ico-bench" : labelText === "じゃぶじゃぶ池" ? "park-popup-ico park-popup-ico-pond" - : "park-popup-ico"; + : labelText === "ペット" + ? "park-popup-ico park-popup-ico-pet" + : "park-popup-ico"; return `<div class="park-popup-row" title="${escapePopup(labelText)}"><span class="${icoClass}" role="img" aria-label="${escapePopup(labelText)}">${rowIcons[labelText] || ""}</span><span class="park-popup-val">${escapePopup(String(value))}</span></div>`; }) .join(""); @@ -1879,7 +1896,7 @@ } else { lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE); markSelected(lyr, false); - markBlink(lyr, false); + markBlink(lyr, true); } }); nearbyEntries.forEach(({ name, layer: lyr }) => { @@ -1909,9 +1926,10 @@ markBlink(lyr, false); lyr.bringToFront?.(); } else { - lyr.setStyle(DIM_STYLE); + // 該当しない公園も「すべて」のときと同じ点滅表示のままにする。 + lyr.setStyle(name ? MATCHED_STYLE : UNMATCHED_STYLE); markSelected(lyr, false); - markBlink(lyr, false); + markBlink(lyr, true); } }); @@ -1927,8 +1945,9 @@ markSelected(lyr, true); lyr.bringToFront?.(); } else { - lyr.setStyle(NEARBY_DIM_STYLE); + lyr.setStyle(nearbyBaseStyle(lyr)); markSelected(lyr, false); + markBlink(lyr, true); } }); diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro index 5675eb9..88b78eb 100644 --- a/src/components/ParksFilters.astro +++ b/src/components/ParksFilters.astro @@ -61,6 +61,10 @@ const facilityTypes = [ <input type="checkbox" data-fac-filter value="picnic" /> <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場 </label> + <label> + <input type="checkbox" data-fac-filter value="table" /> + <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台 + </label> <label><input type="checkbox" data-fac-filter value="clock" />⏰時計</label> <label> <input type="checkbox" data-fac-filter value="sand" /> diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro index f85fea3..4de8515 100644 --- a/src/components/ParksTable.astro +++ b/src/components/ParksTable.astro @@ -162,19 +162,10 @@ function facTokens(p: Park): string { const clock = (p["時計"] || "").trim(); if (clock === "○" || clock === "あり" || clock === "有" || clock === "1") tokens.push("clock"); if (p["南西部指定管理"]) tokens.push("cm"); - // ピクニック広場・芝生広場・テーブルのある公園。 - const picnicText = `${p["公園名"] || ""} ${p["種別"] || ""} ${p["その他設備"] || ""} ${p["備考"] || ""}`; - if ( - (p["テーブル"] || "").trim() || - p["種別"] === "広場" || - p["草地広場"] || - p["多目的広場"] || - picnicText.includes("芝生") || - picnicText.includes("ピクニック") || - picnicText.includes("広場") - ) { - tokens.push("picnic"); - } + // 草地広場がある公園だけを「草地広場」で絞り込む。 + if (p["草地広場"]) tokens.push("picnic"); + // 野外卓・縁台がある公園。 + if ((p["野外卓"] || "").trim()) tokens.push("table"); return tokens.join(" "); } @@ -182,7 +173,7 @@ function facTokens(p: Park): string { // ラベル文字は使わず、アイコンで項目を示す。 const DETAIL_FIELDS: { key: string; icon: string }[] = [ { key: "ベンチ・椅子", icon: "🪑" }, - { key: "テーブル", icon: "🍽" }, + { key: "野外卓", icon: "🍽" }, { key: "シェルター等", icon: "⛱" }, { key: "草地広場", icon: "🌿" }, { key: "多目的広場", icon: "🏟" }, |