From 61f866321204ea2a083d9e7616671bff2d18d2e8 Mon Sep 17 00:00:00 2001
From: JP Barbosa <jp@jp7.io>
Date: Mon, 11 Dec 2023 17:32:09 -0300
Subject: [PATCH] Add style to the selected city or prefecture

---
 css/maps.css | 13 +++++++++++++
 js/map.js    | 19 ++++++++++++++++---
 js/utils.js  | 11 ++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/css/maps.css b/css/maps.css
index 308490c..09d5a6b 100644
--- a/css/maps.css
+++ b/css/maps.css
@@ -114,3 +114,16 @@
 #prefectures.active svg text {
   visibility: visible;
 }
+
+#maps .circle {
+  display: none;
+}
+
+#maps #cities .active .circle {
+  display: block;
+  opacity: 0.5;
+}
+
+#maps #regions .active {
+  opacity: 0.5;
+}
diff --git a/js/map.js b/js/map.js
index b022da3..e9cc485 100644
--- a/js/map.js
+++ b/js/map.js
@@ -73,6 +73,8 @@ export function drawCities(data, callback) {
       cityGroup?.setAttribute('data-nationalCapital', cityData.types.includes('nationalCapital') ? 'true' : 'false');
       cityGroup?.setAttribute('data-name', cityData.name.en);
       cityGroup?.addEventListener('click', () => {
+        document.querySelectorAll('#cities svg g').forEach(elm => elm.classList.remove('active'));
+        cityGroup?.classList.add('active');
         setInfo('city', cityData);
       });
 
@@ -96,7 +98,7 @@ export function drawCities(data, callback) {
         city.setAttribute('y', `${y - textHeight * 0.7}`);
       }
 
-      addStroke(city);
+      addStroke(city, cityData.bottom);
     })
 
     if (callback) {
@@ -138,8 +140,19 @@ export function drawPrefectures(data, callback) {
         prefecture.setAttribute('text-anchor', prefectureData.textAnchor);
       }
 
-      prefecture.parentElement?.addEventListener('click', () => {
-        setInfo('prefecture', prefectureData);
+      const prefectureGroup = prefecture.parentElement;
+
+      const logicalname = `F#feature#1#0#JP-${prefectureData.code}#0`;
+
+      prefectureGroup?.addEventListener('click', () => {
+        document.querySelectorAll('#regions svg path').forEach(elm => {
+          if (elm.logicalname === logicalname) {
+            elm.classList.add('active');
+          } else {
+            elm.classList.remove('active');
+          }
+          setInfo('prefecture', prefectureData);
+        });
       });
 
       addStroke(prefecture);
diff --git a/js/utils.js b/js/utils.js
index 7be5826..f7a7249 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -102,7 +102,7 @@ export function extractPrefectures(data, filter = null) {
   return dataArray;
 }
 
-export function addStroke(elm) {
+export function addStroke(elm, cityBottom = false) {
   const strokePos = [
     { x: 1, y: 1 },
     { x: 1, y: -1 },
@@ -113,6 +113,15 @@ export function addStroke(elm) {
   const x = parseInt(elm.getAttribute('x'));
   const y = parseInt(elm.getAttribute('y'));
 
+  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+  circle.setAttribute('cx', `${x - 1}`);
+  circle.setAttribute('cy', `${cityBottom ? y - 14 : y + 9}`);
+  circle.setAttribute('r', '30');
+  circle.setAttribute('fill', 'none');
+  circle.setAttribute('stroke', 'black');
+  circle.setAttribute('class', 'circle');
+  elm.parentElement?.appendChild(circle);
+
   strokePos.forEach(pos => {
     const stroke = elm.cloneNode(true);
     stroke.setAttribute('fill', 'white');