add initial game implementation with HTML, CSS, and JavaScript

.idea/.gitignore

@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/DiffMT.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.13" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,19 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <list>
+          <option value="pytorch" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyStubPackagesAdvertiser" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <list>
+          <option value="pandas" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/DiffMT.iml" filepath="$PROJECT_DIR$/.idea/DiffMT.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "microtubule-game",
+  "version": "1.0.0",
+  "description": "2AFC microtubule real-vs-fake image rating game",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}

public/game.js

@@ -0,0 +1,289 @@
+'use strict';
+
+const MAX_ROUNDS = 10;
+
+// ── State ──────────────────────────────────────────────────────
+const state = {
+  images:     { real: [], fake: [] },
+  pairs:      [],      // [{real, fake, realOnLeft}]
+  current:    0,
+  score:      0,
+  trialLog:   [],      // 2AFC trial records accumulated client-side
+  trialStart: 0,
+  locked:     false,
+  sessionId:  null
+};
+
+// ── Helpers ────────────────────────────────────────────────────
+const $ = id => document.getElementById(id);
+
+function showScreen(id) {
+  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+  $(id).classList.add('active');
+}
+
+function shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+function escapeHtml(str) {
+  return String(str).replace(/[&<>"']/g, c =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])
+  );
+}
+
+// ── Initialise ─────────────────────────────────────────────────
+async function init() {
+  // Wire up static buttons
+  $('btn-start').addEventListener('click', startGame);
+  $('btn-submit').addEventListener('click', submitScore);
+  $('btn-skip').addEventListener('click', () => loadLeaderboard(null));
+  $('btn-again').addEventListener('click', () => location.reload());
+  $('panel-left').addEventListener('click', () => choose('left'));
+  $('panel-right').addEventListener('click', () => choose('right'));
+
+  // Keyboard shortcuts
+  document.addEventListener('keydown', e => {
+    const gameActive = $('screen-game').classList.contains('active');
+    const nameActive = $('screen-name').classList.contains('active');
+    if (gameActive) {
+      if (e.key === 'ArrowLeft'  || e.key === 'a' || e.key === 'A') choose('left');
+      if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') choose('right');
+    }
+    if (nameActive && e.key === 'Enter') submitScore();
+  });
+
+  // Fetch available images
+  try {
+    const res  = await fetch('/api/images');
+    const data = await res.json();
+    state.images = data;
+
+    const n = Math.min(data.real.length, data.fake.length, MAX_ROUNDS);
+
+    if (n === 0) {
+      $('img-count').textContent =
+        'No images found yet — add files to  images/real/  and  images/fake/';
+      return;
+    }
+
+    $('img-count').textContent =
+      `${n} round${n !== 1 ? 's' : ''} ready  (${data.real.length} real · ${data.fake.length} fake)`;
+    $('btn-start').textContent = 'Start Challenge';
+    $('btn-start').disabled = false;
+  } catch (err) {
+    $('img-count').textContent = 'Could not load images: ' + err.message;
+  }
+}
+
+// ── Game start ─────────────────────────────────────────────────
+function startGame() {
+  const real = shuffle(state.images.real);
+  const fake = shuffle(state.images.fake);
+  const n    = Math.min(real.length, fake.length, MAX_ROUNDS);
+
+  state.pairs    = Array.from({ length: n }, (_, i) => ({
+    real:       real[i],
+    fake:       fake[i],
+    realOnLeft: Math.random() < 0.5
+  }));
+  state.current  = 0;
+  state.score    = 0;
+  state.trialLog = [];
+  state.locked   = false;
+
+  showScreen('screen-game');
+  loadTrial();
+}
+
+// ── Load a trial ───────────────────────────────────────────────
+function loadTrial() {
+  const { pairs, current } = state;
+  const pair  = pairs[current];
+  const left  = pair.realOnLeft ? pair.real : pair.fake;
+  const right = pair.realOnLeft ? pair.fake : pair.real;
+
+  // Header
+  $('round-label').textContent  = `Round ${current + 1} of ${pairs.length}`;
+  $('score-label').textContent  = `Score: ${state.score}`;
+  $('progress-fill').style.width = `${(current / pairs.length) * 100}%`;
+
+  // Images
+  $('img-left').src  = left.src;
+  $('img-right').src = right.src;
+
+  // Reset panel states
+  ['panel-left', 'panel-right'].forEach(id => {
+    $(id).classList.remove('disabled', 'correct', 'incorrect');
+  });
+
+  // Clear feedback
+  const fb = $('feedback-bar');
+  fb.className = 'feedback-bar';
+  fb.textContent = '';
+
+  state.locked     = false;
+  state.trialStart = Date.now();
+
+  // Preload next trial's images in background
+  if (current + 1 < pairs.length) {
+    const next = pairs[current + 1];
+    [next.real.src, next.fake.src].forEach(src => { const i = new Image(); i.src = src; });
+  }
+}
+
+// ── Handle a choice ────────────────────────────────────��───────
+function choose(side) {
+  if (state.locked) return;
+  state.locked = true;
+
+  const pair        = state.pairs[state.current];
+  const reactionMs  = Date.now() - state.trialStart;
+
+  const leftImg     = pair.realOnLeft ? pair.real : pair.fake;
+  const rightImg    = pair.realOnLeft ? pair.fake : pair.real;
+  const selectedImg = side === 'left' ? leftImg : rightImg;
+  const correct     = (side === 'left') === pair.realOnLeft;
+
+  if (correct) state.score++;
+
+  // ── 2AFC trial record ──────────────────────────────────────
+  state.trialLog.push({
+    trial_number:     state.current + 1,
+    image_left:       leftImg.id,
+    image_right:      rightImg.id,
+    real_image:       pair.real.id,
+    fake_image:       pair.fake.id,
+    selected_side:    side,
+    selected_image:   selectedImg.id,
+    correct,
+    reaction_time_ms: reactionMs
+  });
+
+  // ── Highlight panels ───────────────────────────────────────
+  $('panel-left').classList.add('disabled');
+  $('panel-right').classList.add('disabled');
+
+  const realPanelId     = pair.realOnLeft ? 'panel-left' : 'panel-right';
+  const selectedPanelId = side === 'left'  ? 'panel-left' : 'panel-right';
+
+  $(realPanelId).classList.add('correct');
+  if (!correct) $(selectedPanelId).classList.add('incorrect');
+
+  // ── Feedback bar ───────────────────────────────────────────
+  const fb      = $('feedback-bar');
+  const realSide = pair.realOnLeft ? 'left (A)' : 'right (B)';
+  if (correct) {
+    fb.textContent = '✓  Correct — that was the real micrograph.';
+    fb.className   = 'feedback-bar correct-fb';
+  } else {
+    fb.textContent = `✗  Wrong — the real image was on the ${realSide}.`;
+    fb.className   = 'feedback-bar incorrect-fb';
+  }
+
+  setTimeout(advance, 1700);
+}
+
+function advance() {
+  state.current++;
+  if (state.current >= state.pairs.length) finishGame();
+  else loadTrial();
+}
+
+// ── Finish game ────────────────────────────────────────────────
+function finishGame() {
+  $('progress-fill').style.width = '100%';
+
+  const pct = Math.round((state.score / state.pairs.length) * 100);
+  $('final-score').innerHTML = `
+    <div class="score-big">${state.score}<span style="font-size:1.5rem;color:var(--muted)"> / ${state.pairs.length}</span></div>
+    <div class="score-sub">${pct}% accuracy</div>
+  `;
+
+  showScreen('screen-name');
+  setTimeout(() => $('name-input').focus(), 80);
+}
+
+// ── Submit score ───────────────────────────────────────────────
+async function submitScore() {
+  const name = $('name-input').value.trim();
+  if (!name) {
+    $('name-input').classList.add('error');
+    $('name-input').focus();
+    return;
+  }
+  $('name-input').classList.remove('error');
+  $('btn-submit').disabled    = true;
+  $('btn-submit').textContent = 'Saving…';
+
+  try {
+    const res    = await fetch('/api/submit', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ playerName: name, trials: state.trialLog })
+    });
+    const result = await res.json();
+    state.sessionId = result.sessionId;
+    await loadLeaderboard(name);
+  } catch {
+    $('btn-submit').disabled    = false;
+    $('btn-submit').textContent = 'Save Score';
+    alert('Could not reach the server. Please try again.');
+  }
+}
+
+// ── Leaderboard ────────────────────────────────────────────────
+async function loadLeaderboard(playerName) {
+  showScreen('screen-results');
+
+  const pct = Math.round((state.score / state.pairs.length) * 100);
+  $('your-result').innerHTML = playerName
+    ? `<strong>${escapeHtml(playerName)}</strong> — you scored <strong>${state.score}&thinsp;/&thinsp;${state.pairs.length}</strong> &nbsp;(${pct}% accuracy)`
+    : `Your score: <strong>${state.score}&thinsp;/&thinsp;${state.pairs.length}</strong> &nbsp;(${pct}% accuracy) — <em>not saved</em>`;
+
+  try {
+    const entries = await fetch('/api/leaderboard').then(r => r.json());
+    renderLeaderboard(entries, playerName);
+  } catch {
+    $('lb-body').innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--muted)">Could not load leaderboard</td></tr>';
+  }
+}
+
+function renderLeaderboard(entries, playerName) {
+  const medals = ['🥇', '🥈', '🥉'];
+  const tbody  = $('lb-body');
+  tbody.innerHTML = '';
+
+  if (!entries.length) {
+    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--muted)">No scores yet — be the first!</td></tr>';
+    return;
+  }
+
+  entries.forEach((entry, i) => {
+    const isMe = playerName && entry.player_name === playerName && entry.session_id === state.sessionId;
+    const tr   = document.createElement('tr');
+    if (isMe) tr.classList.add('highlight');
+
+    const rank = medals[i] ?? (i + 1);
+    const date = new Date(entry.timestamp).toLocaleDateString('en-GB', {
+      day: '2-digit', month: 'short', year: '2-digit'
+    });
+
+    tr.innerHTML = `
+      <td>${rank}</td>
+      <td>${escapeHtml(entry.player_name)}${isMe ? ' <em style="color:var(--muted);font-style:normal;font-size:.85em">(you)</em>' : ''}</td>
+      <td>${entry.score} / ${entry.total}</td>
+      <td>${entry.percentage}%</td>
+      <td style="color:var(--muted)">${date}</td>
+    `;
+    tbody.appendChild(tr);
+  });
+}
+
+// ── Boot ───────────────────────────────────────────────────────
+init();

public/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Real or Fake? — Microtubule Challenge</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <!-- ── Welcome ─────────────────────────────────────────────── -->
+  <div id="screen-welcome" class="screen active">
+    <div class="card">
+      <div class="badge">Microtubule Challenge</div>
+      <h1>Real or Fake?</h1>
+      <p class="lead">Can you tell real microscopy images from AI-generated ones?</p>
+      <div class="info-box">
+        <p>You will see pairs of microtubule micrographs. One is from a real microscope — the other was generated by a diffusion model.</p>
+        <p><strong>Your task:</strong> click the image you think is <strong>real</strong>.</p>
+        <p class="hint">Keyboard: <kbd>A</kbd> or <kbd>←</kbd> for left &nbsp;·&nbsp; <kbd>D</kbd> or <kbd>→</kbd> for right</p>
+      </div>
+      <div id="img-count" class="img-count"></div>
+      <button id="btn-start" class="btn-primary" disabled>Loading…</button>
+    </div>
+  </div>
+
+  <!-- ── Game ───────────────────────────────────────────────── -->
+  <div id="screen-game" class="screen">
+    <header class="game-header">
+      <span id="round-label" class="header-stat">Round 1 of 10</span>
+      <div class="progress-bar"><div id="progress-fill"></div></div>
+      <span id="score-label" class="header-stat right">Score: 0</span>
+    </header>
+
+    <main class="game-main">
+      <h2 class="prompt">Which image is <em>real</em>?</h2>
+
+      <div class="arena">
+        <div id="panel-left" class="img-panel">
+          <span class="panel-label">A</span>
+          <img id="img-left" alt="Option A" draggable="false">
+        </div>
+
+        <div class="vs-divider"><span>VS</span></div>
+
+        <div id="panel-right" class="img-panel">
+          <span class="panel-label">B</span>
+          <img id="img-right" alt="Option B" draggable="false">
+        </div>
+      </div>
+
+      <div id="feedback-bar" class="feedback-bar"></div>
+    </main>
+  </div>
+
+  <!-- ── Name entry ─────────────────────────────────────────── -->
+  <div id="screen-name" class="screen">
+    <div class="card">
+      <h2>Challenge complete!</h2>
+      <div id="final-score" class="final-score"></div>
+      <p class="enter-name-label">Enter your name to save your score:</p>
+      <div class="input-row">
+        <input id="name-input" class="text-input" type="text" maxlength="40"
+               placeholder="Your name…" autocomplete="off" spellcheck="false">
+        <button id="btn-submit" class="btn-primary inline">Save Score</button>
+      </div>
+      <button id="btn-skip" class="btn-ghost">Skip — don't save</button>
+    </div>
+  </div>
+
+  <!-- ── Results / Leaderboard ──────────────────────────────── -->
+  <div id="screen-results" class="screen">
+    <div class="results-wrap">
+      <h2>Leaderboard</h2>
+      <div id="your-result" class="your-result"></div>
+      <div class="table-wrap">
+        <table class="lb-table">
+          <thead>
+            <tr><th>#</th><th>Name</th><th>Score</th><th>Accuracy</th><th>Date</th></tr>
+          </thead>
+          <tbody id="lb-body"></tbody>
+        </table>
+      </div>
+      <div class="results-actions">
+        <button id="btn-again" class="btn-primary">Play Again</button>
+        <a id="export-link" href="/api/export" class="btn-ghost" download="2afc_data.json">Export Data (JSON)</a>
+      </div>
+    </div>
+  </div>
+
+  <script src="game.js"></script>
+</body>
+</html>

public/style.css

@@ -0,0 +1,366 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:       #0d1117;
+  --surface:  #161b22;
+  --surface2: #21262d;
+  --border:   #30363d;
+  --accent:   #58a6ff;
+  --green:    #3fb950;
+  --red:      #f85149;
+  --text:     #e6edf3;
+  --muted:    #8b949e;
+  --r:        10px;
+  --font:     system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100dvh;
+  line-height: 1.5;
+}
+
+/* ── Screens ─────────────────────────────────────────────────── */
+.screen { display: none; }
+.screen.active { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; }
+#screen-welcome.active, #screen-name.active { justify-content: center; padding: 2rem 1rem; }
+#screen-results.active { justify-content: flex-start; padding: 2rem 1rem; }
+
+/* ── Card ────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 2.5rem;
+  width: min(540px, 100%);
+}
+
+/* ── Welcome ─────────────────────────────────────────────────── */
+.badge {
+  display: inline-block;
+  background: var(--surface2);
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  margin-bottom: 1.1rem;
+}
+
+h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 0.4rem; }
+h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.25rem; }
+
+.lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.5rem; }
+
+.info-box {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 1.1rem 1.25rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+  line-height: 1.7;
+}
+.info-box p + p { margin-top: 0.45rem; }
+.hint { color: var(--muted); font-size: 0.84rem; }
+
+kbd {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 0.8em;
+  font-family: monospace;
+}
+
+.img-count { color: var(--muted); font-size: 0.88rem; margin-bottom: 1.25rem; min-height: 1.2em; }
+
+/* ── Buttons ─────────────────────────────────────────────────── */
+.btn-primary {
+  display: block;
+  width: 100%;
+  background: var(--accent);
+  color: #000;
+  border: none;
+  border-radius: var(--r);
+  padding: 0.85rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity .18s, transform .1s;
+}
+.btn-primary.inline { width: auto; white-space: nowrap; }
+.btn-primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
+.btn-primary:active:not(:disabled) { transform: translateY(0); }
+.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
+
+.btn-ghost {
+  display: block;
+  width: 100%;
+  background: none;
+  color: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 0.75rem 1.5rem;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  margin-top: 0.75rem;
+  transition: color .18s, border-color .18s;
+}
+.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
+
+/* ── Game header ─────────────────────────────────────────────── */
+.game-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.85rem 1.75rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-stat { font-size: 0.88rem; color: var(--muted); font-weight: 500; }
+.header-stat.right { text-align: right; }
+
+.progress-bar {
+  height: 5px;
+  background: var(--surface2);
+  border-radius: 3px;
+  overflow: hidden;
+}
+#progress-fill {
+  height: 100%;
+  background: var(--accent);
+  width: 0%;
+  transition: width .45s ease;
+}
+
+/* ── Game main ───────────────────────────────────────────────── */
+.game-main {
+  width: 100%;
+  max-width: 980px;
+  padding: 1.5rem 1.75rem 2rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.4rem;
+}
+
+.prompt { font-size: 1.35rem; font-weight: 600; text-align: center; }
+.prompt em { color: var(--accent); font-style: normal; }
+
+/* ── Arena ───────────────────────────────────────────────────── */
+.arena {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+
+.img-panel {
+  flex: 1;
+  position: relative;
+  border: 2px solid var(--border);
+  border-radius: var(--r);
+  overflow: hidden;
+  cursor: pointer;
+  background: #000;
+  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
+  user-select: none;
+}
+.img-panel:not(.disabled):hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(88,166,255,.14);
+  transform: scale(1.012);
+}
+.img-panel:not(.disabled):active { transform: scale(.988); }
+.img-panel.disabled { cursor: default; }
+
+.img-panel img {
+  width: 100%;
+  display: block;
+  object-fit: contain;
+  max-height: 46vh;
+  min-height: 180px;
+  pointer-events: none;
+}
+
+.panel-label {
+  position: absolute;
+  top: 0.55rem;
+  left: 0.55rem;
+  background: rgba(0,0,0,.72);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.85rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 5px;
+  z-index: 2;
+  letter-spacing: .06em;
+}
+
+/* Feedback state on panels */
+.img-panel.correct {
+  border-color: var(--green) !important;
+  box-shadow: 0 0 0 3px rgba(63,185,80,.18), 0 0 28px rgba(63,185,80,.12) !important;
+}
+.img-panel.incorrect {
+  border-color: var(--red) !important;
+  box-shadow: 0 0 0 3px rgba(248,81,73,.18), 0 0 28px rgba(248,81,73,.1) !important;
+}
+
+/* ── VS divider ──────────────────────────────────────────────── */
+.vs-divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0 0.25rem;
+  gap: 0.7rem;
+}
+.vs-divider::before, .vs-divider::after {
+  content: '';
+  flex: 1;
+  width: 1px;
+  background: var(--border);
+}
+.vs-divider span {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--muted);
+  letter-spacing: .1em;
+}
+
+/* ── Trial feedback bar ──────────────────────────────────────── */
+.feedback-bar {
+  font-size: 1.05rem;
+  font-weight: 600;
+  padding: 0.7rem 1.5rem;
+  border-radius: var(--r);
+  text-align: center;
+  min-height: 3.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .25s;
+}
+.feedback-bar.correct-fb {
+  opacity: 1;
+  background: rgba(63,185,80,.12);
+  color: var(--green);
+  border: 1px solid rgba(63,185,80,.28);
+}
+.feedback-bar.incorrect-fb {
+  opacity: 1;
+  background: rgba(248,81,73,.1);
+  color: var(--red);
+  border: 1px solid rgba(248,81,73,.22);
+}
+
+/* ── Name entry ──────────────────────────────────────────────── */
+.final-score { text-align: center; margin: 0.75rem 0 1.5rem; }
+.score-big { font-size: 3.6rem; font-weight: 700; color: var(--accent); line-height: 1; }
+.score-sub { font-size: 1rem; color: var(--muted); margin-top: 0.3rem; }
+
+.enter-name-label { margin-bottom: 0.75rem; }
+
+.input-row { display: flex; gap: 0.65rem; }
+.text-input {
+  flex: 1;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.75rem 1rem;
+  border-radius: var(--r);
+  font-size: 1rem;
+  font-family: var(--font);
+  outline: none;
+  transition: border-color .18s;
+  min-width: 0;
+}
+.text-input:focus { border-color: var(--accent); }
+.text-input.error { border-color: var(--red); }
+
+/* ── Results ─────────────────────────────────────────────────── */
+.results-wrap {
+  width: min(680px, 100%);
+  padding: 0 0 2rem;
+}
+
+.your-result {
+  background: var(--surface);
+  border: 1px solid var(--accent);
+  border-radius: var(--r);
+  padding: 0.9rem 1.2rem;
+  margin-bottom: 1.4rem;
+  font-size: 0.97rem;
+  color: var(--text);
+}
+
+.table-wrap {
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+}
+.lb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.lb-table th {
+  background: var(--surface);
+  padding: 0.7rem 1rem;
+  text-align: left;
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  border-bottom: 1px solid var(--border);
+}
+.lb-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); }
+.lb-table tr:last-child td { border-bottom: none; }
+.lb-table tr.highlight td { background: rgba(88,166,255,.08); font-weight: 600; }
+.lb-table tr.highlight td:first-child { color: var(--accent); }
+
+.results-actions { display: flex; gap: 0.75rem; }
+.results-actions .btn-primary,
+.results-actions .btn-ghost { flex: 1; margin: 0; }
+
+/* ── Responsive ──────────────────────────────────────────────── */
+@media (max-width: 580px) {
+  .game-header {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    padding: 0.7rem 1rem;
+  }
+  .progress-bar { grid-column: 1 / -1; grid-row: 2; }
+
+  .arena { flex-direction: column; }
+  .vs-divider { flex-direction: row; padding: 0; gap: 0.6rem; }
+  .vs-divider::before, .vs-divider::after { flex: 1; height: 1px; width: auto; }
+
+  .img-panel img { max-height: 38vh; }
+  .game-main { padding: 1rem; gap: 1rem; }
+  h1 { font-size: 1.9rem; }
+  .card { padding: 1.75rem 1.4rem; }
+  .input-row { flex-direction: column; }
+  .btn-primary.inline { width: 100%; }
+  .results-actions { flex-direction: column; }
+}

server.js

@@ -0,0 +1,98 @@
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const { randomUUID } = require('crypto');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+const DATA_FILE = path.join(__dirname, 'data', 'results.json');
+const IMAGES_DIR = path.join(__dirname, 'images');
+
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+app.use('/images', express.static(IMAGES_DIR));
+
+// Auto-create required directories and data file on first run
+['data', 'images/real', 'images/fake'].forEach(dir => {
+  const p = path.join(__dirname, dir);
+  if (!fs.existsSync(p)) fs.mkdirSync(p, { recursive: true });
+});
+if (!fs.existsSync(DATA_FILE)) {
+  fs.writeFileSync(DATA_FILE, JSON.stringify({ sessions: [], trials: [] }, null, 2));
+}
+
+const IMAGE_EXT = /\.(jpe?g|png|tiff?|webp|bmp|gif)$/i;
+
+function readData() {
+  return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
+}
+
+function writeData(data) {
+  fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2));
+}
+
+// GET /api/images — list real and fake images
+app.get('/api/images', (req, res) => {
+  try {
+    const list = (subdir) =>
+      fs.readdirSync(path.join(IMAGES_DIR, subdir))
+        .filter(f => IMAGE_EXT.test(f))
+        .map(f => ({ id: f, src: `/images/${subdir}/${f}`, type: subdir }));
+
+    res.json({ real: list('real'), fake: list('fake') });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST /api/submit — save a completed session + all trial decisions
+app.post('/api/submit', (req, res) => {
+  const { playerName, trials } = req.body;
+  if (!playerName || !Array.isArray(trials) || trials.length === 0) {
+    return res.status(400).json({ error: 'Invalid payload' });
+  }
+
+  const sessionId = randomUUID();
+  const timestamp = new Date().toISOString();
+  const score = trials.filter(t => t.correct).length;
+  const total = trials.length;
+
+  const data = readData();
+
+  data.sessions.push({
+    session_id: sessionId,
+    player_name: playerName,
+    timestamp,
+    score,
+    total,
+    percentage: Math.round((score / total) * 100)
+  });
+
+  trials.forEach(trial => {
+    data.trials.push({ session_id: sessionId, player_name: playerName, timestamp, ...trial });
+  });
+
+  writeData(data);
+  res.json({ sessionId, score, total });
+});
+
+// GET /api/leaderboard — top 50 sessions by accuracy, then recency
+app.get('/api/leaderboard', (req, res) => {
+  const { sessions } = readData();
+  const sorted = [...sessions]
+    .sort((a, b) => b.percentage - a.percentage || new Date(b.timestamp) - new Date(a.timestamp))
+    .slice(0, 50);
+  res.json(sorted);
+});
+
+// GET /api/export — download full raw data for offline 2AFC analysis
+app.get('/api/export', (req, res) => {
+  res.setHeader('Content-Disposition', 'attachment; filename="2afc_data.json"');
+  res.sendFile(DATA_FILE);
+});
+
+app.listen(PORT, () => {
+  console.log(`Microtubule Challenge → http://localhost:${PORT}`);
+  console.log(`  Drop images into:  images/real/  and  images/fake/`);
+  console.log(`  Export 2AFC data:  http://localhost:${PORT}/api/export`);
+});