fitst version
This commit is contained in:
martijn.diersmann@pm.me
@@ -0,0 +1,475 @@
|
||||
/* Turbo Race - client: netwerk, input, rendering, HUD */
|
||||
(function () {
|
||||
'use strict';
|
||||
const painter = window.TurboPainter;
|
||||
const ROAD_W = 420;
|
||||
const K = 0.32; // zelfde schaal als render.js
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const clamp = (n, lo, hi) => (n < lo ? lo : n > hi ? hi : n);
|
||||
|
||||
/* ---------- state ---------- */
|
||||
let ws = null;
|
||||
const me = { id: null, host: 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 };
|
||||
let visSteer = 0; // visuele stuursmoothing (alleen voor rendering)
|
||||
let fx = [];
|
||||
let shake = 0;
|
||||
let lastSent = 0;
|
||||
|
||||
const canvas = $('game');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const mm = $('minimap');
|
||||
const mmCtx = mm.getContext('2d');
|
||||
let W = 0, H = 0, DPR = 1;
|
||||
|
||||
function resize() {
|
||||
DPR = Math.min(window.devicePixelRatio || 1, 2);
|
||||
W = window.innerWidth; H = window.innerHeight;
|
||||
canvas.width = Math.round(W * DPR);
|
||||
canvas.height = Math.round(H * DPR);
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
|
||||
mm.width = Math.round(mm.clientWidth * DPR);
|
||||
mm.height = Math.round(mm.clientHeight * DPR);
|
||||
mmCtx.setTransform(DPR, 0, 0, DPR, 0, 0);
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
window.addEventListener('orientationchange', () => setTimeout(resize, 200));
|
||||
|
||||
/* ---------- kleurenpalet ---------- */
|
||||
const PALETTE = ['#ff3fa4', '#00f0ff', '#ffd93d', '#3dff88', '#ff7a1a', '#8f5bff', '#ff4d6d', '#4dffd6', '#ff9ff3', '#b3ff4d'];
|
||||
let chosenColor = PALETTE[0];
|
||||
(function initColors() {
|
||||
const box = $('colors');
|
||||
PALETTE.forEach((c) => {
|
||||
const s = document.createElement('button');
|
||||
s.type = 'button';
|
||||
s.className = 'swatch' + (c === chosenColor ? ' on' : '');
|
||||
s.style.background = c;
|
||||
s.onclick = () => {
|
||||
chosenColor = c;
|
||||
box.querySelectorAll('.swatch').forEach((el) => el.classList.remove('on'));
|
||||
s.classList.add('on');
|
||||
};
|
||||
box.appendChild(s);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ---------- verbinding ---------- */
|
||||
function hostToken() {
|
||||
try { return new URLSearchParams(location.search).get('host') || ''; } catch { return ''; }
|
||||
}
|
||||
|
||||
function connect() {
|
||||
const proto = location.protocol === 'https:' ? 'wss://' : 'ws://';
|
||||
ws = new WebSocket(proto + location.host + '/ws');
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({
|
||||
type: 'join', name: $('nameInput').value, color: chosenColor, hostToken: hostToken(),
|
||||
}));
|
||||
};
|
||||
ws.onmessage = (ev) => {
|
||||
let m; try { m = JSON.parse(ev.data); } catch { return; }
|
||||
handle(m);
|
||||
};
|
||||
ws.onclose = () => { if (phase !== 'results') $('dead').classList.remove('hidden'); };
|
||||
ws.onerror = () => {};
|
||||
}
|
||||
|
||||
$('joinBtn').onclick = () => connect();
|
||||
$('nameInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') connect(); });
|
||||
|
||||
/* ---------- message-handling ---------- */
|
||||
function handle(m) {
|
||||
switch (m.type) {
|
||||
case 'joined':
|
||||
me.id = m.id; me.host = !!m.host;
|
||||
me.name = m.self.name; me.color = m.self.color;
|
||||
snap = m.snapshot; track = m.track;
|
||||
applySnapshot(m.snapshot);
|
||||
$('join').classList.add('hidden');
|
||||
$('room').classList.remove('hidden');
|
||||
break;
|
||||
case 'snapshot':
|
||||
applySnapshot(m);
|
||||
break;
|
||||
case 'track':
|
||||
track = m.track;
|
||||
break;
|
||||
case 'fx':
|
||||
onFx(m.id, m.kind);
|
||||
break;
|
||||
case 'announce':
|
||||
toast(m.text, 'gold');
|
||||
break;
|
||||
case 'error':
|
||||
showJoinError(m.msg);
|
||||
break;
|
||||
case 'phase': // bevestiging; snapshot volgt zo
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- snapshot & interpolatie ---------- */
|
||||
let prevPhase = 'lobby';
|
||||
function applySnapshot(s) {
|
||||
snap = s;
|
||||
const newPhase = s.phase;
|
||||
const hard = (prevPhase !== newPhase) && (newPhase === 'race' || newPhase === 'lobby');
|
||||
const seen = new Set();
|
||||
for (const p of s.players) {
|
||||
seen.add(p.id);
|
||||
if (!rp[p.id]) {
|
||||
rp[p.id] = { rx: p.x, rd: p.d, name: p.name, color: p.color, boost: false, shield: false, slip: false, finished: false, rank: 0, speed: 0 };
|
||||
}
|
||||
if (hard) { rp[p.id].rx = p.x; rp[p.id].rd = p.d; }
|
||||
}
|
||||
for (const key in rp) if (!seen.has(key)) delete rp[key];
|
||||
prevPhase = newPhase;
|
||||
phase = newPhase;
|
||||
|
||||
if (phase === 'countdown') $('countdown').classList.remove('hidden');
|
||||
if (phase === 'race') { $('countdown').classList.add('hidden'); $('results').classList.add('hidden'); }
|
||||
if (phase === 'results') { $('countdown').classList.add('hidden'); buildResults(s); }
|
||||
if (phase === 'lobby') { $('results').classList.add('hidden'); $('countdown').classList.add('hidden'); }
|
||||
}
|
||||
|
||||
/* ---------- render-loop ---------- */
|
||||
let raf = 0, lastT = performance.now(), accHud = 0, accMinimap = 0;
|
||||
function frame(ts) {
|
||||
const dt = Math.min(0.05, (ts - lastT) / 1000);
|
||||
lastT = ts;
|
||||
accHud += dt; accMinimap += dt;
|
||||
|
||||
if (snap) {
|
||||
for (const p of snap.players) {
|
||||
const r = rp[p.id];
|
||||
if (!r) continue;
|
||||
const k = (p.id === me.id) ? (1 - Math.exp(-dt * 18)) : (1 - Math.exp(-dt * 7));
|
||||
r.rx += (p.x - r.rx) * k;
|
||||
r.rd += (p.d - r.rd) * k;
|
||||
r.name = p.name; r.color = p.color;
|
||||
r.boost = p.boost; r.shield = p.shield; r.slip = p.slip;
|
||||
r.finished = p.finished; r.speed = p.speed; r.rank = p.rank;
|
||||
}
|
||||
}
|
||||
|
||||
visSteer += (input.steer - visSteer) * Math.min(1, dt * 12);
|
||||
draw(ts);
|
||||
advanceFx(dt);
|
||||
shake = Math.max(0, shake - dt * 40);
|
||||
|
||||
if (accHud > 0.1) { accHud = 0; updateHud(); }
|
||||
if (accMinimap > 0.22) { accMinimap = 0; drawMinimap(); }
|
||||
|
||||
raf = requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
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 });
|
||||
return;
|
||||
}
|
||||
const r = rp[me.id];
|
||||
const selfD = r ? r.rd : meSnap.d;
|
||||
const cars = [];
|
||||
for (const key in rp) {
|
||||
const o = rp[key];
|
||||
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: key === me.id,
|
||||
steer: key === me.id ? visSteer : 0,
|
||||
});
|
||||
}
|
||||
painter.render(ctx, {
|
||||
W, H, t, me: { d: selfD },
|
||||
trackLength: snap.trackLength, track, cars, fx,
|
||||
speedFactor: (meSnap.speed || 0) / 300,
|
||||
shake,
|
||||
});
|
||||
}
|
||||
|
||||
function showJoinError(msg) {
|
||||
const el = $('joinMsg');
|
||||
el.textContent = msg || 'Kon niet aanmelden';
|
||||
el.className = 'msg err';
|
||||
}
|
||||
|
||||
|
||||
/* ---------- HUD & lijsten ---------- */
|
||||
let lastBoardSig = '';
|
||||
function updateHud() {
|
||||
if (!snap) return;
|
||||
const now = Date.now();
|
||||
const meSnap = snap.players.find((p) => p.id === me.id);
|
||||
|
||||
if (phase === 'countdown') {
|
||||
const rem = Math.max(0, Math.ceil((snap.countdownEndsAt - now) / 1000));
|
||||
$('cdNum').textContent = rem;
|
||||
updateBoard(rem);
|
||||
return;
|
||||
}
|
||||
|
||||
if (phase === 'race' && meSnap) {
|
||||
const rem = Math.max(0, snap.raceEndsAt - now);
|
||||
const tot = Math.ceil(rem / 1000);
|
||||
const min = Math.floor(tot / 60), sec = tot % 60;
|
||||
const tEl = $('hudTimer');
|
||||
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';
|
||||
}
|
||||
|
||||
updateBoard(0);
|
||||
updateLead();
|
||||
}
|
||||
|
||||
function updateBoard(remaining) {
|
||||
if (!snap) return;
|
||||
const inRace = phase === 'race' || phase === 'results';
|
||||
const head = inRace ? '🏁 WEDSTRIJD' : `👥 AANMELDERS (${snap.players.length}/${snap.maxPlayers})`;
|
||||
const sig = head + '|' + snap.players.map((p) => `${p.id}:${p.rank}:${p.d}`).join(',') + '|host' + me.host;
|
||||
if (sig === lastBoardSig) return;
|
||||
lastBoardSig = sig;
|
||||
$('boardHead').textContent = head;
|
||||
|
||||
const ol = $('boardList');
|
||||
ol.innerHTML = '';
|
||||
const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
for (const p of sorted) {
|
||||
const li = document.createElement('li');
|
||||
const cls = [];
|
||||
if (p.id === me.id) cls.push('me');
|
||||
if (inRace && p.rank === 1) cls.push('top');
|
||||
if (cls.length) li.className = cls.join(' ');
|
||||
if (inRace) {
|
||||
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>`;
|
||||
} else {
|
||||
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>`;
|
||||
}
|
||||
ol.appendChild(li);
|
||||
}
|
||||
if (me.host && !inRace) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'st';
|
||||
li.innerHTML = `<span class="nm" style="color:var(--gold)">👑 Jij bent host — druk op <b>S</b>${remaining != null ? ' (nog ' + remaining + 's voor start)' : ''}</span>`;
|
||||
ol.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
let lastLead = '';
|
||||
function updateLead() {
|
||||
if (!snap || phase !== 'race' || snap.players.length === 0) {
|
||||
if (lastLead !== '') { lastLead = ''; $('lead').classList.add('hidden'); }
|
||||
return;
|
||||
}
|
||||
const sorted = snap.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
const top = sorted[0];
|
||||
const key = top.id + top.d;
|
||||
if (key === lastLead) return;
|
||||
lastLead = key;
|
||||
$('leadText').innerHTML = `<span class="crown">👑</span> ${esc(top.name)} ligt AAN KOP`;
|
||||
$('lead').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function drawMinimap() {
|
||||
if (!snap || !track) return;
|
||||
const w = mm.clientWidth, h = mm.clientHeight;
|
||||
mmCtx.clearRect(0, 0, w, h);
|
||||
const total = snap.trackLength || 23000;
|
||||
const yFor = (d) => h - 3 - (d / total) * (h - 8);
|
||||
// finishlijn
|
||||
mmCtx.fillStyle = 'rgba(255,217,61,0.85)';
|
||||
mmCtx.fillRect(1, 2, w - 2, 2);
|
||||
for (const p of snap.players) {
|
||||
const yy = yFor(p.d);
|
||||
const isMe = p.id === me.id;
|
||||
const isTop = p.rank === 1;
|
||||
mmCtx.beginPath();
|
||||
mmCtx.arc(w / 2, yy, isTop ? 3 : 2.2, 0, 7);
|
||||
mmCtx.fillStyle = p.color;
|
||||
mmCtx.fill();
|
||||
if (isMe) {
|
||||
mmCtx.strokeStyle = '#fff';
|
||||
mmCtx.lineWidth = 1;
|
||||
mmCtx.beginPath(); mmCtx.arc(w / 2, yy, 4.2, 0, 7); mmCtx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fmtTime(ms) {
|
||||
const s = ms / 1000;
|
||||
const m = Math.floor(s / 60);
|
||||
const ss = Math.floor(s % 60);
|
||||
return `${String(m).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
|
||||
}
|
||||
function esc(str) {
|
||||
return String(str).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c]));
|
||||
}
|
||||
|
||||
|
||||
/* ---------- 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;
|
||||
}
|
||||
|
||||
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.toLowerCase() === 's' && me.host && (phase === 'lobby' || phase === 'results')
|
||||
&& document.activeElement !== $('nameInput')) {
|
||||
sendHostStart();
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
});
|
||||
window.addEventListener('blur', () => { input.steer = 0; });
|
||||
|
||||
function sendHostStart() {
|
||||
if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'host_start' }));
|
||||
}
|
||||
|
||||
// input naar server
|
||||
setInterval(() => {
|
||||
if (ws && ws.readyState === 1 && me.id) {
|
||||
ws.send(JSON.stringify({ type: 'input', steer: input.steer }));
|
||||
}
|
||||
}, 33);
|
||||
|
||||
/* ---------- fx & toasts ---------- */
|
||||
function onFx(id, kind) {
|
||||
const r = rp[id];
|
||||
if (!r) return;
|
||||
const meSnap = snap && snap.players.find((p) => p.id === me.id);
|
||||
const selfD = meSnap ? rp[me.id] ? rp[me.id].rd : meSnap.d : 0;
|
||||
const roadW = Math.min(W * 0.88, 460);
|
||||
const scaleX = roadW / ROAD_W;
|
||||
const carY = Math.min(H * 0.62, H - 140);
|
||||
const sx = (W - roadW) / 2 + r.rx * scaleX;
|
||||
const sy = carY - (r.rd - selfD) * K;
|
||||
const col = kind.indexOf('boost') >= 0 ? '#00f0ff' : kind.indexOf('shield') >= 0 ? '#3dff88'
|
||||
: kind.indexOf('pylon') >= 0 ? '#ffd93d' : '#ff4d6d';
|
||||
|
||||
if (kind.indexOf('hit') === 0) {
|
||||
burst(sx, sy, col, 14);
|
||||
burst(sx, sy, '#fff', 6);
|
||||
} else {
|
||||
pulseFx(sx, sy, col);
|
||||
burst(sx, sy, col, 12);
|
||||
}
|
||||
|
||||
if (id === me.id) {
|
||||
if (kind === 'hit:pylon') toast('💥 Je raakt een pylon!', '');
|
||||
else if (kind === 'hit:oil') toast('🌀 Olie! Je glijdt weg…', '');
|
||||
else if (kind === 'pickup:boost') toast('⚡ BOOST!', 'gold');
|
||||
else if (kind === 'pickup:shield') toast('🛡 Schild actief!', 'gold');
|
||||
if (kind.indexOf('hit') === 0) shake = 14;
|
||||
}
|
||||
}
|
||||
|
||||
function burst(sx, sy, color, n) {
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a = Math.random() * Math.PI * 2;
|
||||
const sp = 40 + Math.random() * 160;
|
||||
fx.push({
|
||||
kind: 'dot', sx, sy,
|
||||
vx: Math.cos(a) * sp, vy: Math.sin(a) * sp,
|
||||
size: 2 + Math.random() * 4,
|
||||
color, life: 0, maxLife: 0.4 + Math.random() * 0.4,
|
||||
});
|
||||
}
|
||||
}
|
||||
function pulseFx(sx, sy, color) {
|
||||
fx.push({ kind: 'pulse', sx, sy, vx: 0, vy: 0, size: 14, color, life: 0, maxLife: 0.5 });
|
||||
}
|
||||
function advanceFx(dt) {
|
||||
for (let i = fx.length - 1; i >= 0; i--) {
|
||||
const f = fx[i];
|
||||
f.life += dt;
|
||||
if (f.life >= f.maxLife) { fx.splice(i, 1); continue; }
|
||||
if (f.kind === 'dot') { f.sx += f.vx * dt; f.sy += f.vy * dt; f.vx *= 0.94; f.vy *= 0.94; }
|
||||
}
|
||||
}
|
||||
|
||||
function toast(text, cls) {
|
||||
const box = $('toasts');
|
||||
const el = document.createElement('div');
|
||||
el.className = 'toast' + (cls ? ' ' + cls : '');
|
||||
el.textContent = text;
|
||||
box.appendChild(el);
|
||||
setTimeout(() => el.remove(), 2600);
|
||||
while (box.children.length > 3) box.firstChild.remove();
|
||||
}
|
||||
|
||||
/* ---------- uitslag ---------- */
|
||||
function buildResults(s) {
|
||||
$('results').classList.remove('hidden');
|
||||
const sorted = s.players.slice().sort((a, b) => a.rank - b.rank);
|
||||
const podium = $('podium');
|
||||
podium.innerHTML = '';
|
||||
const medals = { 1: '🥇', 2: '🥈', 3: '🥉' };
|
||||
for (const p of sorted.slice(0, 3)) {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'pod g' + p.rank;
|
||||
d.innerHTML = `<span class="medal">${medals[p.rank]}</span><div class="pname">${esc(p.name)}</div>`;
|
||||
podium.appendChild(d);
|
||||
}
|
||||
const ol = $('resultsList');
|
||||
ol.innerHTML = '';
|
||||
sorted.forEach((p) => {
|
||||
const li = document.createElement('li');
|
||||
if (p.id === me.id) li.className = 'me';
|
||||
li.innerHTML = `<span class="rk">${p.rank}</span><span class="nm">${esc(p.name)}</span><span class="tm">${p.finished ? fmtTime(p.finishTime) : 'niet gefinisht · ' + Math.round(p.d) + ' m'}</span>`;
|
||||
ol.appendChild(li);
|
||||
});
|
||||
$('resSub').textContent = me.host
|
||||
? 'Druk op S om een nieuwe race te starten (of gebruik de knop).'
|
||||
: 'De host kan een nieuwe race starten.';
|
||||
}
|
||||
|
||||
$('againBtn').onclick = () => {
|
||||
if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'ready_again' }));
|
||||
};
|
||||
|
||||
/* ---------- start ---------- */
|
||||
resize();
|
||||
requestAnimationFrame(frame);
|
||||
})();
|
||||
Reference in New Issue
Block a user