From bd001a71fa60c169784fe68ebe1f32dfd7b2ca1c Mon Sep 17 00:00:00 2001
From: Tomas Horsky <tomashorsky@kaist.ac.kr>
Date: Mon, 15 Jun 2026 00:06:10 +0900
Subject: [PATCH] add jurney animation

---
 public/plane.webp                    | Bin 0 -> 8252 bytes
 src/App.svelte                       |  57 +++-
 src/lib/world-map/JourneyView.svelte | 391 +++++++++++++++++++++++++++
 src/lib/world-map/WorldMap.svelte    |   2 +-
 4 files changed, 448 insertions(+), 2 deletions(-)
 create mode 100644 public/plane.webp
 create mode 100644 src/lib/world-map/JourneyView.svelte

diff --git a/public/plane.webp b/public/plane.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6003f20f2076625bb5c8a5cd7caa62274d34ac8e
GIT binary patch
literal 8252
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

literal 0
HcmV?d00001

diff --git a/src/App.svelte b/src/App.svelte
index b59be82..3a4665a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,15 +4,32 @@
   import CountryPicker from './lib/auth/CountryPicker.svelte';
   import Layout from './lib/layout/Layout.svelte';
   import WorldMap from './lib/world-map/WorldMap.svelte';
+  import JourneyView from './lib/world-map/JourneyView.svelte';
   import StatsPanel from './lib/world-map/StatsPanel.svelte';
   import TimelineView from './lib/timeline/TimelineView.svelte';
 
   let screen = $state('worldmap');
+  let journeyActive = $state(false);
+  let journeyProgress = $state(null);
 
   function onNavigate(s) {
     screen = s;
   }
 
+  function startJourney() {
+    journeyActive = true;
+    journeyProgress = null;
+  }
+
+  function endJourney() {
+    journeyActive = false;
+    journeyProgress = null;
+  }
+
+  function onJourneyProgress(p) {
+    journeyProgress = p;
+  }
+
   $effect(() => {
     initAuth();
   });
@@ -30,7 +47,14 @@
   <Layout {screen} {onNavigate}>
     {#if screen === 'worldmap'}
       <div class="worldmap-page">
-        <div class="map-area"><WorldMap /></div>
+        <div class="map-area">
+          {#if journeyActive}
+            <JourneyView onclose={endJourney} onprogress={onJourneyProgress} />
+          {:else}
+            <WorldMap />
+            <button class="journey-play-btn" onclick={startJourney}>▶</button>
+          {/if}
+        </div>
         <StatsPanel />
       </div>
     {:else}
@@ -71,5 +95,36 @@
   .map-area {
     flex: 1;
     overflow: hidden;
+    position: relative;
+  }
+
+  .journey-play-btn {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    z-index: 10;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    background: #8b5cf6;
+    color: #fff;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
+    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+  }
+
+  .journey-play-btn:hover {
+    background: #7c3aed;
+    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.55);
+  }
+
+  .journey-play-btn:active {
+    transform: scale(0.92);
   }
 </style>
diff --git a/src/lib/world-map/JourneyView.svelte b/src/lib/world-map/JourneyView.svelte
new file mode 100644
index 0000000..aa6fccd
--- /dev/null
+++ b/src/lib/world-map/JourneyView.svelte
@@ -0,0 +1,391 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import * as d3 from 'd3';
+  import { feature } from 'topojson-client';
+  import worldData from 'world-atlas/countries-50m.json';
+
+  let { onclose, onprogress } = $props();
+
+  const HOME_CODE = '203';
+
+  const MOCK_TRIPS = [
+    { countryName: 'Japan', countryCode: '392', date: '2024-03-15', city: 'Tokyo' },
+    { countryName: 'France', countryCode: '191', date: '2024-06-20', city: 'Paris' },
+    { countryName: 'Spain', countryCode: '724', date: '2024-09-10', city: 'Barcelona' },
+    { countryName: 'United States', countryCode: '840', date: '2025-01-05', city: 'New York' },
+    { countryName: 'Thailand', countryCode: '764', date: '2025-04-18', city: 'Bangkok' },
+    { countryName: 'Australia', countryCode: '036', date: '2025-08-22', city: 'Sydney' },
+  ];
+
+  const HOME_COLOR = '#8b5cf6';
+  const VISITED_COLOR = '#22c55e';
+  const ARC_COLOR = '#000000';
+  const PLANE_COLOR = '#000000';
+  const PLANE_PATH = 'M14,0 L4,-3 L0,-7 L-3,-5 L0,-2 L-5,-1 L-9,-5 L-11,-4 L-7,0 L-11,4 L-9,5 L-5,1 L0,2 L-3,5 L0,7 L4,3 Z';
+  const UNVISITED = '#ffffff';
+
+  const TERRITORY_PARENT = {
+    '016': '840', '060': '826', '086': '826', '092': '826', '136': '826',
+    '184': '554', '234': '208', '238': '826', '239': '826', '248': '246',
+    '258': '250', '260': '250', '304': '208', '316': '840', '334': '036',
+    '446': '156', '500': '826', '531': '528', '533': '528', '534': '528',
+    '540': '250', '570': '554', '574': '036', '580': '840', '612': '826',
+    '630': '840', '652': '250', '654': '826', '660': '826', '663': '250',
+    '666': '250', '796': '826', '831': '826', '832': '826', '833': '826',
+    '850': '840', '876': '250',
+  };
+
+  function effId(d) {
+    return TERRITORY_PARENT[d.id] || d.id;
+  }
+
+  let frameEl;
+  let svg, g, pathFn, projection;
+  let countryPaths;
+  let homeFeature;
+  let featuresById = {};
+  let isCancelled = false;
+  let isPlaying = $state(false);
+  let isFinished = $state(false);
+
+  function fitProjection(proj, w, h) {
+    proj.fitSize([w, h], { type: 'Sphere' });
+    const s = proj.scale() * 1.5;
+    proj.scale(s).translate([w / 2, h * 0.70]);
+  }
+
+  function computeArc(p1, p2) {
+    const interp = d3.geoInterpolate(p1, p2);
+    const steps = 80;
+    const raw = [];
+
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      const geo = interp(t);
+      const pt = projection(geo);
+      if (!pt) continue;
+      raw.push({ t, x: pt[0], y: pt[1] });
+    }
+
+    if (raw.length < 2) return [];
+
+    const first = raw[0];
+    const last = raw[raw.length - 1];
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const arcH = Math.max(40, Math.min(200, dist * 0.22));
+
+    return raw.map(p => [p.x, p.y - arcH * Math.sin(Math.PI * p.t)]);
+  }
+
+  function getAngleAtLength(node, len) {
+    const d = 0.5;
+    const total = node.getTotalLength();
+    const p1 = node.getPointAtLength(Math.max(0, len - d));
+    const p2 = node.getPointAtLength(Math.min(total, len + d));
+    return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+  }
+
+  function animateStroke(pathEl, tipEl, startOffset, endOffset, duration) {
+    return new Promise((resolve) => {
+      const node = pathEl.node();
+      if (!node) { resolve(); return; }
+      const totalLength = node.getTotalLength();
+
+      if (totalLength === 0) { resolve(); return; }
+
+      d3.timer(elapsed => {
+        if (isCancelled) { resolve(); return true; }
+
+        const t = Math.min(elapsed / duration, 1);
+        const offset = startOffset + (endOffset - startOffset) * t;
+
+        pathEl.attr('stroke-dashoffset', offset);
+
+        const drawn = totalLength - offset;
+        const clamped = Math.max(0, Math.min(drawn, totalLength));
+        try {
+          const pt = node.getPointAtLength(clamped);
+          const angle = getAngleAtLength(node, clamped);
+          tipEl.attr('transform', `translate(${pt.x}, ${pt.y}) rotate(${angle})`).attr('opacity', 1);
+        } catch (e) {
+          // ignore SVG errors
+        }
+
+        if (t >= 1) {
+          resolve();
+          return true;
+        }
+      });
+    });
+  }
+
+  function delay(ms) {
+    return new Promise(resolve => {
+      if (isCancelled) { resolve(); return; }
+      const id = setTimeout(resolve, ms);
+    });
+  }
+
+  async function animateTrip(destCode, destFeature) {
+    if (!homeFeature || !destFeature) return;
+
+    const homeCentroid = d3.geoCentroid(homeFeature);
+    const destCentroid = d3.geoCentroid(destFeature);
+
+    const pts = computeArc(homeCentroid, destCentroid);
+    if (pts.length < 2) return;
+
+    const lineGen = d3.line().curve(d3.curveBasis);
+    const pathData = lineGen(pts);
+
+    if (!pathData) return;
+
+    function createArc(pathData) {
+      const el = g.append('path')
+        .attr('d', pathData)
+        .attr('fill', 'none')
+        .attr('stroke', ARC_COLOR)
+        .attr('stroke-width', 2.5)
+        .attr('stroke-opacity', 0.8)
+        .attr('stroke-linecap', 'round');
+      const tip = g.append('path')
+        .attr('d', PLANE_PATH)
+        .attr('fill', PLANE_COLOR)
+        .attr('opacity', 0);
+      return { el, tip };
+    }
+
+    // --- Outbound: home -> dest ---
+    let { el: outEl, tip: outTip } = createArc(pathData);
+    const outLen = outEl.node().getTotalLength();
+    outEl.attr('stroke-dasharray', outLen).attr('stroke-dashoffset', outLen);
+
+    const homeDot = g.append('circle')
+      .attr('r', 4)
+      .attr('fill', PLANE_COLOR)
+      .attr('cx', pts[0][0])
+      .attr('cy', pts[0][1])
+      .attr('opacity', 1);
+
+    await animateStroke(outEl, outTip, outLen, 0, 2500);
+    if (isCancelled) return;
+
+    outEl.remove();
+    outTip.remove();
+    homeDot.remove();
+
+    // Color the destination country
+    const targetPath = countryPaths.filter(d => effId(d) === destCode);
+    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
+    g.selectAll('.micro-state-j')
+      .filter(d => effId(d) === destCode)
+      .transition().duration(500)
+      .attr('fill', VISITED_COLOR);
+
+    await delay(800);
+    if (isCancelled) return;
+
+    // --- Return: dest -> home ---
+    const revPts = [...pts].reverse();
+    const revData = d3.line().curve(d3.curveBasis)(revPts);
+    let { el: retEl, tip: retTip } = createArc(revData);
+    const retLen = retEl.node().getTotalLength();
+    retEl.attr('stroke-dasharray', retLen).attr('stroke-dashoffset', retLen);
+
+    const destDot = g.append('circle')
+      .attr('r', 4)
+      .attr('fill', PLANE_COLOR)
+      .attr('cx', revPts[0][0])
+      .attr('cy', revPts[0][1])
+      .attr('opacity', 1);
+
+    await animateStroke(retEl, retTip, retLen, 0, 2200);
+    if (isCancelled) return;
+
+    retEl.remove();
+    retTip.remove();
+    destDot.remove();
+
+    await delay(300);
+  }
+
+  async function startJourney() {
+    isPlaying = true;
+    isFinished = false;
+    isCancelled = false;
+
+    const trips = MOCK_TRIPS;
+    const total = trips.length;
+
+    for (let i = 0; i < total; i++) {
+      if (isCancelled) break;
+
+      const trip = trips[i];
+      const destFeature = featuresById[trip.countryCode];
+      if (!destFeature) continue;
+
+      const label = `${trip.city}, ${trip.countryName}`;
+      if (onprogress) onprogress({ index: i + 1, total, label });
+
+      await animateTrip(trip.countryCode, destFeature);
+    }
+
+    if (!isCancelled) {
+      isFinished = true;
+      isPlaying = false;
+      if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
+    } else {
+      isPlaying = false;
+    }
+  }
+
+  function stopJourney() {
+    isCancelled = true;
+    isPlaying = false;
+  }
+
+  onMount(() => {
+    const width = frameEl.clientWidth;
+    const height = frameEl.clientHeight;
+
+    projection = d3.geoMercator();
+    fitProjection(projection, width, height);
+
+    pathFn = d3.geoPath().projection(projection);
+
+    const countries = feature(worldData, worldData.objects.countries)
+      .features.filter(f => (f.id || f.properties.name === 'Kosovo') && f.id !== '010');
+
+    countries.forEach(f => {
+      if (!f.id) f.id = 'XK';
+    });
+
+    for (const f of countries) {
+      featuresById[effId(f)] = f;
+    }
+
+    homeFeature = featuresById[HOME_CODE];
+
+    svg = d3.select(frameEl)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .style('cursor', 'default');
+
+    g = svg.append('g');
+
+    countryPaths = g.selectAll('path')
+      .data(countries)
+      .join('path')
+      .attr('d', pathFn)
+      .attr('fill', d => effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
+      .attr('stroke', '#d4d4d4')
+      .attr('stroke-width', 0.5);
+
+    function renderMicrostates() {
+      g.selectAll('.micro-state-j').remove();
+      const threshold = 4;
+      countryPaths.each(function (d) {
+        if (effId(d) !== d.id) return;
+        const { width, height } = this.getBBox();
+        if (width < threshold && height < threshold) {
+          const [cx, cy] = pathFn.centroid(d);
+          g.append('circle')
+            .attr('class', 'micro-state-j')
+            .datum(d)
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('r', 2)
+            .attr('fill', effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
+            .attr('stroke', '#94a3b8')
+            .attr('stroke-width', 0.5);
+        }
+      });
+    }
+
+    renderMicrostates();
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        svg.attr('width', width).attr('height', height);
+        fitProjection(projection, width, height);
+        countryPaths.attr('d', pathFn);
+        renderMicrostates();
+      }
+    });
+
+    observer.observe(frameEl);
+
+    startJourney();
+
+    return () => {
+      stopJourney();
+      observer.disconnect();
+      if (svg) svg.remove();
+    };
+  });
+</script>
+
+<div bind:this={frameEl} class="journey-frame">
+  <button class="close-btn" onclick={() => { stopJourney(); onclose?.(); }}>✕</button>
+  {#if isFinished}
+    <div class="done-badge">Journey complete!</div>
+  {/if}
+</div>
+
+<style>
+  .journey-frame {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    background: #a4c8e0;
+  }
+
+  .journey-frame :global(svg) {
+    display: block;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+  }
+
+  .close-btn:hover {
+    background: rgba(0,0,0,0.75);
+  }
+
+  .done-badge {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    background: rgba(0,0,0,0.65);
+    color: #fff;
+    font-family: var(--heading, sans-serif);
+    font-size: 16px;
+    padding: 10px 24px;
+    border-radius: 24px;
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+  }
+</style>
diff --git a/src/lib/world-map/WorldMap.svelte b/src/lib/world-map/WorldMap.svelte
index 81b1a2f..4257d89 100644
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -81,9 +81,9 @@
   }
 
   function updateAllFills() {
-    if (!_paths || !_g) return;
     const sel = getSelected();
     const hc = getHomeCountryCode();
+    if (!_paths || !_g) return;
     _paths.attr('fill', d => countryColor(d, sel, hc));
     _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
   }