add secure acoustic DEAD AIR game

apps/web/src/DeadAir3D.tsx

@@ -0,0 +1,478 @@
+import { useEffect, useRef, useState, type MutableRefObject } from "react";
+import * as THREE from "three";
+import {
+  DEAD_AIR_EXTRACTION,
+  DEAD_AIR_MAP_SIZE,
+  DEAD_AIR_POWER_SWITCH,
+  DEAD_AIR_TICK_RATE,
+  DEAD_AIR_WALLS,
+  type DeadAirClientState,
+  type DeadAirPlayerView,
+} from "@syncer/shared";
+import type { DeadAirRenderSource } from "./useDeadAirClient.js";
+
+interface DeadAir3DProps {
+  source: DeadAirRenderSource;
+  playerId: number | null;
+  unlockAudio(): void;
+}
+
+interface PlayerMesh extends THREE.Group {
+  userData: {
+    lamp?: THREE.PointLight;
+    beam?: THREE.SpotLight;
+  };
+}
+
+interface TemporaryEffect {
+  object: THREE.Object3D;
+  expiresAt: number;
+}
+
+interface DeadAirRuntime {
+  renderer: THREE.WebGLRenderer;
+  scene: THREE.Scene;
+  camera: THREE.PerspectiveCamera;
+  ambient: THREE.HemisphereLight;
+  poweredLights: THREE.PointLight[];
+  flashlight: THREE.SpotLight;
+  flashlightLens: THREE.Mesh;
+  weapon: THREE.Group;
+  muzzle: THREE.PointLight;
+  players: Map<number, PlayerMesh>;
+  artifact: THREE.Group;
+  effects: TemporaryEffect[];
+  resizeObserver: ResizeObserver;
+  animationFrame: number;
+}
+
+export function DeadAir3D({ source, playerId, unlockAudio }: DeadAir3DProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const playerIdRef = useRef(playerId);
+  const sourceRef = useRef(source);
+  const runtimeRef = useRef<DeadAirRuntime | null>(null);
+  const lastEventIdRef = useRef(0);
+  const [locked, setLocked] = useState(false);
+  playerIdRef.current = playerId;
+  sourceRef.current = source;
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 0.82;
+    host.append(renderer.domElement);
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x010304);
+    scene.fog = new THREE.FogExp2(0x020506, 0.026);
+    const camera = new THREE.PerspectiveCamera(76, 1, 0.035, 110);
+    camera.rotation.order = "YXZ";
+    scene.add(camera);
+
+    const ambient = new THREE.HemisphereLight(0x68828a, 0x050506, 0.16);
+    scene.add(ambient);
+    const poweredLights = buildLevel(scene);
+    const artifact = buildArtifact();
+    artifact.visible = false;
+    scene.add(artifact);
+
+    const flashlightTarget = new THREE.Object3D();
+    flashlightTarget.position.set(0, -0.08, -12);
+    camera.add(flashlightTarget);
+    const flashlight = new THREE.SpotLight(0xdffaff, 112, 31, 0.42, 0.42, 1.5);
+    flashlight.position.set(0.12, -0.05, -0.12);
+    flashlight.target = flashlightTarget;
+    flashlight.castShadow = true;
+    flashlight.shadow.mapSize.set(512, 512);
+    flashlight.shadow.bias = -0.0005;
+    camera.add(flashlight);
+
+    const weapon = buildWeapon();
+    camera.add(weapon);
+    const flashlightLens = weapon.getObjectByName("flashlight-lens") as THREE.Mesh;
+    const muzzle = new THREE.PointLight(0xffd19b, 0, 5, 2);
+    muzzle.position.set(0.33, -0.2, -1.05);
+    camera.add(muzzle);
+
+    const runtime: DeadAirRuntime = {
+      renderer,
+      scene,
+      camera,
+      ambient,
+      poweredLights,
+      flashlight,
+      flashlightLens,
+      weapon,
+      muzzle,
+      players: new Map(),
+      artifact,
+      effects: [],
+      resizeObserver: new ResizeObserver(() => resize(runtime, host)),
+      animationFrame: 0,
+    };
+    runtimeRef.current = runtime;
+    runtime.resizeObserver.observe(host);
+    resize(runtime, host);
+
+    const animate = (time: number) => {
+      updateRuntime(runtime, sourceRef.current, playerIdRef.current, lastEventIdRef, time);
+      renderer.render(scene, camera);
+      runtime.animationFrame = window.requestAnimationFrame(animate);
+    };
+    runtime.animationFrame = window.requestAnimationFrame(animate);
+    const pointerLockChanged = () => setLocked(document.pointerLockElement === renderer.domElement);
+    document.addEventListener("pointerlockchange", pointerLockChanged);
+
+    return () => {
+      document.removeEventListener("pointerlockchange", pointerLockChanged);
+      runtime.resizeObserver.disconnect();
+      window.cancelAnimationFrame(runtime.animationFrame);
+      scene.traverse(disposeObject);
+      renderer.dispose();
+      renderer.domElement.remove();
+      runtimeRef.current = null;
+    };
+  }, []);
+
+  const enter = () => {
+    unlockAudio();
+    const canvas = runtimeRef.current?.renderer.domElement;
+    if (canvas) void canvas.requestPointerLock().catch(() => setLocked(false));
+  };
+
+  return (
+    <div className="dead-air-viewport" ref={hostRef}>
+      {!locked ? (
+        <button className="dead-air-enter" type="button" onClick={enter}>
+          <small>HEADPHONES STRONGLY RECOMMENDED</small>
+          <strong>ENTER THE DEAD AIR</strong>
+          <span>STEAL THE SCREAMING MICROWAVE // TRUST YOUR EARS</span>
+          <em>WASD · MOUSE · CLICK FIRE · E INTERACT · F LIGHT · Q DECOY · R RELOAD</em>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function updateRuntime(
+  runtime: DeadAirRuntime,
+  source: DeadAirRenderSource,
+  playerId: number | null,
+  lastEventId: MutableRefObject<number>,
+  time: number,
+): void {
+  const frame = source.current;
+  const world = frame.state;
+  const local = world.players.find((player) => player.id === playerId);
+  const fractionalSeconds = frame.interpolationAlpha / DEAD_AIR_TICK_RATE;
+  if (local) {
+    const correctionLife = Math.max(0, 1 - (time - frame.localCorrection.updatedAt) / 130);
+    runtime.camera.position.set(
+      local.x + local.velocityX * fractionalSeconds + frame.localCorrection.x * correctionLife,
+      1.62,
+      local.z + local.velocityZ * fractionalSeconds + frame.localCorrection.z * correctionLife,
+    );
+    runtime.camera.rotation.set(local.pitch, Math.PI + local.yaw, 0);
+    runtime.flashlight.intensity = local.alive && local.flashlight ? 112 : 0;
+    runtime.flashlightLens.visible = local.flashlight;
+    runtime.weapon.visible = local.alive;
+    const speed = Math.hypot(local.velocityX, local.velocityZ);
+    runtime.weapon.position.x = 0.31 + Math.cos(time * 0.008) * Math.min(0.012, speed * 0.0018);
+    runtime.weapon.position.y = -0.26 + Math.sin(time * 0.015) * Math.min(0.025, speed * 0.0035);
+  } else {
+    runtime.flashlight.intensity = 0;
+    runtime.weapon.visible = false;
+  }
+
+  runtime.ambient.intensity = world.powerOn ? 0.18 : 0.025;
+  for (const light of runtime.poweredLights) {
+    light.intensity = world.powerOn ? 3.4 + Math.sin(time * 0.003 + light.position.x) * 0.22 : 0;
+  }
+  updatePlayers(runtime, world, playerId, fractionalSeconds);
+  updateArtifact(runtime, world, time);
+  updateEffects(runtime, world, lastEventId, time);
+}
+
+function buildLevel(scene: THREE.Scene): THREE.PointLight[] {
+  const floor = new THREE.Mesh(
+    new THREE.PlaneGeometry(DEAD_AIR_MAP_SIZE, DEAD_AIR_MAP_SIZE),
+    new THREE.MeshStandardMaterial({ color: 0x101619, roughness: 0.91, metalness: 0.08 }),
+  );
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  scene.add(floor);
+
+  const grid = new THREE.GridHelper(DEAD_AIR_MAP_SIZE, 36, 0x26343a, 0x182125);
+  grid.position.y = 0.012;
+  const gridMaterials = Array.isArray(grid.material) ? grid.material : [grid.material];
+  for (const material of gridMaterials) {
+    material.transparent = true;
+    material.opacity = 0.21;
+  }
+  scene.add(grid);
+
+  for (const wall of DEAD_AIR_WALLS) {
+    const mesh = new THREE.Mesh(
+      new THREE.BoxGeometry(wall.width, wall.height, wall.depth),
+      new THREE.MeshStandardMaterial({
+        color: wall.id.includes("vault") ? 0x253036 : 0x172126,
+        roughness: 0.78,
+        metalness: wall.id.includes("vault") ? 0.55 : 0.22,
+      }),
+    );
+    mesh.position.set(wall.x, wall.height / 2, wall.z);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    scene.add(mesh);
+    if (!wall.id.includes("north") && !wall.id.includes("south") && wall.width > 4) {
+      const stripe = new THREE.Mesh(
+        new THREE.BoxGeometry(Math.max(0.2, wall.width - 0.08), 0.12, wall.depth + 0.025),
+        new THREE.MeshStandardMaterial({ color: 0x5c4d2d, emissive: 0x1f1705, emissiveIntensity: 0.2 }),
+      );
+      stripe.position.set(wall.x, 1.05, wall.z);
+      scene.add(stripe);
+    }
+  }
+
+  const extraction = new THREE.Mesh(
+    new THREE.RingGeometry(DEAD_AIR_EXTRACTION.radius - 0.18, DEAD_AIR_EXTRACTION.radius, 48),
+    new THREE.MeshBasicMaterial({ color: 0x5be6bf, transparent: true, opacity: 0.48, side: THREE.DoubleSide }),
+  );
+  extraction.rotation.x = -Math.PI / 2;
+  extraction.position.set(DEAD_AIR_EXTRACTION.x, 0.045, DEAD_AIR_EXTRACTION.z);
+  scene.add(extraction);
+  const extractionLight = new THREE.PointLight(0x3de0b1, 2.4, 11, 2);
+  extractionLight.position.set(DEAD_AIR_EXTRACTION.x, 1.1, DEAD_AIR_EXTRACTION.z);
+  scene.add(extractionLight);
+
+  const powerBox = new THREE.Mesh(
+    new THREE.BoxGeometry(0.8, 1.4, 0.5),
+    new THREE.MeshStandardMaterial({ color: 0x36434a, emissive: 0x601508, emissiveIntensity: 0.7, metalness: 0.65 }),
+  );
+  powerBox.position.set(DEAD_AIR_POWER_SWITCH.x, 0.9, DEAD_AIR_POWER_SWITCH.z);
+  scene.add(powerBox);
+
+  const cratePositions: ReadonlyArray<readonly [number, number]> = [
+    [-29, -29], [0, -27], [28, -28], [-28, 8], [0, 13], [28, 8], [-27, 27], [27, 27],
+  ];
+  for (const [index, position] of cratePositions.entries()) {
+    const crate = new THREE.Mesh(
+      new THREE.BoxGeometry(index % 2 ? 2.2 : 1.7, 0.18, index % 3 ? 1.5 : 2.1),
+      new THREE.MeshStandardMaterial({ color: 0x302a22, roughness: 0.9, metalness: 0.12 }),
+    );
+    crate.position.set(position[0], 0.09, position[1]);
+    crate.rotation.y = index * 0.37;
+    crate.castShadow = true;
+    crate.receiveShadow = true;
+    scene.add(crate);
+  }
+
+  const poweredLights: THREE.PointLight[] = [];
+  const ceilingLightPositions: ReadonlyArray<readonly [number, number]> = [
+    [-25, -10], [0, -14], [25, -10], [-25, 23], [1, 2], [25, 23],
+  ];
+  for (const position of ceilingLightPositions) {
+    const fixture = new THREE.Mesh(
+      new THREE.BoxGeometry(2.6, 0.08, 0.32),
+      new THREE.MeshBasicMaterial({ color: 0xbad8dc }),
+    );
+    fixture.position.set(position[0], 4.1, position[1]);
+    scene.add(fixture);
+    const light = new THREE.PointLight(0xb8e4e9, 3.4, 16, 1.8);
+    light.position.set(position[0], 3.85, position[1]);
+    scene.add(light);
+    poweredLights.push(light);
+  }
+
+  const emergencyLightPositions: ReadonlyArray<readonly [number, number]> = [
+    [-34, -4], [34, -4], [-2, -34], [-2, 34],
+  ];
+  for (const position of emergencyLightPositions) {
+    const emergency = new THREE.PointLight(0xff2f1c, 1.7, 9, 2);
+    emergency.position.set(position[0], 2.3, position[1]);
+    scene.add(emergency);
+  }
+  return poweredLights;
+}
+
+function buildWeapon(): THREE.Group {
+  const group = new THREE.Group();
+  group.position.set(0.31, -0.26, -0.65);
+  const body = new THREE.Mesh(
+    new THREE.BoxGeometry(0.19, 0.2, 0.9),
+    new THREE.MeshStandardMaterial({ color: 0x151c20, roughness: 0.34, metalness: 0.78 }),
+  );
+  body.position.z = -0.16;
+  group.add(body);
+  const canister = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.055, 0.055, 0.52, 10),
+    new THREE.MeshStandardMaterial({ color: 0x6fd2c4, emissive: 0x173c38, emissiveIntensity: 0.7, metalness: 0.38 }),
+  );
+  canister.rotation.x = Math.PI / 2;
+  canister.position.set(-0.12, 0.06, -0.25);
+  group.add(canister);
+  const lens = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.075, 0.075, 0.06, 12),
+    new THREE.MeshBasicMaterial({ color: 0xdffaff }),
+  );
+  lens.name = "flashlight-lens";
+  lens.rotation.x = Math.PI / 2;
+  lens.position.set(0.13, -0.08, -0.59);
+  group.add(lens);
+  return group;
+}
+
+function buildPlayer(player: DeadAirPlayerView): PlayerMesh {
+  const group = new THREE.Group() as PlayerMesh;
+  const color = player.bot ? 0x7d1714 : 0x1d5960;
+  const body = new THREE.Mesh(
+    new THREE.CapsuleGeometry(0.46, 0.86, 4, 8),
+    new THREE.MeshStandardMaterial({ color, roughness: 0.54, metalness: 0.3 }),
+  );
+  body.position.y = 1.03;
+  body.castShadow = true;
+  group.add(body);
+  const visor = new THREE.Mesh(
+    new THREE.BoxGeometry(0.56, 0.19, 0.08),
+    new THREE.MeshStandardMaterial({ color: 0x090d0f, emissive: player.bot ? 0x710b07 : 0x083e44, emissiveIntensity: 1.2 }),
+  );
+  visor.position.set(0, 1.62, 0.37);
+  group.add(visor);
+  const lamp = new THREE.PointLight(player.bot ? 0xff4a37 : 0xa8f6ff, 0, 7, 2);
+  lamp.position.set(0.2, 1.55, 0.42);
+  group.add(lamp);
+  const target = new THREE.Object3D();
+  target.position.set(0, 1.35, 9);
+  group.add(target);
+  const beam = new THREE.SpotLight(player.bot ? 0xff7661 : 0xc9f8ff, 0, 19, 0.42, 0.55, 1.6);
+  beam.position.set(0.2, 1.55, 0.3);
+  beam.target = target;
+  group.add(beam);
+  group.userData = { lamp, beam };
+  return group;
+}
+
+function updatePlayers(
+  runtime: DeadAirRuntime,
+  world: Readonly<DeadAirClientState>,
+  playerId: number | null,
+  fractionalSeconds: number,
+): void {
+  const visible = new Set(world.players.map((player) => player.id));
+  for (const player of world.players) {
+    if (player.id === playerId) continue;
+    let group = runtime.players.get(player.id);
+    const targetX = player.x + player.velocityX * fractionalSeconds;
+    const targetZ = player.z + player.velocityZ * fractionalSeconds;
+    if (!group) {
+      group = buildPlayer(player);
+      group.position.set(targetX, 0, targetZ);
+      runtime.players.set(player.id, group);
+      runtime.scene.add(group);
+    } else {
+      group.position.x += (targetX - group.position.x) * 0.34;
+      group.position.z += (targetZ - group.position.z) * 0.34;
+    }
+    group.rotation.y = player.yaw;
+    group.visible = player.alive;
+    if (group.userData.lamp) group.userData.lamp.intensity = player.flashlight ? 3.6 : 0;
+    if (group.userData.beam) group.userData.beam.intensity = player.flashlight ? 34 : 0;
+  }
+  for (const [id, group] of runtime.players) {
+    if (visible.has(id)) continue;
+    runtime.players.delete(id);
+    runtime.scene.remove(group);
+    group.traverse(disposeObject);
+  }
+}
+
+function buildArtifact(): THREE.Group {
+  const group = new THREE.Group();
+  const body = new THREE.Mesh(
+    new THREE.BoxGeometry(1.15, 0.75, 0.78),
+    new THREE.MeshStandardMaterial({ color: 0xa78a31, roughness: 0.32, metalness: 0.82, emissive: 0x3c2300, emissiveIntensity: 0.6 }),
+  );
+  body.position.y = 0.58;
+  body.castShadow = true;
+  group.add(body);
+  const door = new THREE.Mesh(
+    new THREE.BoxGeometry(0.78, 0.47, 0.035),
+    new THREE.MeshStandardMaterial({ color: 0x15100b, emissive: 0xff3d0d, emissiveIntensity: 0.34, roughness: 0.18 }),
+  );
+  door.position.set(-0.12, 0.59, 0.405);
+  group.add(door);
+  const dial = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.075, 0.075, 0.06, 12),
+    new THREE.MeshBasicMaterial({ color: 0xff8a35 }),
+  );
+  dial.rotation.x = Math.PI / 2;
+  dial.position.set(0.42, 0.69, 0.43);
+  group.add(dial);
+  group.add(new THREE.PointLight(0xff4b17, 5, 8, 2));
+  return group;
+}
+
+function updateArtifact(runtime: DeadAirRuntime, world: Readonly<DeadAirClientState>, time: number): void {
+  const artifact = world.artifact;
+  runtime.artifact.visible = artifact.visible && artifact.x !== null && artifact.z !== null;
+  if (!runtime.artifact.visible || artifact.x === null || artifact.z === null) return;
+  runtime.artifact.position.set(artifact.x, 0.08 + Math.sin(time * 0.004) * 0.07, artifact.z);
+  runtime.artifact.rotation.y = time * 0.00055;
+}
+
+function updateEffects(
+  runtime: DeadAirRuntime,
+  world: Readonly<DeadAirClientState>,
+  lastEventId: MutableRefObject<number>,
+  time: number,
+): void {
+  for (const entry of world.events) {
+    if (entry.event.id <= lastEventId.current || entry.event.type !== "muzzle") continue;
+    const event = entry.event;
+    const direction = new THREE.Vector3(Math.sin(event.yaw), Math.sin(event.pitch), Math.cos(event.yaw)).normalize();
+    const start = new THREE.Vector3(event.x, 1.45, event.z).addScaledVector(direction, 0.8);
+    const end = start.clone().addScaledVector(direction, 27);
+    const length = start.distanceTo(end);
+    const tracer = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.018, 0.035, length, 5),
+      new THREE.MeshBasicMaterial({ color: 0xffc78b, transparent: true, opacity: 0.7 }),
+    );
+    tracer.position.copy(start).add(end).multiplyScalar(0.5);
+    tracer.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
+    runtime.scene.add(tracer);
+    runtime.effects.push({ object: tracer, expiresAt: time + 95 });
+    runtime.muzzle.intensity = 16;
+  }
+  lastEventId.current = world.events.reduce(
+    (latest, entry) => Math.max(latest, entry.event.id),
+    lastEventId.current,
+  );
+  runtime.muzzle.intensity *= 0.75;
+  runtime.effects = runtime.effects.filter((effect) => {
+    if (effect.expiresAt > time) return true;
+    runtime.scene.remove(effect.object);
+    effect.object.traverse(disposeObject);
+    return false;
+  });
+}
+
+function resize(runtime: DeadAirRuntime, host: HTMLDivElement): void {
+  const width = Math.max(1, host.clientWidth);
+  const height = Math.max(1, host.clientHeight);
+  runtime.renderer.setSize(width, height, false);
+  runtime.camera.aspect = width / height;
+  runtime.camera.updateProjectionMatrix();
+}
+
+function disposeObject(object: THREE.Object3D): void {
+  if (!(object instanceof THREE.Mesh || object instanceof THREE.Line)) return;
+  object.geometry.dispose();
+  const materials = Array.isArray(object.material) ? object.material : [object.material];
+  for (const material of materials) material.dispose();
+}