pakastin · Gayoon1234 · Jan 10, 2025
diff --git a/car.css b/car.css
@@ -1,12 +1,17 @@
 body {
   overflow: hidden;
   background-color: hsl(0, 0%, 90%);
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
+    helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
 }
 
+.dark-mode {
+  background-color: hsl(0, 0%, 0%);
+}
+
 canvas {
   position: absolute;
   top: 0;
@@ -51,11 +56,11 @@ canvas {
   width: 8px;
   height: 6px;
   border-radius: 2px;
-  background-color: hsla(0, 0%, 100%, .375);
+  background-color: hsla(0, 0%, 100%, 0.375);
 }
 
 .car-body.shot {
-  opacity: .5;
+  opacity: 0.5;
 }
 
 .car.red .car-body {
@@ -66,8 +71,8 @@ canvas {
   position: absolute;
   top: 20px;
   left: 0;
-  font-size: .625rem;
-  color: hsla(0, 0%, 0%, .5);
+  font-size: 0.625rem;
+  color: hsla(0, 0%, 0%, 0.5);
   transform: translate(-50%, -50%);
   white-space: nowrap;
 }
@@ -86,6 +91,10 @@ canvas {
   background-color: hsl(0, 0%, 15%);
 }
 
+.dark-bullet {
+  background-color: hsl(98, 100%, 50%);
+}
+
 .buttons {
   position: fixed;
   left: 0;
@@ -96,8 +105,8 @@ canvas {
   position: fixed;
   bottom: 0;
   left: 0;
-  padding: .5rem;
-  font-size: .75rem;
+  padding: 0.5rem;
+  font-size: 0.75rem;
 }
 .name {
   position: fixed;
@@ -107,13 +116,13 @@ canvas {
   bottom: 0;
 }
 .name p {
-  font-size: .75rem;
+  font-size: 0.75rem;
   margin: 0;
   margin-bottom: 1rem;
 }
 .name-bg {
   height: 100%;
-  background-color: hsla(0, 0%, 0%, .75);
+  background-color: hsla(0, 0%, 0%, 0.75);
 }
 .name form {
   position: absolute;
@@ -122,28 +131,28 @@ canvas {
   transform: translate(-50%, -50%);
   background-color: hsl(0, 0%, 100%);
   padding: 1rem;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 .name form input {
   display: inline-block;
   font: inherit;
-  padding: .5rem;
+  padding: 0.5rem;
 }
 .name form button {
   display: inline-block;
   font: inherit;
-  padding: .5rem;
-  margin-left: .5rem;
+  padding: 0.5rem;
+  margin-left: 0.5rem;
 }
 .points {
   position: fixed;
   top: 0;
   right: 5rem;
   text-align: right;
   white-space: pre;
-  font-size: .625rem;
+  font-size: 0.625rem;
   color: hsl(0, 0, 50%);
-  padding: .5rem;
+  padding: 0.5rem;
 }
 .map-item {
   position: absolute;
@@ -153,4 +162,4 @@ canvas {
   height: 0.125rem;
   background-color: hsl(0, 0%, 50%);
   border-radius: 0.0625rem;
-}
+}
diff --git a/car.js b/car.js
@@ -364,6 +364,9 @@
       if (!bullet.$el) {
         const $el = (bullet.$el = document.createElement("div"));
         $el.classList.add("bullet");
+        if ($canvas.classList.contains("dark-mode")) {
+          $el.classList.add("dark-bullet");
+        }
         $bullets.appendChild($el);
       }
       bullet.$el.style.transform = `translate(${x}px, ${y}px)`;
@@ -542,6 +545,20 @@
     ctx.clearRect(0, 0, WIDTH, HEIGHT);
   };
 
+  const $darkmode = document.querySelector(".darkmode");
+
+  $darkmode.onclick = (event) => {
+    $canvas.classList.toggle("dark-mode");
+    $bullets.classList.toggle("dark-bullet");
+
+    if ($canvas.classList.contains("dark-mode")) {
+      ctx.fillStyle = "hsla(0, 0.00%, 100.00%, 0.20)";
+    } else {
+      ctx.fillStyle = "hsla(0, 0%, 25%, 0.25)";
+    }
+    event.target.blur();
+  };
+
   setInterval(() => {
     ctx.fillStyle = "hsla(0, 0%, 95%, 0.2)";
     ctx.fillRect(0, 0, WIDTH, HEIGHT);

diff --git a/index.html b/index.html
@@ -1,38 +1,96 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta property="og:title" content="Multiplayer 2d car game!">
-    <meta property="og:image" content="https://car.js.org/og.png">
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:creator" content="@pakastin">
-    <meta name="twitter:title" content="Multiplayer 2d car game!">
-    <meta name="twitter:image" content="https://car.js.org/og.png">
-    <title>Multiplayer 2d car game!</title>
-    <link rel="stylesheet" href="car.css">
-  </head>
-  <body>
-    <div class="wrapper">
-      <div class="scene">
-        <canvas></canvas>
-        <div class="bullets"></div>
-        <div class="cars">
-          <div class="car red"><div class="car-body"><div class="car-roof"></div></div><div class="car-name"></div></div>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:title" content="Multiplayer 2d car game!">
+  <meta property="og:image" content="https://car.js.org/og.png">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:creator" content="@pakastin">
+  <meta name="twitter:title" content="Multiplayer 2d car game!">
+  <meta name="twitter:image" content="https://car.js.org/og.png">
+  <title>Multiplayer 2d car game!</title>
+  <link rel="stylesheet" href="car.css">
+</head>
+
+<body>
+  <div class="wrapper">
+    <div class="scene">
+      <canvas></canvas>
+      <div class="bullets"></div>
+      <div class="cars">
+        <div class="car red">
+          <div class="car-body">
+            <div class="car-roof"></div>
+          </div>
+          <div class="car-name"></div>
         </div>
-        <div class="map"></div>
       </div>
+      <div class="map"></div>
     </div>
-    <div class="points"></div>
-    <div class="buttons">
-      <button class="disconnect">Disconnect</button>
-      <button class="clearscreen">Clear screen</button>
-    </div>
-    <div class="name"><div class="name-bg"></div><form><p>Connecting...</p><input autofocus placeholder="Nickname" autocomplete="nickname"><button>Play!</button></form></div>
-    <div class="bottomleft">Use keyboard (up/down/left/right/space), swiping (shoot with second finger) or gamepad to drive the red car with other cars online!</div>
-    <script src="https://car.pakastin.fi/socket.io/socket.io.js"></script>
-    <script src="car-controls.js"></script>
-    <script src="car.js"></script>
-    <a href="https://github.com/pakastin/car" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-  </body>
-</html>
+  </div>
+  <div class="points"></div>
+  <div class="buttons">
+    <button class="disconnect">Disconnect</button>
+    <button class="clearscreen">Clear screen</button>
+    <button class="darkmode">Toggle Dark Mode</button>
+  </div>
+  <div class="name">
+    <div class="name-bg"></div>
+    <form>
+      <p>Connecting...</p><input autofocus placeholder="Nickname" autocomplete="nickname"><button>Play!</button>
+    </form>
+  </div>
+  <div class="bottomleft">Use keyboard (up/down/left/right/space), swiping (shoot with second finger) or gamepad to
+    drive the red car with other cars online!</div>
+  <script src="https://car.pakastin.fi/socket.io/socket.io.js"></script>
+  <script src="car-controls.js"></script>
+  <script src="car.js"></script>
+  <a href="https://github.com/pakastin/car" class="github-corner" aria-label="View source on GitHub"><svg width="80"
+      height="80" viewBox="0 0 250 250"
+      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+  <style>
+    .github-corner:hover .octo-arm {
+      animation: octocat-wave 560ms ease-in-out
+    }
+
+    @keyframes octocat-wave {
+
+      0%,
+      100% {
+        transform: rotate(0)
+      }
+
+      20%,
+      60% {
+        transform: rotate(-25deg)
+      }
+
+      40%,
+      80% {
+        transform: rotate(10deg)
+      }
+    }
+
+    @media (max-width:500px) {
+      .github-corner:hover .octo-arm {
+        animation: none
+      }
+
+      .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+      }
+    }
+  </style>
+</body>
+
+</html>