{"size": 2493, "ext": "js", "max_stars_repo_path": "src/controller.js", "max_stars_repo_name": "winterguard/traffic-simulator", "max_stars_repo_stars_event_min_datetime": "2021-03-04T15:04:53.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-22T13:56:30.000Z", "max_issues_repo_path": "src/controller.js", "max_issues_repo_name": "winterguard/traffic-simulator", "max_issues_repo_issues_event_min_datetime": "2021-03-09T17:31:28.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T17:42:03.000Z", "max_forks_repo_path": "src/controller.js", "max_forks_repo_name": "winterguard/traffic-simulator", "max_forks_repo_forks_event_min_datetime": "2021-03-04T15:05:01.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-02T02:15:02.000Z"}
{"max_stars_count": 6, "max_issues_count": 7, "max_forks_count": 2, "avg_line_length": 28.0112359551, "max_line_length": 124, "alphanum_fraction": 0.7352587244}
import {
  PerspectiveCamera,
  WebGLRenderer
} from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import City from './components/City';

// Controller elements
const config = {
  carsTotal: 40,
  roadsTotal: 4,
  roadLanes: 3
};
const scene = document.querySelector('#scene');
const carAccidentCount = document.getElementById('car_accident_count');
const carArrivalCount = document.getElementById('car_arrival_count');
const btnToggleTrafficSignals = document.getElementById('btn_toggle_traffic_signals');
const btnGenerateCity = document.getElementById('btn_generate_city');
let DarwinCity;
let camera;
let renderer;

function resetCounters() {
  carAccidentCount.textContent = 0;
  carArrivalCount.textContent = 0;
  btnToggleTrafficSignals.checked = true;
}

function generateCity() {
  resetCounters();
  camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 100, 5000);
  camera.position.set(0, 950, 1400);

  DarwinCity = new City(config);
  DarwinCity
    .on('carAccident', () => {
      carAccidentCount.textContent = parseInt(carAccidentCount.textContent, 10) + 1;
    })
    .on('carArrival', () => {
      carArrivalCount.textContent = parseInt(carArrivalCount.textContent, 10) + 1;
    });

  renderer = new WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.maxDistance = 1800;

  scene.innerHTML = '';
  scene.appendChild(renderer.domElement);
}

function animate() {
  DarwinCity.update();
  renderer.render(DarwinCity.scene, camera);
  requestAnimationFrame(animate);
}

// Events

/**
 * @param {Event} evt
 * @param {string} id
 */
function onChange(evt, id) {
  config[id] = evt.currentTarget.value;
  document.querySelector(`#control_${id} strong`).textContent = config[id];
}

function onToggleTrafficSignals() {
  btnToggleTrafficSignals.textContent = `${!DarwinCity.trafficLightController ? 'Deactivate' : 'Activate'} Traffic Signals`;
  DarwinCity.toggleTrafficSignals();
}

function bindEvents() {
  Object.keys(config).forEach((id) => {
    const input = document.querySelector(`#control_${id} input`);
    input.addEventListener('change', (evt) => onChange(evt, id));
    input.value = config[id];
  });

  btnToggleTrafficSignals.addEventListener('change', onToggleTrafficSignals);
  btnGenerateCity.addEventListener('click', generateCity);
}

bindEvents();
generateCity();
animate();
