laatste versie

2026-09-26 23:25:04 +02:00
parent 32c7696bda
commit 4bdac1e6e8
9 changed files with 267 additions and 84 deletions
@@ -10,13 +10,15 @@

  /* ---------- state ---------- */
  let ws = null;
-  const me = { id: null, host: false, name: '', color: '#ff3fa4' };
+  const me = { id: null, host: false, spectator: false, name: '', color: '#ff3fa4' };
  let phase = 'lobby';
  let snap = null;         // laatste snapshot
  let track = null;        // {obstacles, powerups}
  const rp = {};           // render-state per speler {rx, rd, ...}
-  const input = { steer: 0 };
+  const input = { steer: 0, x: null };
  let visSteer = 0;        // visuele stuursmoothing (alleen voor rendering)
+  let followTilt = 0;      // kanteling van de gevolgde koploper (alleen toeschouwer)
+  let followPrevX = null;
  let fx = [];
  let shake = 0;
  let lastSent = 0;
@@ -84,14 +86,17 @@

  $('joinBtn').onclick = () => connect();
  $('nameInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') connect(); });
+  // Host-URL (?host=<token>): meteen door als toeschouwer, geen aanmeldformulier.
+  if (hostToken()) connect();

  /* ---------- message-handling ---------- */
  function handle(m) {
    switch (m.type) {
      case 'joined':
-        me.id = m.id; me.host = !!m.host;
+        me.id = m.id; me.host = !!m.host; me.spectator = !!m.spectator;
        me.name = m.self.name; me.color = m.self.color;
        snap = m.snapshot; track = m.track;
+        document.body.classList.toggle('spectator', me.spectator);
        applySnapshot(m.snapshot);
        $('join').classList.add('hidden');
        $('room').classList.remove('hidden');
@@ -130,6 +135,7 @@
      }
      if (hard) { rp[p.id].rx = p.x; rp[p.id].rd = p.d; }
    }
+    if (hard) { input.x = null; input.steer = 0; steerPointer = null; lastTiltX = null; }
    for (const key in rp) if (!seen.has(key)) delete rp[key];
    prevPhase = newPhase;
    phase = newPhase;
@@ -160,7 +166,18 @@
      }
    }

-    visSteer += (input.steer - visSteer) * Math.min(1, dt * 12);
+    visSteer += (tiltTarget() - visSteer) * Math.min(1, dt * 12);
+
+    // toeschouwer: kantel van de gevolgde koploper uit diens laterale beweging
+    if (me.spectator && snap && snap.players.length) {
+      const lead = snap.players.slice().sort((a, b) => a.rank - b.rank)[0];
+      const lr = rp[lead.id];
+      if (lr) {
+        const vx = lr.rx - (followPrevX == null ? lr.rx : followPrevX);
+        followPrevX = lr.rx;
+        followTilt += (clamp(vx * 1.4, -1, 1) - followTilt) * Math.min(1, dt * 10);
+      }
+    }
    draw(ts);
    advanceFx(dt);
    shake = Math.max(0, shake - dt * 40);
@@ -174,7 +191,31 @@
  function draw(t) {
    const meSnap = snap ? snap.players.find((p) => p.id === me.id) : null;
    if (!meSnap) {
-      painter.render(ctx, { W, H, t, me: { d: 0 }, trackLength: snap ? snap.trackLength : 23000, track, cars: [], fx: [], speedFactor: 0, shake: 0 });
+      // Toeschouwer (host): camera volgt de koploper (#1) live.
+      const leader = snap && snap.players.length
+        ? snap.players.slice().sort((a, b) => a.rank - b.rank)[0] : null;
+      const leadR = leader && rp[leader.id];
+      const camD = leader ? (leadR ? leadR.rd : leader.d) : 0;
+      const cars = [];
+      let leadSpeed = 0;
+      for (const key in rp) {
+        const o = rp[key];
+        const isFollow = !!leader && key === leader.id;
+        if (isFollow) leadSpeed = o.speed;
+        cars.push({
+          x: o.rx, d: o.rd, name: o.name, color: o.color,
+          boost: o.boost, shield: o.shield, slip: o.slip, finished: o.finished,
+          isMe: isFollow,
+          suffix: isFollow ? '  • koploper' : undefined,
+          steer: isFollow ? followTilt : 0,
+        });
+      }
+      painter.render(ctx, {
+        W, H, t, me: { d: camD },
+        trackLength: snap ? snap.trackLength : 23000, track, cars, fx,
+        speedFactor: leadSpeed / 380,
+        shake: 0,
+      });
      return;
    }
    const r = rp[me.id];
@@ -192,7 +233,7 @@
    painter.render(ctx, {
      W, H, t, me: { d: selfD },
      trackLength: snap.trackLength, track, cars, fx,
-      speedFactor: (meSnap.speed || 0) / 300,
+      speedFactor: (meSnap.speed || 0) / 380,
      shake,
    });
  }
@@ -215,10 +256,11 @@
      const rem = Math.max(0, Math.ceil((snap.countdownEndsAt - now) / 1000));
      $('cdNum').textContent = rem;
      updateBoard(rem);
+      updateKoplopers();
      return;
    }

-    if (phase === 'race' && meSnap) {
+    if (phase === 'race') {
      const rem = Math.max(0, snap.raceEndsAt - now);
      const tot = Math.ceil(rem / 1000);
      const min = Math.floor(tot / 60), sec = tot % 60;
@@ -226,12 +268,15 @@
      const txt = `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
      if (tEl.textContent !== txt) tEl.textContent = txt;
      tEl.classList.toggle('danger', tot <= 10);
-      $('hudSpeed').textContent = Math.round((meSnap.speed || 0) * 0.36) + ' km/u';
-      $('hudPos').textContent = '#' + meSnap.rank + ' / ' + snap.players.length;
-      $('hudDist').textContent = meSnap.d + ' m';
+      if (meSnap) {
+        $('hudSpeed').textContent = Math.round((meSnap.speed || 0) * 0.36) + ' km/u';
+        $('hudPos').textContent = '#' + meSnap.rank + ' / ' + snap.players.length;
+        $('hudDist').textContent = meSnap.d + ' m';
+      }
    }

    updateBoard(0);
+    updateKoplopers();
    updateLead();
  }

@@ -268,6 +313,40 @@
    }
  }

+  /* ---------- host/toeschouwer: koplopers live ---------- */
+  let lastKopSig = '';
+  function updateKoplopers() {
+    const panel = $('spectate');
+    if (!me.spectator) { panel.classList.add('hidden'); return; }
+    const inRace = phase === 'race';
+    panel.classList.toggle('hidden', !inRace);
+    $('board').classList.toggle('hidden', inRace); // toeschouwer ziet het grote paneel i.p.v. de lijst
+    if (!inRace || !snap) return;
+    const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
+    const cnt = sorted.length;
+    const top = sorted.slice(0, 5);
+    const remain = cnt - top.length;
+    const sig = cnt + '|' + top.map((p) => `${p.id}:${p.rank}:${p.d}:${p.finished}`).join(',');
+    if (sig === lastKopSig) return;
+    lastKopSig = sig;
+    $('kopCount').textContent = cnt === 1 ? '1 rijder op de baan' : cnt + ' rijders op de baan';
+    const ol = $('kopList');
+    ol.innerHTML = '';
+    top.forEach((p) => {
+      const li = document.createElement('li');
+      if (p.rank === 1) li.className = 'top';
+      li.innerHTML = `<span class="rk">${p.rank}</span><span class="dot" style="background:${p.color};color:${p.color}"></span><span class="nm">${esc(p.name)}</span><span class="st">${p.finished ? '🏁 ' + fmtTime(p.finishTime) : Math.round(p.d) + ' m'}</span>`;
+      ol.appendChild(li);
+    });
+    if (remain > 0) {
+      const li = document.createElement('li');
+      li.className = 'rest';
+      li.textContent = '… en ' + remain + ' anderen';
+      ol.appendChild(li);
+    }
+    $('kopFollow').textContent = sorted.length ? '📷 camera volgt ' + sorted[0].name + ' · #1' : '';
+  }
+
  let lastLead = '';
  function updateLead() {
    if (!snap || phase !== 'race' || snap.players.length === 0) {
@@ -319,37 +398,47 @@
  }


-  /* ---------- in-/uitvoer ---------- */
-  const touchesLeft = new Map();
-  const touchesRight = new Map();
-
-  canvas.addEventListener('pointerdown', (e) => {
-    canvas.setPointerCapture(e.pointerId);
-    const side = e.clientX < W / 2 ? 'L' : 'R';
-    (side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
-    updateSteerFromTouches();
-  });
-  canvas.addEventListener('pointermove', (e) => {
-    if (!touchesLeft.has(e.pointerId) && !touchesRight.has(e.pointerId)) return;
-    touchesLeft.delete(e.pointerId);
-    touchesRight.delete(e.pointerId);
-    const side = e.clientX < W / 2 ? 'L' : 'R';
-    (side === 'L' ? touchesLeft : touchesRight).set(e.pointerId, true);
-    updateSteerFromTouches();
-  });
-  const endTouch = (e) => { touchesLeft.delete(e.pointerId); touchesRight.delete(e.pointerId); updateSteerFromTouches(); };
-  canvas.addEventListener('pointerup', endTouch);
-  canvas.addEventListener('pointercancel', endTouch);
-
-  function updateSteerFromTouches() {
-    if (touchesRight.size > 0 && touchesLeft.size === 0) input.steer = 1;
-    else if (touchesLeft.size > 0 && touchesRight.size === 0) input.steer = -1;
-    else input.steer = 0;
+  /* ---------- in-/uitvoer: vinger volgen (geen vegen) ---------- */
+  // De auto rijdt meteen naar de horizontale plek waar je vinger op de baan
+  // staat en blijft daar staan als je loslaat. Pijltjestoetsen sturen klassiek.
+  let steerPointer = null; // id van de actieve vinger
+  const roadXFromClient = (clientX) => {
+    const roadW = Math.min(W * 0.88, 460);        // zelfde schaal als render.js
+    const roadLeft = (W - roadW) / 2;
+    return clamp((clientX - roadLeft) / roadW * ROAD_W, 30, ROAD_W - 30);
+  };
+  let lastTiltX = null;   // vorige vingerpositie, voor de kanteltilt
+  function tiltTarget() {
+    if (input.x != null) {
+      const tilt = lastTiltX == null ? 0 : clamp((input.x - lastTiltX) * 0.06, -1, 1);
+      lastTiltX = input.x;
+      return tilt;
+    }
+    lastTiltX = null;
+    return input.steer;
  }

+  canvas.addEventListener('pointerdown', (e) => {
+    if (steerPointer) return; // één vinger tegelijk
+    steerPointer = e.pointerId;
+    if (canvas.setPointerCapture) canvas.setPointerCapture(e.pointerId);
+    input.x = roadXFromClient(e.clientX);
+    input.steer = 0;
+  });
+  canvas.addEventListener('pointermove', (e) => {
+    if (steerPointer !== e.pointerId) return;
+    input.x = roadXFromClient(e.clientX);
+  });
+  const endFinger = (e) => {
+    if (steerPointer !== e.pointerId) return;
+    steerPointer = null; // laatste plek blijft vastgehouden (input.x)
+  };
+  canvas.addEventListener('pointerup', endFinger);
+  canvas.addEventListener('pointercancel', endFinger);
+
  window.addEventListener('keydown', (e) => {
-    if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') input.steer = -1;
-    if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') input.steer = 1;
+    if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') { input.steer = -1; input.x = null; }
+    if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') { input.steer = 1; input.x = null; }
    if (e.key.toLowerCase() === 's' && me.host && (phase === 'lobby' || phase === 'results')
        && document.activeElement !== $('nameInput')) {
      sendHostStart();
@@ -358,10 +447,10 @@
  window.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A' ||
        e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
-      if (touchesLeft.size === 0 && touchesRight.size === 0) input.steer = 0;
+      if (!steerPointer) { input.steer = 0; input.x = null; }
    }
  });
-  window.addEventListener('blur', () => { input.steer = 0; });
+  window.addEventListener('blur', () => { input.steer = 0; input.x = null; steerPointer = null; });

  function sendHostStart() {
    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'host_start' }));
@@ -370,7 +459,7 @@
  // input naar server
  setInterval(() => {
    if (ws && ws.readyState === 1 && me.id) {
-      ws.send(JSON.stringify({ type: 'input', steer: input.steer }));
+      ws.send(JSON.stringify({ type: 'input', steer: input.steer, x: input.x }));
    }
  }, 33);

@@ -20,7 +20,7 @@
      <div id="colors" class="colors"></div>
      <button id="joinBtn" class="btn">Aanmelden ▶</button>
      <p id="joinMsg" class="msg"></p>
-      <p class="hint">🕹️ Hou links of rechts van het scherm vast om te sturen, ontwijk pylonen &amp; olie, pak power-ups en word de snelste!</p>
+      <p class="hint">🕹️ Zet je vinger op de baan — de auto rijdt meteen naar die plek en blijft er staan. Ontwijk pylonen &amp; olie, pak power-ups en word de snelste!</p>
    </div>
  </section>

@@ -43,10 +43,16 @@
    </div>
    <div id="minimapWrap"><canvas id="minimap"></canvas></div>
    <div id="toasts"></div>
+    <div id="spectate" class="hidden">
+      <div class="spectate-head">🏆 KOPLOPERS</div>
+      <div id="kopCount" class="spectate-count"></div>
+      <ol id="kopList"></ol>
+      <div id="kopFollow" class="spectate-follow"></div>
+    </div>
    <div id="controls">
-      <div class="ctrl"><span class="arrow">◀</span> stuur</div>
+      <div class="ctrl"><span class="arrow">◀</span> volgen</div>
      <div class="tipzoom" id="tipZoom">🌐</div>
-      <div class="ctrl">stuur <span class="arrow">▶</span></div>
+      <div class="ctrl">volgen <span class="arrow">▶</span></div>
    </div>
  </section>

@@ -226,7 +226,7 @@ window.TurboPainter = (function () {
    ctx.fillStyle = p.isMe ? '#fff' : rgba('#eaf4ff', 0.92);
    ctx.shadowColor = '#000';
    ctx.shadowBlur = 4;
-    ctx.fillText(p.name + (p.isMe ? '  • jij' : ''), 0, -h * 0.62);
+    ctx.fillText(p.name + (p.suffix || (p.isMe ? '  • jij' : '')), 0, -h * 0.62);
    ctx.restore();
  }

@@ -195,6 +195,48 @@ input::placeholder { color: #667; }
 }
 #minimap { width: 100%; height: 100%; display: block; }

+/* ---- Host / toeschouwer: koploperspaneel ---- */
+body.spectator #hudSpeed,
+body.spectator #hudPos,
+body.spectator #hudDist,
+body.spectator #minimapWrap,
+body.spectator #controls { display: none; }
+
+#spectate {
+  position: absolute;
+  top: calc(86px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
+  width: min(300px, 86vw);
+  background: var(--card);
+  border: 1px solid var(--gold);
+  border-radius: 16px;
+  padding: 12px 14px;
+  text-align: center;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 217, 61, .18);
+}
+.spectate-head {
+  font-size: 14px; font-weight: 800; letter-spacing: 3px;
+  color: var(--gold); text-shadow: 0 0 14px rgba(255, 217, 61, .8);
+  margin-bottom: 2px;
+}
+.spectate-count { font-size: 11px; letter-spacing: 1.5px; color: var(--neon); margin-bottom: 8px; text-transform: uppercase; }
+.spectate-follow {
+  margin-top: 8px; font-size: 11.5px; letter-spacing: .4px;
+  color: var(--neon); text-shadow: 0 0 8px rgba(0, 240, 255, .5);
+}
+#kopList { list-style: none; }
+#kopList li {
+  display: flex; gap: 8px; align-items: center;
+  font-size: 14px; padding: 5px 6px; border-radius: 8px; color: #e6eeff;
+}
+#kopList li.top { background: rgba(255, 217, 61, .16); box-shadow: inset 0 0 0 1px rgba(255, 217, 61, .55); }
+#kopList li.rest { color: #8fa0d0; font-size: 12px; justify-content: center; padding-top: 4px; }
+#kopList .rk { width: 20px; text-align: right; color: #8fa0d0; font-weight: 800; font-variant-numeric: tabular-nums; }
+#kopList li.top .rk { color: var(--gold); }
+#kopList .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
+#kopList .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#kopList .st { font-size: 11.5px; color: #9fb0dd; font-variant-numeric: tabular-nums; }
+
+
 /* Toasts */
 #toasts { position: absolute; top: calc(170px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: 86%; }
 .toast {