From 665472b2819f11d1fe3df4113d32f3ca3904996c Mon Sep 17 00:00:00 2001
From: haerikimmm <hari0914@gmail.com>
Date: Tue, 16 Jun 2026 19:42:42 +0900
Subject: [PATCH] fix: color home country purple on world map

---
 src/lib/world-map/WorldMap.svelte | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/world-map/WorldMap.svelte b/src/lib/world-map/WorldMap.svelte
index 98f5f22..16027e3 100644
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -6,6 +6,7 @@
   import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
   import { getUserProfile } from '../auth/userStore.svelte.js';
   import homeIconUrl from '../../assets/home.png';
+  import { nameToId } from '../shared/countries.js';
   import crayonCursorUrl from '../../assets/logo-cursor.png';
 
   let { onCountryClick = (_name) => {} } = $props();
@@ -111,11 +112,17 @@
     proj.scale(s).translate([w / 2, h * 0.70]);
   }
 
+  function getHomeCode() {
+    const name = getUserProfile()?.homeCountry;
+    return name ? (nameToId[name] ?? null) : null;
+  }
+
   function updateAllFills() {
     const sel = getSelected();
+    const hc = getHomeCode();
     if (!_paths || !_g) return;
-    _paths.attr('fill', d => countryColor(d, sel, null));
-    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, null));
+    _paths.attr('fill', d => countryColor(d, sel, hc));
+    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
   }
 
   $effect(updateAllFills);
@@ -178,7 +185,7 @@
         })
         .on('mouseenter', (event, d) => {
           const s = getSelected();
-          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, null));
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, getHomeCode()));
           tooltip.style('display', 'block').text(d.properties.name);
         })
         .on('mousemove', (event) => {
@@ -187,7 +194,7 @@
         })
         .on('mouseleave', (event, d) => {
           const s = getSelected();
-          d3.select(event.currentTarget).attr('fill', countryColor(d, s, null));
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, getHomeCode()));
           tooltip.style('display', 'none');
         });
     }
@@ -215,7 +222,7 @@
             .attr('cx', cx)
             .attr('cy', cy)
             .attr('r', 2)
-            .attr('fill', countryColor(d, getSelected(), null))
+            .attr('fill', countryColor(d, getSelected(), getHomeCode()))
             .attr('stroke', '#94a3b8')
             .attr('stroke-width', 0.5);
           attachEvents(c);