From f198c050636b405a93a6c0e7a10e860a4b704a4a Mon Sep 17 00:00:00 2001
From: Tomas Horsky <tomashorsky@kaist.ac.kr>
Date: Fri, 12 Jun 2026 19:19:20 +0900
Subject: [PATCH] display home country in map

---
 src/lib/auth/CountryPicker.svelte   | 28 +++++------
 src/lib/auth/userStore.svelte.js    |  9 ++--
 src/lib/layout/TopBar.svelte        | 10 ++--
 src/lib/layout/selection.svelte.js  |  6 +++
 src/lib/world-map/StatsPanel.svelte | 76 ++++++++++++++++++++++++++++-
 src/lib/world-map/WorldMap.svelte   | 45 ++++++++++++++---
 6 files changed, 140 insertions(+), 34 deletions(-)

diff --git a/src/lib/auth/CountryPicker.svelte b/src/lib/auth/CountryPicker.svelte
index a58ea24..f4d5aca 100644
--- a/src/lib/auth/CountryPicker.svelte
+++ b/src/lib/auth/CountryPicker.svelte
@@ -7,36 +7,32 @@
 
   const countries = $derived.by(() => {
     if (!worldData?.objects?.countries?.geometries) return [];
-    const names = worldData.objects.countries.geometries
-      .map(g => g.properties?.name)
-      .filter(Boolean);
-    return [...new Set(names)].sort();
+    return worldData.objects.countries.geometries
+      .map(g => ({ name: g.properties?.name, code: g.id }))
+      .filter(c => c.name && c.code)
+      .sort((a, b) => a.name.localeCompare(b.name));
   });
 
   let search = $state('');
-  let selectedCountry = $state('');
+  let selectedCountry = $state(null);
 
   let filtered = $derived(
     search
-      ? countries.filter(c => c.toLowerCase().includes(search.toLowerCase()))
+      ? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
       : countries
   );
 
   let open = $state(false);
 
-  function toggleDropdown() {
-    open = !open;
-  }
-
   function select(c) {
     selectedCountry = c;
-    search = c;
+    search = c.name;
     open = false;
   }
 
   function handleSubmit() {
     if (selectedCountry) {
-      setHomeCountry(selectedCountry);
+      setHomeCountry(selectedCountry.name, selectedCountry.code);
     }
   }
 
@@ -61,7 +57,7 @@
         placeholder="Search for a country..."
         bind:value={search}
         onfocus={() => { open = true; }}
-        oninput={() => { open = true; selectedCountry = ''; }}
+        oninput={() => { open = true; selectedCountry = null; }}
         onkeydown={handleKeydown}
         class="search-input"
       />
@@ -70,13 +66,13 @@
           {#each filtered as country}
             <li
               role="option"
-              aria-selected={selectedCountry === country}
-              class:selected={selectedCountry === country}
+              aria-selected={selectedCountry?.name === country.name}
+              class:selected={selectedCountry?.name === country.name}
               onclick={() => select(country)}
               onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
               tabindex="0"
             >
-              {country}
+              {country.name}
             </li>
           {/each}
           {#if filtered.length === 0}
diff --git a/src/lib/auth/userStore.svelte.js b/src/lib/auth/userStore.svelte.js
index 329967b..577e27e 100644
--- a/src/lib/auth/userStore.svelte.js
+++ b/src/lib/auth/userStore.svelte.js
@@ -27,17 +27,18 @@ export async function signOut() {
   needsCountry = false;
 }
 
-export async function setHomeCountry(country) {
+export async function setHomeCountry(name, code) {
   if (!user) return;
   await setDoc(doc(db, 'users', user.uid), {
     displayName: user.displayName,
     photoURL: user.photoURL,
     email: user.email,
-    homeCountry: country,
-    visitedCountries: [],
+    homeCountry: name,
+    homeCountryCode: code,
+    visitedCountries: [code],
     createdAt: serverTimestamp(),
   });
-  userProfile = { ...userProfile, homeCountry: country, visitedCountries: [] };
+  userProfile = { ...userProfile, homeCountry: name, homeCountryCode: code, visitedCountries: [code] };
   needsCountry = false;
 }
 
diff --git a/src/lib/layout/TopBar.svelte b/src/lib/layout/TopBar.svelte
index e080f43..132ee86 100644
--- a/src/lib/layout/TopBar.svelte
+++ b/src/lib/layout/TopBar.svelte
@@ -58,11 +58,11 @@
       </div>
     {/if}
   </div>
-</div>
 
-{#if menuOpen}
-  <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
-{/if}
+  {#if menuOpen}
+    <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
+  {/if}
+</div>
 
 <style>
   .topbar {
@@ -217,7 +217,7 @@
   .backdrop {
     position: fixed;
     inset: 0;
-    z-index: 40;
+    z-index: 30;
     border: none;
     background: transparent;
     cursor: default;
diff --git a/src/lib/layout/selection.svelte.js b/src/lib/layout/selection.svelte.js
index 39524f8..7609f5b 100644
--- a/src/lib/layout/selection.svelte.js
+++ b/src/lib/layout/selection.svelte.js
@@ -3,6 +3,7 @@ import { doc, onSnapshot, updateDoc, arrayUnion, arrayRemove } from 'firebase/fi
 
 let selected = $state(new Set());
 let totalCountries = $state(0);
+let homeCountryCode = $state(null);
 let _uid = null;
 let _unsubscribe = null;
 
@@ -14,6 +15,7 @@ export function initSelectionListener(uid) {
     if (snap.exists()) {
       const codes = snap.data().visitedCountries || [];
       selected = new Set(codes);
+      homeCountryCode = snap.data().homeCountryCode || null;
     }
   });
 }
@@ -54,3 +56,7 @@ export function setTotalCount(n) {
 export function getTotalCount() {
   return totalCountries;
 }
+
+export function getHomeCountryCode() {
+  return homeCountryCode;
+}
diff --git a/src/lib/world-map/StatsPanel.svelte b/src/lib/world-map/StatsPanel.svelte
index f336326..9e0e154 100644
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/src/lib/world-map/StatsPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import { CONTINENTS, getContinent, continentTotals } from './continents.js';
   import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
+  import worldData from 'world-atlas/countries-50m.json';
 
   let collapsed = $state(false);
 
@@ -13,6 +14,33 @@
     'Oceania': '#a855f7'
   };
 
+  const countryNameById = $derived.by(() => {
+    const map = { XK: 'Kosovo' };
+    for (const g of worldData.objects.countries.geometries) {
+      map[g.id] = g.properties?.name || g.id;
+    }
+    return map;
+  });
+
+  let visitedCountries = $derived(
+    [...getSelected()].map(id => countryNameById[id]).filter(Boolean).sort()
+  );
+
+  let visitedByContinent = $derived.by(() => {
+    const map = {};
+    for (const id of getSelected()) {
+      const cont = getContinent(id);
+      if (cont) {
+        if (!map[cont]) map[cont] = [];
+        map[cont].push(countryNameById[id] || id);
+      }
+    }
+    for (const cont of Object.keys(map)) {
+      map[cont].sort();
+    }
+    return map;
+  });
+
   let counts = $derived.by(() => {
     const c = {};
     for (const cont of CONTINENTS) c[cont] = 0;
@@ -83,10 +111,20 @@
       <span class="bar-label">by continent</span>
       {#each CONTINENTS as continent}
         {@const contTotal = continentTotals[continent]}
-        <div class="row">
+        <div class="row tooltip-wrap">
           <span class="dot" style="background: {continentColors[continent]}"></span>
           <span class="label">{continent}</span>
           <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
+          {#if visitedByContinent[continent]?.length > 0}
+            <div class="tooltip-list">
+              {#each visitedByContinent[continent].slice(0, 10) as country}
+                <span class="tooltip-item">{country}</span>
+              {/each}
+              {#if visitedByContinent[continent].length > 10}
+                <span class="tooltip-item tooltip-more">...</span>
+              {/if}
+            </div>
+          {/if}
         </div>
       {/each}
 
@@ -273,12 +311,14 @@
     display: flex;
     justify-content: center;
     margin: 24px 0;
+    padding: 0 10px;
   }
 
   .donut-svg {
     width: 160px;
     height: 160px;
     filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+    overflow: visible;
   }
 
   .donut-label {
@@ -293,6 +333,40 @@
     opacity: 1;
   }
 
+  .tooltip-wrap {
+    position: relative;
+  }
+
+  .tooltip-list {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    background: #1e293b;
+    color: #f1f5f9;
+    font-size: 12px;
+    line-height: 1.5;
+    padding: 8px 12px;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    z-index: 20;
+    white-space: nowrap;
+    min-width: 120px;
+  }
+
+  .tooltip-wrap:hover .tooltip-list {
+    display: block;
+  }
+
+  .tooltip-item {
+    display: block;
+    padding: 2px 0;
+  }
+
+  .tooltip-item + .tooltip-item {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
   .disclaimer {
     font-size: 11px;
     color: #94a3b8;
diff --git a/src/lib/world-map/WorldMap.svelte b/src/lib/world-map/WorldMap.svelte
index ee705f8..81b1a2f 100644
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -3,7 +3,7 @@
   import * as d3 from 'd3';
   import { feature } from 'topojson-client';
   import worldData from 'world-atlas/countries-50m.json';
-  import { getSelected, toggle, setTotalCount } from '../layout/selection.svelte.js';
+  import { getSelected, toggle, setTotalCount, getHomeCountryCode } from '../layout/selection.svelte.js';
 
   const TERRITORY_PARENT = {
     '016': '840', // American Samoa -> United States
@@ -49,6 +49,27 @@
     return TERRITORY_PARENT[d.id] || d.id;
   }
 
+  const HOME_COLOR = '#8b5cf6';
+  const HOME_COLOR_HOVER = '#7c3aed';
+  const VISITED_COLOR = '#22c55e';
+  const VISITED_COLOR_HOVER = '#16a34a';
+  const UNVISITED_COLOR = '#ffffff';
+  const UNVISITED_COLOR_HOVER = '#f0f6fa';
+
+  function countryColor(d, sel, homeCode) {
+    const id = effId(d);
+    if (!sel.has(id)) return UNVISITED_COLOR;
+    if (id === homeCode) return HOME_COLOR;
+    return VISITED_COLOR;
+  }
+
+  function countryHoverColor(d, sel, homeCode) {
+    const id = effId(d);
+    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
+    if (id === homeCode) return HOME_COLOR_HOVER;
+    return VISITED_COLOR_HOVER;
+  }
+
   let frameEl;
   let _paths = null;
   let _g = null;
@@ -62,8 +83,9 @@
   function updateAllFills() {
     if (!_paths || !_g) return;
     const sel = getSelected();
-    _paths.attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
-    _g.selectAll('.micro-state').attr('fill', d => sel.has(effId(d)) ? '#22c55e' : '#ffffff');
+    const hc = getHomeCountryCode();
+    _paths.attr('fill', d => countryColor(d, sel, hc));
+    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
   }
 
   $effect(updateAllFills);
@@ -100,8 +122,10 @@
       .style('display', 'none');
 
     function updateFill(sel) {
-      sel.attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
-      _g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+      const s = getSelected();
+      const hc = getHomeCountryCode();
+      sel.attr('fill', d => countryColor(d, s, hc));
+      _g.selectAll('.micro-state').attr('fill', d => countryColor(d, s, hc));
     }
 
     function attachEvents(sel) {
@@ -111,7 +135,9 @@
           updateFill(d3.select(event.currentTarget));
         })
         .on('mouseenter', (event, d) => {
-          d3.select(event.currentTarget).attr('fill', getSelected().has(effId(d)) ? '#16a34a' : '#f0f6fa');
+          const s = getSelected();
+          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, hc));
           tooltip.style('display', 'block').text(d.properties.name);
         })
         .on('mousemove', (event) => {
@@ -119,7 +145,9 @@
           tooltip.style('left', (x + 10) + 'px').style('top', (y - 28) + 'px');
         })
         .on('mouseleave', (event, d) => {
-          d3.select(event.currentTarget).attr('fill', getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+          const s = getSelected();
+          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, hc));
           tooltip.style('display', 'none');
         });
     }
@@ -141,13 +169,14 @@
         const { width, height } = this.getBBox();
         if (width < threshold && height < threshold) {
           const [cx, cy] = path.centroid(d);
+          const hc = getHomeCountryCode();
           const c = _g.append('circle')
             .attr('class', 'micro-state')
             .datum(d)
             .attr('cx', cx)
             .attr('cy', cy)
             .attr('r', 2)
-            .attr('fill', getSelected().has(effId(d)) ? '#22c55e' : '#ffffff')
+            .attr('fill', countryColor(d, getSelected(), hc))
             .attr('stroke', '#94a3b8')
             .attr('stroke-width', 0.5);
           attachEvents(c);