Spaces:

RemiFabre
/

faience-games-chart

Running

App Files Files Community

RemiFabre commited on 4 days ago

Commit

6084cfd

verified ·

1 Parent(s): de21108

Live games-over-time charts (static, client-side fetch)

Browse files

Files changed (2) hide show

README.md +7 -4
index.html +417 -17

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Faience Games Chart
-emoji: 🐢
 colorFrom: blue
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Faïence Game Traffic
+emoji: 🎲
 colorFrom: blue
+colorTo: indigo
 sdk: static
 pinned: false
 ---
+Live activity charts for the [RemiFabre/faience-games](https://huggingface.co/datasets/RemiFabre/faience-games)
+dataset. Static page: on every load it lists the dataset's game files via the
+Hub API (one JSONL file per shared game, timestamp in the filename) and bins
+them client-side. Nothing to restart, no server, no schedule.

index.html CHANGED Viewed

@@ -1,19 +1,419 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Faïence Game Traffic</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap">
+<style>
+  :root {
+    --surface: #fcfcfb;
+    --surface-2: #f3f2ef;
+    --ink: #0b0b0b;
+    --ink-2: #52514e;
+    --ink-3: #8a887f;
+    --series: #2a78d6;
+    --series-soft: rgba(42, 120, 214, 0.10);
+    --grid: rgba(11, 11, 11, 0.08);
+    --tooltip-bg: #23221f;
+    --tooltip-ink: #fcfcfb;
+    --border: rgba(11, 11, 11, 0.12);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --surface: #1a1a19;
+      --surface-2: #232322;
+      --ink: #ffffff;
+      --ink-2: #c3c2b7;
+      --ink-3: #8a887f;
+      --series: #3987e5;
+      --series-soft: rgba(57, 135, 229, 0.14);
+      --grid: rgba(255, 255, 255, 0.10);
+      --tooltip-bg: #f3f2ef;
+      --tooltip-ink: #1a1a19;
+      --border: rgba(255, 255, 255, 0.15);
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    background: var(--surface);
+    color: var(--ink);
+    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.5;
+    margin: 0;
+    padding: 2.5rem 1.25rem 4rem;
+  }
+  .wrap { max-width: 60rem; margin: 0 auto; }
+  header { margin-bottom: 2rem; }
+  .eyebrow {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--series);
+    margin: 0 0 0.5rem;
+  }
+  h1 {
+    font-family: "Fraunces", Georgia, serif;
+    font-weight: 600;
+    font-size: clamp(1.8rem, 4vw, 2.6rem);
+    line-height: 1.15;
+    text-wrap: balance;
+    margin: 0 0 0.4rem;
+  }
+  .sub { color: var(--ink-2); margin: 0; max-width: 42rem; }
+  a { color: var(--series); }
+  #status {
+    color: var(--ink-2);
+    background: var(--surface-2);
+    border-radius: 8px;
+    padding: 0.9rem 1.2rem;
+    margin: 1.75rem 0;
+  }
+  #status.error { color: #c0392b; }
+  .hidden { display: none; }
+  .stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1.75rem 0 2rem;
+  }
+  .stat {
+    background: var(--surface-2);
+    border-radius: 8px;
+    padding: 0.9rem 1.2rem;
+    min-width: 9rem;
+    flex: 0 1 auto;
+  }
+  .stat .n {
+    font-family: "Fraunces", Georgia, serif;
+    font-weight: 600;
+    font-size: 1.9rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+  .stat .l { font-size: 0.8rem; color: var(--ink-2); margin-top: 0.15rem; }
+  .chart-card { position: relative; }
+  .chart-card + .chart-card { margin-top: 2.25rem; }
+  .chart-title { font-weight: 600; margin: 0 0 0.25rem; }
+  .chart-note { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 0.75rem; }
+  .chart-scroll { overflow-x: auto; }
+  svg { display: block; }
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    background: var(--tooltip-bg);
+    color: var(--tooltip-ink);
+    font-size: 0.78rem;
+    line-height: 1.35;
+    padding: 0.4rem 0.6rem;
+    border-radius: 6px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 80ms linear;
+    z-index: 2;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip { transition: none; }
+  }
+  details { margin-top: 2.25rem; }
+  summary { cursor: pointer; font-weight: 500; color: var(--ink-2); }
+  summary:focus-visible { outline: 2px solid var(--series); outline-offset: 2px; border-radius: 3px; }
+  .table-scroll { overflow-x: auto; margin-top: 0.75rem; }
+  table { border-collapse: collapse; font-size: 0.85rem; }
+  th, td {
+    text-align: left;
+    padding: 0.3rem 1.1rem 0.3rem 0;
+    border-bottom: 1px solid var(--border);
+    font-variant-numeric: tabular-nums;
+  }
+  th { color: var(--ink-2); font-weight: 500; }
+  footer { margin-top: 2.5rem; font-size: 0.8rem; color: var(--ink-3); }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <p class="eyebrow">Dataset · RemiFabre/faience-games</p>
+    <h1>Games played over time</h1>
+    <p class="sub">Every shared human-vs-net Azul game on Faïence, counted live from the
+      file listing of the
+      <a href="https://huggingface.co/datasets/RemiFabre/faience-games">dataset</a>.
+      Reload the page to refresh. All times UTC.</p>
+  </header>
+  <div id="status">Loading game list from the Hub…</div>
+  <div id="content" class="hidden">
+    <div class="stats" id="stats"></div>
+    <div class="chart-card">
+      <p class="chart-title" id="bars-title">Games per hour</p>
+      <p class="chart-note">Hover a bar for the exact count · times in UTC</p>
+      <div class="chart-scroll"><svg id="chart1" role="img" aria-label="Bar chart of games played per time bin"></svg></div>
+      <div class="tooltip" id="tip1"></div>
+    </div>
+    <div class="chart-card">
+      <p class="chart-title">Cumulative games</p>
+      <p class="chart-note">Running total of shared games · times in UTC</p>
+      <div class="chart-scroll"><svg id="chart2" role="img" aria-label="Line chart of cumulative games played"></svg></div>
+      <div class="tooltip" id="tip2"></div>
+    </div>
+    <details>
+      <summary>Data table</summary>
+      <div class="table-scroll">
+        <table id="data-table">
+          <thead><tr><th id="bin-th">Bin (UTC)</th><th>Games</th><th>Cumulative</th></tr></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </details>
+  </div>
+  <footer id="foot"></footer>
+</div>
+<script>
+(async function () {
+  const DATASET = "RemiFabre/faience-games";
+  const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+  const status = document.getElementById("status");
+  // 1. List every game file via the paginated tree API.
+  async function listGameFiles() {
+    let url = `https://huggingface.co/api/datasets/${DATASET}/tree/main?recursive=true&limit=1000`;
+    const paths = [];
+    while (url) {
+      const r = await fetch(url);
+      if (!r.ok) throw new Error(`Hub API returned ${r.status}`);
+      for (const it of await r.json()) {
+        if (it.type === "file" && it.path.startsWith("games/") && it.path.endsWith(".jsonl")) {
+          paths.push(it.path);
+        }
+      }
+      const m = (r.headers.get("Link") || "").match(/<([^>]+)>;\s*rel="next"/);
+      url = m ? m[1] : null;
+      if (url) status.textContent = `Loading game list from the Hub… ${paths.length} files so far`;
+    }
+    return paths;
+  }
+  // 2. Timestamps come from the filenames: games/YYYY-MM-DD/YYYY-MM-DDTHH-MM-SS-mmmZ-N.jsonl
+  function parseTs(path) {
+    const m = path.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2})-(\d{2})-(\d{2})/);
+    if (!m) return null;
+    return Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]);
+  }
+  let times;
+  try {
+    times = (await listGameFiles()).map(parseTs).filter(t => t !== null).sort((a, b) => a - b);
+    if (!times.length) throw new Error("no game files found in the dataset");
+  } catch (e) {
+    status.textContent = `Could not load the dataset listing (${e.message}). Reload the page to retry.`;
+    status.classList.add("error");
+    return;
+  }
+  // 3. Bin: per hour while the span is short, per day once it exceeds 8 days.
+  const HOUR = 3600e3, DAY = 24 * HOUR;
+  const span = times[times.length - 1] - times[0];
+  const perDay = span > 8 * DAY;
+  const binMs = perDay ? DAY : HOUR;
+  const floor = t => Math.floor(t / binMs) * binMs;
+  const t0 = floor(times[0]), t1 = floor(times[times.length - 1]);
+  const bins = [];
+  for (let t = t0; t <= t1; t += binMs) bins.push({ t, n: 0 });
+  for (const t of times) bins[(floor(t) - t0) / binMs].n++;
+  const CUM = [];
+  bins.reduce((acc, b) => { CUM.push(acc + b.n); return acc + b.n; }, 0);
+  function fmt(t, withHour) {
+    const d = new Date(t);
+    let s = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`;
+    if (d.getUTCFullYear() !== new Date(times[0]).getUTCFullYear() || withHour === "year") s += ` ${d.getUTCFullYear()}`;
+    if (withHour === true) s += `, ${String(d.getUTCHours()).padStart(2, "0")}:00`;
+    return s;
+  }
+  // 4. Stats row.
+  const total = times.length;
+  const days = Math.max(span / DAY, 1 / 24);
+  const peak = bins.reduce((a, b) => b.n > a.n ? b : a, bins[0]);
+  const statDefs = [
+    [String(total), "games total"],
+    [perDay ? `${Math.round(days)} d` : `${Math.round(span / HOUR)} h`,
+     `${fmt(times[0], !perDay)} → ${fmt(times[times.length - 1], !perDay)} UTC`],
+    [(total / days).toFixed(1), "games / day, average"],
+    [String(peak.n), `peak ${perDay ? "day" : "hour"} (${fmt(peak.t, !perDay)})`],
+  ];
+  document.getElementById("stats").innerHTML = statDefs.map(([n, l]) =>
+    `<div class="stat"><div class="n">${n}</div><div class="l">${l}</div></div>`).join("");
+  document.getElementById("bars-title").textContent = perDay ? "Games per day" : "Games per hour";
+  document.getElementById("bin-th").textContent = perDay ? "Day (UTC)" : "Hour (UTC)";
+  // 5. Shared chart scaffolding.
+  const NS = "http://www.w3.org/2000/svg";
+  const W = 920, H = 320, n = bins.length;
+  function el(name, attrs, parent) {
+    const e = document.createElementNS(NS, name);
+    for (const k in attrs) e.setAttribute(k, attrs[k]);
+    parent.appendChild(e);
+    return e;
+  }
+  function niceMax(v) {
+    const p = Math.pow(10, Math.floor(Math.log10(Math.max(v, 1))));
+    for (const m of [1, 2, 2.5, 5, 10]) if (m * p >= v) return m * p;
+    return 10 * p;
+  }
+  // Tick every 6h in hourly mode; in daily mode a stride that keeps ≤ 14 labels.
+  const stride = perDay ? Math.max(1, Math.ceil(n / 14)) : 1;
+  function isTick(i) {
+    const d = new Date(bins[i].t);
+    if (!perDay) return i === 0 || d.getUTCHours() % 6 === 0;
+    return i % stride === 0;
+  }
+  function tickLabels(i) {
+    const d = new Date(bins[i].t);
+    if (!perDay) {
+      const top = `${String(d.getUTCHours()).padStart(2, "0")}:00`;
+      const bottom = (i === 0 || d.getUTCHours() === 0) ? fmt(bins[i].t) : null;
+      return [top, bottom];
+    }
+    const first = i < stride;
+    const bottom = (first || d.getUTCDate() <= stride) ? String(d.getUTCFullYear()) : null;
+    return [fmt(bins[i].t), bottom];
+  }
+  function axes(svg, M, yMax, yStep) {
+    const plotW = W - M.left - M.right, plotH = H - M.top - M.bottom;
+    const y = v => M.top + plotH * (1 - v / yMax);
+    for (let v = 0; v <= yMax; v += yStep) {
+      el("line", { x1: M.left, x2: W - M.right, y1: y(v), y2: y(v),
+                   stroke: v === 0 ? "var(--ink-3)" : "var(--grid)", "stroke-width": 1 }, svg);
+      el("text", { x: M.left - 8, y: y(v) + 4, "text-anchor": "end", fill: "var(--ink-2)",
+                   "font-size": "12", style: "font-variant-numeric: tabular-nums" }, svg)
+        .textContent = v;
+    }
+    return { plotW, plotH, y };
+  }
+  function xTicks(svg, M, xOf, y0) {
+    for (let i = 0; i < n; i++) {
+      if (!isTick(i)) continue;
+      const [top, bottom] = tickLabels(i);
+      el("text", { x: xOf(i), y: y0 + 18, "text-anchor": "middle",
+                   fill: "var(--ink-2)", "font-size": "12" }, svg).textContent = top;
+      if (bottom) el("text", { x: xOf(i), y: y0 + 34, "text-anchor": "middle",
+                               fill: "var(--ink-3)", "font-size": "12" }, svg).textContent = bottom;
+    }
+  }
+  function attachTooltip(svg, tip, html, onEnter, onLeave) {
+    const card = svg.closest(".chart-card");
+    svg.addEventListener("pointermove", ev => {
+      const t = ev.target.closest("[data-i]");
+      if (!t) return leave();
+      const i = +t.dataset.i;
+      tip.innerHTML = html(i);
+      tip.style.opacity = 1;
+      const box = card.getBoundingClientRect();
+      let tx = ev.clientX - box.left + 12;
+      if (tx + tip.offsetWidth > box.width - 4) tx = ev.clientX - box.left - tip.offsetWidth - 12;
+      tip.style.left = tx + "px";
+      tip.style.top = (ev.clientY - box.top - 10) + "px";
+      onEnter(i);
+    });
+    svg.addEventListener("pointerleave", leave);
+    function leave() { tip.style.opacity = 0; onLeave(); }
+  }
+  function setupSvg(svg) {
+    svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+    svg.setAttribute("width", "100%");
+    svg.style.minWidth = "640px";
+  }
+  // 6. Bars.
+  {
+    const svg = document.getElementById("chart1");
+    setupSvg(svg);
+    const M = { top: 12, right: 8, bottom: 44, left: 40 };
+    const yMax = niceMax(peak.n), yStep = niceMax(peak.n) / 4;
+    const { plotW, plotH, y } = axes(svg, M, yMax, yStep);
+    const step = plotW / n, barW = Math.max(1.5, step - 2);
+    bins.forEach((b, i) => {
+      const x = M.left + i * step + (step - barW) / 2;
+      if (b.n > 0) {
+        const top = y(b.n), r = Math.min(4, plotH * b.n / yMax, barW / 2);
+        el("path", { d: `M ${x} ${y(0)} V ${top + r} Q ${x} ${top} ${x + r} ${top} H ${x + barW - r} Q ${x + barW} ${top} ${x + barW} ${top + r} V ${y(0)} Z`,
+                     fill: "var(--series)", "data-i": i }, svg);
+      }
+      el("rect", { x: M.left + i * step, y: M.top, width: step, height: plotH + M.bottom - 12,
+                   fill: "transparent", "data-i": i }, svg);
+    });
+    xTicks(svg, M, i => M.left + (i + 0.5) * step, y(0));
+    let hl = null;
+    const bar = i => svg.querySelector(`path[data-i="${i}"]`);
+    attachTooltip(svg, document.getElementById("tip1"),
+      i => `<strong>${bins[i].n} game${bins[i].n === 1 ? "" : "s"}</strong><br>${fmt(bins[i].t, !perDay)} UTC`,
+      i => { if (hl !== null && hl !== i && bar(hl)) bar(hl).removeAttribute("fill-opacity");
+             hl = i; if (bar(i)) bar(i).setAttribute("fill-opacity", "0.75"); },
+      () => { if (hl !== null && bar(hl)) bar(hl).removeAttribute("fill-opacity"); hl = null; });
+  }
+  // 7. Cumulative line.
+  {
+    const svg = document.getElementById("chart2");
+    setupSvg(svg);
+    const M = { top: 16, right: 56, bottom: 44, left: 48 };
+    const yMax = niceMax(total), yStep = yMax / 4;
+    const { plotW, plotH, y } = axes(svg, M, yMax, yStep);
+    const x = i => M.left + (i + 0.5) * plotW / n;
+    xTicks(svg, M, x, y(0));
+    const pts = CUM.map((v, i) => `${x(i)},${y(v)}`).join(" ");
+    el("polygon", { points: `${x(0)},${y(0)} ${pts} ${x(n - 1)},${y(0)}`, fill: "var(--series-soft)" }, svg);
+    el("polyline", { points: pts, fill: "none", stroke: "var(--series)",
+                     "stroke-width": 2, "stroke-linejoin": "round" }, svg);
+    el("circle", { cx: x(n - 1), cy: y(total), r: 4, fill: "var(--series)",
+                   stroke: "var(--surface)", "stroke-width": 2 }, svg);
+    el("text", { x: x(n - 1) + 10, y: y(total) + 4, fill: "var(--ink)", "font-size": "13",
+                 "font-weight": "600", style: "font-variant-numeric: tabular-nums" }, svg)
+      .textContent = total;
+    const cross = el("line", { y1: M.top, y2: y(0), stroke: "var(--ink-3)", "stroke-width": 1,
+                               "stroke-dasharray": "3 3", opacity: 0 }, svg);
+    const dot = el("circle", { r: 4.5, fill: "var(--series)", stroke: "var(--surface)",
+                               "stroke-width": 2, opacity: 0 }, svg);
+    bins.forEach((_, i) => {
+      el("rect", { x: M.left + i * plotW / n, y: M.top, width: plotW / n,
+                   height: plotH + M.bottom - 12, fill: "transparent", "data-i": i }, svg);
+    });
+    attachTooltip(svg, document.getElementById("tip2"),
+      i => `<strong>${CUM[i]} games total</strong><br>by end of ${fmt(bins[i].t, !perDay)} UTC`,
+      i => { cross.setAttribute("x1", x(i)); cross.setAttribute("x2", x(i)); cross.setAttribute("opacity", 1);
+             dot.setAttribute("cx", x(i)); dot.setAttribute("cy", y(CUM[i])); dot.setAttribute("opacity", 1); },
+      () => { cross.setAttribute("opacity", 0); dot.setAttribute("opacity", 0); });
+  }
+  // 8. Table + footer.
+  const tbody = document.querySelector("#data-table tbody");
+  tbody.innerHTML = bins.map((b, i) =>
+    `<tr><td>${fmt(b.t, !perDay)}</td><td>${b.n}</td><td>${CUM[i]}</td></tr>`).join("");
+  const now = new Date();
+  document.getElementById("foot").innerHTML =
+    `Latest shared game: ${fmt(times[times.length - 1], "year")}, ` +
+    `${String(new Date(times[times.length - 1]).getUTCHours()).padStart(2, "0")}:${String(new Date(times[times.length - 1]).getUTCMinutes()).padStart(2, "0")} UTC · ` +
+    `listing fetched ${now.toUTCString().replace(":" + String(now.getUTCSeconds()).padStart(2, "0") + " GMT", " UTC")} · reload to refresh.`;
+  status.classList.add("hidden");
+  document.getElementById("content").classList.remove("hidden");
+})();
+</script>
+</body>
 </html>