'main.js'
import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js";
import { init, animate, scene, camera, controls } from "./scene.js";
import { createTurtle } from "./objects/turtle.js";
import { createGrid } from "./objects/grid.js";
import { Vector2, Raycaster} from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js";
import { Computer } from "./objects/computer.js";

init();

const blinkAnimationSettings = {
  animation: {
    frametime: 8,
    frames: [0, 1],
  },
};

document.getElementById("menuButton").addEventListener("click", () => {
  const menu = document.getElementById("slideMenu");
  menu.style.right = menu.style.right === "0px" ? "-250px" : "0px";
});

const grid = createGrid(10, 10);

let highlightedGridUnit;

var listCounters = {
  computers: 0,
  turtles: 0,
};
const turtlesArray = [];

function roundToNearestGridCenter(value, gridSize) {
  return Math.round(value / gridSize) * gridSize;
}

const computersArray = [];

function onMouseDown(event) {
  event.preventDefault();

  if (!placementMode) return;

  // Calculate mouse position in normalized device coordinates (-1 to +1) for both components
  const mouse = new Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );

  // Create a raycaster and set its origin and direction based on the mouse position and camera
  const raycaster = new Raycaster();
  raycaster.setFromCamera(mouse, camera);

  // Find the intersection with the grid
  const intersects = raycaster.intersectObject(grid);

  // If there is an intersection, create a new turtle or computer and add it to the scene
  if (intersects.length > 0) {
    const intersect = intersects[0];
    const x = Math.round(intersect.point.x - 0.5) + 0.5;
    const z = Math.round(intersect.point.z - 0.5) + 0.5;

    const loader = new THREE.TextureLoader(); // Define the loader here

    if (currentObject === "turtle") {
      const newTurtle = createTurtle(loader, x, z);
      scene.add(newTurtle);
      addItemToList("turtles", newTurtle);
    } else if (currentObject === "./assets/textures/computer/computer_normal_front_blink.png") {
      const newComputer = new Computer(blinkAnimationSettings, currentObject);
      computersArray.push(newComputer);
      scene.add(newComputer.mesh);
      newComputer.mesh.position.set(
        x,
        newComputer.mesh.scale.z / 2,
        z
      );
      addItemToList("computers", newComputer.mesh);
    }

    placementMode = false;
    currentObject = null;
  }
}

function onMouseMove(event) {
  if (!placementMode) {
    highlightedGridUnit.visible = false;
    return;
  }

  // Calculate mouse position in normalized device coordinates (-1 to +1) for both components
  const mouse = new Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );

  // Create a raycaster and set its origin and direction based on the mouse position and camera
  const raycaster = new Raycaster();
  raycaster.setFromCamera(mouse, camera);

  // Find the intersection with the grid
  const intersects = raycaster.intersectObject(grid);

  // If there is an intersection, update the position of the highlighted grid unit
  if (intersects.length > 0) {
    const intersect = intersects[0];
    const x = Math.round(intersect.point.x - 0.5) + 0.5;
    const z = Math.round(intersect.point.z - 0.5) + 0.5;
    highlightedGridUnit.position.set(x, 0, z);
    highlightedGridUnit.visible = true;
  } else {
    highlightedGridUnit.visible = false;
  }
}

document.addEventListener("mousemove", onMouseMove);

let turtlePlacementMode = false;

function createHighlightedGridUnit() {
  const geometry = new THREE.PlaneGeometry(1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5,
  });
  const highlightedGridUnit = new THREE.Mesh(geometry, material);
  highlightedGridUnit.rotation.x = Math.PI / 2;
  highlightedGridUnit.visible = false;
  return highlightedGridUnit;
}

highlightedGridUnit = createHighlightedGridUnit();
scene.add(highlightedGridUnit);

function addItemToList(listId, object) {
  var list = document.getElementById(listId);
  var listItem = document.createElement("li");

  // Create the 'X' button
  var removeButton = document.createElement("button");
  removeButton.textContent = "X";
  removeButton.style.position = "absolute";
  removeButton.style.right = "5px";
  removeButton.style.width = "20px";
  removeButton.style.height = "20px";
  removeButton.style.lineHeight = "20px";
  removeButton.style.padding = "0";
  removeButton.style.fontFamily = "Arial, sans-serif";
  removeButton.style.fontSize = "14px";
  removeButton.style.fontWeight = "bold";
  removeButton.style.textAlign = "center";
  removeButton.addEventListener("click", (event) => {
    event.stopPropagation();
    list.removeChild(listItem);
    if (object) {
      scene.remove(object);
    }

    // Decrement the appropriate counter if a computer or turtle object is removed
    if (listId === "computers" || listId === "turtles") {
      listCounters[listId]--;
    }
  });

  listItem.textContent = listCounters[listId]++;
  listItem.style.position = "relative";
  listItem.appendChild(removeButton);
  listItem.addEventListener("click", () => {
    if (object) {
      focusOnObject(object);
    } else {
      focusOnGridCenter();
    }
  });
  list.appendChild(listItem);
}

let placementMode = false;
let currentObject = null;

function focusOnPosition(position) {
  const distance = 5;
  const offset = new THREE.Vector3(0, 2, distance);
  controls.target.copy(position);
  camera.position.copy(position);
  camera.position.add(offset);
  controls.update();
}

// Add the event listener for the mousedown event
document.addEventListener("mousedown", onMouseDown, false);

document
  .getElementById("addButtonTurtles")
  .addEventListener("click", function () {
    const loader = new THREE.TextureLoader();
    const newX = 0;
    const newY = 0;
    currentObject = "turtle";
    placementMode = true;
    highlightedGridUnit.visible = true; // Make the highlightedGridUnit visible
  });

  document
  .getElementById("addButtonComputers")
  .addEventListener("click", function () {
    // Store the selected texture path in currentObject
    currentObject = './assets/textures/computer/computer_normal_front_blink.png';
    placementMode = true;
    highlightedGridUnit.visible = true; // Make the highlightedGridUnit visible
  });
// Add event listeners for more lists if needed
animate();

---

'scene.js'
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.114.0/examples/jsm/controls/OrbitControls.js';
import { Computer } from './objects/computer.js';
import { createDirectionalLight } from './objects/directionalLight.js';
import { createGrid } from './objects/grid.js';
import { createTurtle } from './objects/turtle.js';


let camera, scene, renderer, sphere, light, controls, grid;

const blinkAnimationSettings = {
  "animation": {
    "frametime": 8,
    "frames": [0, 1],
  },
};


const computersArray = [];

const computer = new Computer(blinkAnimationSettings, './assets/textures/computer/computer_normal_front_blink.png');

function init() {

  // Create a new scene
  scene = new THREE.Scene();

  // Set up the camera
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  // Create a renderer and add it to the DOM
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  computersArray.push(computer);
  scene.add(computer.mesh);

  const loader = new THREE.TextureLoader();
  const turtle = createTurtle(loader, 0, 0);

  // scene.add(turtle)

  // Add a directional light
  light = createDirectionalLight();
  scene.add(light);

  // Add OrbitControls
  controls = new OrbitControls(camera, renderer.domElement);

  // Add a 10x10 grid
  grid = createGrid(10, 10);
  scene.add(grid);

  // Handle window resize
  window.addEventListener('resize', onWindowResize, false);
}

function animate() {
  requestAnimationFrame(animate);

  // Update animations for all computers
  // Update animations for each computer instance
  for (const computer of computersArray) {
    computer.updateAnimation();
  }

  // Update OrbitControls
  controls.update();

  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

export { init, animate, scene, camera, controls};
----
'computer.js'
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

export class Computer {
    constructor(blinkAnimationSettings, texturePath) {
        this.blinkAnimationSettings = blinkAnimationSettings;
        this.currentFrame = new THREE.Vector2(0, 0);
        this.frameCounter = 0;
        this.mesh = this.createComputer(texturePath);
    }

    createComputer(texturePath) {
        const loader = new THREE.TextureLoader();

        const texture = loader.load(texturePath, function (texture) {
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
        });

        const textureTop = loader.load('./assets/textures/computer/computer_normal_top.png', function (texture) {
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
        });

        const textureSides = loader.load('./assets/textures/computer/computer_normal_side.png', function (texture) {
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
        });

        const numFrames = this.blinkAnimationSettings.animation.frames.length;
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(1 / 1, 1 / 2);

        const materials = [
            new THREE.MeshBasicMaterial({ map: textureSides }),
            new THREE.MeshBasicMaterial({ map: textureSides }),
            new THREE.MeshBasicMaterial({ map: textureTop }),
            new THREE.MeshBasicMaterial({ map: textureTop }),
            new THREE.MeshBasicMaterial({ map: texture }),
            new THREE.MeshBasicMaterial({ map: textureSides }),
        ];

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const computer = new THREE.Mesh(geometry, materials);

        computer.scale.set(1, 1, 1);
        computer.position.set(-4.5, 0.5, 4.5);

        return computer;
    }

    updateAnimation() {
        if (this.frameCounter % (this.blinkAnimationSettings.animation.frametime * 4) === 0) {
            this.currentFrame.y = (this.currentFrame.y + 1) % this.blinkAnimationSettings.animation.frames.length;
            this.mesh.material[4].map.offset.y = this.blinkAnimationSettings.animation.frames[this.currentFrame.y] * 0.5;
        }
        this.frameCounter++;
    }
}
---