Sketch 2026-02-13 23:51

function preload() {
  // IMPORTANT: External sound URLs have proven unreliable.
  // Falling back to a synthetic gunshot sound using p5.Oscillator
  // to guarantee sound playback without external server dependencies.
  gunshotSound = new p5.Oscillator('triangle');
  gunshotSound.freq(3000); // High frequency for a sharp sound
  gunshotSound.amp(0.5);   // Initial amplitude
  gunshotSound.start();    // Start the oscillator (but with 0 volume initially)
  gunshotSound.amp(0, 0);  // Set amplitude to 0 immediately after starting
}

function setup() {
  // Create a p5.js canvas, but immediately hide it, as three.js will create its own
  createCanvas(windowWidth, windowHeight);
  noCanvas(); // Hide the p5.js canvas

  // Get the crosshair DOM element
  crosshairElement = document.getElementById('crosshair');
  crosshairElement.style.display = 'none'; // Initially hidden

  // --- three.js Initialization ---
  initThreeJS();
  animate(); // Start the three.js animation loop

  // Initialize mouse coordinates for raycasting
  mouse.x = 0; // Center of screen
  mouse.y = 0; // Center of screen
}

function initThreeJS() {
  // 1. Scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87ceeb); // Sky blue background

  // 2. Camera
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 10, 20); // Initial camera position

  // 3. Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio); // Handle retina displays
  renderer.domElement.id = 'threejs-canvas'; // Add an ID for CSS styling
  document.body.appendChild(renderer.domElement);

  // 4. OrbitControls (for debugging camera, remove or comment out for game-like experience)
  // controls = new THREE.OrbitControls(camera, renderer.domElement);
  // controls.enableDamping = true; // Smooth camera movement
  // controls.dampingFactor = 0.05;
  // controls.screenSpacePanning = false;
  // controls.maxPolarAngle = Math.PI / 2; // Prevent camera from going below ground

  // 5. Lighting
  const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // White directional light
  directionalLight.position.set(5, 10, 7);
  directionalLight.castShadow = true; // Enable shadows
  directionalLight.shadow.mapSize.width = 1024; // Default 512
  directionalLight.shadow.mapSize.height = 1024; // Default 512
  directionalLight.shadow.camera.near = 0.5; // Default 0.5
  directionalLight.shadow.camera.far = 500; // Default 500
  directionalLight.shadow.camera.left = -200;
  directionalLight.shadow.camera.right = 200;
  directionalLight.shadow.camera.top = 200;
  directionalLight.shadow.camera.bottom = -200;
  scene.add(directionalLight);

  // 6. Create Environment (Ground & Buildings & NPCs)
  createEnvironment();

  // 7. Create Car
  createCar();

  // 8. Create On-Foot Player and Gun
  createPlayer();
  createGun(); // Create the gun and attach it to the player's view

  // 9. Position player at car's initial position
  player.position.copy(car.position);
  player.visible = false; // Player is initially driving

  // 10. Add Keyboard and Mouse Event Listeners for Car & Player Control
  document.addEventListener('keydown', onKeyDown);
  document.addEventListener('keyup', onKeyUp);
  document.addEventListener('mousedown', onMouseDown); // For shooting
}

function createEnvironment() {
  // Ground Plane (Roads and Grass)
  const groundGeometry = new THREE.PlaneGeometry(500, 500);
  const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x33aa33 }); // Green for grass
  const ground = new THREE.Mesh(groundGeometry, groundMaterial);
  ground.rotation.x = -Math.PI / 2; // Rotate to be flat
  ground.position.y = -0.5; // Slightly below buildings
  ground.receiveShadow = true;
  scene.add(ground);

  // Roads (simple texture or color)
  const roadGeometry = new THREE.PlaneGeometry(10, 500); // Long strip for a road
  const roadMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 }); // Grey for road

  const road1 = new THREE.Mesh(roadGeometry, roadMaterial);
  road1.rotation.x = -Math.PI / 2;
  road1.position.y = -0.49; // Slightly above ground
  road1.position.x = 0;
  road1.receiveShadow = true;
  scene.add(road1);

  const road2 = new THREE.Mesh(roadGeometry, roadMaterial);
  road2.rotation.x = -Math.PI / 2;
  road2.position.y = -0.49;
  road2.position.x = 20; // Another road
  road2.receiveShadow = true;
  scene.add(road2);

  const road3 = new THREE.Mesh(roadGeometry, roadMaterial);
  road3.rotation.x = -Math.PI / 2;
  road3.position.y = -0.49;
  road3.position.x = -20; // Another road
  road3.receiveShadow = true;
  scene.add(road3);

  // Simple Cube Buildings
  const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0xaaaaaa }); // Grey buildings
  for (let i = 0; i < 50; i++) {
    const height = Math.random() * 20 + 5;
    const width = Math.random() * 5 + 3;
    const depth = Math.random() * 5 + 3;
    const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
    const building = new THREE.Mesh(buildingGeometry, buildingMaterial);

    // Random position, avoiding the main road
    let x, z;
    do {
      x = (Math.random() * 200 - 100);
      z = (Math.random() * 200 - 100);
    } while (x > -5 && x < 5); // Avoid main road at x=0

    building.position.set(x, height / 2, z);
    building.castShadow = true;
    building.receiveShadow = true;
    scene.add(building);
  }

  // NPCs (People) - Simple cylinders
  const npcMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); // Green for people
  for (let i = 0; i < 50; i++) {
    const npcHeight = 1.8;
    const npcRadius = 0.3;
    const npcGeometry = new THREE.CylinderGeometry(npcRadius, npcRadius, npcHeight, 16);
    const npc = new THREE.Mesh(npcGeometry, npcMaterial);

    // Random position, avoiding roads and buildings
    let x, z;
    do {
      x = (Math.random() * 200 - 100);
      z = (Math.random() * 200 - 100);
    } while (x > -10 && x < 10); // Avoid main roads

    npc.position.set(x, npcHeight / 2, z);
    npc.castShadow = true;
    npc.receiveShadow = true;
    scene.add(npc);
    npcs.push(npc); // Add to NPCs array for shooting detection
  }
}

function createCar() {
  car = new THREE.Group(); // Use a Group to hold car parts

  const bodyGeometry = new THREE.BoxGeometry(3, 1, 1.5);
  const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // Red car body
  const carBody = new THREE.Mesh(bodyGeometry, bodyMaterial);
  carBody.castShadow = true;
  carBody.receiveShadow = true;
  car.add(carBody);

  const cabinGeometry = new THREE.BoxGeometry(2, 0.8, 1.2);
  const cabinMaterial = new THREE.MeshLambertMaterial({ color: 0x3333ff }); // Blue cabin
  const carCabin = new THREE.Mesh(cabinGeometry, cabinMaterial);
  carCabin.position.set(0, 0.9, 0); // Position above body
  carCabin.castShadow = true;
  carCabin.receiveShadow = true;
  car.add(carCabin);

  // Wheels (simple cylinders)
  const wheelGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.4, 16);
  const wheelMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); // Black wheels

  const wheelPositions = [
    { x: -1, y: -0.5, z: 0.8 },
    { x: 1, y: -0.5, z: 0.8 },
    { x: -1, y: -0.5, z: -0.8 },
    { x: 1, y: -0.5, z: -0.8 },
  ];

  wheelPositions.forEach(pos => {
    const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
    wheel.position.set(pos.x, pos.y, pos.z);
    wheel.rotation.x = Math.PI / 2; // Rotate to be vertical
    wheel.castShadow = true;
    wheel.receiveShadow = true;
    car.add(wheel);
  });

  scene.add(car);
}

function createPlayer() {
  player = new THREE.Group(); // Player group for movement and rotation

  const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1.8, 16);
  const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); // Green player body
  const playerBody = new THREE.Mesh(bodyGeometry, bodyMaterial);
  playerBody.position.y = 0.9; // Half height to stand on ground
  playerBody.castShadow = true;
  playerBody.receiveShadow = true;
  player.add(playerBody);

  scene.add(player);
}

function createGun() {
  const gunGeometry = new THREE.CylinderGeometry(0.1, 0.2, 0.8, 8);
  const gunMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 }); // Grey gun
  gun = new THREE.Mesh(gunGeometry, gunMaterial);
  gun.position.set(0.5, -0.3, -1); // Position relative to camera (first-person view)
  gun.rotation.x = Math.PI / 2; // Point forward
  gun.castShadow = true;
  gun.receiveShadow = true;
  gun.visible = false; // Gun is initially hidden (player is driving)
  camera.add(gun); // Attach gun directly to the camera for first-person view
}

function onKeyDown(event) {
  keys[event.key.toLowerCase()] = true;

  // Toggle player state with 'e' key
  if (event.key.toLowerCase() === 'e') {
    if (playerState === 'driving') {
      playerState = 'onFoot';
      player.position.copy(car.position); // Move player to car's position
      player.rotation.copy(car.rotation); // Match player rotation to car
      car.visible = false; // Hide the car
      gun.visible = true; // Show the gun
      carSpeed = 0; // Stop the car
      if (crosshairElement) crosshairElement.style.display = 'block'; // Show crosshair
    } else {
      playerState = 'driving';
      car.position.copy(player.position); // Move car to player's position
      car.rotation.copy(player.rotation); // Match car rotation to player
      car.visible = true; // Show the car
      gun.visible = false; // Hide the gun
      if (crosshairElement) crosshairElement.style.display = 'none'; // Hide crosshair
    }
  }
}

function onKeyUp(event) {
  keys[event.key.toLowerCase()] = false;
}

function onMouseDown(event) {
  if (playerState === 'onFoot' && event.button === 0) { // Left mouse button
    const currentTime = Date.now();
    if (currentTime - lastShotTime > shootingCooldown) {
      lastShotTime = currentTime;
      shoot();
    }
  }
}

function shoot() {
  // Update the picking ray with the camera and mouse position
  // For center of screen, mouse coordinates are (0, 0)
  raycaster.setFromCamera(mouse, camera);

  // Play gunshot sound
  if (gunshotSound) {
    // If it's a synthetic oscillator, re-trigger it
    if (gunshotSound instanceof p5.Oscillator) {
      gunshotSound.amp(0, 0.01); // Quick decay
      gunshotSound.amp(0.5, 0.05); // Attack
      gunshotSound.amp(0.2, 0.05); // Decay to a lower amp
      gunshotSound.amp(0, 0.2); // Release
    } else {
      // If it's a loaded sound file, play it
      gunshotSound.play();
    }
  }

  // Calculate objects intersecting the picking ray
  const intersects = raycaster.intersectObjects(npcs);

  if (intersects.length > 0) {
    // Hit an NPC!
    const hitNpc = intersects[0].object;
    console.log('Hit NPC:', hitNpc);

    // Remove NPC from scene and array
    scene.remove(hitNpc);
    npcs = npcs.filter(npc => npc !== hitNpc);

    // Dispose of geometry and material to prevent memory leaks
    hitNpc.geometry.dispose();
    hitNpc.material.dispose();

    // Optional: Add a temporary visual effect at the hit point
    const hitEffectGeometry = new THREE.SphereGeometry(0.1, 8, 8);
    const hitEffectMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const hitEffect = new THREE.Mesh(hitEffectGeometry, hitEffectMaterial);
    hitEffect.position.copy(intersects[0].point);
    scene.add(hitEffect);

    // Remove hit effect after a short delay
    setTimeout(() => {
      scene.remove(hitEffect);
      hitEffect.geometry.dispose();
      hitEffect.material.dispose();
    }, 100);
  }

  // Optional: Add a temporary flash at the gun barrel
  const gunFlashGeometry = new THREE.CylinderGeometry(0.1, 0.2, 0.2, 8);
  const gunFlashMaterial = new THREE.MeshBasicMaterial({ color: 0xffa500 }); // Orange flash
  const gunFlash = new THREE.Mesh(gunFlashGeometry, gunFlashMaterial);
  gunFlash.position.copy(gun.position);
  gunFlash.position.z -= 0.5; // Slightly in front of gun barrel
  gunFlash.rotation.x = Math.PI / 2;
  camera.add(gunFlash); // Add to camera to move with view

  setTimeout(() => {
    camera.remove(gunFlash);
    gunFlash.geometry.dispose();
    gunFlash.material.dispose();
  }, 50);
}

function animate() {
  requestAnimationFrame(animate);

  if (playerState === 'driving') {
    // --- Car Controls ---
    // Update car speed based on input
    if (keys['w']) { // Accelerate
      carSpeed += carAcceleration;
      carSpeed = Math.min(carSpeed, carMaxSpeed);
    } else if (keys['s']) { // Brake/Reverse
      if (carSpeed > 0) {
        carSpeed -= carBrakeDeceleration;
        carSpeed = Math.max(carSpeed, 0);
      } else {
        carSpeed -= carAcceleration / 2; // Reverse slower
        carSpeed = Math.max(carSpeed, -carMaxSpeed / 2);
      }
    } else { // Decelerate if no input
      if (carSpeed > 0) {
        carSpeed -= carDeceleration;
        carSpeed = Math.max(carSpeed, 0);
      } else if (carSpeed < 0) {
        carSpeed += carDeceleration;
        carSpeed = Math.min(carSpeed, 0);
      }
    }

    // Update car rotation based on input and speed
    if (carSpeed !== 0) {
      if (keys['a']) { // Turn left
        car.rotation.y += carTurnSpeed * (carSpeed > 0 ? 1 : -1);
      }
      if (keys['d']) { // Turn right
        car.rotation.y -= carTurnSpeed * (carSpeed > 0 ? 1 : -1);
      }
    }

    // Move car based on speed and rotation
    const forwardVector = new THREE.Vector3(0, 0, -1); // Car's local forward direction
    forwardVector.applyQuaternion(car.quaternion); // Apply car's rotation
    car.position.addScaledVector(forwardVector, carSpeed);

    // Keep car on the ground
    car.position.y = 0;

    // Update camera to follow the car
    const cameraOffset = new THREE.Vector3(0, 10, 15); // Offset from the car
    const rotatedOffset = cameraOffset.clone().applyQuaternion(car.quaternion); // Apply car's rotation to offset
    camera.position.copy(car.position).add(rotatedOffset);
    camera.lookAt(car.position); // Always look at the car

  } else if (playerState === 'onFoot') {
    // --- On-Foot Controls ---
    // Move player based on input
    const playerForwardVector = new THREE.Vector3(0, 0, -1);
    playerForwardVector.applyQuaternion(player.quaternion);
    const playerRightVector = new THREE.Vector3(1, 0, 0);
    playerRightVector.applyQuaternion(player.quaternion);

    if (keys['w']) { // Move forward
      player.position.addScaledVector(playerForwardVector, playerSpeed);
    }
    if (keys['s']) { // Move backward
      player.position.addScaledVector(playerForwardVector, -playerSpeed);
    }
    if (keys['a']) { // Turn left
      player.rotation.y += playerTurnSpeed;
    }
    if (keys['d']) { // Turn right
      player.rotation.y -= playerTurnSpeed;
    }

    // Keep player on the ground
    player.position.y = 0;

    // Update camera to follow the player (first-person view)
    const playerCameraOffset = new THREE.Vector3(0, 1.6, 0); // Eye level offset
    const rotatedPlayerOffset = playerCameraOffset.clone().applyQuaternion(player.quaternion);
    camera.position.copy(player.position).add(rotatedPlayerOffset);
    camera.lookAt(player.position.clone().add(playerForwardVector.multiplyScalar(10))); // Look in player's forward direction
  }

  // If OrbitControls are enabled, update them
  // if (controls) controls.update(); // Only required if controls.enableDamping is set to true

  renderer.render(scene, camera);
}

function draw() {
  // three.js handles rendering via its animate() loop
}

function windowResized() {
  // Update three.js camera aspect and renderer size
  if (camera && renderer) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  // p5.js resizeCanvas would go here if we were using it for rendering
}