Update src/App.svelte

src/App.svelte

@@ -1,47 +1,199 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
-</script>
+  import './app.css';
+  import { onMount } from 'svelte';
+  import { csvParse } from 'd3-dsv';
+  import { scaleLinear } from 'd3-scale';
+  import { extent, bisector } from 'd3-array';
+  import { line as d3line, curveMonotoneX } from 'd3-shape';
 
-<main>
-  <div>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-  <h1>Vite + Svelte</h1>
+  type Row = {
+    time_min: number;
+    croissant_mgdl_delta: number;
+    croissant_with_anti_spike_mgdl_delta: number;
+  };
 
-  <div class="card">
-    <Counter />
-  </div>
+  let rows: Row[] = [];
+  let loaded = false;
+
+  // SVG viewport (viewBox); responsive via width:100%
+  const w = 960, h = 420;
+  const m = { top: 24, right: 24, bottom: 34, left: 24 };
+
+  // D3 scales
+  let x: any, y: any;
 
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
-
-<style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
+  // Pointer state
+  let pointerT: number | null = null;  // time (minutes)
+  let pointerVX = 0; // viewport px for tooltip horiz position
+
+  // Assets (served from /public)
+  const CROISSANT = "/croissant.png";
+  const ANTISPIKE = "/antispike.png";
+
+  const colorCroissant = "#111111"; // black curve
+
+  // Messages driven by value thresholds
+  function messageForValue(v: number) {
+    if (v >= 30) return "High spike → more cravings, fatigue, hunger.";
+    if (v < 0)  return "Below baseline → possible energy dip / ‘crash’.";
+    if (v > 0)  return "Moderate rise.";
+    return "At baseline.";
   }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+  function messageForAnti(v: number) {
+    if (v >= 22) return "Reduced spike vs. croissant alone.";
+    if (v >= 12) return "Smaller spike → steadier energy.";
+    if (v <= 2 && v >= -2) return "Near baseline → steadier energy ✅";
+    if (v < -1) return "Gentle dip, then recovery.";
+    return "Stable.";
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
+
+  onMount(async () => {
+    const res = await fetch('/croissant+croissant_antistpike.csv');
+    const text = await res.text();
+
+    rows = csvParse(text, d => ({
+      time_min: +d['time_min']!,
+      croissant_mgdl_delta: +d['croissant_mgdl_delta']!,
+      croissant_with_anti_spike_mgdl_delta: +d['croissant_with_anti_spike_mgdl_delta']!
+    })) as unknown as Row[];
+
+    // domains
+    const xDomain = extent(rows, d => d.time_min) as [number, number];
+    const yMin = Math.min(...rows.map(r => Math.min(r.croissant_mgdl_delta, r.croissant_with_anti_spike_mgdl_delta)));
+    const yMax = Math.max(...rows.map(r => Math.max(r.croissant_mgdl_delta, r.croissant_with_anti_spike_mgdl_delta)));
+
+    x = scaleLinear().domain(xDomain).range([m.left, w - m.right]);
+    y = scaleLinear().domain([yMin - 5, yMax + 5]).range([h - m.bottom, m.top]);
+
+    loaded = true;
+  });
+
+  // SVG path builders
+  const makePath = (accessor: (r: Row) => number) =>
+    d3line<Row>()
+      .x(d => x(d.time_min))
+      .y(d => y(accessor(d)))
+      .curve(curveMonotoneX);
+
+  let pathCroissant = '';
+  let pathAnti = '';
+  $: if (loaded) {
+    pathCroissant = makePath(d => d.croissant_mgdl_delta)(rows) ?? '';
+    pathAnti      = makePath(d => d.croissant_with_anti_spike_mgdl_delta)(rows) ?? '';
   }
-  .read-the-docs {
-    color: #888;
+
+  // Interpolate y at time via bisector
+  const rightAt = bisector<Row, number>(d => d.time_min).right; // binary search for segment
+  function yAtTime(accessor: (r: Row) => number, t: number) {
+    const i = rightAt(rows, t) - 1;
+    const i0 = Math.max(0, Math.min(rows.length - 2, i));
+    const a = rows[i0], b = rows[i0 + 1];
+    const k = (t - a.time_min) / (b.time_min - a.time_min);
+    return accessor(a) + k * (accessor(b) - accessor(a));
   }
-</style>
+
+  // Pointer events (unified mouse/touch/pen)
+  function onPtr(e: PointerEvent) {
+    const svg = e.currentTarget as SVGSVGElement;
+    const r = svg.getBoundingClientRect();
+    const px = Math.max(m.left, Math.min(r.width - m.right, e.clientX - r.left));
+    pointerVX = px;
+    // viewport px -> viewBox px -> time
+    const viewboxX = (px / r.width) * w;
+    pointerT = x.invert(viewboxX);
+  }
+  function onLeave() { pointerT = null; }
+
+  // Reactive marker values
+  let markerX: number | null = null;
+  let v1: number | null = null;
+  let v2: number | null = null;
+  let markerY1: number | null = null;
+  let markerY2: number | null = null;
+
+  $: if (loaded && pointerT !== null) {
+    markerX = x(pointerT);
+    v1 = yAtTime(d => d.croissant_mgdl_delta, pointerT);
+    v2 = yAtTime(d => d.croissant_with_anti_spike_mgdl_delta, pointerT);
+    markerY1 = y(v1);
+    markerY2 = y(v2);
+  } else {
+    markerX = v1 = v2 = markerY1 = markerY2 = null;
+  }
+
+  const xLabels = [
+    { t: 0, label: "eating time" },
+    { t: 120, label: "2 hours later" }
+  ];
+</script>
+
+<div class="container">
+  <div class="h1">Glucose response — croissant vs. Anti-Spike</div>
+
+  <div class="card" style="position:relative;">
+    {#if loaded}
+      <svg
+        viewBox={`0 0 ${w} ${h}`}
+        style="width:100%;height:auto;touch-action:none;display:block"
+        on:pointermove={onPtr}
+        on:pointerdown={onPtr}
+        on:pointerleave={onLeave}
+      >
+        <!-- Background -->
+        <rect x="0" y="0" width={w} height={h} rx="18" fill="#f7f8ff"></rect>
+
+        <!-- Guides: baseline (0) and +30 -->
+        <line x1={m.left} x2={w - m.right} y1={y(0)}  y2={y(0)}  stroke="#e0e3ff" stroke-width="2" />
+        <line x1={m.left} x2={w - m.right} y1={y(30)} y2={y(30)} stroke="#ffd6e7" stroke-dasharray="6 6" />
+
+        <!-- Axis labels (lightweight) -->
+        {#each xLabels as xl}
+          <text x={x(xl.t)} y={h - 8} text-anchor={xl.t === 0 ? "start" : "middle"} fill="#4a4f93" font-size="13">{xl.label}</text>
+        {/each}
+        <text x={m.left} y={y(60)} fill="#4a4f93" font-size="12">+60</text>
+        <text x={m.left} y={y(30)} fill="#4a4f93" font-size="12">+30</text>
+        <text x={m.left} y={y(0)}  fill="#4a4f93" font-size="12">baseline</text>
+
+        <!-- Curves -->
+        <path d={pathCroissant} fill="none" stroke={colorCroissant} stroke-width="3.5"></path>
+        <path d={pathAnti}      fill="none" style="stroke: var(--brand-pink)" stroke-width="3.5"></path>
+
+        <!-- Scrub markers -->
+        {#if markerX !== null && markerY1 !== null && markerY2 !== null}
+          <line x1={markerX} x2={markerX} y1={m.top} y2={h - m.bottom} stroke="rgba(25,31,112,.2)" stroke-width="1.5"></line>
+          <circle cx={markerX} cy={markerY1} r="5.5" fill={colorCroissant}></circle>
+          <circle cx={markerX} cy={markerY2} r="5.5" fill="#df4085"></circle>
+        {/if}
+      </svg>
+
+      <!-- Legend -->
+      <div class="legend" style="margin-top:12px">
+        <span class="dot" style="background:#111"></span> Croissant
+        <img src={CROISSANT} alt="croissant" />
+        <span class="dot" style="background:#df4085"></span> Croissant + Anti-Spike
+        <img src={ANTISPIKE} alt="Anti-Spike bottle" />
+        <span class="badge" style="margin-left:auto">Hover or drag to scrub</span>
+      </div>
+
+      <!-- Tooltip with messages -->
+      {#if v1 !== null && v2 !== null}
+        <div class="tooltip" style="left:min(calc(100% - 220px), max(12px, calc({pointerVX}px - 110px))); top: 12px;">
+          <div style="font-weight:700; font-family: var(--font-serif); color:#111; font-size:14px; margin-bottom:6px;">
+            At t = {Math.round(pointerT!)} min
+          </div>
+          <div style="display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center;">
+            <span class="dot" style="background:#111"></span><span>Croissant</span><strong>{v1.toFixed(0)} mg/dL</strong>
+            <span class="dot" style="background:#df4085"></span><span>+ Anti-Spike</span><strong>{v2.toFixed(0)} mg/dL</strong>
+          </div>
+          <hr style="border:none;border-top:1px solid #eee; margin:8px 0;" />
+          <div style="font-size:12px; color:#333; margin-bottom:4px;">{messageForValue(v1)}</div>
+          <div style="font-size:12px; color:#333;">{messageForAnti(v2)}</div>
+        </div>
+      {/if}
+
+      <div class="footer-note">Design: Bodoni / Avenir Next · Colors: #ffffff · #191f70 · #df4085</div>
+    {:else}
+      Loading…
+    {/if}
+  </div>
+</div>