add final website fixes

Author: LouisVasseur

website/assets/css/style.css

@@ -2176,3 +2176,203 @@ input[type="range"]::-moz-range-thumb {
   top: 16px;
   left: calc((100vw - 300px) / 2);
 }
+
+/* ============================================================
+   BOOT OVERLAY
+   Full-screen loader shown until the data + chart finish painting.
+   On narrow viewports it doubles as a "use a laptop" gate.
+   ============================================================ */
+
+.boot-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--bg);
+  background-image:
+    radial-gradient(
+      ellipse 80% 60% at 70% 10%,
+      rgba(230, 163, 86, 0.06),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 30% 90%,
+      rgba(230, 163, 86, 0.03),
+      transparent 70%
+    );
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  opacity: 1;
+  transition: opacity 400ms ease;
+}
+
+.boot-overlay.is-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.boot-inner {
+  max-width: 520px;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+}
+
+.boot-brand {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-family: var(--display);
+  font-weight: 300;
+  font-size: 28px;
+  letter-spacing: -0.01em;
+}
+
+.boot-brand .brand-mark {
+  color: var(--accent);
+  font-size: 0.7em;
+  position: relative;
+  top: -2px;
+}
+
+.boot-brand .brand-name em {
+  color: var(--accent);
+  font-style: italic;
+  font-weight: 400;
+}
+
+/* ------- WIDE STATE (default) ------- */
+
+.boot-wide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+}
+
+.boot-spinner {
+  display: flex;
+  gap: 8px;
+}
+
+.boot-spinner span {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: bootPulse 1.2s infinite ease-in-out;
+}
+
+.boot-spinner span:nth-child(2) { animation-delay: 0.15s; }
+.boot-spinner span:nth-child(3) { animation-delay: 0.30s; }
+
+@keyframes bootPulse {
+  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
+  40%           { opacity: 1;    transform: scale(1.1); }
+}
+
+.boot-status {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-family: var(--mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--ink-faint);
+}
+
+.boot-status-label {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.boot-status-text {
+  color: var(--ink-dim);
+  text-transform: none;
+  letter-spacing: 0;
+  font-style: italic;
+  font-family: var(--display);
+  font-size: 14px;
+}
+
+/* ------- NARROW STATE (hidden by default) ------- */
+
+.boot-narrow {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  max-width: 360px;
+}
+
+.boot-icon {
+  width: 64px;
+  height: 48px;
+  color: var(--accent);
+}
+
+.boot-narrow-title {
+  margin: 0;
+  font-family: var(--display);
+  font-style: italic;
+  font-weight: 300;
+  font-size: 28px;
+  line-height: 1.15;
+  color: var(--ink);
+}
+
+.boot-narrow-body {
+  margin: 0;
+  color: var(--ink-dim);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.boot-narrow-body strong {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.boot-url {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--accent);
+  background: var(--bg-panel);
+  border: 1px solid var(--rule-strong);
+  padding: 2px 8px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.boot-narrow-meta {
+  margin-top: 8px;
+  font-family: var(--mono);
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--ink-faint);
+}
+
+/* ------- VIEWPORT SWITCH -------
+   Below 900px the chart UI is essentially unusable; we show the
+   narrow-state copy instead and keep the overlay locked on. */
+@media (max-width: 899px) {
+  .boot-wide   { display: none; }
+  .boot-narrow { display: flex; }
+  /* Critical: even after .is-hidden is added by JS, keep the gate up
+     because the actual app behind it is broken on this width. */
+  .boot-overlay.is-hidden {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Also hide the underlying page so nothing flashes behind the gate */
+  body.loaded .topbar,
+  body.loaded main { display: none; }
+}

website/assets/js/analysis.js

@@ -125,8 +125,15 @@ function renderAnalysisView() {
   analysis.initialized = true;
 
   d3.select("#analysis-to-sandbox").on("click", () => {
-    const top = immortalsTop(1)[0];
-    if (top) addToSelection(top);
+    // Only seed the Sandbox with a starter game when the user has not
+    // already curated their own selection. Previously this branch always
+    // appended immortalsTop(1)[0] (deterministically Dota 2), which
+    // surprised users by mutating their carefully-picked selection every
+    // time they bounced through Our Reading.
+    if (state.selectedIds.size === 0) {
+      const top = immortalsTop(1)[0];
+      if (top) addToSelection(top);
+    }
     switchView("sandbox");
   });
 

website/assets/js/main.js

@@ -270,4 +270,14 @@ document.addEventListener("DOMContentLoaded", async () => {
   const validViews = ["main", "sandbox", "analysis"];
   const hash = window.location.hash.replace("#", "");
   if (validViews.includes(hash)) switchView(hash);
+
+  // Dismiss the boot overlay once the first paint of the Landscape is
+  // committed. On narrow viewports CSS keeps the overlay visible (it
+  // doubles as a "use a laptop" gate), so this is wide-screen-only in
+  // effect, but we always run it so the markup stays consistent.
+  requestAnimationFrame(() => {
+    document.body.classList.add("loaded");
+    const overlay = document.getElementById("boot-overlay");
+    if (overlay) overlay.classList.add("is-hidden");
+  });
 });

website/assets/js/sandbox.js

@@ -343,18 +343,80 @@ function renderSandbox() {
       if (sandbox.colorField === "genre") return colorScale(d.genres[0]);
       return colorScale(d[sandbox.colorField]);
     });
-  merged
-    .select("text")
-    .text((d) => d.name)
+
+  // Labels — place to the right of each bubble by default; flip to the
+  // left when the full label wouldn't fit; truncate with an ellipsis when
+  // neither side has room. This keeps every game name fully readable
+  // inside the sandbox clip rect instead of getting silently cut off.
+  const LABEL_PAD = 6;
+  const textSel = merged.select("text").text((d) => d.name);
+
+  textSel.each(function (d) {
+    const node = this;
+    const fullName = d.name;
+    // Reset text content before measuring (a previous truncation may
+    // have left an ellipsised version in the DOM).
+    node.textContent = fullName;
+    const w = node.getComputedTextLength();
+    const cx = sandbox.xScale(d[sandbox.xField]);
+    const r = rOf(d);
+    const rightSpace = sandbox.width - cx - r - LABEL_PAD;
+    const leftSpace = cx - r - LABEL_PAD;
+
+    if (w <= rightSpace) {
+      d.__labelAnchor = "start";
+      d.__labelX = cx + r + LABEL_PAD;
+    } else if (w <= leftSpace) {
+      d.__labelAnchor = "end";
+      d.__labelX = cx - r - LABEL_PAD;
+    } else {
+      // Doesn't fit on either side — truncate on whichever side has more
+      // room and place there.
+      if (rightSpace >= leftSpace) {
+        d.__labelAnchor = "start";
+        d.__labelX = cx + r + LABEL_PAD;
+        truncateToWidth(node, fullName, Math.max(0, rightSpace));
+      } else {
+        d.__labelAnchor = "end";
+        d.__labelX = cx - r - LABEL_PAD;
+        truncateToWidth(node, fullName, Math.max(0, leftSpace));
+      }
+    }
+  });
+
+  textSel
+    .attr("text-anchor", (d) => d.__labelAnchor)
     .transition()
     .duration(500)
-    .attr("x", (d) => sandbox.xScale(d[sandbox.xField]) + 14)
+    .attr("x", (d) => d.__labelX)
     .attr("y", (d) => sandbox.yScale(d[sandbox.yField]) + 4);
 
   renderTimeSeries();
   updateSandboxDescriptions();
 }
 
+// Binary-search shrink the text content of an SVG <text> node until its
+// rendered width fits within maxWidth (pixels), appending an ellipsis.
+// Used by the sandbox label fitter above. No-op if the full text already
+// fits.
+function truncateToWidth(textNode, fullText, maxWidth) {
+  textNode.textContent = fullText;
+  if (textNode.getComputedTextLength() <= maxWidth) return;
+  const ellipsis = "…";
+  let lo = 0;
+  let hi = fullText.length;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    textNode.textContent = fullText.slice(0, mid) + ellipsis;
+    if (textNode.getComputedTextLength() <= maxWidth) {
+      lo = mid;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  textNode.textContent = lo > 0 ? fullText.slice(0, lo) + ellipsis : ellipsis;
+}
+
 d3.selectAll("#sandbox-x, #sandbox-y, #sandbox-color, #sandbox-size").on(
   "change",
   function () {

website/index.html

@@ -10,6 +10,51 @@
 </head>
 <body>
 
+<!-- Boot overlay — covers everything while data loads; on narrow viewports
+     it doubles as a "desktop only" gate (the .narrow class is added by
+     CSS based on width). The .loaded class is added to <body> by main.js
+     once the data + first paint complete; that fades it away on desktop
+     but keeps the narrow message visible. -->
+<div class="boot-overlay" id="boot-overlay" role="status" aria-live="polite">
+  <div class="boot-inner">
+    <!-- Brand mark (same diamond + italic name as the topbar) -->
+    <div class="boot-brand">
+      <span class="brand-mark">◆</span>
+      <span class="brand-name"><em>Built</em> to Last</span>
+    </div>
+
+    <!-- Wide-screen state: spinner + status line -->
+    <div class="boot-wide">
+      <div class="boot-spinner" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </div>
+      <div class="boot-status">
+        <span class="boot-status-label">LOADING</span>
+        <span class="boot-status-text">preparing the landscape…</span>
+      </div>
+    </div>
+
+    <!-- Narrow-screen state: "use a laptop" message -->
+    <div class="boot-narrow">
+      <svg class="boot-icon" viewBox="0 0 64 48" aria-hidden="true">
+        <rect x="6" y="4" width="52" height="34" rx="2" fill="none"
+              stroke="currentColor" stroke-width="2"/>
+        <rect x="12" y="10" width="40" height="22" rx="1" fill="none"
+              stroke="currentColor" stroke-width="1.2" opacity="0.45"/>
+        <path d="M2 42 H62 L58 46 H6 Z" fill="currentColor" opacity="0.85"/>
+      </svg>
+      <h1 class="boot-narrow-title">Built for the big screen.</h1>
+      <p class="boot-narrow-body">
+        This site is a data-viz study of <strong>12,000+ video games</strong>,
+        built around a wide bubble chart and a four-axis sandbox. It does
+        not fit on a phone.<br><br>
+        Please reopen this page on a laptop or desktop.
+      </p>
+      <div class="boot-narrow-meta">COM-480 · DATA VISUALIZATION · EPFL</div>
+    </div>
+  </div>
+</div>
+
 <!-- Persistent Topbar -->
 <header class="topbar">
   <div class="topbar-left">