No round finished yet.
+ Start a round to generate a combat report, then save it into recent matches.
+ `;
+ return;
+ }
+
+ const s = state.matchSummary;
+ summaryPanel.className = 'summary-state ready';
+ summaryPanel.innerHTML = `
+
+
+
${s.outcome === 'victory' ? 'Squad cleared' : s.outcome === 'timeout' ? 'Timer expired' : 'Operator down'}
+
${s.weapon_name} • ${s.player_name}
+
+
${s.outcome.toUpperCase()}
+
+
Score${s.score}
+
Kills${s.kills}
+
Accuracy${s.shots_fired ? ((s.shots_hit / s.shots_fired) * 100).toFixed(1) : '0.0'}%
+
Duration${s.duration_seconds}s
+
${savedMatch ? `Saved as match #${savedMatch.id}.` : 'Use “Save result” to store this run.'}
+ `;
+ }
+
+ function finishRound(reason) {
+ if (!state.running || state.roundEnded || !state.player) return;
+ state.running = false;
+ state.roundEnded = true;
+ state.endTime = performance.now();
+ state.matchSummary = getScoreSnapshot();
+ saveButton.disabled = false;
+ updateHud();
+ updateSummary();
+ const messages = {
+ victory: 'Victory. Arena cleared.',
+ timeout: 'Round complete. Timer expired.',
+ defeat: 'Round failed. Restart to try again.'
+ };
+ state.message = messages[reason] || 'Round complete.';
+ state.noticeUntil = performance.now() + 3200;
+ showToast(messages[reason] || 'Round complete.');
+ }
+
+ function shoot(now) {
+ if (!state.running || !state.player) return;
+ if (now < state.nextShotAt) return;
+ if (now < state.reloadingUntil) return;
+ if (state.player.ammo <= 0) {
+ reload();
+ return;
+ }
+
+ state.player.ammo -= 1;
+ state.nextShotAt = now + state.weapon.fireRate;
+ state.recoil = Math.min(0.11, state.recoil + state.weapon.recoil);
+ state.flashUntil = now + 55;
+ state.player.shotsFired = (state.player.shotsFired || 0) + 1;
+
+ const pellets = state.weapon.pellets || 1;
+ for (let i = 0; i < pellets; i += 1) {
+ const offset = randomBetween(-state.weapon.spread, state.weapon.spread);
+ const rayAngle = state.player.angle + offset;
+ let bestTarget = null;
+ let bestDistance = Infinity;
+
+ state.bots.forEach((bot) => {
+ const dx = bot.x - state.player.x;
+ const dy = bot.y - state.player.y;
+ const dist = Math.hypot(dx, dy);
+ if (dist > state.weapon.range) return;
+ const diff = Math.abs(normalizeAngle(Math.atan2(dy, dx) - rayAngle));
+ const threshold = Math.atan2(bot.radius, Math.max(dist, 1)) * 1.2 + state.weapon.spread * 0.4;
+ if (diff < threshold && dist < bestDistance) {
+ bestTarget = bot;
+ bestDistance = dist;
+ }
+ });
+
+ if (bestTarget) {
+ bestTarget.hp -= state.weapon.damage;
+ bestTarget.hurtUntil = now + 90;
+ state.player.shotsHit = (state.player.shotsHit || 0) + 1;
+ if (bestTarget.hp <= 0) {
+ state.bots = state.bots.filter((bot) => bot !== bestTarget);
+ state.message = 'Target down.';
+ state.noticeUntil = now + 900;
+ if (state.bots.length === 0) {
+ finishRound('victory');
+ }
+ }
+ }
+ }
+
+ updateHud();
+ }
+
+ function reload() {
+ if (!state.player || !state.running) return;
+ if (state.player.ammo >= state.weapon.magSize) return;
+ if (state.player.reserve <= 0) return;
+ if (performance.now() < state.reloadingUntil) return;
+ state.reloadingUntil = performance.now() + state.weapon.reloadTime;
+ state.message = 'Reloading…';
+ state.noticeUntil = performance.now() + 1000;
+ showToast('Reloading.');
+ }
+
+ function completeReload(now) {
+ if (!state.player || !state.running) return;
+ if (state.reloadingUntil && now >= state.reloadingUntil) {
+ const needed = state.weapon.magSize - state.player.ammo;
+ const transfer = Math.min(needed, state.player.reserve);
+ state.player.ammo += transfer;
+ state.player.reserve -= transfer;
+ state.reloadingUntil = 0;
+ updateHud();
+ }
+ }
+
+ function getBotAvoidance(bot) {
+ let avoidX = 0;
+ let avoidY = 0;
+
+ state.bots.forEach((other) => {
+ if (other === bot) return;
+ const dx = bot.x - other.x;
+ const dy = bot.y - other.y;
+ const dist = Math.hypot(dx, dy) || 1;
+ const desired = bot.radius + other.radius + 34;
+ if (dist < desired) {
+ const push = (desired - dist) / desired;
+ avoidX += (dx / dist) * push;
+ avoidY += (dy / dist) * push;
+ }
+ });
+
+ state.props.forEach((prop) => {
+ const dx = bot.x - prop.x;
+ const dy = bot.y - prop.y;
+ const dist = Math.hypot(dx, dy) || 1;
+ const desired = prop.size * 0.85 + bot.radius + 36;
+ if (dist < desired) {
+ const push = (desired - dist) / desired;
+ avoidX += (dx / dist) * push * 1.35;
+ avoidY += (dy / dist) * push * 1.35;
+ }
+ });
+
+ return { x: avoidX, y: avoidY };
+ }
+
+ function getPrimaryThreat() {
+ if (!state.player || !state.bots.length) return null;
+ let best = null;
+ let bestScore = -Infinity;
+ const centerX = canvas.width * 0.5;
+
+ state.bots.forEach((bot) => {
+ const projection = projectObject(bot);
+ if (!projection) return;
+ const screenOffset = Math.abs(projection.screenX - centerX) / centerX;
+ const rangeFactor = 1 - clamp(projection.distance / Math.max(state.weapon.range, 1), 0, 1);
+ const score = (1 - screenOffset) * 0.72 + rangeFactor * 0.28;
+ if (score > bestScore) {
+ bestScore = score;
+ best = { bot, projection, score };
+ }
+ });
+
+ return best;
+ }
+
+ function attemptAutoFire(now) {
+ if (!state.running || !state.player) return;
+ if (!(state.mouseTriggerHeld || state.spaceTriggerHeld)) return;
+ if (!pointer.active && !state.spaceTriggerHeld) return;
+ shoot(now);
+ }
+
+ function updateBots(delta, now) {
+ if (!state.player) return;
+ state.bots.forEach((bot) => {
+ const dx = state.player.x - bot.x;
+ const dy = state.player.y - bot.y;
+ const dist = Math.hypot(dx, dy);
+ const targetAngleToPlayer = Math.atan2(dy, dx);
+ const dirX = dx / (dist || 1);
+ const dirY = dy / (dist || 1);
+ const sideX = -dirY;
+ const sideY = dirX;
+ const avoidance = getBotAvoidance(bot);
+
+ bot.attackCooldown -= delta;
+ bot.turnTimer -= delta;
+ bot.strafeTimer -= delta;
+ bot.dodgeCooldown -= delta;
+ let targetAngle = bot.wanderAngle;
+ let moveX = 0;
+ let moveY = 0;
+ let speedFactor = 0.5;
+
+ if (dist < 620) {
+ if (bot.strafeTimer <= 0) {
+ bot.strafeTimer = randomBetween(0.45, 1.25);
+ bot.strafeDir = Math.random() < 0.5 ? -1 : 1;
+ }
+
+ let forwardBias = 0;
+ if (dist > bot.preferredRange + 65) {
+ forwardBias = 1;
+ bot.state = 'chase';
+ } else if (dist < bot.preferredRange - 35) {
+ forwardBias = -0.78;
+ bot.state = 'retreat';
+ } else {
+ forwardBias = 0.18;
+ bot.state = 'strafe';
+ }
+
+ let strafeBias = bot.strafeDir * (dist < 300 ? 0.92 : 0.6);
+ if (bot.dodgeCooldown <= 0 && dist < 320) {
+ bot.dodgeCooldown = randomBetween(1.1, 2.1);
+ bot.strafeDir = Math.random() < 0.5 ? -1 : 1;
+ strafeBias = bot.strafeDir * 1.35;
+ bot.state = 'dodge';
+ }
+
+ moveX = dirX * forwardBias + sideX * strafeBias + avoidance.x * 1.8;
+ moveY = dirY * forwardBias + sideY * strafeBias + avoidance.y * 1.8;
+ speedFactor = bot.state === 'dodge' ? 1.18 : dist > bot.preferredRange ? 1.02 : 0.88;
+ targetAngle = targetAngleToPlayer;
+ } else {
+ bot.state = 'patrol';
+ if (bot.turnTimer <= 0) {
+ bot.turnTimer = randomBetween(0.8, 2.4);
+ bot.wanderAngle += randomBetween(-1.15, 1.15);
+ }
+ moveX = Math.cos(bot.wanderAngle) * 0.65 + avoidance.x * 1.4;
+ moveY = Math.sin(bot.wanderAngle) * 0.65 + avoidance.y * 1.4;
+ speedFactor = 0.42;
+ targetAngle = bot.wanderAngle;
+ }
+
+ const currentTerrain = bot.terrainHeight ?? terrainHeightAt(bot.x, bot.y);
+ const moveLength = Math.hypot(moveX, moveY) || 1;
+ const intendedSpeed = bot.speed * bot.aggression * speedFactor;
+ const trialX = bot.x + (moveX / moveLength) * intendedSpeed * delta;
+ const trialY = bot.y + (moveY / moveLength) * intendedSpeed * delta;
+ const nextTerrain = terrainHeightAt(trialX, trialY);
+ const climbDelta = nextTerrain - currentTerrain;
+ const slopeFactor = climbDelta > 0 ? clamp(1 - climbDelta / 150, 0.7, 1) : clamp(1 + Math.abs(climbDelta) / 320, 1, 1.06);
+
+ bot.x += (moveX / moveLength) * intendedSpeed * slopeFactor * delta;
+ bot.y += (moveY / moveLength) * intendedSpeed * slopeFactor * delta;
+
+ if (bot.x < 80 || bot.x > WORLD.width - 80) bot.wanderAngle = Math.PI - bot.wanderAngle;
+ if (bot.y < 80 || bot.y > WORLD.height - 80) bot.wanderAngle = -bot.wanderAngle;
+ bot.x = clamp(bot.x, 80, WORLD.width - 80);
+ bot.y = clamp(bot.y, 80, WORLD.height - 80);
+ bot.terrainHeight = mix(currentTerrain, terrainHeightAt(bot.x, bot.y), Math.min(1, delta * 7));
+ bot.angle = normalizeAngle(bot.angle + normalizeAngle(targetAngle - bot.angle) * Math.min(1, delta * 8.4));
+
+ const aimError = Math.abs(normalizeAngle(targetAngleToPlayer - bot.angle));
+ const canShoot = dist < 320 && aimError < 0.44;
+ if (canShoot && bot.attackCooldown <= 0 && state.running) {
+ const damage = randomBetween(4, 9);
+ state.player.health = clamp(state.player.health - damage, 0, 100);
+ state.player.damageTaken += damage;
+ bot.attackCooldown = randomBetween(0.42, 0.95);
+ bot.shootFlashUntil = now + 90;
+ state.message = bot.state === 'dodge' ? 'Enemy strafe fire incoming.' : 'Taking fire.';
+ state.noticeUntil = now + 700;
+ updateHud();
+ if (state.player.health <= 0) {
+ finishRound('defeat');
+ }
+ }
+ });
+ }
+
+ function updatePlayer(delta) {
+ if (!state.player || !state.running) return;
+ const rotationSpeed = 2.2;
+ const pitchSpeed = 1.55;
+ if (keys.ArrowLeft) state.player.angle -= rotationSpeed * delta;
+ if (keys.ArrowRight) state.player.angle += rotationSpeed * delta;
+ if (keys.ArrowUp) state.player.pitch = clamp(state.player.pitch + pitchSpeed * delta, -MAX_PITCH, MAX_PITCH);
+ if (keys.ArrowDown) state.player.pitch = clamp(state.player.pitch - pitchSpeed * delta, -MAX_PITCH, MAX_PITCH);
+
+ let moveX = 0;
+ let moveY = 0;
+ const forwardX = Math.cos(state.player.angle);
+ const forwardY = Math.sin(state.player.angle);
+ const sideX = Math.cos(state.player.angle + Math.PI / 2);
+ const sideY = Math.sin(state.player.angle + Math.PI / 2);
+
+ if (keys.KeyW) {
+ moveX += forwardX;
+ moveY += forwardY;
+ }
+ if (keys.KeyS) {
+ moveX -= forwardX;
+ moveY -= forwardY;
+ }
+ if (keys.KeyA) {
+ moveX -= sideX;
+ moveY -= sideY;
+ }
+ if (keys.KeyD) {
+ moveX += sideX;
+ moveY += sideY;
+ }
+
+ const length = Math.hypot(moveX, moveY);
+ if (length > 0) {
+ const currentTerrain = state.player.terrainHeight ?? terrainHeightAt(state.player.x, state.player.y);
+ const stepX = (moveX / length) * state.player.speed * delta;
+ const stepY = (moveY / length) * state.player.speed * delta;
+ const trialX = clamp(state.player.x + stepX, 70, WORLD.width - 70);
+ const trialY = clamp(state.player.y + stepY, 70, WORLD.height - 70);
+ const nextTerrain = terrainHeightAt(trialX, trialY);
+ const climbDelta = nextTerrain - currentTerrain;
+ const slopeFactor = climbDelta > 0 ? clamp(1 - climbDelta / 160, 0.68, 1) : clamp(1 + Math.abs(climbDelta) / 340, 1, 1.08);
+
+ state.player.x = clamp(state.player.x + stepX * slopeFactor, 70, WORLD.width - 70);
+ state.player.y = clamp(state.player.y + stepY * slopeFactor, 70, WORLD.height - 70);
+ state.player.terrainHeight = mix(currentTerrain, terrainHeightAt(state.player.x, state.player.y), Math.min(1, delta * 8));
+ } else {
+ state.player.terrainHeight = mix(state.player.terrainHeight ?? terrainHeightAt(state.player.x, state.player.y), terrainHeightAt(state.player.x, state.player.y), Math.min(1, delta * 5));
+ }
+ }
+
+ function drawBackground(width, height) {
+ ctx.clearRect(0, 0, width, height);
+ const view = getViewMetrics();
+ const horizonY = view.horizonY;
+ const floorY = view.floorY;
+
+ const skyGradient = ctx.createLinearGradient(0, 0, 0, horizonY);
+ skyGradient.addColorStop(0, '#67b7ff');
+ skyGradient.addColorStop(0.52, '#8fd3ff');
+ skyGradient.addColorStop(1, '#d8f2ff');
+ ctx.fillStyle = skyGradient;
+ ctx.fillRect(0, 0, width, horizonY);
+
+ const sunX = width * 0.82;
+ const sunY = horizonY * 0.25;
+ const sunGlow = ctx.createRadialGradient(sunX, sunY, 8, sunX, sunY, 86);
+ sunGlow.addColorStop(0, 'rgba(255, 244, 167, 0.95)');
+ sunGlow.addColorStop(0.45, 'rgba(255, 225, 124, 0.42)');
+ sunGlow.addColorStop(1, 'rgba(255, 225, 124, 0)');
+ ctx.fillStyle = sunGlow;
+ ctx.beginPath();
+ ctx.arc(sunX, sunY, 86, 0, Math.PI * 2);
+ ctx.fill();
+
+ const waterGradient = ctx.createLinearGradient(0, horizonY - 16, 0, floorY - 8);
+ waterGradient.addColorStop(0, '#7fd7e6');
+ waterGradient.addColorStop(1, '#4aa8bc');
+ ctx.fillStyle = waterGradient;
+ ctx.fillRect(0, horizonY - 8, width, Math.max(12, floorY - horizonY - 22));
+
+ const farHillLayers = [
+ { base: horizonY + 8, ampA: 16, ampB: 11, freqA: 170, freqB: 95, color: '#7dbb78' },
+ { base: horizonY + 36, ampA: 22, ampB: 16, freqA: 138, freqB: 82, color: '#5e9d57' },
+ { base: horizonY + 74, ampA: 28, ampB: 18, freqA: 116, freqB: 70, color: '#4d8447' }
+ ];
+
+ farHillLayers.forEach((layer) => {
+ ctx.fillStyle = layer.color;
+ ctx.beginPath();
+ ctx.moveTo(0, height);
+ for (let x = 0; x <= width; x += 22) {
+ const ridgeY = layer.base - Math.sin(x / layer.freqA) * layer.ampA - Math.cos((x + view.elevation * 5) / layer.freqB) * layer.ampB;
+ ctx.lineTo(x, ridgeY);
+ }
+ ctx.lineTo(width, height);
+ ctx.closePath();
+ ctx.fill();
+ });
+
+ const grassGradient = ctx.createLinearGradient(0, floorY - 10, 0, height);
+ grassGradient.addColorStop(0, '#8fd162');
+ grassGradient.addColorStop(0.42, '#5fb141');
+ grassGradient.addColorStop(1, '#2f6d26');
+ ctx.fillStyle = grassGradient;
+ ctx.fillRect(0, floorY - 10, width, height - floorY + 10);
+
+ ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+ ctx.lineWidth = 1.3;
+ for (let i = 0; i < 7; i += 1) {
+ const stripeY = floorY + i * 38;
+ const stripeCurve = Math.sin((i + 1) * 0.7 + view.elevation * 0.015) * 28;
+ ctx.beginPath();
+ ctx.moveTo(0, stripeY + stripeCurve);
+ ctx.quadraticCurveTo(width * 0.45, stripeY - 18, width, stripeY + 10 - stripeCurve * 0.2);
+ ctx.stroke();
+ }
+
+ ctx.fillStyle = 'rgba(255,255,255,0.45)';
+ [[0.18, 0.16, 0.11], [0.54, 0.22, 0.14], [0.72, 0.11, 0.1]].forEach(([x, y, s]) => {
+ const cloudX = width * x;
+ const cloudY = horizonY * y + 18;
+ ctx.beginPath();
+ ctx.ellipse(cloudX, cloudY, width * s * 0.34, 18, 0, 0, Math.PI * 2);
+ ctx.ellipse(cloudX + 28, cloudY - 8, width * s * 0.24, 15, 0, 0, Math.PI * 2);
+ ctx.ellipse(cloudX - 26, cloudY - 4, width * s * 0.21, 13, 0, 0, Math.PI * 2);
+ ctx.fill();
+ });
+ }
+
+ function projectObject(obj) {
+ const dx = obj.x - state.player.x;
+ const dy = obj.y - state.player.y;
+ const distanceToPlayer = Math.hypot(dx, dy);
+ const relAngle = normalizeAngle(Math.atan2(dy, dx) - state.player.angle);
+ if (distanceToPlayer < 1 || Math.abs(relAngle) > FOV * 0.75) return null;
+ const perspective = Math.tan(relAngle) / Math.tan(FOV / 2);
+ const screenX = canvas.width * 0.5 + perspective * canvas.width * 0.5;
+ const view = getViewMetrics();
+ const objectTerrain = obj.terrainHeight ?? terrainHeightAt(obj.x, obj.y);
+ const playerTerrain = state.player?.terrainHeight ?? terrainHeightAt(state.player.x, state.player.y);
+ const elevationDelta = objectTerrain - playerTerrain;
+ const verticalFactor = clamp(540 / Math.max(distanceToPlayer, 120), 0.24, 1.7);
+ const floorY = view.floorY - elevationDelta * verticalFactor;
+ const size = clamp((32000 / distanceToPlayer) * (1 + elevationDelta / 1400), 28, 360);
+ return { screenX, size, distance: distanceToPlayer, relAngle, floorY, elevationDelta };
+ }
+
+ function drawProps() {
+ const projected = state.props
+ .map((prop) => ({ prop, p: projectObject(prop) }))
+ .filter((item) => item.p)
+ .sort((a, b) => b.p.distance - a.p.distance);
+
+ projected.forEach(({ prop, p }) => {
+ const floorY = p.floorY;
+ if (prop.type === 'pine') {
+ const trunkHeight = p.size * 0.34;
+ const crownHeight = p.size * 0.82;
+ const crownWidth = p.size * 0.58;
+ drawGroundShadow(p.screenX, floorY + p.size * 0.05, p.size * 0.2, p.size * 0.06, 0.18);
+ ctx.fillStyle = '#6b4f2a';
+ ctx.fillRect(p.screenX - p.size * 0.05, floorY - trunkHeight, p.size * 0.1, trunkHeight);
+ ctx.fillStyle = '#205e2b';
+ ctx.beginPath();
+ ctx.moveTo(p.screenX, floorY - crownHeight);
+ ctx.lineTo(p.screenX - crownWidth * 0.55, floorY - trunkHeight * 0.32);
+ ctx.lineTo(p.screenX + crownWidth * 0.55, floorY - trunkHeight * 0.32);
+ ctx.closePath();
+ ctx.fill();
+ ctx.fillStyle = '#2d7a33';
+ ctx.beginPath();
+ ctx.moveTo(p.screenX, floorY - crownHeight * 0.74);
+ ctx.lineTo(p.screenX - crownWidth * 0.42, floorY - trunkHeight * 0.04);
+ ctx.lineTo(p.screenX + crownWidth * 0.42, floorY - trunkHeight * 0.04);
+ ctx.closePath();
+ ctx.fill();
+ } else {
+ const rockWidth = p.size * 0.62;
+ const rockHeight = p.size * 0.4;
+ const rockY = floorY - rockHeight;
+ const rockGradient = ctx.createLinearGradient(p.screenX, rockY, p.screenX, floorY);
+ rockGradient.addColorStop(0, '#94a3b8');
+ rockGradient.addColorStop(1, '#475569');
+ drawGroundShadow(p.screenX, floorY + p.size * 0.04, rockWidth * 0.62, p.size * 0.06, 0.18);
+ ctx.fillStyle = rockGradient;
+ ctx.beginPath();
+ ctx.moveTo(p.screenX - rockWidth * 0.52, floorY);
+ ctx.quadraticCurveTo(p.screenX - rockWidth * 0.66, rockY + rockHeight * 0.44, p.screenX - rockWidth * 0.22, rockY + rockHeight * 0.08);
+ ctx.quadraticCurveTo(p.screenX - rockWidth * 0.02, rockY - rockHeight * 0.06, p.screenX + rockWidth * 0.2, rockY + rockHeight * 0.04);
+ ctx.quadraticCurveTo(p.screenX + rockWidth * 0.68, rockY + rockHeight * 0.28, p.screenX + rockWidth * 0.52, floorY);
+ ctx.closePath();
+ ctx.fill();
+ }
+ });
+ }
+
+ function drawLimb(x1, y1, x2, y2, width, color) {
+ ctx.strokeStyle = color;
+ ctx.lineWidth = width;
+ ctx.lineCap = 'round';
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+ }
+
+ function drawGroundShadow(x, y, rx, ry, alpha = 0.2) {
+ ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
+ ctx.beginPath();
+ ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ function drawBots(now) {
+ const projected = state.bots
+ .map((bot) => ({ bot, p: projectObject(bot) }))
+ .filter((item) => item.p)
+ .sort((a, b) => b.p.distance - a.p.distance);
+
+ projected.forEach(({ bot, p }) => {
+ const floorY = p.floorY;
+ const scale = bot.bodyScale || 1;
+ const headRadius = p.size * 0.1 * scale;
+ const shoulderY = floorY - p.size * 0.46 * scale;
+ const torsoHeight = p.size * 0.28 * scale;
+ const torsoWidth = p.size * 0.23 * scale;
+ const hipY = shoulderY + torsoHeight * 0.92;
+ const movingAggressively = ['chase', 'strafe', 'dodge', 'retreat'].includes(bot.state);
+ const stride = Math.sin(now / (movingAggressively ? 88 : 148) + bot.strideOffset) * p.size * (bot.state === 'dodge' ? 0.11 : movingAggressively ? 0.07 : 0.04);
+ const facing = Math.sin(bot.angle - state.player.angle);
+ const centerX = p.screenX + facing * p.size * 0.04;
+ const legSpread = p.size * 0.08;
+ const footY = floorY + p.size * 0.12;
+ const leftFootX = centerX - legSpread - stride;
+ const rightFootX = centerX + legSpread + stride;
+ const legWidth = Math.max(4, p.size * 0.05);
+ const armWidth = Math.max(4, p.size * 0.045);
+ const hurt = now < bot.hurtUntil;
+ const skinTone = bot.silhouette?.skin || '#d6a07a';
+ const jacket = hurt ? '#fca5a5' : (bot.silhouette?.jacket || '#d9685f');
+ const jacketAccent = hurt ? '#ef4444' : (bot.silhouette?.accent || '#7f1d1d');
+ const pants = hurt ? '#7f1d1d' : (bot.silhouette?.pants || '#1f2937');
+ const headY = shoulderY - headRadius * 0.62;
+ const aimDirX = Math.cos(bot.angle) * p.size * 0.26;
+ const aimDirY = Math.sin(bot.angle) * p.size * 0.08;
+ const rifleBaseX = centerX + torsoWidth * 0.12;
+ const rifleBaseY = shoulderY + torsoHeight * 0.42;
+ const muzzleX = rifleBaseX + aimDirX;
+ const muzzleY = rifleBaseY + aimDirY;
+ const leftHandX = rifleBaseX - torsoWidth * 0.36;
+ const leftHandY = rifleBaseY + torsoHeight * 0.14;
+ const rightHandX = rifleBaseX + torsoWidth * 0.14;
+ const rightHandY = rifleBaseY - torsoHeight * 0.04;
+
+ drawGroundShadow(centerX, footY + p.size * 0.02, p.size * 0.18, p.size * 0.05, 0.18);
+ drawLimb(centerX - legSpread * 0.45, hipY, leftFootX, footY, legWidth, pants);
+ drawLimb(centerX + legSpread * 0.45, hipY, rightFootX, footY, legWidth, pants);
+ drawLimb(leftFootX - p.size * 0.02, footY, leftFootX + p.size * 0.03, footY, Math.max(4, p.size * 0.042), '#020617');
+ drawLimb(rightFootX - p.size * 0.02, footY, rightFootX + p.size * 0.03, footY, Math.max(4, p.size * 0.042), '#020617');
+
+ const torsoGradient = ctx.createLinearGradient(centerX, shoulderY, centerX, shoulderY + torsoHeight);
+ torsoGradient.addColorStop(0, jacket);
+ torsoGradient.addColorStop(1, jacketAccent);
+ ctx.fillStyle = torsoGradient;
+ ctx.fillRect(centerX - torsoWidth / 2, shoulderY, torsoWidth, torsoHeight);
+ ctx.fillStyle = 'rgba(255,255,255,0.14)';
+ ctx.fillRect(centerX - torsoWidth * 0.18, shoulderY + torsoHeight * 0.18, torsoWidth * 0.36, torsoHeight * 0.3);
+ ctx.strokeStyle = 'rgba(255,255,255,0.16)';
+ ctx.lineWidth = Math.max(1, p.size * 0.008);
+ ctx.strokeRect(centerX - torsoWidth / 2, shoulderY, torsoWidth, torsoHeight);
+
+ drawLimb(centerX - torsoWidth * 0.42, shoulderY + torsoHeight * 0.22, leftHandX, leftHandY, armWidth, jacket);
+ drawLimb(centerX + torsoWidth * 0.38, shoulderY + torsoHeight * 0.18, rightHandX, rightHandY, armWidth, jacket);
+
+ ctx.fillStyle = skinTone;
+ ctx.beginPath();
+ ctx.arc(leftHandX, leftHandY, Math.max(3, p.size * 0.03), 0, Math.PI * 2);
+ ctx.fill();
+ ctx.beginPath();
+ ctx.arc(rightHandX, rightHandY, Math.max(3, p.size * 0.03), 0, Math.PI * 2);
+ ctx.fill();
+
+ ctx.fillStyle = skinTone;
+ ctx.beginPath();
+ ctx.arc(centerX, headY, headRadius, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = '#0f172a';
+ ctx.beginPath();
+ ctx.arc(centerX, headY - headRadius * 0.18, headRadius * 0.98, Math.PI, Math.PI * 2);
+ ctx.fill();
+ ctx.fillStyle = 'rgba(255,255,255,0.18)';
+ ctx.fillRect(centerX - headRadius * 0.56, headY - headRadius * 0.12, headRadius * 1.12, headRadius * 0.2);
+ ctx.fillStyle = '#475569';
+ ctx.fillRect(centerX - torsoWidth * 0.12, shoulderY - headRadius * 0.18, torsoWidth * 0.24, headRadius * 0.3);
+
+ ctx.strokeStyle = '#020617';
+ ctx.lineWidth = Math.max(4, p.size * 0.055);
+ ctx.beginPath();
+ ctx.moveTo(rifleBaseX - torsoWidth * 0.42, rifleBaseY + torsoHeight * 0.08);
+ ctx.lineTo(muzzleX, muzzleY);
+ ctx.stroke();
+ ctx.strokeStyle = '#64748b';
+ ctx.lineWidth = Math.max(3, p.size * 0.03);
+ ctx.beginPath();
+ ctx.moveTo(rifleBaseX - torsoWidth * 0.04, rifleBaseY - torsoHeight * 0.04);
+ ctx.lineTo(rifleBaseX + torsoWidth * 0.34, rifleBaseY + torsoHeight * 0.02);
+ ctx.stroke();
+
+ if (now < bot.shootFlashUntil) {
+ ctx.fillStyle = '#fde68a';
+ ctx.beginPath();
+ ctx.arc(muzzleX, muzzleY, p.size * 0.06, 0, Math.PI * 2);
+ ctx.fill();
+ }
+
+ const hpWidth = torsoWidth * 1.2;
+ ctx.fillStyle = 'rgba(0,0,0,0.35)';
+ ctx.fillRect(centerX - hpWidth / 2, headY - headRadius - 16, hpWidth, 5);
+ ctx.fillStyle = '#34d399';
+ ctx.fillRect(centerX - hpWidth / 2, headY - headRadius - 16, hpWidth * clamp(bot.hp / 95, 0, 1), 5);
+ });
+ }
+
+ function drawWeapon(now) {
+ const width = canvas.width;
+ const height = canvas.height;
+ const moving = Boolean(keys.KeyW || keys.KeyA || keys.KeyS || keys.KeyD);
+ const bob = state.running ? Math.sin(now / (moving ? 112 : 190)) * (moving ? 7 : 2.4) : 0;
+ const sway = state.running ? Math.cos(now / (moving ? 148 : 240)) * (moving ? 10 : 4) : 0;
+ const recoilLift = state.recoil * 240;
+ const target = getPrimaryThreat();
+ const targetBias = target ? clamp(-target.projection.relAngle / (FOV * 0.45), -1, 1) : 0;
+ const targetLift = target ? clamp((1 - target.projection.distance / Math.max(state.weapon.range, 1)) * 14, 0, 14) : 0;
+ const gunX = width * 0.54 + sway - recoilLift * 0.28 + targetBias * 34;
+ const gunY = height * 0.83 + bob + recoilLift * 0.2 - targetLift;
+ const sleeveColor = '#334155';
+ const skinTone = '#d6a07a';
+ const gloveColor = '#0f172a';
+ const barrelLengthByWeapon = { carbine: 116, smg: 92, shotgun: 102, marksman: 144 };
+ const barrelLength = barrelLengthByWeapon[state.weapon.key] || 112;
+ const stockLength = state.weapon.key === 'marksman' ? 42 : 34;
+ const movingHandLift = moving ? Math.sin(now / 140) * 4 : 0;
+ const pitchFactor = state.player ? clamp((state.player.pitch || 0) / MAX_PITCH, -1, 1) : 0;
+ const pitchLift = pitchFactor * 46;
+ const weaponRotation = targetBias * 0.14 - state.recoil * 0.3 - pitchFactor * 0.08;
+
+ drawGroundShadow(width * 0.5 + targetBias * 24, height * 0.965, width * 0.2, height * 0.02, 0.12);
+
+ ctx.save();
+ ctx.translate(gunX, gunY + pitchLift);
+ ctx.rotate(weaponRotation);
+
+ drawLimb(-276, 188, -128, 86, 28, sleeveColor);
+ drawLimb(-128, 86, -64, 24 + movingHandLift, 24, skinTone);
+ drawLimb(204, 188, 58, 68, 28, sleeveColor);
+ drawLimb(58, 68, 18, 10, 24, skinTone);
+
+ ctx.fillStyle = gloveColor;
+ ctx.beginPath();
+ ctx.arc(-62, 20 + movingHandLift, 13, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.beginPath();
+ ctx.arc(18, 8, 13, 0, Math.PI * 2);
+ ctx.fill();
+
+ ctx.fillStyle = '#dbe2ea';
+ ctx.fillRect(-36, -34, 98, 30);
+ ctx.fillStyle = '#9aa4b2';
+ ctx.fillRect(-stockLength, -22, stockLength, 22);
+ ctx.fillStyle = '#cbd5e1';
+ ctx.fillRect(20, -20, barrelLength, 12);
+ ctx.fillStyle = '#64748b';
+ ctx.fillRect(2, -46, 34, 12);
+ ctx.fillStyle = '#0f172a';
+ ctx.fillRect(-6, -4, 24, 48);
+ ctx.fillRect(52, -12, 18, 18);
+ ctx.fillStyle = '#475569';
+ ctx.fillRect(-12, 8, 18, 48);
+ ctx.fillStyle = '#1e293b';
+ ctx.fillRect(barrelLength - 6, -22, 16, 10);
+ ctx.fillRect(4, -44, 10, 18);
+
+ if (now < state.flashUntil) {
+ ctx.fillStyle = '#fde68a';
+ ctx.beginPath();
+ ctx.moveTo(barrelLength + 6, -16);
+ ctx.lineTo(barrelLength + 38, -2);
+ ctx.lineTo(barrelLength + 10, 8);
+ ctx.lineTo(barrelLength + 26, 26);
+ ctx.lineTo(barrelLength - 2, 12);
+ ctx.closePath();
+ ctx.fill();
+ }
+
+ ctx.restore();
+ }
+
+ function drawCrosshair() {
+ const cx = canvas.width / 2;
+ const cy = canvas.height / 2;
+ ctx.strokeStyle = 'rgba(255,255,255,0.78)';
+ ctx.lineWidth = 1.5;
+ ctx.beginPath();
+ ctx.moveTo(cx - 12, cy);
+ ctx.lineTo(cx - 4, cy);
+ ctx.moveTo(cx + 4, cy);
+ ctx.lineTo(cx + 12, cy);
+ ctx.moveTo(cx, cy - 12);
+ ctx.lineTo(cx, cy - 4);
+ ctx.moveTo(cx, cy + 4);
+ ctx.lineTo(cx, cy + 12);
+ ctx.stroke();
+ }
+
+ function drawRadar() {
+ const size = 130;
+ const padding = 18;
+ const x = canvas.width - size - padding;
+ const y = padding;
+ ctx.fillStyle = 'rgba(11,15,20,0.7)';
+ ctx.fillRect(x, y, size, size);
+ ctx.strokeStyle = 'rgba(255,255,255,0.12)';
+ ctx.strokeRect(x, y, size, size);
+ ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+ ctx.beginPath();
+ ctx.moveTo(x + size / 2, y);
+ ctx.lineTo(x + size / 2, y + size);
+ ctx.moveTo(x, y + size / 2);
+ ctx.lineTo(x + size, y + size / 2);
+ ctx.stroke();
+
+ ctx.fillStyle = '#dbe2ea';
+ ctx.beginPath();
+ ctx.arc(x + size / 2, y + size / 2, 4, 0, Math.PI * 2);
+ ctx.fill();
+
+ state.bots.forEach((bot) => {
+ const relX = (bot.x - state.player.x) / 12;
+ const relY = (bot.y - state.player.y) / 12;
+ const dotX = clamp(x + size / 2 + relX, x + 8, x + size - 8);
+ const dotY = clamp(y + size / 2 + relY, y + 8, y + size - 8);
+ ctx.fillStyle = '#f87171';
+ ctx.beginPath();
+ ctx.arc(dotX, dotY, 3, 0, Math.PI * 2);
+ ctx.fill();
+ });
+ }
+
+ function drawStatus(now) {
+ if (now < state.noticeUntil) {
+ ctx.fillStyle = 'rgba(11,15,20,0.66)';
+ ctx.fillRect(16, 16, 260, 42);
+ ctx.fillStyle = '#eef2f7';
+ ctx.font = '600 16px Inter, system-ui, sans-serif';
+ ctx.fillText(state.message, 30, 42);
+ }
+ if (performance.now() < state.reloadingUntil) {
+ ctx.fillStyle = '#fbbf24';
+ ctx.font = '600 14px Inter, system-ui, sans-serif';
+ ctx.fillText('Reloading…', canvas.width * 0.5 - 34, canvas.height - 110);
+ }
+ }
+
+ function render(now) {
+ drawBackground(canvas.width, canvas.height);
+ if (!state.player) {
+ ctx.fillStyle = '#eef2f7';
+ ctx.font = '600 30px Inter, system-ui, sans-serif';
+ ctx.fillText('Configure your loadout to begin.', 54, 120);
+ ctx.font = '400 18px Inter, system-ui, sans-serif';
+ ctx.fillStyle = '#9aa4b2';
+ ctx.fillText('The first delivery includes gun selection, moving bots, round summaries, and saved match reports.', 54, 156);
+ return;
+ }
+
+ drawProps();
+ drawBots(now);
+ drawCrosshair();
+ drawRadar();
+ drawWeapon(now);
+ drawStatus(now);
+
+ if (state.roundEnded) {
+ ctx.fillStyle = 'rgba(11,15,20,0.46)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = '#eef2f7';
+ ctx.font = '700 34px Inter, system-ui, sans-serif';
+ const title = state.matchSummary?.outcome === 'victory' ? 'Victory' : state.matchSummary?.outcome === 'timeout' ? 'Time up' : 'Defeat';
+ ctx.fillText(title, canvas.width / 2 - 60, canvas.height / 2 - 20);
+ ctx.font = '400 18px Inter, system-ui, sans-serif';
+ ctx.fillStyle = '#c7d0db';
+ ctx.fillText('Review the summary on the right and save the result.', canvas.width / 2 - 170, canvas.height / 2 + 16);
+ }
+ }
+
+ function tick(now) {
+ const delta = Math.min(0.032, (now - state.lastTick) / 1000);
+ state.lastTick = now;
+ if (state.recoil > 0) state.recoil = Math.max(0, state.recoil - delta * 0.14);
+
+ if (state.player && state.running) {
+ updatePlayer(delta);
+ updateBots(delta, now);
+ completeReload(now);
+ attemptAutoFire(now);
+ const elapsed = (now - state.startTime) / 1000;
+ if (elapsed >= ROUND_DURATION) finishRound('timeout');
+ updateHud();
+ }
+
+ render(now);
+ requestAnimationFrame(tick);
+ }
+
+ async function fetchMatches() {
try {
- const response = await fetch('api/chat.php', {
+ const response = await fetch(`${apiUrl}?limit=8`, { headers: { 'Accept': 'application/json' } });
+ const data = await response.json();
+ if (!response.ok || !data.success) throw new Error(data.error || 'Unable to load matches.');
+ state.renderMatches = data.matches || [];
+ renderMatchesList();
+ } catch (error) {
+ showToast(error.message || 'Unable to refresh matches.');
+ }
+ }
+
+ function renderMatchesList() {
+ if (!matchesList) return;
+ const matches = state.renderMatches || [];
+ if (!matches.length) {
+ matchesList.innerHTML = `
+
+
No matches saved yet
+
Finish a round and use “Save result” to create the first combat report.
+