Spaces:

ftrtemis
/

FPS

Sleeping

App Files Files Community

ftrtemis commited on Apr 29

Commit

59db36c

verified ·

1 Parent(s): 7a63db2

Switch to Docker SDK: FastAPI backend + Three.js FPS frontend

Browse files

Files changed (5) hide show

Dockerfile +12 -0
README.md +21 -10
app/index.html +1140 -0
app/server.py +107 -0
requirements.txt +3 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,12 @@

+FROM python:3.10-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY app/ /app/
+EXPOSE 7860
+CMD ["uvicorn", "server:app", "--host", "0.0.0.0", "--port", "7860"]

README.md CHANGED Viewed

@@ -1,10 +1,21 @@
----
-title: FPS
-emoji: 🐨
-colorFrom: green
-colorTo: gray
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: FPS
+emoji: 🎮
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+---
+# Neon Strike FPS (Docker Space)
+This Space uses FastAPI + WebSocket for multiplayer and serves a Three.js frontend.
+## Local run
+```bash
+docker build -t fps-space .
+docker run --rm -p 7860:7860 fps-space
+```
+Open http://localhost:7860

app/index.html ADDED Viewed

	@@ -0,0 +1,1140 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Neon Strike: Full Stack</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; touch-action: none; -webkit-touch-callout: none; }
+        body { overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui; user-select: none; }
+        canvas { display: block; }
+        #ui { position: absolute; inset: 0; pointer-events: none; display: none; flex-direction: column; justify-content: space-between; padding: 15px; z-index: 10; }
+        #crosshair { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); pointer-events: none; z-index: 12; }
+        #crosshair::before, #crosshair::after { content:''; position:absolute; background:rgba(255,255,255,0.9); box-shadow:0 0 4px #000; }
+        #crosshair::before { top:11px; left:0; width:24px; height:2px; }
+        #crosshair::after { top:0; left:11px; width:2px; height:24px; }
+        #scope { position:absolute; inset:0; display:none; z-index:11; pointer-events:none; }
+        #scope .ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; border:2px solid rgba(0,255,100,0.6); border-radius:50%; box-shadow:0 0 0 9999px rgba(0,10,0,0.85); }
+        #scope .cross { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:60px; background:rgba(0,255,100,0.8); }
+        #scope .cross::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:2px; background:rgba(0,255,100,0.8); }
+        #hud-top { display:flex; justify-content:space-between; align-items:flex-start; }
+        #stats { background:rgba(0,0,0,0.5); padding:10px 14px; border-radius:8px; color:#fff; font-size:13px; line-height:1.6; border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(4px); }
+        #stats span { color:#00ffaa; font-weight:700; }
+        #weapon-info { margin-top:6px; color:#ffcc00; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
+        #health-bar { width:180px; height:18px; background:rgba(0,0,0,0.5); border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,0.15); margin-top:6px; }
+        #health-fill { width:100%; height:100%; background:linear-gradient(90deg,#ff2244,#ff8844); transition:width .2s; }
+        #health-text { color:#fff; font-size:11px; text-align:center; margin-top:3px; text-shadow:0 0 4px rgba(0,0,0,0.9); }
+        #minimap { position:absolute; top:15px; right:15px; width:140px; height:140px; background:rgba(0,0,0,0.5); border-radius:50%; border:2px solid rgba(255,255,255,0.15); overflow:hidden; backdrop-filter:blur(2px); }
+        #minimap-canvas { width:100%; height:100%; border-radius:50%; }
+        #ammo-counter { position:absolute; bottom:20px; right:20px; color:#fff; text-align:right; text-shadow:0 0 8px rgba(0,0,0,0.9); }
+        #ammo-current { font-size:42px; font-weight:800; line-height:1; }
+        #ammo-total { font-size:14px; opacity:.7; }
+        #reload-bar { width:80px; height:4px; background:rgba(255,255,255,0.2); border-radius:2px; margin-top:4px; margin-left:auto; overflow:hidden; display:none; }
+        #reload-fill { width:0%; height:100%; background:#ffcc00; transition:width .1s linear; }
+        #weapon-model { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:120px; height:220px; z-index:8; pointer-events:none; perspective:400px; }
+        .gun-body { position:absolute; bottom:0; left:50%; transform:translateX(-50%) rotateX(-5deg); width:20px; height:160px; background:linear-gradient(90deg,#222,#444,#222); border-radius:6px 6px 0 0; transform-origin:bottom center; transition:transform .1s; }
+        .gun-barrel { position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:10px; height:50px; background:#333; border-radius:4px; }
+        .gun-mag { position:absolute; bottom:20px; left:-8px; width:14px; height:50px; background:#2a2a2a; transform:rotate(10deg); border-radius:2px; }
+        .recoil { animation:recoil .12s ease-out; }
+        @keyframes recoil { 0%{transform:translateX(-50%) rotateX(-5deg) translateY(0);} 50%{transform:translateX(-50%) rotateX(15deg) translateY(20px);} 100%{transform:translateX(-50%) rotateX(-5deg) translateY(0);} }
+        #damage-overlay { position:absolute; inset:0; background:rgba(255,0,0,0); pointer-events:none; z-index:5; transition:background .15s; }
+        .damage-text { position:absolute; color:#ff4444; font-weight:900; font-size:22px; pointer-events:none; z-index:15; animation:damageFloat .9s forwards; text-shadow:0 0 4px #000; }
+        @keyframes damageFloat { 0%{opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(-60px) scale(1.4);} }
+        #kill-feed { position:absolute; top:70px; right:15px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; pointer-events:none; }
+        .kill-msg { background:rgba(0,0,0,0.5); color:#fff; padding:4px 10px; border-radius:4px; font-size:12px; animation:killSlide 4s forwards; border-left:2px solid #ffcc00; }
+        @keyframes killSlide { 0%{opacity:1;transform:translateX(0);} 80%{opacity:1;} 100%{opacity:0;transform:translateX(20px);} }
+        #start-screen { position:absolute; inset:0; background:linear-gradient(135deg,#050510 0%,#101025 50%,#081018 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; pointer-events:auto; cursor:default; }
+        #start-screen h1 { font-size:52px; color:#fff; text-transform:uppercase; letter-spacing:6px; text-shadow:0 0 30px rgba(0,200,255,0.4); background:linear-gradient(180deg,#fff 0%,#88ccff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-align:center; }
+        #start-screen .subtitle { color:#88aacc; font-size:16px; margin:8px 0 30px; letter-spacing:2px; text-align:center; }
+        #start-btn { padding:16px 48px; font-size:18px; color:#fff; background:linear-gradient(135deg,#0066ff,#00ccff); border:none; border-radius:50px; cursor:pointer; text-transform:uppercase; letter-spacing:3px; font-weight:700; box-shadow:0 0 30px rgba(0,150,255,0.4); transition:transform .2s,box-shadow .2s; }
+        #start-btn:hover { transform:scale(1.05); box-shadow:0 0 40px rgba(0,200,255,0.6); }
+        .controls-info { margin-top:25px; color:#6688aa; font-size:13px; text-align:center; line-height:2.2; max-width:90vw; }
+        .controls-info kbd { background:rgba(255,255,255,0.1); padding:3px 10px; border-radius:4px; border:1px solid rgba(255,255,255,0.15); color:#aaccff; font-family:monospace; }
+        #mobile-ui { display:none; position:absolute; inset:0; z-index:14; pointer-events:none; }
+        .touch-zone { position:absolute; pointer-events:auto; }
+        #stick-zone { left:0; bottom:0; width:50%; height:60%; }
+        #look-zone { right:0; bottom:0; width:50%; height:60%; }
+        #stick-knob { position:absolute; width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.3); transform:translate(-50%,-50%); display:none; pointer-events:none; }
+        #stick-center { position:absolute; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); transform:translate(-50%,-50%); display:none; pointer-events:none; }
+        #btn-fire { position:absolute; right:30px; bottom:140px; width:70px; height:70px; border-radius:50%; background:rgba(255,50,50,0.25); border:2px solid rgba(255,100,100,0.5); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; letter-spacing:1px; }
+        #btn-jump { position:absolute; right:30px; bottom:230px; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.3); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
+        #btn-weapon { position:absolute; right:110px; bottom:140px; width:50px; height:50px; border-radius:50%; background:rgba(0,200,255,0.2); border:2px solid rgba(0,200,255,0.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
+        #connection-status { position:absolute; top:15px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.5); padding:4px 12px; border-radius:12px; font-size:11px; color:#888; z-index:16; pointer-events:none; }
+        .conn-online { color:#00ffaa !important; }
+        .conn-offline { color:#ff4444 !important; }
+    </style>
+    <script type="importmap">{"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"}}</script>
+</head>
+<body>
+<div id="ui">
+    <div id="hud-top">
+        <div>
+            <div id="stats">
+                <div>Score: <span id="score">0</span></div>
+                <div>Kills: <span id="kills">0</span></div>
+                <div>Time: <span id="time">0:00</span></div>
+                <div id="weapon-info">AR-15 [1]</div>
+            </div>
+            <div style="margin-top:6px;">
+                <div id="health-bar"><div id="health-fill"></div></div>
+                <div id="health-text">HEALTH 100%</div>
+            </div>
+        </div>
+        <div id="minimap"><canvas id="minimap-canvas" width="140" height="140"></canvas></div>
+    </div>
+    <div id="crosshair"></div>
+    <div id="scope"><div class="ring"></div><div class="cross"></div></div>
+    <div id="damage-overlay"></div>
+    <div id="kill-feed"></div>
+    <div id="ammo-counter">
+        <div id="ammo-current">30</div>
+        <div id="ammo-total"><span id="ammo-reserve">120</span> reserve</div>
+        <div id="reload-bar"><div id="reload-fill"></div></div>
+    </div>
+    <div id="weapon-model"><div class="gun-body" id="gun"><div class="gun-barrel"></div><div class="gun-mag"></div></div></div>
+    <div id="connection-status">Single Player</div>
+</div>
+<div id="mobile-ui">
+    <div class="touch-zone" id="stick-zone"></div>
+    <div class="touch-zone" id="look-zone"></div>
+    <div id="stick-center"></div>
+    <div id="stick-knob"></div>
+    <div class="touch-zone" id="btn-fire">FIRE</div>
+    <div class="touch-zone" id="btn-jump">JUMP</div>
+    <div class="touch-zone" id="btn-weapon">WEP</div>
+</div>
+<div id="start-screen">
+    <h1>Neon Strike</h1>
+    <div class="subtitle">FPS • Multiplayer • Procedural • Mobile</div>
+    <button id="start-btn">Enter Combat</button>
+    <div class="controls-info" id="controls-desktop">
+        <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> Weapons •
+        <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> Move •
+        <kbd>SPACE</kbd> Jump •
+        <kbd>CLICK</kbd> Shoot •
+        <kbd>R</kbd> Reload •
+        <kbd>RIGHT CLICK</kbd> Scope •
+        <kbd>SHIFT</kbd> Sprint
+    </div>
+    <div class="controls-info" id="controls-mobile" style="display:none;">
+        Left side: Virtual Joystick • Right side: Drag to Look<br>
+        Red Button: Shoot • Blue Button: Switch Weapon • White Button: Jump
+    </div>
+</div>
+<script type="module">
+import * as THREE from 'three';
+import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+const CONFIG = {
+    wsUrl: (() => {
+        const isHF = location.hostname.includes('hf.space');
+        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        return isHF ? `${protocol}//${location.host}/ws` : 'ws://localhost:7860/ws';
+    })(),
+    isMobile: /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()),
+    mapSize: 40,
+    cellSize: 5,
+    gravity: 28,
+    playerHeight: 1.7,
+    walkSpeed: 5.5,
+    sprintSpeed: 9,
+    jumpForce: 10,
+    botCount: 4
+};
+class SoundSys {
+    constructor() {
+        this.ctx = null;
+        this.master = null;
+        this.initialized = false;
+    }
+    init() {
+        if (this.initialized) return;
+        this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+        this.master = this.ctx.createGain();
+        this.master.gain.value = 0.4;
+        this.master.connect(this.ctx.destination);
+        this.initialized = true;
+    }
+    _noise(duration, freq1, type = 'bandpass', vol = 1) {
+        if (!this.ctx) return;
+        const t = this.ctx.currentTime;
+        const bufferSize = this.ctx.sampleRate * duration;
+        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;
+        const src = this.ctx.createBufferSource();
+        src.buffer = buffer;
+        const filter = this.ctx.createBiquadFilter();
+        filter.type = type;
+        filter.frequency.value = freq1;
+        filter.Q.value = 1;
+        const gain = this.ctx.createGain();
+        gain.gain.setValueAtTime(vol, t);
+        gain.gain.exponentialRampToValueAtTime(0.001, t + duration);
+        src.connect(filter).connect(gain).connect(this.master);
+        src.start(t);
+    }
+    shoot(w) {
+        if (w.name === 'Shotgun') this._noise(0.12, 300, 'lowpass', 1.2);
+        else if (w.name === 'Sniper') {
+            this._noise(0.15, 2000, 'highpass', 0.8);
+            this._noise(0.2, 400, 'lowpass', 0.6);
+        } else {
+            this._noise(0.08, 1200, 'bandpass', 0.7);
+        }
+    }
+    hit() {
+        if (!this.ctx) return;
+        const osc = this.ctx.createOscillator();
+        const g = this.ctx.createGain();
+        osc.type = 'sine';
+        osc.frequency.setValueAtTime(1200, this.ctx.currentTime);
+        osc.frequency.exponentialRampToValueAtTime(300, this.ctx.currentTime + 0.1);
+        g.gain.setValueAtTime(0.2, this.ctx.currentTime);
+        g.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.1);
+        osc.connect(g).connect(this.master);
+        osc.start();
+        osc.stop(this.ctx.currentTime + 0.1);
+    }
+    reload() {
+        if (!this.ctx) return;
+        const t = this.ctx.currentTime;
+        [0, 0.15, 0.3].forEach((d) => {
+            const osc = this.ctx.createOscillator();
+            const g = this.ctx.createGain();
+            osc.type = 'square';
+            osc.frequency.value = 200 + Math.random() * 100;
+            g.gain.setValueAtTime(0.05, t + d);
+            g.gain.exponentialRampToValueAtTime(0.001, t + d + 0.08);
+            osc.connect(g).connect(this.master);
+            osc.start(t + d);
+            osc.stop(t + d + 0.08);
+        });
+    }
+    explosion() {
+        this._noise(0.4, 200, 'lowpass', 1.5);
+    }
+    step() {
+        if (!this.ctx || Math.random() > 0.3) return;
+        this._noise(0.04, 600, 'bandpass', 0.08);
+    }
+    ambient() {
+        if (!this.ctx) return;
+        const osc = this.ctx.createOscillator();
+        const g = this.ctx.createGain();
+        osc.type = 'sawtooth';
+        osc.frequency.value = 50;
+        const filter = this.ctx.createBiquadFilter();
+        filter.type = 'lowpass';
+        filter.frequency.value = 120;
+        filter.Q.value = 5;
+        g.gain.value = 0.015;
+        osc.connect(filter).connect(g).connect(this.master);
+        osc.start();
+    }
+}
+const audio = new SoundSys();
+const WEAPONS = [
+    { id: 0, name: 'AR-15', damage: 28, fireRate: 110, ammo: 30, reserve: 120, spread: 0.025, auto: true, reload: 1900, pellets: 1, zoomFOV: 75 },
+    { id: 1, name: 'Shotgun', damage: 16, fireRate: 900, ammo: 8, reserve: 32, spread: 0.18, auto: false, reload: 2800, pellets: 7, zoomFOV: 75 },
+    { id: 2, name: 'Sniper', damage: 100, fireRate: 1300, ammo: 5, reserve: 20, spread: 0.002, auto: false, reload: 3500, pellets: 1, zoomFOV: 25 }
+];
+let currentWeapon = 0;
+let isScoped = false;
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x050510);
+scene.fog = new THREE.FogExp2(0x050510, 0.018);
+const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 300);
+camera.position.y = CONFIG.playerHeight;
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(innerWidth, innerHeight);
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+document.body.appendChild(renderer.domElement);
+scene.add(new THREE.AmbientLight(0x202040, 0.5));
+const dirLight = new THREE.DirectionalLight(0x8899ff, 0.5);
+dirLight.position.set(30, 60, 20);
+dirLight.castShadow = true;
+dirLight.shadow.camera.left = -60;
+dirLight.shadow.camera.right = 60;
+dirLight.shadow.camera.top = 60;
+dirLight.shadow.camera.bottom = -60;
+dirLight.shadow.mapSize.width = 2048;
+dirLight.shadow.mapSize.height = 2048;
+scene.add(dirLight);
+class LevelGen {
+    constructor(size, cell) {
+        this.size = size;
+        this.cell = cell;
+        this.grid = Array(size).fill().map(() => Array(size).fill(1));
+        this.walls = [];
+        this.neons = [];
+        this.generate();
+    }
+    generate() {
+        const cx = Math.floor(this.size / 2);
+        const cy = Math.floor(this.size / 2);
+        let x = cx;
+        let y = cy;
+        this.grid[y][x] = 0;
+        for (let i = 0; i < 500; i++) {
+            const dirs = [[0, 1], [0, -1], [1, 0], [-1, 0]];
+            const d = dirs[Math.floor(Math.random() * 4)];
+            x += d[0];
+            y += d[1];
+            x = Math.max(1, Math.min(this.size - 2, x));
+            y = Math.max(1, Math.min(this.size - 2, y));
+            this.grid[y][x] = 0;
+            if (Math.random() < 0.08) {
+                for (let ry = -1; ry <= 1; ry++) {
+                    for (let rx = -1; rx <= 1; rx++) {
+                        if (y + ry > 0 && y + ry < this.size - 1 && x + rx > 0 && x + rx < this.size - 1) {
+                            this.grid[y + ry][x + rx] = 0;
+                        }
+                    }
+                }
+            }
+        }
+        for (let dy = -2; dy <= 2; dy++) {
+            for (let dx = -2; dx <= 2; dx++) {
+                const sy = cy + dy;
+                const sx = x + dx;
+                if (sy >= 0 && sy < this.size && sx >= 0 && sx < this.size) this.grid[sy][sx] = 0;
+            }
+        }
+    }
+    build() {
+        const wallMat = new THREE.MeshStandardMaterial({ color: 0x2a2a3e, roughness: 0.9 });
+        const floorGeo = new THREE.PlaneGeometry(this.size * this.cell, this.size * this.cell);
+        const floorMat = new THREE.MeshStandardMaterial({ color: 0x111122, roughness: 0.9, metalness: 0.2 });
+        const floor = new THREE.Mesh(floorGeo, floorMat);
+        floor.rotation.x = -Math.PI / 2;
+        floor.receiveShadow = true;
+        scene.add(floor);
+        const grid = new THREE.GridHelper(this.size * this.cell, this.size, 0x334466, 0x223344);
+        grid.position.y = 0.01;
+        scene.add(grid);
+        let wallCount = 0;
+        for (let y = 0; y < this.size; y++) for (let x = 0; x < this.size; x++) if (this.grid[y][x] === 1) wallCount++;
+        const wGeo = new THREE.BoxGeometry(this.cell, 6, this.cell);
+        const iMesh = new THREE.InstancedMesh(wGeo, wallMat, wallCount);
+        iMesh.castShadow = true;
+        iMesh.receiveShadow = true;
+        let idx = 0;
+        const dummy = new THREE.Object3D();
+        for (let y = 0; y < this.size; y++) {
+            for (let x = 0; x < this.size; x++) {
+                if (this.grid[y][x] === 1) {
+                    dummy.position.set((x - this.size / 2) * this.cell, 3, (y - this.size / 2) * this.cell);
+                    dummy.updateMatrix();
+                    iMesh.setMatrixAt(idx++, dummy.matrix);
+                }
+            }
+        }
+        scene.add(iMesh);
+        const neonColors = [0x00ffff, 0xff00ff, 0xff6600, 0x00ff66, 0x6644ff];
+        let placed = 0;
+        while (placed < 8) {
+            const rx = Math.floor(Math.random() * this.size);
+            const ry = Math.floor(Math.random() * this.size);
+            if (this.grid[ry][rx] === 0 && Math.abs(rx - this.size / 2) > 4 && Math.abs(ry - this.size / 2) > 4) {
+                const cx = (rx - this.size / 2) * this.cell;
+                const cz = (ry - this.size / 2) * this.cell;
+                const colGeo = new THREE.CylinderGeometry(0.4, 0.4, 7, 8);
+                const ccol = neonColors[placed % neonColors.length];
+                const colMat = new THREE.MeshStandardMaterial({ color: ccol, emissive: ccol, emissiveIntensity: 2.5, roughness: 0.2, metalness: 0.8 });
+                const col = new THREE.Mesh(colGeo, colMat);
+                col.position.set(cx, 3.5, cz);
+                col.castShadow = true;
+                scene.add(col);
+                const pl = new THREE.PointLight(ccol, 2.5, 18);
+                pl.position.set(cx, 3.5, cz);
+                scene.add(pl);
+                this.neons.push({ mesh: col, box: new THREE.Box3().setFromObject(col) });
+                placed++;
+            }
+        }
+        for (let i = 0; i < 20; i++) {
+            const rx = Math.floor(Math.random() * this.size);
+            const ry = Math.floor(Math.random() * this.size);
+            if (this.grid[ry][rx] === 0 && (Math.abs(rx - this.size / 2) > 2 || Math.abs(ry - this.size / 2) > 2)) {
+                const s = 1.5 + Math.random() * 2;
+                const cx = (rx - this.size / 2) * this.cell;
+                const cz = (ry - this.size / 2) * this.cell;
+                const cm = new THREE.Mesh(new THREE.BoxGeometry(s, s, s), new THREE.MeshStandardMaterial({ color: 0x4a3728 }));
+                cm.position.set(cx, s / 2, cz);
+                cm.castShadow = true;
+                cm.receiveShadow = true;
+                scene.add(cm);
+                this.neons.push({ mesh: cm, box: new THREE.Box3().setFromObject(cm) });
+            }
+        }
+        for (let y = 0; y < this.size; y++) {
+            for (let x = 0; x < this.size; x++) {
+                if (this.grid[y][x] === 1) {
+                    const b = new THREE.Box3();
+                    const px = (x - this.size / 2) * this.cell;
+                    const pz = (y - this.size / 2) * this.cell;
+                    b.min.set(px - this.cell / 2, 0, pz - this.cell / 2);
+                    b.max.set(px + this.cell / 2, 6, pz + this.cell / 2);
+                    this.walls.push(b);
+                }
+            }
+        }
+        this.neons.forEach((n) => this.walls.push(n.box));
+    }
+}
+const level = new LevelGen(CONFIG.mapSize, CONFIG.cellSize);
+level.build();
+const keys = { w: false, a: false, s: false, d: false, shift: false };
+let velocity = new THREE.Vector3();
+let isGrounded = true;
+const pBox = new THREE.Box3();
+const pSize = new THREE.Vector3(0.5, CONFIG.playerHeight, 0.5);
+function movePlayer(dt) {
+    const w = WEAPONS[currentWeapon];
+    const speed = (keys.shift && !isScoped) ? CONFIG.sprintSpeed : CONFIG.walkSpeed;
+    camera.fov = THREE.MathUtils.lerp(camera.fov, isScoped ? w.zoomFOV : 75, dt * 8);
+    camera.updateProjectionMatrix();
+    velocity.x -= velocity.x * 10 * dt;
+    velocity.z -= velocity.z * 10 * dt;
+    velocity.y -= CONFIG.gravity * dt;
+    let dz = (keys.w ? 1 : 0) - (keys.s ? 1 : 0);
+    let dx = (keys.d ? 1 : 0) - (keys.a ? 1 : 0);
+    if (mobileInput.move.lengthSq() > 0) {
+        dx = mobileInput.move.x;
+        dz = -mobileInput.move.y;
+    }
+    const len = Math.hypot(dx, dz);
+    if (len > 0) {
+        dx /= len;
+        dz /= len;
+    }
+    const forward = new THREE.Vector3();
+    camera.getWorldDirection(forward);
+    forward.y = 0;
+    forward.normalize();
+    const right = new THREE.Vector3();
+    right.crossVectors(forward, new THREE.Vector3(0, 1, 0));
+    if (dz !== 0) velocity.addScaledVector(forward, dz * speed * 10 * dt);
+    if (dx !== 0) velocity.addScaledVector(right, dx * speed * 10 * dt);
+    controls.moveRight(-velocity.x * dt);
+    controls.moveForward(-velocity.z * dt);
+    camera.position.y += velocity.y * dt;
+    if (camera.position.y < CONFIG.playerHeight) {
+        velocity.y = 0;
+        camera.position.y = CONFIG.playerHeight;
+        isGrounded = true;
+    } else {
+        isGrounded = false;
+    }
+    pBox.setFromCenterAndSize(camera.position, pSize);
+    for (const b of level.walls) {
+        if (pBox.intersectsBox(b)) {
+            const center = new THREE.Vector3();
+            b.getCenter(center);
+            const push = new THREE.Vector3().subVectors(camera.position, center);
+            push.y = 0;
+            push.normalize();
+            camera.position.x += push.x * 0.15;
+            camera.position.z += push.z * 0.15;
+        }
+    }
+    const worldBound = (CONFIG.mapSize * CONFIG.cellSize) / 2 - 1;
+    camera.position.x = Math.max(-worldBound, Math.min(worldBound, camera.position.x));
+    camera.position.z = Math.max(-worldBound, Math.min(worldBound, camera.position.z));
+}
+class MPManager {
+    constructor(url) {
+        this.url = url;
+        this.ws = null;
+        this.id = null;
+        this.remotePlayers = {};
+        this.connected = false;
+    }
+    connect() {
+        try {
+            this.ws = new WebSocket(this.url);
+            this.ws.onopen = () => {
+                this.connected = true;
+                updateConnStatus('Online', true);
+                audio.ambient();
+            };
+            this.ws.onmessage = (e) => this.handle(JSON.parse(e.data));
+            this.ws.onclose = () => {
+                this.connected = false;
+                updateConnStatus('Disconnected', false);
+                setTimeout(() => this.connect(), 3000);
+            };
+            this.ws.onerror = () => updateConnStatus('Offline', false);
+        } catch {
+            updateConnStatus('Offline', false);
+        }
+    }
+    handle(d) {
+        if (d.t === 'id') this.id = d.id;
+        if (d.t === 'state') {
+            d.players.forEach((p) => {
+                if (p.id === this.id) return;
+                this.updateRemote(p);
+            });
+        }
+        if (d.t === 'shoot') this.spawnRemoteBullet(d.origin || d.pos, d.dir, d.weapon);
+        if (d.t === 'kill') addKillFeed(d.killer, d.victim);
+    }
+    updateRemote(p) {
+        if (!this.remotePlayers[p.id]) {
+            const g = new THREE.Group();
+            const body = new THREE.Mesh(new THREE.BoxGeometry(0.7, 1.6, 0.4), new THREE.MeshStandardMaterial({ color: 0xff2244 }));
+            body.position.y = 0.8;
+            body.castShadow = true;
+            g.add(body);
+            const head = new THREE.Mesh(new THREE.BoxGeometry(0.45, 0.45, 0.45), new THREE.MeshStandardMaterial({ color: 0xffaa00 }));
+            head.position.y = 1.8;
+            g.add(head);
+            const nameTag = document.createElement('div');
+            nameTag.style.cssText = 'position:absolute;color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 4px #000;pointer-events:none;transform:translate(-50%,-100%);';
+            nameTag.textContent = p.name || 'Enemy';
+            document.body.appendChild(nameTag);
+            scene.add(g);
+            this.remotePlayers[p.id] = {
+                mesh: g,
+                nametag: nameTag,
+                targetPos: new THREE.Vector3(...p.pos),
+                targetRot: new THREE.Quaternion(...p.rot)
+            };
+        }
+        const rp = this.remotePlayers[p.id];
+        rp.targetPos.set(...p.pos);
+        rp.targetRot.set(...p.rot);
+    }
+    spawnRemoteBullet(pos, dir, weaponId) {
+        if (!pos || !dir) return;
+        const w = WEAPONS[weaponId] || WEAPONS[0];
+        const b = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.05, 0.3), new THREE.MeshBasicMaterial({ color: w.name === 'Sniper' ? 0x66ccff : 0xffff00 }));
+        b.position.set(...pos);
+        b.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), new THREE.Vector3(...dir));
+        scene.add(b);
+        const vel = new THREE.Vector3(...dir).multiplyScalar(60);
+        const tick = () => {
+            b.position.addScaledVector(vel, 0.016);
+            if (b.position.length() > 200) {
+                scene.remove(b);
+                return;
+            }
+            requestAnimationFrame(tick);
+        };
+        tick();
+    }
+    sync(pos, rot) {
+        if (this.connected && this.ws.readyState === 1) {
+            this.ws.send(JSON.stringify({ t: 'pos', pos: [pos.x, pos.y, pos.z], rot: [rot.x, rot.y, rot.z, rot.w] }));
+        }
+    }
+    sendShoot(origin, dir, weaponId) {
+        if (this.connected && this.ws.readyState === 1) {
+            this.ws.send(JSON.stringify({ t: 'shoot', origin: [origin.x, origin.y, origin.z], dir: [dir.x, dir.y, dir.z], weapon: weaponId }));
+        }
+    }
+    update(dt) {
+        for (const id in this.remotePlayers) {
+            const rp = this.remotePlayers[id];
+            rp.mesh.position.lerp(rp.targetPos, dt * 10);
+            rp.mesh.quaternion.slerp(rp.targetRot, dt * 10);
+            const p = rp.mesh.position.clone().add(new THREE.Vector3(0, 2.2, 0)).project(camera);
+            const x = (p.x * 0.5 + 0.5) * innerWidth;
+            const y = (-p.y * 0.5 + 0.5) * innerHeight;
+            rp.nametag.style.left = `${x}px`;
+            rp.nametag.style.top = `${y}px`;
+            rp.nametag.style.display = p.z > 1 ? 'none' : 'block';
+        }
+    }
+}
+const mp = new MPManager(CONFIG.wsUrl);
+class Bot {
+    constructor() {
+        this.group = new THREE.Group();
+        const bodyMat = new THREE.MeshStandardMaterial({ color: 0xff2244, roughness: 0.3 });
+        this.body = new THREE.Mesh(new THREE.BoxGeometry(0.7, 1.6, 0.4), bodyMat);
+        this.body.position.y = 0.8;
+        this.body.castShadow = true;
+        this.group.add(this.body);
+        this.head = new THREE.Mesh(new THREE.BoxGeometry(0.45, 0.45, 0.45), new THREE.MeshStandardMaterial({ color: 0xffaa00 }));
+        this.head.position.y = 1.8;
+        this.group.add(this.head);
+        this.group.position.set(999, 999, 999);
+        scene.add(this.group);
+        this.health = 100;
+        this.speed = 2.5 + Math.random() * 2;
+        this.dead = true;
+        this.lastAttack = 0;
+        this.flash = 0;
+    }
+    spawn() {
+        let attempts = 0;
+        let cx = 0;
+        let cz = 0;
+        do {
+            const rx = Math.floor(Math.random() * CONFIG.mapSize);
+            const ry = Math.floor(Math.random() * CONFIG.mapSize);
+            if (level.grid[ry][rx] === 0) {
+                cx = (rx - CONFIG.mapSize / 2) * CONFIG.cellSize;
+                cz = (ry - CONFIG.mapSize / 2) * CONFIG.cellSize;
+                if (new THREE.Vector3(cx, 0, cz).distanceTo(camera.position) > 20) break;
+            }
+            attempts++;
+        } while (attempts < 100);
+        this.group.position.set(cx, 0, cz);
+        this.health = 100 + Math.floor(Math.random() * 50);
+        this.dead = false;
+    }
+    update(dt, target) {
+        if (this.dead) return;
+        this.group.lookAt(target.x, this.group.position.y, target.z);
+        const dir = new THREE.Vector3().subVectors(target, this.group.position);
+        dir.y = 0;
+        const dist = dir.length();
+        dir.normalize();
+        if (dist > 1.5) {
+            this.group.position.x += dir.x * this.speed * dt;
+            this.group.position.z += dir.z * this.speed * dt;
+        }
+        if (dist < 2.5 && Date.now() - this.lastAttack > 1200) {
+            this.lastAttack = Date.now();
+            damagePlayer(12);
+        }
+        if (this.flash > 0) {
+            this.flash -= dt * 4;
+            this.body.material.emissive = new THREE.Color(0xffffff);
+            this.body.material.emissiveIntensity = this.flash;
+        } else {
+            this.body.material.emissive = new THREE.Color(0x000000);
+            this.body.material.emissiveIntensity = 0;
+        }
+    }
+    hit(dmg, pt) {
+        this.health -= dmg;
+        this.flash = 1;
+        showDamage(dmg, pt);
+        if (this.health <= 0) {
+            this.dead = true;
+            this.group.position.set(999, 999, 999);
+            state.kills += 1;
+            state.score += 100;
+            updateUI();
+            spawnParticles(pt, 0xff2244, 12);
+            audio.explosion();
+            setTimeout(() => this.spawn(), 2500);
+        }
+    }
+}
+const bots = Array.from({ length: CONFIG.botCount }, () => new Bot());
+let particles = [];
+function spawnParticles(pos, color, count) {
+    for (let i = 0; i < count; i++) {
+        const m = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.06, 0.06), new THREE.MeshBasicMaterial({ color }));
+        m.position.copy(pos).add(new THREE.Vector3((Math.random() - 0.5) * 0.4, (Math.random() - 0.5) * 0.4, (Math.random() - 0.5) * 0.4));
+        scene.add(m);
+        particles.push({ m, v: new THREE.Vector3((Math.random() - 0.5) * 8, Math.random() * 5, (Math.random() - 0.5) * 8), life: 1 });
+    }
+}
+const state = { score: 0, kills: 0, health: 100, startTime: 0, playing: false, canShoot: true, lastShot: 0, reloading: false };
+function maxAmmoFor(weapon) {
+    if (weapon.name === 'AR-15') return 30;
+    if (weapon.name === 'Shotgun') return 8;
+    return 5;
+}
+function resetGame() {
+    state.score = 0;
+    state.kills = 0;
+    state.health = 100;
+    state.playing = false;
+    state.canShoot = true;
+    state.lastShot = 0;
+    state.reloading = false;
+    camera.position.set(0, CONFIG.playerHeight, 0);
+    camera.rotation.set(0, 0, 0);
+    velocity.set(0, 0, 0);
+    bots.forEach((b) => {
+        b.dead = true;
+        b.group.position.set(999, 999, 999);
+        setTimeout(() => b.spawn(), Math.random() * 2000);
+    });
+    WEAPONS.forEach((w) => {
+        w.ammo = maxAmmoFor(w);
+        w.reserve = w.name === 'AR-15' ? 120 : (w.name === 'Shotgun' ? 32 : 20);
+    });
+    currentWeapon = 0;
+    isScoped = false;
+    document.getElementById('scope').style.display = 'none';
+    document.getElementById('crosshair').style.display = 'block';
+}
+const controls = new PointerLockControls(camera, document.body);
+const mobileInput = { move: new THREE.Vector2(), look: new THREE.Vector2() };
+document.addEventListener('keydown', (e) => {
+    const k = e.key.toLowerCase();
+    if (k === 'w') keys.w = true;
+    if (k === 'a') keys.a = true;
+    if (k === 's') keys.s = true;
+    if (k === 'd') keys.d = true;
+    if (k === ' ') { if (isGrounded) velocity.y = CONFIG.jumpForce; }
+    if (k === 'shift') keys.shift = true;
+    if (k === 'r') reloadWeapon();
+    if (k >= '1' && k <= '3') switchWeapon(parseInt(k, 10) - 1);
+    if (k === 'z') toggleScope();
+});
+document.addEventListener('keyup', (e) => {
+    const k = e.key.toLowerCase();
+    if (k === 'w') keys.w = false;
+    if (k === 'a') keys.a = false;
+    if (k === 's') keys.s = false;
+    if (k === 'd') keys.d = false;
+    if (k === 'shift') keys.shift = false;
+});
+document.addEventListener('mousedown', (e) => {
+    if (e.button === 2) {
+        e.preventDefault();
+        toggleScope();
+    }
+    if (state.playing && e.button === 0 && !CONFIG.isMobile) shoot();
+});
+document.addEventListener('wheel', (e) => {
+    if (!state.playing) return;
+    if (e.deltaY > 0) switchWeapon((currentWeapon + 1) % WEAPONS.length);
+    else switchWeapon((currentWeapon - 1 + WEAPONS.length) % WEAPONS.length);
+});
+document.addEventListener('contextmenu', (e) => e.preventDefault());
+if (CONFIG.isMobile) {
+    document.getElementById('controls-mobile').style.display = 'block';
+    document.getElementById('controls-desktop').style.display = 'none';
+    document.getElementById('mobile-ui').style.display = 'block';
+    const stickZone = document.getElementById('stick-zone');
+    const stickKnob = document.getElementById('stick-knob');
+    const stickCenter = document.getElementById('stick-center');
+    let stickId = null;
+    let stickOrigin = { x: 0, y: 0 };
+    stickZone.addEventListener('touchstart', (e) => {
+        const t = e.changedTouches[0];
+        stickId = t.identifier;
+        stickOrigin = { x: t.clientX, y: t.clientY };
+        stickKnob.style.display = 'block';
+        stickCenter.style.display = 'block';
+        stickKnob.style.left = `${t.clientX}px`;
+        stickCenter.style.left = `${t.clientX}px`;
+        stickKnob.style.top = `${t.clientY}px`;
+        stickCenter.style.top = `${t.clientY}px`;
+    }, { passive: false });
+    stickZone.addEventListener('touchmove', (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const t = e.changedTouches[i];
+            if (t.identifier === stickId) {
+                const dx = t.clientX - stickOrigin.x;
+                const dy = t.clientY - stickOrigin.y;
+                const dist = Math.min(Math.hypot(dx, dy), 50);
+                const ang = Math.atan2(dy, dx);
+                mobileInput.move.set(Math.cos(ang) * dist / 50, Math.sin(ang) * dist / 50);
+                stickKnob.style.left = `${stickOrigin.x + Math.cos(ang) * dist}px`;
+                stickKnob.style.top = `${stickOrigin.y + Math.sin(ang) * dist}px`;
+            }
+        }
+    }, { passive: false });
+    const endStick = (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            if (e.changedTouches[i].identifier === stickId) {
+                stickId = null;
+                mobileInput.move.set(0, 0);
+                stickKnob.style.display = 'none';
+                stickCenter.style.display = 'none';
+            }
+        }
+    };
+    stickZone.addEventListener('touchend', endStick);
+    stickZone.addEventListener('touchcancel', endStick);
+    const lookZone = document.getElementById('look-zone');
+    const lookTouches = {};
+    lookZone.addEventListener('touchstart', (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const t = e.changedTouches[i];
+            lookTouches[t.identifier] = { x: t.clientX, y: t.clientY };
+        }
+    }, { passive: false });
+    lookZone.addEventListener('touchmove', (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const t = e.changedTouches[i];
+            const prev = lookTouches[t.identifier];
+            if (prev) {
+                const sens = 0.004;
+                const dx = (t.clientX - prev.x) * sens;
+                const dy = (t.clientY - prev.y) * sens;
+                camera.rotation.y -= dx;
+                camera.rotation.x -= dy;
+                camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x));
+                lookTouches[t.identifier] = { x: t.clientX, y: t.clientY };
+            }
+        }
+    }, { passive: false });
+    lookZone.addEventListener('touchend', (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) delete lookTouches[e.changedTouches[i].identifier];
+    });
+    lookZone.addEventListener('touchcancel', (e) => {
+        for (let i = 0; i < e.changedTouches.length; i++) delete lookTouches[e.changedTouches[i].identifier];
+    });
+    document.getElementById('btn-fire').addEventListener('touchstart', (e) => { e.preventDefault(); shoot(); }, { passive: false });
+    document.getElementById('btn-jump').addEventListener('touchstart', (e) => { e.preventDefault(); if (isGrounded) velocity.y = CONFIG.jumpForce; }, { passive: false });
+    document.getElementById('btn-weapon').addEventListener('touchstart', (e) => { e.preventDefault(); switchWeapon((currentWeapon + 1) % WEAPONS.length); }, { passive: false });
+}
+function reloadWeapon() {
+    const w = WEAPONS[currentWeapon];
+    const magMax = maxAmmoFor(w);
+    if (state.reloading || w.ammo >= magMax || w.reserve <= 0) return;
+    state.reloading = true;
+    state.canShoot = false;
+    audio.reload();
+    document.getElementById('reload-bar').style.display = 'block';
+    document.getElementById('reload-fill').style.transition = 'none';
+    document.getElementById('reload-fill').style.width = '0%';
+    setTimeout(() => {
+        document.getElementById('reload-fill').style.transition = `width ${Math.floor(w.reload * 0.8)}ms linear`;
+        document.getElementById('reload-fill').style.width = '100%';
+    }, 50);
+    setTimeout(() => {
+        const needed = magMax - w.ammo;
+        const taken = Math.min(needed, w.reserve);
+        w.ammo += taken;
+        w.reserve -= taken;
+        state.reloading = false;
+        state.canShoot = true;
+        document.getElementById('reload-bar').style.display = 'none';
+        updateUI();
+    }, w.reload);
+}
+function switchWeapon(idx) {
+    if (idx === currentWeapon) return;
+    currentWeapon = idx;
+    const w = WEAPONS[idx];
+    document.getElementById('weapon-info').textContent = `${w.name} [${idx + 1}]`;
+    const gun = document.getElementById('gun');
+    gun.style.filter = 'brightness(1.5)';
+    setTimeout(() => { gun.style.filter = 'none'; }, 150);
+    isScoped = false;
+    document.getElementById('scope').style.display = 'none';
+    document.getElementById('crosshair').style.display = 'block';
+    updateUI();
+}
+function toggleScope() {
+    if (currentWeapon !== 2) return;
+    isScoped = !isScoped;
+    document.getElementById('scope').style.display = isScoped ? 'block' : 'none';
+    document.getElementById('crosshair').style.display = isScoped ? 'none' : 'block';
+}
+function shoot() {
+    if (!state.playing || !state.canShoot || state.reloading) return;
+    const w = WEAPONS[currentWeapon];
+    if (w.ammo <= 0) {
+        reloadWeapon();
+        return;
+    }
+    if (Date.now() - state.lastShot < w.fireRate) return;
+    state.lastShot = Date.now();
+    w.ammo--;
+    updateUI();
+    audio.shoot(w);
+    const gun = document.getElementById('gun');
+    gun.classList.remove('recoil');
+    void gun.offsetWidth;
+    gun.classList.add('recoil');
+    const muzzlePos = camera.position.clone().add(new THREE.Vector3(0.25, -0.15, -0.4).applyQuaternion(camera.quaternion));
+    spawnParticles(muzzlePos, 0xffffaa, 4);
+    const rc = new THREE.Raycaster();
+    const pellets = w.pellets;
+    for (let i = 0; i < pellets; i++) {
+        const spread = isScoped ? 0 : w.spread;
+        const offset = new THREE.Vector3((Math.random() - 0.5) * spread, (Math.random() - 0.5) * spread, (Math.random() - 0.5) * spread);
+        const dir = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion).add(offset).normalize();
+        rc.set(camera.position, dir);
+        let hitSomething = false;
+        for (const b of bots) {
+            if (b.dead) continue;
+            const intersects = rc.intersectObjects([b.body, b.head]);
+            if (intersects.length > 0) {
+                const dmg = intersects[0].object === b.head ? w.damage * 2 : w.damage;
+                b.hit(dmg, intersects[0].point);
+                spawnParticles(intersects[0].point, 0xff0000, 6);
+                audio.hit();
+                hitSomething = true;
+                break;
+            }
+        }
+        if (!hitSomething) {
+            const wallMeshes = level.neons.map((n) => n.mesh);
+            const wi = rc.intersectObjects(wallMeshes);
+            if (wi.length > 0) spawnParticles(wi[0].point, 0xffaa00, 4);
+        }
+    }
+    const shootDir = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+    mp.sendShoot(camera.position, shootDir, currentWeapon);
+    if (w.ammo <= 0) reloadWeapon();
+}
+function damagePlayer(amt) {
+    state.health = Math.max(0, state.health - amt);
+    document.getElementById('damage-overlay').style.background = `rgba(255,0,0,${amt / 150})`;
+    setTimeout(() => { document.getElementById('damage-overlay').style.background = 'rgba(255,0,0,0)'; }, 120);
+    updateUI();
+    if (state.health <= 0) gameOver();
+}
+function showDamage(amt, pt) {
+    const el = document.createElement('div');
+    el.className = 'damage-text';
+    el.textContent = `-${amt}`;
+    document.body.appendChild(el);
+    const p = pt.clone().project(camera);
+    const x = (p.x * 0.5 + 0.5) * innerWidth;
+    const y = (-p.y * 0.5 + 0.5) * innerHeight;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+    setTimeout(() => el.remove(), 900);
+}
+function addKillFeed(killer, victim) {
+    const el = document.createElement('div');
+    el.className = 'kill-msg';
+    el.textContent = `${killer} ▶ ${victim}`;
+    document.getElementById('kill-feed').appendChild(el);
+    setTimeout(() => el.remove(), 4000);
+}
+function updateConnStatus(text, ok) {
+    const el = document.getElementById('connection-status');
+    el.textContent = text;
+    el.classList.remove('conn-online', 'conn-offline');
+    el.classList.add(ok ? 'conn-online' : 'conn-offline');
+}
+function updateUI() {
+    document.getElementById('score').textContent = state.score;
+    document.getElementById('kills').textContent = state.kills;
+    const w = WEAPONS[currentWeapon];
+    document.getElementById('ammo-current').textContent = w.ammo;
+    document.getElementById('ammo-reserve').textContent = w.reserve;
+    document.getElementById('weapon-info').textContent = `${w.name} [${currentWeapon + 1}]`;
+    document.getElementById('health-fill').style.width = `${Math.max(0, state.health)}%`;
+    document.getElementById('health-text').textContent = `HEALTH ${Math.floor(Math.max(0, state.health))}%`;
+    const elapsed = Math.floor((Date.now() - state.startTime) / 1000);
+    const m = Math.floor(elapsed / 60);
+    const s = elapsed % 60;
+    document.getElementById('time').textContent = `${m}:${s.toString().padStart(2, '0')}`;
+}
+function gameOver() {
+    state.playing = false;
+    controls.unlock();
+    document.getElementById('ui').style.display = 'none';
+    const scr = document.getElementById('start-screen');
+    scr.style.display = 'flex';
+    scr.querySelector('h1').textContent = 'MISSION FAILED';
+    scr.querySelector('.subtitle').textContent = `Score ${state.score} • Kills ${state.kills}`;
+    document.getElementById('start-btn').textContent = 'Deploy Again';
+    resetGame();
+}
+const mmCanvas = document.getElementById('minimap-canvas');
+const mmCtx = mmCanvas.getContext('2d');
+function drawMinimap() {
+    mmCtx.fillStyle = '#050510';
+    mmCtx.fillRect(0, 0, 140, 140);
+    const scl = 140 / (CONFIG.mapSize * CONFIG.cellSize);
+    const ox = CONFIG.mapSize * CONFIG.cellSize / 2;
+    const oy = CONFIG.mapSize * CONFIG.cellSize / 2;
+    mmCtx.fillStyle = '#1a1a2e';
+    for (let y = 0; y < CONFIG.mapSize; y++) {
+        for (let x = 0; x < CONFIG.mapSize; x++) {
+            if (level.grid[y][x] === 1) {
+                mmCtx.fillRect((x * CONFIG.cellSize - ox) * scl + 70, (y * CONFIG.cellSize - oy) * scl + 70, CONFIG.cellSize * scl, CONFIG.cellSize * scl);
+            }
+        }
+    }
+    bots.forEach((b) => {
+        if (b.dead) return;
+        mmCtx.fillStyle = '#ff2244';
+        mmCtx.beginPath();
+        mmCtx.arc((b.group.position.x) * scl + 70, (b.group.position.z) * scl + 70, 2.5, 0, Math.PI * 2);
+        mmCtx.fill();
+    });
+    for (const id in mp.remotePlayers) {
+        const rp = mp.remotePlayers[id].mesh;
+        mmCtx.fillStyle = '#00ccff';
+        mmCtx.beginPath();
+        mmCtx.arc(rp.position.x * scl + 70, rp.position.z * scl + 70, 2.5, 0, Math.PI * 2);
+        mmCtx.fill();
+    }
+    mmCtx.fillStyle = '#00ffaa';
+    mmCtx.beginPath();
+    mmCtx.arc(camera.position.x * scl + 70, camera.position.z * scl + 70, 3, 0, Math.PI * 2);
+    mmCtx.fill();
+    const d = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+    mmCtx.strokeStyle = '#00ffaa';
+    mmCtx.lineWidth = 1.5;
+    mmCtx.beginPath();
+    mmCtx.moveTo(camera.position.x * scl + 70, camera.position.z * scl + 70);
+    mmCtx.lineTo((camera.position.x + d.x * 6) * scl + 70, (camera.position.z + d.z * 6) * scl + 70);
+    mmCtx.stroke();
+}
+const clock = new THREE.Clock();
+const startBtn = document.getElementById('start-btn');
+const ui = document.getElementById('ui');
+const startScreen = document.getElementById('start-screen');
+function startGameSession() {
+    startScreen.style.display = 'none';
+    ui.style.display = 'flex';
+    state.playing = true;
+    state.startTime = Date.now();
+    state.health = 100;
+    bots.forEach((b) => b.spawn());
+    updateUI();
+}
+startBtn.addEventListener('click', () => {
+    audio.init();
+    mp.connect();
+    if (CONFIG.isMobile) {
+        startGameSession();
+    } else {
+        controls.lock();
+    }
+});
+controls.addEventListener('lock', () => {
+    startGameSession();
+});
+controls.addEventListener('unlock', () => {
+    if (state.health > 0 && !CONFIG.isMobile) {
+        startScreen.style.display = 'flex';
+        ui.style.display = 'none';
+        startBtn.textContent = 'Resume';
+    }
+    state.playing = false;
+});
+function animate() {
+    requestAnimationFrame(animate);
+    const dt = Math.min(clock.getDelta(), 0.1);
+    if (state.playing) {
+        movePlayer(dt);
+        bots.forEach((b) => b.update(dt, camera.position));
+        mp.update(dt);
+        particles = particles.filter((p) => {
+            p.life -= dt * 2;
+            p.m.position.addScaledVector(p.v, dt);
+            p.v.y -= CONFIG.gravity * dt;
+            p.m.rotation.x += dt * 4;
+            p.m.scale.setScalar(p.life);
+            if (p.life <= 0 || p.m.position.y < 0) {
+                scene.remove(p.m);
+                return false;
+            }
+            return true;
+        });
+        if (audio.initialized && (keys.w || keys.s || keys.a || keys.d) && isGrounded && Math.random() < dt * 6) audio.step();
+        mp.sync(camera.position, camera.quaternion);
+        updateUI();
+    }
+    drawMinimap();
+    renderer.render(scene, camera);
+}
+window.addEventListener('resize', () => {
+    camera.aspect = innerWidth / innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(innerWidth, innerHeight);
+});
+updateConnStatus('Single Player', false);
+updateUI();
+animate();
+</script>
+</body>
+</html>

app/server.py ADDED Viewed

	@@ -0,0 +1,107 @@

+import json
+import random
+from typing import Dict
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import FileResponse
+app = FastAPI()
+clients: Dict[str, WebSocket] = {}
+player_states: Dict[str, dict] = {}
+colors = ["#ff2244", "#00ffaa", "#ffcc00", "#00ccff", "#ff66ff", "#66ff66"]
+def get_state_broadcast() -> dict:
+    return {
+        "t": "state",
+        "players": [
+            {
+                "id": pid,
+                "pos": s["pos"],
+                "rot": s["rot"],
+                "name": s.get("name", "Agent"),
+                "color": s.get("color", "#ff2244"),
+            }
+            for pid, s in player_states.items()
+        ],
+    }
+async def broadcast(sender: str, payload: dict) -> None:
+    message = json.dumps(payload)
+    dead_clients = []
+    for pid, ws in clients.items():
+        if pid == sender:
+            continue
+        try:
+            await ws.send_text(message)
+        except Exception:
+            dead_clients.append(pid)
+    for pid in dead_clients:
+        clients.pop(pid, None)
+        player_states.pop(pid, None)
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket) -> None:
+    await websocket.accept()
+    player_id = f"player_{id(websocket)}"
+    color = random.choice(colors)
+    clients[player_id] = websocket
+    player_states[player_id] = {
+        "pos": [0.0, 1.7, 0.0],
+        "rot": [0.0, 0.0, 0.0, 1.0],
+        "color": color,
+        "name": f"Agent-{random.randint(100, 999)}",
+    }
+    await websocket.send_text(json.dumps({"t": "id", "id": player_id, "color": color}))
+    await broadcast(player_id, get_state_broadcast())
+    try:
+        while True:
+            data = await websocket.receive_text()
+            msg = json.loads(data)
+            msg_type = msg.get("t")
+            if msg_type == "pos" and player_id in player_states:
+                player_states[player_id]["pos"] = msg.get("pos", [0.0, 1.7, 0.0])
+                player_states[player_id]["rot"] = msg.get("rot", [0.0, 0.0, 0.0, 1.0])
+                await broadcast(player_id, get_state_broadcast())
+            elif msg_type == "shoot":
+                await broadcast(
+                    player_id,
+                    {
+                        "t": "shoot",
+                        "origin": msg.get("origin"),
+                        "dir": msg.get("dir"),
+                        "weapon": msg.get("weapon", 0),
+                    },
+                )
+            elif msg_type == "kill":
+                await broadcast(
+                    player_id,
+                    {
+                        "t": "kill",
+                        "killer": msg.get("killer", "Unknown"),
+                        "victim": msg.get("victim", "Bot"),
+                    },
+                )
+            elif msg_type == "name" and player_id in player_states:
+                player_states[player_id]["name"] = msg.get("name", "Agent")
+    except WebSocketDisconnect:
+        clients.pop(player_id, None)
+        player_states.pop(player_id, None)
+        await broadcast(player_id, get_state_broadcast())
+@app.get("/")
+async def root() -> FileResponse:
+    return FileResponse("index.html")
+@app.get("/{path:path}")
+async def catchall(path: str) -> FileResponse:  # noqa: ARG001
+    return FileResponse("index.html")

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+fastapi
+uvicorn[standard]
+python-multipart