aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/ParkMap.astro97
-rw-r--r--src/components/ParksFilters.astro30
2 files changed, 100 insertions, 27 deletions
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index a0a26e6..1d72565 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -127,6 +127,7 @@
margin-top: 0.1rem;
}
:global(.park-popup-ico) {
+ position: relative;
flex: none;
display: inline-flex;
align-items: center;
@@ -163,9 +164,57 @@
color: #29b6f6;
}
:global(.park-popup-ico-pet) {
- border-color: #ffcc80;
- background: #fff3e0;
- color: #ef6c00;
+ border-color: #e0e0e0;
+ background: #fff;
+ color: #6d4c41;
+ }
+ :global(.park-popup-ico-clock) {
+ border-color: #ffe082;
+ background: #fff8e1;
+ color: #f9a825;
+ }
+ :global(.park-popup-ico-toilet) {
+ border-color: #263238;
+ background: #455a64;
+ color: #fff;
+ font-size: 8px;
+ }
+ /* ボール遊びは可で試合形式だけ禁止のときに「試」バッジを並べる */
+ :global(.park-popup-ico-ball) {
+ width: auto;
+ gap: 2px;
+ padding: 0 2px;
+ }
+ :global(.park-popup-mini) {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-width: 14px;
+ height: 14px;
+ padding: 0 2px;
+ border: 1px solid #ffcdd2;
+ border-radius: 3px;
+ background: #ffebee;
+ color: #c62828;
+ font-size: 8px;
+ font-weight: 700;
+ line-height: 1;
+ }
+ /* 禁止の項目はアイコンの上に赤い×を重ねる */
+ :global(.park-popup-ico.is-banned) {
+ overflow: hidden;
+ }
+ :global(.park-popup-ico.is-banned)::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background:
+ linear-gradient(45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%),
+ linear-gradient(-45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%);
+ pointer-events: none;
}
:global(.park-popup-meta) {
margin-top: 0.1rem;
@@ -1050,9 +1099,6 @@
value.replace(/[&<>"']/g, (ch) =>
({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch] as string,
);
- // 水飲み場アイコン（線画の水滴。ほかの遊具アイコンと同じ線画スタイル）。
- const WATER_DROP_ICON =
- '<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.2 6 7.4 6 10.3a6 6 0 0 1-12 0c0-2.9 2.5-6.1 6-10.3z"/></svg>';
const buildPopup = (ourName: string, osmName: string, owner = "", mapsQuery = "") => {
// 市外の近隣公園は kodaira-parks.json にないので、近隣データの属性を使う。
const rec = parkDataByName.get(ourName) || nearbyInfoByName.get(ourName);
@@ -1096,18 +1142,18 @@
// 項目名は1文字の文字アイコンで示す（水・ベンチ・池は絵アイコン）。
const rowIcons: Record<string, string> = {
遊具: "遊",
- トイレ: "便",
- 水飲み場: WATER_DROP_ICON,
+ トイレ: "WC",
+ 水飲み場: PARK_ICONS.water.svg,
"ベンチ・椅子": PARK_ICONS.bench.svg,
野外卓: PARK_ICONS.picnic.svg,
- "シェルター等": "屋",
- 草地広場: "草",
+ "シェルター等": PARK_ICONS.shelter.svg,
+ 草地広場: PARK_ICONS.grass.svg,
多目的広場: "広",
築山: PARK_ICONS.mountain.svg,
じゃぶじゃぶ池: PARK_ICONS.pond.svg,
ボール遊び: PARK_ICONS.ball.svg,
ペット: PARK_ICONS.dog.svg,
- 時計: "時",
+ 時計: PARK_ICONS.clock.svg,
防災用具: "災",
};
const rows = [
@@ -1126,20 +1172,27 @@
["時計", presence("時計", rec?.["時計"])],
["防災用具", disaster],
].filter(([, value]) => value && String(value).trim());
+ const ROW_MOD: Record<string, string> = {
+ "水飲み場": " park-popup-ico-water",
+ "ベンチ・椅子": " park-popup-ico-bench",
+ "じゃぶじゃぶ池": " park-popup-ico-pond",
+ "ペット": " park-popup-ico-pet",
+ "時計": " park-popup-ico-clock",
+ "トイレ": " park-popup-ico-toilet",
+ };
const detailHtml = rows
.map(([label, value]) => {
const labelText = String(label);
- const icoClass =
- labelText === "水飲み場"
- ? "park-popup-ico park-popup-ico-water"
- : labelText === "ベンチ・椅子"
- ? "park-popup-ico park-popup-ico-bench"
- : labelText === "じゃぶじゃぶ池"
- ? "park-popup-ico park-popup-ico-pond"
- : 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>`;
+ const valueText = String(value);
+ const isBall = labelText === "ボール遊び";
+ // ボール遊び全体が禁止ならボールに×、試合形式だけ禁止なら「試」に×を付ける。
+ const banned = isBall ? /禁止/.test(ballText) : /禁止/.test(valueText);
+ let iconHtml = rowIcons[labelText] || "";
+ if (isBall && !banned && /禁止/.test(matchText)) {
+ iconHtml += '<span class="park-popup-mini" title="試合形式は禁止">試×</span>';
+ }
+ const icoClass = `park-popup-ico${ROW_MOD[labelText] || ""}${banned ? " is-banned" : ""}${isBall ? " park-popup-ico-ball" : ""}`;
+ return `<div class="park-popup-row" title="${escapePopup(labelText)}"><span class="${icoClass}" role="img" aria-label="${escapePopup(labelText)}">${iconHtml}</span><span class="park-popup-val">${escapePopup(valueText)}</span></div>`;
})
.join("");
const query = mapsQuery || (ourName ? `小平市${ourName}` : "");
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 88b78eb..a41b00b 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -55,8 +55,8 @@ const facilityTypes = [
</label>
<fieldset class="parks-facilities">
<legend>設備・遊具で絞る</legend>
- <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
- <label><input type="checkbox" data-fac-filter value="water" />水飲み</label>
+ <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label>
+ <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label>
<label>
<input type="checkbox" data-fac-filter value="picnic" />
<span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場
@@ -65,7 +65,7 @@ const facilityTypes = [
<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="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label>
<label>
<input type="checkbox" data-fac-filter value="sand" />
<span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
@@ -99,8 +99,8 @@ const facilityTypes = [
<span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
</label>
<label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label>
- <label><input type="checkbox" data-fac-filter value="shelter" />⛱東屋／シェルター</label>
- <label><input type="checkbox" data-fac-filter value="health" />💪健康遊具</label>
+ <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label>
+ <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label>
<label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label>
</fieldset>
<label class="parks-fire-toggle" title="消火栓・防火水槽を地図に表示する">
@@ -196,6 +196,26 @@ const facilityTypes = [
.filter-icon-grass {
color: #2e7d32;
}
+ .filter-icon-water {
+ color: #0277bd;
+ }
+ .filter-icon-clock {
+ color: #f9a825;
+ }
+ .filter-wc {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 14px;
+ flex: none;
+ border-radius: 3px;
+ background: #455a64;
+ color: #fff;
+ font-size: 8px;
+ font-weight: 700;
+ line-height: 1;
+ }
.filter-icon :global(svg) {
display: block;
width: 100%;
generated by cgit v1.3.1 (git 2.54.0) at 2026-11-09 00:35:49 +0000