first commit

data/assets/house.js

@@ -0,0 +1,15 @@
+const createHouse = () => {
+  const base = document.createElement("div");
+  const roof = document.createElement("div");
+  const door = document.createElement("div");
+  const window = document.createElement("div");
+
+  base.style = {
+    position: "absolute",
+    width: "200px",
+    height: "200px",
+    top: "50%",
+    left: "50%",
+    background: "brightblue",
+  };
+};

data/car.js

@@ -0,0 +1,3 @@
+const initCarSpawn = () => {};
+
+export default initCarSpawn();

data/clock.js

@@ -0,0 +1,106 @@
+let time = window.localStorage.getItem("time") || Date.now();
+let interval;
+
+const updateTime = () => {
+  const timeString = new Date(time).toLocaleTimeString("sv", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  time = time * 1 + 60000;
+  window.localStorage.setItem("time", time);
+  const [hour, minute] = timeString.split(":");
+  const hourDegrees = (360 / 12) * hour - 90;
+  const minuteDegrees = (360 / 60) * minute - 90;
+  document
+    .querySelector(":root")
+    .style.setProperty("--hour-deg", `${hourDegrees}deg`);
+  document
+    .querySelector(":root")
+    .style.setProperty("--minute-deg", `${minuteDegrees}deg`);
+  window.hour = hour;
+};
+
+const startTimer = () => {
+  clearInterval(interval);
+  if (window.speed === 0) {
+    document.querySelector("world").style.filter = "grayscale(.8)";
+    return;
+  }
+  if (document.querySelector("world"))
+    document.querySelector("world").style.filter = "grayscale(0)";
+  interval = setInterval(updateTime, 1000 / (window.speed || 1));
+};
+
+const updateSpeed = () => {
+  startTimer(window.speed);
+  window.updateCarSpeed(window.speed);
+  window.updateSpawnCarInterval();
+};
+
+const initClock = (element = document.querySelector("game")) => {
+  if (!document.querySelector("clock")) {
+    const clock = document.createElement("clock");
+    const clockHour = document.createElement("arm");
+    const clockMinute = document.createElement("arm");
+
+    clock.classList.add("clock");
+    clockHour.classList.add("arm", "hour");
+    clockMinute.classList.add("arm", "minute");
+
+    clock.append(clockHour, clockMinute);
+    updateTime();
+    startTimer(1);
+    element.appendChild(clock);
+  }
+  updateTime();
+};
+
+const speedHandler = (e) => {
+  window.speed = e.target.speed;
+  updateSpeed();
+};
+
+const initSpeed = (element = document.querySelector("game")) => {
+  window.speed = 1;
+
+  const speeds = [
+    {
+      name: "pause",
+      value: 0,
+      text: "⏸",
+    },
+    {
+      name: "slow",
+      value: 0.5,
+      text: "➷",
+    },
+    {
+      name: "normal",
+      value: 1,
+      text: "➵",
+    },
+    {
+      name: "fast",
+      value: 4,
+      text: "➹",
+    },
+    {
+      name: "ultra",
+      value: 20,
+      text: "➳",
+    },
+  ];
+
+  const speedEl = document.createElement("speedController");
+  speeds.forEach((speed) => {
+    const el = document.createElement(speed.name);
+    el.speed = speed.value;
+    el.innerText = speed.text;
+    el.addEventListener("click", speedHandler);
+    speedEl.append(el);
+  });
+
+  element.append(speedEl);
+};
+
+export { initClock, initSpeed };

data/world.js

@@ -0,0 +1,150 @@
+const roads = [];
+const cars = new Set();
+window.density = 3;
+window.carsPassed = 0;
+window.carsClicked = 0;
+
+const refreshRoads = () => {
+  document.querySelector("world").append(...roads);
+};
+
+const addRoad = () => {
+  const road = document.createElement("road");
+  const roadLine = document.createElement("line");
+
+  road.append(roadLine);
+
+  roads.push(road);
+  refreshRoads();
+};
+
+const updateCarsPassed = () => {
+  window.carsPassed++;
+  document.querySelector(
+    "passed"
+  ).innerText = `Cars passed: ${window.carsPassed}`;
+};
+
+const updateCarsClicked = (e) => {
+  if (!window.speed)
+    return e.target.addEventListener("click", updateCarsClicked);
+  e.target.remove();
+  window.carsClicked++;
+  document.querySelector(
+    "clicked"
+  ).innerText = `Cars clicked: ${window.carsClicked}`;
+};
+
+window.updateCarSpeed = (speed) => {
+  Array.from(cars).forEach((car) => {
+    car.animation.updatePlaybackRate(speed);
+    car.animation;
+  });
+};
+
+const addCar = () => {
+  const car = document.createElement("car");
+  const door = document.createElement("door");
+  const windScreen = document.createElement("windscreen");
+
+  car.addEventListener("click", updateCarsClicked, { once: true });
+
+  const carData = {
+    width: "80px",
+  };
+
+  car.style = {
+    width: carData.width,
+    height: "40px",
+  };
+
+  car.append(door, windScreen);
+  cars.add(car);
+  car.addEventListener("animationend", () => {});
+
+  const timing = {
+    duration: 2000,
+    iterations: 1,
+  };
+
+  const carConfig = {
+    direction: null,
+  };
+  const l2r = [
+    {
+      translate: "-100% 0",
+    },
+    {
+      translate: `calc(${document.querySelector("world").clientWidth}px + ${
+        carData.width
+      }`,
+    },
+  ];
+
+  if (Math.random() > 0.4) {
+    car.style.right = "100%";
+    car.style.bottom = "4%";
+    windScreen.style.right = "10%";
+    carConfig.direction = l2r;
+  } else {
+    car.style.right = "100%";
+    car.style.top = "4%";
+    windScreen.style.left = "10%";
+    timing.direction = "reverse";
+    carConfig.direction = l2r;
+  }
+
+  const carAnim = car.animate(carConfig.direction, timing);
+  car.setSpeed = carAnim.updatePlaybackRate;
+
+  carAnim.updatePlaybackRate(window.speed);
+
+  console.log(carAnim.updatePlaybackRate);
+  car.animation = carAnim;
+  carAnim.onfinish = (e) => {
+    if (!car.parentNode) return;
+    car.remove();
+    cars.delete(car);
+    updateCarsPassed();
+  };
+
+  roads[0].appendChild(car);
+};
+
+window.updateSpawnCarInterval = () => {
+  clearInterval(window.spawnCarInterval);
+  if (window.speed === 0) return;
+  window.spawnCarInterval = setInterval(() => {
+    if (Math.random() > 0.6 / density) addCar();
+  }, 300 / (window.speed / 2));
+};
+
+const initCarSpawn = () => {
+  updateSpawnCarInterval();
+  const cardata = document.createElement("cardata");
+  const carsPassed = document.createElement("passed");
+  const carsClickedContainer = document.createElement("div");
+  const carsClicked = document.createElement("clicked");
+  carsClicked.innerHTML = "Cars clicked: 0";
+  cardata.append(carsPassed);
+  carsClickedContainer.append(carsClicked);
+  cardata.append(carsClickedContainer);
+  window.carsPassed = -1;
+  document.querySelector("game").append(cardata);
+  updateCarsPassed();
+};
+
+const initHouse = () => {
+  const floor = document.createElement("floor");
+  document.querySelector("world").appendChild(floor);
+};
+
+const initWorld = () => {
+  const world = document.createElement("world");
+  document.querySelector("game").append(world);
+  addRoad();
+  initCarSpawn();
+  initHouse();
+};
+
+export { initWorld };

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Game</title>
+  </head>
+  <body>
+    <game></game>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,10 @@
+import { initClock, initSpeed } from "./data/clock.js";
+import { initWorld } from "./data/world.js";
+
+const clockContainer = document.createElement("div");
+clockContainer.id = "clock-container";
+document.querySelector("game").append(clockContainer);
+initClock(clockContainer);
+initSpeed(clockContainer);
+
+initWorld();