Presque sortie du jeu

23 files changed, 1465 insertions, 0 deletions

diff --git a/race/_archived/triangle.html b/race/_archived/triangle.html
new file mode 100644
index 0000000..a1cb13e
--- /dev/null
+++ b/race/_archived/triangle.html
@@ -0,0 +1,127 @@
+<!-- Manifest version 5 (breaking with version 4) -->
+
+<!-- Metadata -->
+<circuit>
+  {
+    "name": {
+      "fr": "Le triangle des Bermudes",
+      "en": "The Bermuda Triangle"
+    },
+    "author": "Minteck Projects"
+  }
+</circuit>
+
+<!-- Cars -->
+<div id="car0" style="display: inline-block;position: fixed;top: 42.9px;left: 428px;transform: rotate(0deg);"><img id="car0-img" style="
+    width: 36px;
+"></div>
+<div id="car1" style="display: inline-block;position: fixed;top: 79.4px;left: 388.9px;transform: rotate(0deg);"><span id="aibox-far" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: 0px;
+    right: -30px;
+    animation-name: aibox;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: alternate-reverse;
+"></span><span id="aibox-near" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: -7px;
+    right: -7px;
+"></span><span id="aibox-nearest" style="
+    position: absolute;
+    display: block;
+    top: -3px;
+    bottom: -3px;
+    left: -3px;
+    right: -3px;
+"></span><img id="car1-img" style="
+    width: 36px;"></div>
+
+<!-- Oils -->
+<div id="oil">
+  <img src="../race/oil.png" id="oil0" style="top: 278px; left: 634px; transform: rotate(68deg);">
+  <img src="../race/oil.png" id="oil1" style="top: 22px; left: 457px; transform: rotate(217deg);">
+  <img src="../race/oil.png" id="oil2" style="top: 26px; left: 531px; transform: rotate(82deg);">
+  <img src="../race/oil.png" id="oil3" style="top: 155px; left: 425px; transform: rotate(120deg);">
+  <img src="../race/oil.png" id="oil4" style="top: 137px; left: 121px; transform: rotate(178deg);">
+</div>
+
+<!-- Elements -->
+<div id="elements">
+
+  <!-- Walls -->
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 20px;
+    top: 111px;
+    left: 110px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 20px;
+    top: 111px;
+    left: 590px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 256px;
+    top: 110px;
+    left: 228px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 24px;
+    left: 107px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 492px;
+    left: 107px;
+"></div><div class="wall" style="height: 277px;position: fixed;width: 8px;top: 100px;left: 293px;transform: rotate(
+-28deg
+);"></div><div class="wall" style="height: 468px;position: fixed;width: 8px;top: 80px;left: 242px;transform: rotate(
+-31deg
+);"></div><div class="wall" style="height: 468px;position: fixed;width: 8px;top: 80px;left: 470px;transform: rotate(
+31.5deg
+);"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 25px;
+    left: 106px;
+"></div><div class="wall" style="height: 277px;position: fixed;width: 8px;top: 100px;left: 417px;transform: rotate(26.5deg);"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 24px;
+    left: 602px;
+"></div>
+
+  <!-- Arrival Line -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 8px;
+    top: 0px;
+    left: 346px;
+" id="arrival"></div>
+
+  <!-- Anti-reverse wall (codename Barrier) -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 20px;
+    top: 0;
+    left: 355px;
+" id="barrier"></div></div>
\ No newline at end of file
diff --git a/race/_archived/triangle.png b/race/_archived/triangle.png
new file mode 100644
index 0000000..8532bf5
--- /dev/null
+++ b/race/_archived/triangle.png
diff --git a/race/cars/car0.js b/race/cars/car0.js
new file mode 100644
index 0000000..ddfe8c5
--- /dev/null
+++ b/race/cars/car0.js
@@ -0,0 +1,212 @@
+startHooks.push(() => {
+    car0speed            = 16;
+    car0cspeed           = 0;
+    if (online && role === "guest") {
+        car0startx       = 388.9;
+        car0starty       = 79.4;
+    } else {
+        car0startx       = 428;
+        car0starty       = 42.9;
+    }
+    car0collisionon      = true;
+    car0enableOOBChecker = false;
+
+// Collision Manager
+    function car0collision() {
+        if (!keysEnabled) { return; }
+
+        if (started) {
+            carshb = document.getElementById("car0").getBoundingClientRect();
+            hitbox = document.getElementById("barrier").getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                info("CarManager:car0", "Reversal prevented at X " + document.getElementById("car0").style.left + ", Y " + document.getElementById("car0").style.top);
+                document.getElementById("car0").style.left = car0startx + "px";
+                document.getElementById("car0").style.top = car0starty + "px";
+                document.getElementById("car0").style.transform = "rotate(0deg)";
+                car0cspeed = 0;
+            }
+        }
+
+        if (!car0collisionon) { return; }
+
+        walls = Array.from(document.getElementsByClassName("wall"));
+
+        walls.forEach((wall) => {
+            carshb = document.getElementById("car0").getBoundingClientRect();
+            hitbox = wall.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                info("CarManager:car0", "Wall collision at X " + document.getElementById("car0").style.left + ", Y " + document.getElementById("car0").style.top);
+                if (location.search === "?sp") {
+                    scenar("wall1", "happy");
+                }
+                Sound.crash()
+                document.getElementById("car0").style.left = car0startx + "px";
+                document.getElementById("car0").style.top = car0starty + "px";
+                Array.from(document.getElementById('oil').children).forEach((item) => {
+                    spreadOil(item);
+                })
+                document.getElementById("car0").style.transform = "rotate(0deg)";
+                car0cspeed = 0;
+            }
+        })
+
+        Array.from(document.getElementById('oil').children).forEach((item) => {
+            carshb = document.getElementById("car0").getBoundingClientRect();
+            hitbox = item.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                car0cspeed = 7;
+            }
+        })
+
+        carshb = document.getElementById("car0").getBoundingClientRect();
+        hitbox = document.getElementById("arrival").getBoundingClientRect();
+
+        var overlap = !(carshb.right < hitbox.left ||
+            carshb.left > hitbox.right ||
+            carshb.bottom < hitbox.top ||
+            carshb.top > hitbox.bottom)
+
+        if (overlap && started) {
+            started = false;
+            if ((document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 1) < 4) {
+                info("CarManager:car0", "New lap");
+                Array.from(document.getElementById('oil').children).forEach((item) => {
+                    spreadOil(item);
+                })
+                if ((document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 1) < 3) {
+                    Sound.pass()
+                } else {
+                    Sound.last()
+                }
+                document.getElementById('laps-car0').innerText = (document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 2).toString();
+                if (location.search === "?sp") {
+                    if ((document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 1) > (document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 1)) {
+                        scenar("ahead1", "angry");
+                    } else {
+                        scenar("ahead2", "happy");
+                    }
+                }
+            } else {
+                info("CarManager:car0", "Car won the game");
+                if (location.search === "?sp") {
+                    scenar("won1", "sad");
+                }
+                try { document.getElementById('music').src = "about:blank"; } catch (e) { console.error(e); }
+                Sound.win();
+                keysEnabled = false;
+                car0cspeed = 0;
+                car0speed = 0;
+                document.getElementById('laps-car0').innerText = (document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 2).toString();
+                $("#box").fadeOut(500);
+                setTimeout(() => {
+                    if (online) {
+                        clientWriter(JSON.stringify({
+                            _type: "ipc",
+                            action: "progressLose",
+                            message: null
+                        }) + "|")
+                    }
+                    if (location.search === "?sp" || online) {
+                        location.href = "win.html?sp#car0";
+                    } else {
+                        location.href = "win.html#car0";
+                    }
+                }, 3500)
+            }
+            document.getElementById("car0").style.left = car0startx + "px";
+            document.getElementById("car0").style.top = car0starty + "px";
+            document.getElementById("car0").style.transform = "rotate(0deg)";
+            Array.from(document.getElementById('oil').children).forEach((item) => {
+                spreadOil(item);
+            })
+            car0cspeed = 0;
+            setTimeout(() => {
+                started = true;
+            }, 150)
+        }
+
+        carshb = document.getElementById("car0").getBoundingClientRect();
+        hitbox = document.getElementById("car1").getBoundingClientRect();
+
+        var overlap = !(carshb.right < hitbox.left ||
+            carshb.left > hitbox.right ||
+            carshb.bottom < hitbox.top ||
+            carshb.top > hitbox.bottom)
+
+        if (overlap) {
+            if (location.search === "?sp") {
+                scenar("wall1", "happy");
+            }
+            Sound.crash();
+            document.getElementById("car0").style.left = car0startx + "px";
+            document.getElementById("car0").style.top = car0starty + "px";
+            Array.from(document.getElementById('oil').children).forEach((item) => {
+                spreadOil(item);
+            })
+            document.getElementById("car0").style.transform = "rotate(0deg)";
+            car0cspeed = 0;
+        }
+    }
+
+// General Movements
+    setInterval(() => {
+        if (!paused) {
+            if (car0cspeed > 0) {
+                car0cspeed = car0cspeed - 0.1;
+            }
+            switch (document.getElementById("car0").style.transform) {
+                case "rotate(0deg)":
+                    document.getElementById("car0").style.left = ((document.getElementById("car0").style.left.split("p")[0] - 1) + (1 + car0cspeed)) + "px";
+                    break;
+                case "rotate(180deg)":
+                    document.getElementById("car0").style.left = ((document.getElementById("car0").style.left.split("p")[0] - 1) - (1 + car0cspeed)) + "px";
+                    break;
+                case "rotate(90deg)":
+                    document.getElementById("car0").style.top = ((document.getElementById("car0").style.top.split("p")[0] - 1) + (1 + car0cspeed)) + "px";
+                    break;
+                case "rotate(-90deg)":
+                    document.getElementById("car0").style.top = ((document.getElementById("car0").style.top.split("p")[0] - 1) - (1 + car0cspeed)) + "px";
+                    break;
+            }
+            if (document.getElementById("car0").style.left.split("p")[0] - 1 + 1 > (window.innerWidth - 30)) {
+                warn("CarManager:car0", "Colliding with screen border");
+                document.getElementById("car0").style.left = (window.innerWidth - 30) + "px";
+            }
+            if (document.getElementById("car0").style.top.split("p")[0] - 1 + 1 > (window.innerHeight - 30)) {
+                warn("CarManager:car0", "Colliding with screen border");
+                document.getElementById("car0").style.top = (window.innerHeight - 30) + "px";
+            }
+            if (document.getElementById("car0").style.top.split("p")[0] - 1 + 1 < 30) {
+                warn("CarManager:car0", "Colliding with screen border");
+                document.getElementById("car0").style.top = "30px";
+            }
+            if (document.getElementById("car0").style.left.split("p")[0] - 1 + 1 < 30) {
+                warn("CarManager:car0", "Colliding with screen border");
+                document.getElementById("car0").style.left = "30px";
+            }
+            if (car0cspeed > -0.1 && car0cspeed < 0) {
+                car0cspeed = 0;
+            }
+            car0collision();
+        }
+    }, 200)
+
+})
\ No newline at end of file
diff --git a/race/cars/car1.js b/race/cars/car1.js
new file mode 100644
index 0000000..750cbb3
--- /dev/null
+++ b/race/cars/car1.js
@@ -0,0 +1,224 @@
+startHooks.push(() => {
+    car1speed            = 16;
+    car1cspeed           = 0;
+    if (online && role === "guest") {
+        car1startx       = 428;
+        car1starty       = 42.9;
+    } else {
+        car1startx       = 388.9;
+        car1starty       = 79.4;
+    }
+    if (online) {
+        car1collisionon  = false;
+    } else {
+        car1collisionon  = true;
+    }
+    car1enableOOBChecker = false;
+
+// Collision Manager
+    function car1collision() {
+        if (!keysEnabled) { return; }
+
+        if (started) {
+            carshb = document.getElementById("car0").getBoundingClientRect();
+            hitbox = document.getElementById("barrier").getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                info("CarManager:car0", "Reversal prevented at X " + document.getElementById("car0").style.left + ", Y " + document.getElementById("car0").style.top);
+                document.getElementById("car0").style.left = car0startx + "px";
+                document.getElementById("car0").style.top = car0starty + "px";
+                document.getElementById("car0").style.transform = "rotate(0deg)";
+                car0cspeed = 0;
+            }
+        }
+
+        if (!car1collisionon) { return; }
+
+        walls = Array.from(document.getElementsByClassName("wall"));
+
+        walls.forEach((wall) => {
+            carshb = document.getElementById("car1").getBoundingClientRect();
+            hitbox = wall.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                info("CarManager:car1", "Wall collision at X " + document.getElementById("car1").style.left + ", Y " + document.getElementById("car1").style.top);
+                if (location.search === "?sp") {
+                    scenar("wall2", "angry");
+                }
+                Sound.crash()
+                document.getElementById("car1").style.left = car1startx + "px";
+                document.getElementById("car1").style.top = car1starty + "px";
+                Array.from(document.getElementById('oil').children).forEach((item) => {
+                    spreadOil(item);
+                })
+                document.getElementById("car1").style.transform = "rotate(0deg)";
+                car1cspeed = 0;
+            }
+        })
+
+        Array.from(document.getElementById('oil').children).forEach((item) => {
+            carshb = document.getElementById("car1").getBoundingClientRect();
+            hitbox = item.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                car1cspeed = 7;
+            }
+        })
+
+        carshb = document.getElementById("car1").getBoundingClientRect();
+        hitbox = document.getElementById("arrival").getBoundingClientRect();
+
+        var overlap = !(carshb.right < hitbox.left ||
+            carshb.left > hitbox.right ||
+            carshb.bottom < hitbox.top ||
+            carshb.top > hitbox.bottom)
+
+        if (overlap && started) {
+            started = false;
+            if ((document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 1) < 4) {
+                info("CarManager:car1", "New lap");
+                Array.from(document.getElementById('oil').children).forEach((item) => {
+                    spreadOil(item);
+                })
+                if ((document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 1) < 3) {
+                    Sound.pass()
+                } else {
+                    Sound.last()
+                }
+                document.getElementById('laps-car1').innerText = (document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 2).toString();
+                if (location.search === "?sp") {
+                    if ((document.getElementById('laps-car0').innerText.split("/")[0] - 1 + 1) > (document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 1)) {
+                        scenar("ahead1", "angry");
+                    } else {
+                        scenar("ahead2", "happy");
+                    }
+                }
+            } else {
+                info("CarManager:car1", "Car won the game");
+                if (location.search === "?sp") {
+                    scenar("won2", "happy");
+                }
+                try { document.getElementById('music').src = "about:blank"; } catch (e) { console.error(e); }
+                Sound.win();
+                keysEnabled = false;
+                car1cspeed = 0;
+                car1speed = 0;
+                document.getElementById('laps-car1').innerText = (document.getElementById('laps-car1').innerText.split("/")[0] - 1 + 2).toString();
+                $("#box").fadeOut(500);
+                setTimeout(() => {
+                    setTimeout(() => {
+                        if (location.search === "?sp" || (online && role === "guest")) {
+                            if (online) {} else {
+                                location.href = "win.html?sp#car1";
+                            }
+                        } else {
+                            location.href = "win.html#car1";
+                        }
+                    }, 3500)
+                }, 3000)
+            }
+            document.getElementById("car1").style.left = car1startx + "px";
+            document.getElementById("car1").style.top = car1starty + "px";
+            Array.from(document.getElementById('oil').children).forEach((item) => {
+                spreadOil(item);
+            })
+            document.getElementById("car1").style.transform = "rotate(0deg)";
+            Array.from(document.getElementById('oil').children).forEach((item) => {
+                spreadOil(item);
+            })
+            car1cspeed = 0;
+            setTimeout(() => {
+                started = true;
+            }, 150)
+        }
+
+        carshb = document.getElementById("car1").getBoundingClientRect();
+        hitbox = document.getElementById("car0").getBoundingClientRect();
+
+        var overlap = !(carshb.right < hitbox.left ||
+            carshb.left > hitbox.right ||
+            carshb.bottom < hitbox.top ||
+            carshb.top > hitbox.bottom)
+
+        if (overlap) {
+            if (location.search === "?sp") {
+                scenar("wall2", "angry");
+            }
+            Sound.crash();
+            document.getElementById("car1").style.left = car1startx + "px";
+            document.getElementById("car1").style.top = car1starty + "px";
+            document.getElementById("car1").style.transform = "rotate(0deg)";
+            Array.from(document.getElementById('oil').children).forEach((item) => {
+                spreadOil(item);
+            })
+            car1cspeed = 0;
+        }
+    }
+
+// General Movements
+    setInterval(() => {
+        if (!paused) {
+            if (car1cspeed > 0) {
+                car1cspeed = car1cspeed - 0.1;
+            }
+            switch (document.getElementById("car1").style.transform) {
+                case "rotate(0deg)":
+                    document.getElementById("car1").style.left = ((document.getElementById("car1").style.left.split("p")[0] - 1) + (1 + car1cspeed)) + "px";
+                    break;
+                case "rotate(180deg)":
+                    document.getElementById("car1").style.left = ((document.getElementById("car1").style.left.split("p")[0] - 1) - (1 + car1cspeed)) + "px";
+                    break;
+                case "rotate(90deg)":
+                    document.getElementById("car1").style.top = ((document.getElementById("car1").style.top.split("p")[0] - 1) + (1 + car1cspeed)) + "px";
+                    break;
+                case "rotate(-90deg)":
+                    document.getElementById("car1").style.top = ((document.getElementById("car1").style.top.split("p")[0] - 1) - (1 + car1cspeed)) + "px";
+                    break;
+            }
+            if (document.getElementById("car1").style.left.split("p")[0] - 1 + 1 > (window.innerWidth - 30)) {
+                warn("CarManager:car1", "Colliding with screen border");
+                if (car1enableOOBChecker) {
+                    document.getElementById("car1").style.left = (window.innerWidth - 30) + "px";
+                }
+            }
+            if (document.getElementById("car1").style.top.split("p")[0] - 1 + 1 > (window.innerHeight - 30)) {
+                warn("CarManager:car1", "Colliding with screen border");
+                if (car1enableOOBChecker) {
+                    document.getElementById("car1").style.top = (window.innerHeight - 30) + "px";
+                }
+            }
+            if (document.getElementById("car1").style.top.split("p")[0] - 1 + 1 < 30) {
+                warn("CarManager:car1", "Colliding with screen border");
+                if (car1enableOOBChecker) {
+                    document.getElementById("car1").style.top = "30px";
+                }
+            }
+            if (document.getElementById("car1").style.left.split("p")[0] - 1 + 1 < 30) {
+                warn("CarManager:car1", "Colliding with screen border");
+                if (car1enableOOBChecker) {
+                    document.getElementById("car1").style.left = "30px";
+                }
+            }
+            if (car1cspeed > -0.1 && car1cspeed < 0) {
+                car1cspeed = 0;
+            }
+            car1collision();
+        }
+    }, 200)
+
+})
\ No newline at end of file
diff --git a/race/cars/car1ai.js b/race/cars/car1ai.js
new file mode 100644
index 0000000..25e1819
--- /dev/null
+++ b/race/cars/car1ai.js
@@ -0,0 +1,160 @@
+aiorient = "right";
+elem = 10;
+
+function enableAI() {
+    car1enableOOBChecker = false;
+    setInterval(() => {
+        if (aiorient === "top") {
+            ai_up();
+        } else if (aiorient === "right") {
+            ai_right();
+        } else if (aiorient === "bottom") {
+            ai_down();
+        } else if (aiorient === "left") {
+            ai_left();
+        }
+    }, 100)
+    setInterval(() => {
+        carshb = document.getElementById("aibox-near").getBoundingClientRect();
+        hitbox = document.getElementById('barrier').getBoundingClientRect();
+
+        var overlap = !(carshb.right < hitbox.left ||
+            carshb.left > hitbox.right ||
+            carshb.bottom < hitbox.top ||
+            carshb.top > hitbox.bottom)
+
+        if (overlap) {
+            aiorient = "right";
+        }
+
+        if (elem < 10) { elem++; }
+        if (elem !== 10) { return; }
+
+        walls = Array.from(document.getElementsByClassName("wall"));
+
+        walls.forEach((wall) => {
+            carshb = document.getElementById("aibox-far").getBoundingClientRect();
+            hitbox = wall.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            carshb2 = document.getElementById("aibox-near").getBoundingClientRect();
+
+            var overlap2 = !(carshb2.right < hitbox.left ||
+                carshb2.left > hitbox.right ||
+                carshb2.bottom < hitbox.top ||
+                carshb2.top > hitbox.bottom)
+
+            if (overlap2) {
+                car1speed = 8;
+            } else if (overlap) {
+                car1speed = 9;
+            } else {
+                car1speed = 10;
+            }
+
+            carshb = document.getElementById("aibox-far").getBoundingClientRect();
+            hitbox = wall.getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                if (aiorient === "top") {
+                    aiorient = "right";
+                    elem = 0;
+                } else if (aiorient === "right") {
+                    aiorient = "bottom";
+                    elem = 0;
+                } else if (aiorient === "bottom") {
+                    aiorient = "left";
+                    elem = 0;
+                } else if (aiorient === "left") {
+                    aiorient = "top";
+                    elem = 0;
+                }
+            }
+
+            carshb = document.getElementById("aibox-near").getBoundingClientRect();
+            hitbox = document.getElementById('car0').getBoundingClientRect();
+
+            var overlap = !(carshb.right < hitbox.left ||
+                carshb.left > hitbox.right ||
+                carshb.bottom < hitbox.top ||
+                carshb.top > hitbox.bottom)
+
+            if (overlap) {
+                if (aiorient === "top") {
+                    aiorient = "bottom";
+                    elem = 0;
+                } else if (aiorient === "right") {
+                    aiorient = "left";
+                    elem = 0;
+                } else if (aiorient === "bottom") {
+                    aiorient = "top";
+                    elem = 0;
+                } else if (aiorient === "left") {
+                    aiorient = "right";
+                    elem = 0;
+                }
+            }
+        })
+    }, 50)
+}
+
+function ai_up() {
+    if (car1cspeed < car1speed) {
+        car1cspeed = car1cspeed + 0.2;
+    }
+    if (document.getElementById("car1").style.transform !== "rotate(-90deg)") {
+        document.getElementById("car1").style.transform = "rotate(-90deg)";
+        car1collisionon = false;
+        setTimeout(() => {
+            car1collisionon = true;
+        }, 500)
+    }
+}
+
+function ai_down() {
+    if (car1cspeed < car1speed) {
+        car1cspeed = car1cspeed + 0.2;
+    }
+    if (document.getElementById("car1").style.transform !== "rotate(90deg)") {
+        document.getElementById("car1").style.transform = "rotate(90deg)";
+        car1collisionon = false;
+        setTimeout(() => {
+            car1collisionon = true;
+        }, 500)
+    }
+}
+
+function ai_left() {
+    if (car1cspeed < car1speed) {
+        car1cspeed = car1cspeed + 0.2;
+    }
+    if (document.getElementById("car1").style.transform !== "rotate(180deg)") {
+        document.getElementById("car1").style.transform = "rotate(180deg)";
+        car1collisionon = false;
+        setTimeout(() => {
+            car1collisionon = true;
+        }, 500)
+    }
+}
+
+function ai_right() {
+    if (car1cspeed < car1speed) {
+        car1cspeed = car1cspeed + 0.2;
+    }
+    if (document.getElementById("car1").style.transform !== "rotate(0deg)") {
+        document.getElementById("car1").style.transform = "rotate(0deg)";
+        car1collisionon = false;
+        setTimeout(() => {
+            car1collisionon = true;
+        }, 500)
+    }
+}
\ No newline at end of file
diff --git a/race/cars/keymap.js b/race/cars/keymap.js
new file mode 100644
index 0000000..74cce0a
--- /dev/null
+++ b/race/cars/keymap.js
@@ -0,0 +1,162 @@
+startHooks.push(() => {
+    $(document).keydown(function(e) {
+        if (online && role === null) {
+            if (e.keyCode === 27 || e.keyCode === 8) { // esc
+                require('electron').ipcRenderer.send('prefademusic', "");
+                $("body").fadeOut(200);
+                setTimeout(() => {
+                    location.href = "menu.html?back";
+                }, 250)
+            }
+        }
+        if (keysEnabled) {
+            if (!paused) {
+                if (e.keyCode === 115) { // F4
+                    if (hitshow) {
+                        hitshow = false;
+                        document.getElementById("circuit").classList.remove("hitboxes");
+                        document.getElementById('hitboxes').innerText = lang.game.gpause.showhb;
+                        info("GameWindow", "Hitboxes hidden");
+                    } else {
+                        hitshow = true;
+                        document.getElementById("circuit").classList.add("hitboxes");
+                        document.getElementById('hitboxes').innerText = lang.game.gpause.hidehb;
+                        info("GameWindow", "Hitboxes shown");
+                    }
+                }
+                if (e.keyCode === 90 || e.keyCode === 87 || ((location.search === "?sp" || location.search === "?online") && e.keyCode === 38)) { // Z
+                    if (car0cspeed < car0speed) {
+                        car0cspeed = car0cspeed + 0.2;
+                    }
+                    if (document.getElementById("car0").style.transform !== "rotate(-90deg)") {
+                        document.getElementById("car0").style.transform = "rotate(-90deg)";
+                        car0collisionon = false;
+                        setTimeout(() => {
+                            car0collisionon = true;
+                        }, 500)
+                    }
+                }
+                if (e.keyCode === 83 || ((location.search === "?sp" || location.search === "?online") && e.keyCode === 40)) { // S
+                    if (car0cspeed < car0speed) {
+                        car0cspeed = car0cspeed + 0.2;
+                    }
+                    if (document.getElementById("car0").style.transform !== "rotate(90deg)") {
+                        document.getElementById("car0").style.transform = "rotate(90deg)";
+                        car0collisionon = false;
+                        setTimeout(() => {
+                            car0collisionon = true;
+                        }, 500)
+                    }
+                }
+                if (e.keyCode === 81 || e.keyCode === 65 || ((location.search === "?sp" || location.search === "?online") && e.keyCode === 37)) { // Q
+                    if (car0cspeed < car0speed) {
+                        car0cspeed = car0cspeed + 0.2;
+                    }
+                    if (document.getElementById("car0").style.transform !== "rotate(180deg)") {
+                        document.getElementById("car0").style.transform = "rotate(180deg)";
+                        car0collisionon = false;
+                        setTimeout(() => {
+                            car0collisionon = true;
+                        }, 500)
+                    }
+                }
+                if (e.keyCode === 68 || ((location.search === "?sp" || location.search === "?online") && e.keyCode === 39)) { // D
+                    if (car0cspeed < car0speed) {
+                        car0cspeed = car0cspeed + 0.2;
+                    }
+                    if (document.getElementById("car0").style.transform !== "rotate(0deg)") {
+                        document.getElementById("car0").style.transform = "rotate(0deg)";
+                        car0collisionon = false;
+                        setTimeout(() => {
+                            car0collisionon = true;
+                        }, 500)
+                    }
+                }
+                if (location.search !== "?sp" && location.search !== "?online") {
+                    if (e.keyCode === 38) { // up
+                        if (car1cspeed < car1speed) {
+                            car1cspeed = car1cspeed + 0.2;
+                        }
+                        if (document.getElementById("car1").style.transform !== "rotate(-90deg)") {
+                            document.getElementById("car1").style.transform = "rotate(-90deg)";
+                            car1collisionon = false;
+                            setTimeout(() => {
+                                car1collisionon = true;
+                            }, 500)
+                        }
+                    }
+                    if (e.keyCode === 40) { // down
+                        if (car1cspeed < car1speed) {
+                            car1cspeed = car1cspeed + 0.2;
+                        }
+                        if (document.getElementById("car1").style.transform !== "rotate(90deg)") {
+                            document.getElementById("car1").style.transform = "rotate(90deg)";
+                            car1collisionon = false;
+                            setTimeout(() => {
+                                car1collisionon = true;
+                            }, 500)
+                        }
+                    }
+                    if (e.keyCode === 37) { // left
+                        if (car1cspeed < car1speed) {
+                            car1cspeed = car1cspeed + 0.2;
+                        }
+                        if (document.getElementById("car1").style.transform !== "rotate(180deg)") {
+                            document.getElementById("car1").style.transform = "rotate(180deg)";
+                            car1collisionon = false;
+                            setTimeout(() => {
+                                car1collisionon = true;
+                            }, 500)
+                        }
+                    }
+                    if (e.keyCode === 39) { // right
+                        if (car1cspeed < car1speed) {
+                            car1cspeed = car1cspeed + 0.2;
+                        }
+                        if (document.getElementById("car1").style.transform !== "rotate(0deg)") {
+                            document.getElementById("car1").style.transform = "rotate(0deg)";
+                            car1collisionon = false;
+                            setTimeout(() => {
+                                car1collisionon = true;
+                            }, 500)
+                        }
+                    }
+                }
+                if (e.keyCode === 27 || e.keyCode === 8) { // esc
+                    pause(true);
+                }
+            } else {
+                if (e.keyCode === 13 || e.keyCode === 88 || e.keyCode === 32 || e.keyCode === 16) { // enter
+                    if ($(".services").is(":visible")) {
+                        selectOption();
+                    } else {
+                        $(".services").show();
+                    }
+                }
+                if (e.keyCode === 38 || e.keyCode === 90) { // up
+                    Sound.menu();
+                    var selected = $(".selected");
+                    $(".services li").removeClass("selected");
+                    if (selected.prev().length === 0) {
+                        selected.siblings().last().addClass("selected");
+                    } else {
+                        selected.prev().addClass("selected");
+                    }
+                }
+                if (e.keyCode === 40 || e.keyCode === 83) { // down
+                    Sound.menu();
+                    var selected = $(".selected");
+                    $(".services li").removeClass("selected");
+                    if (selected.next().length === 0) {
+                        selected.siblings().first().addClass("selected");
+                    } else {
+                        selected.next().addClass("selected");
+                    }
+                }
+                if (e.keyCode === 27 || e.keyCode === 8) { // esc
+                    pause(false);
+                }
+            }
+        }
+    });
+})
\ No newline at end of file
diff --git a/race/circuits/furry.html b/race/circuits/furry.html
new file mode 100644
index 0000000..01a4d16
--- /dev/null
+++ b/race/circuits/furry.html
@@ -0,0 +1,115 @@
+<!-- Manifest version 5 (breaking with version 4) -->
+
+<!-- Metadata -->
+<circuit>
+  {
+    "name": {
+      "fr": "Les petites pattes",
+      "en": "The Little Paws"
+    },
+    "author": "Minteck Projects"
+  }
+</circuit>
+
+<!-- Cars -->
+<div id="car0" style="display: inline-block;position: fixed;top: 42.9px;left: 428px;transform: rotate(0deg);"><img id="car0-img" style="
+    width: 36px;
+"></div>
+<div id="car1" style="display: inline-block;position: fixed;top: 79.4px;left: 388.9px;transform: rotate(0deg);"><span id="aibox-far" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: 0px;
+    right: -30px;
+    animation-name: aibox;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: alternate-reverse;
+"></span><span id="aibox-near" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: -7px;
+    right: -7px;
+"></span><span id="aibox-nearest" style="
+    position: absolute;
+    display: block;
+    top: -3px;
+    bottom: -3px;
+    left: -3px;
+    right: -3px;
+"></span><img id="car1-img" style="
+    width: 36px;"></div>
+
+<!-- Oils -->
+<div id="oil">
+  <img src="../race/oil.png" id="oil0" style="top: 278px; left: 634px; transform: rotate(68deg);">
+  <img src="../race/oil.png" id="oil1" style="top: 22px; left: 457px; transform: rotate(217deg);">
+  <img src="../race/oil.png" id="oil2" style="top: 26px; left: 531px; transform: rotate(82deg);">
+  <img src="../race/oil.png" id="oil3" style="top: 155px; left: 425px; transform: rotate(120deg);">
+  <img src="../race/oil.png" id="oil4" style="top: 137px; left: 121px; transform: rotate(178deg);">
+</div>
+
+<!-- Elements -->
+<div id="elements">
+
+  <!-- Walls -->
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 315px;
+    top: 110px;
+    left: 193px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 24px;
+    left: 107px;
+"></div><div class="wall" style="height: 8px;position: fixed;width: 51px;top: 412px;left: 455px;"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 501px;
+    left: 107px;
+"></div><div class="wall" style="
+    height: 310px;
+    position: fixed;
+    width: 8px;
+    top: 111px;
+    left: 211px;
+"></div><div class="wall" style="
+    height: 484px;
+    position: fixed;
+    width: 8px;
+    top: 25px;
+    left: 106px;
+"></div><div class="wall" style="height: 310px;position: fixed;width: 8px;top: 110px;left: 498px;"></div><div class="wall" style="height: 8px;position: fixed;width: 57px;top: 413px;left: 211px;"></div><div class="wall" style="height: 8px;position: fixed;width: 248px;top: 151px;left: 235px;"></div><div class="wall" style="height: 24px;position: fixed;width: 8px;top: 485px;left: 261px;"></div><div class="wall" style="height: 8px;position: fixed;width: 24px;top: 236px;left: 347px;"></div><div class="wall" style="height: 270px;position: fixed;width: 8px;top: 236px;left: 361px;"></div><div class="wall" style="height: 113px;position: fixed;width: 8px;top: 151px;left: 235px;"></div><div class="wall" style="height: 32px;position: fixed;width: 8px;top: 151px;left: 370px;"></div><div class="wall" style="height: 32px;position: fixed;width: 8px;top: 151px;left: 340px;"></div><div class="wall" style="height: 28px;position: fixed;width: 8px;top: 236px;left: 370px;"></div><div class="wall" style="height: 8px;position: fixed;width: 24px;top: 255px;left: 325px;"></div><div class="wall" style="height: 9px;position: fixed;width: 24px;top: 351px;left: 498px;"></div><div class="wall" style="height: 9px;position: fixed;width: 24px;top: 249px;left: 106px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 249px;left: 173px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 246px;left: 498px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 351px;left: 566px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 255px;left: 234px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 257px;left: 439px;"></div><div class="wall" style="height: 9px;position: fixed;width: 46px;top: 353px;left: 106px;"></div><div class="wall" style="height: 9px;position: fixed;width: 75px;top: 302px;left: 328px;"></div><div class="wall" style="height: 9px;position: fixed;width: 23px;top: 302px;left: 441px;"></div><div class="wall" style="height: 9px;position: fixed;width: 23px;top: 302px;left: 260px;"></div><div class="wall" style="height: 9px;position: fixed;width: 24px;top: 352px;left: 195px;"></div><div class="wall" style="height: 8px;position: fixed;width: 24px;top: 246px;left: 589px;"></div><div class="wall" style="height: 8px;position: fixed;width: 24px;top: 256px;left: 367px;"></div><div class="wall" style="height: 28px;position: fixed;width: 8px;top: 236px;left: 340px;"></div><div class="wall" style="height: 113px;position: fixed;width: 8px;top: 151px;left: 475px;"></div><div class="wall" style="height: 166px;position: fixed;width: 8px;top: 255px;left: 260px;"></div><div class="wall" style="height: 118px;position: fixed;width: 8px;top: 302px;left: 456px;"></div><div class="wall" style="height: 24px;position: fixed;width: 8px;top: 485px;left: 457px;"></div><div class="wall" style="
+    height: 485px;
+    position: fixed;
+    width: 8px;
+    top: 24px;
+    left: 602px;
+"></div>
+
+  <!-- Arrival Line -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 8px;
+    top: 0px;
+    left: 346px;
+" id="arrival"></div>
+
+  <!-- Anti-reverse wall (codename Barrier) -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 20px;
+    top: 0;
+    left: 355px;
+" id="barrier"></div></div>
\ No newline at end of file
diff --git a/race/circuits/furry.png b/race/circuits/furry.png
new file mode 100644
index 0000000..c1d5d46
--- /dev/null
+++ b/race/circuits/furry.png
diff --git a/race/circuits/main.html b/race/circuits/main.html
new file mode 100644
index 0000000..8285085
--- /dev/null
+++ b/race/circuits/main.html
@@ -0,0 +1,115 @@
+<!-- Manifest version 5 (breaking with version 4) -->
+
+<!-- Metadata -->
+<circuit>
+  {
+    "name": {
+      "fr": "Un simple carré",
+      "en": "A Simple Square"
+    },
+    "author": "Minteck Projects"
+  }
+</circuit>
+
+<!-- Cars -->
+<div id="car0" style="display: inline-block;position: fixed;top: 42.9px;left: 428px;transform: rotate(0deg);"><img id="car0-img" style="
+    width: 36px;
+"></div>
+<div id="car1" style="display: inline-block;position: fixed;top: 79.4px;left: 388.9px;transform: rotate(0deg);"><span id="aibox-far" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: 0px;
+    right: -30px;
+    animation-name: aibox;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: alternate-reverse;
+"></span><span id="aibox-near" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: -7px;
+    right: -7px;
+"></span><span id="aibox-nearest" style="
+    position: absolute;
+    display: block;
+    top: -3px;
+    bottom: -3px;
+    left: -3px;
+    right: -3px;
+"></span><img id="car1-img" style="
+    width: 36px;"></div>
+
+<!-- Oils -->
+<div id="oil">
+  <img src="../race/oil.png" id="oil0" style="top: 278px; left: 634px; transform: rotate(68deg);">
+  <img src="../race/oil.png" id="oil1" style="top: 22px; left: 457px; transform: rotate(217deg);">
+  <img src="../race/oil.png" id="oil2" style="top: 26px; left: 531px; transform: rotate(82deg);">
+  <img src="../race/oil.png" id="oil3" style="top: 155px; left: 425px; transform: rotate(120deg);">
+  <img src="../race/oil.png" id="oil4" style="top: 137px; left: 121px; transform: rotate(178deg);">
+</div>
+
+<!-- Elements -->
+<div id="elements">
+
+  <!-- Walls -->
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 325px;
+    top: 110px;
+    left: 193px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 24px;
+    left: 107px;
+"></div><div class="wall" style="height: 8px;position: fixed;width: 325px;top: 404px;left: 193px;"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 492px;
+    left: 107px;
+"></div><div class="wall" style="
+    height: 300px;
+    position: fixed;
+    width: 8px;
+    top: 111px;
+    left: 194px;
+"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 25px;
+    left: 106px;
+"></div><div class="wall" style="height: 300px;position: fixed;width: 8px;top: 110px;left: 515px;"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 24px;
+    left: 602px;
+"></div>
+
+  <!-- Arrival Line -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 8px;
+    top: 0px;
+    left: 346px;
+" id="arrival"></div>
+
+  <!-- Anti-reverse wall (codename Barrier) -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 20px;
+    top: 0;
+    left: 355px;
+" id="barrier"></div></div>
\ No newline at end of file
diff --git a/race/circuits/main.png b/race/circuits/main.png
new file mode 100644
index 0000000..0bf2c03
--- /dev/null
+++ b/race/circuits/main.png
diff --git a/race/circuits/snowy.html b/race/circuits/snowy.html
new file mode 100644
index 0000000..3fea303
--- /dev/null
+++ b/race/circuits/snowy.html
@@ -0,0 +1,115 @@
+<!-- Manifest version 5 (breaking with version 4) -->
+
+<!-- Metadata -->
+<circuit>
+  {
+    "name": {
+      "fr": "La montagne enneigée",
+      "en": "The Snowy Mountain"
+    },
+    "author": "Minteck Projects"
+  }
+</circuit>
+
+<!-- Cars -->
+<div id="car0" style="display: inline-block;position: fixed;top: 42.9px;left: 428px;transform: rotate(0deg);"><img id="car0-img" style="
+    width: 36px;
+"></div>
+<div id="car1" style="display: inline-block;position: fixed;top: 79.4px;left: 388.9px;transform: rotate(0deg);"><span id="aibox-far" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: 0px;
+    right: -30px;
+    animation-name: aibox;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: alternate-reverse;
+"></span><span id="aibox-near" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: -7px;
+    right: -7px;
+"></span><span id="aibox-nearest" style="
+    position: absolute;
+    display: block;
+    top: -3px;
+    bottom: -3px;
+    left: -3px;
+    right: -3px;
+"></span><img id="car1-img" style="
+    width: 36px;"></div>
+
+<!-- Oils -->
+<div id="oil">
+  <img src="../race/oil.png" id="oil0" style="top: 278px; left: 634px; transform: rotate(68deg);">
+  <img src="../race/oil.png" id="oil1" style="top: 22px; left: 457px; transform: rotate(217deg);">
+  <img src="../race/oil.png" id="oil2" style="top: 26px; left: 531px; transform: rotate(82deg);">
+  <img src="../race/oil.png" id="oil3" style="top: 155px; left: 425px; transform: rotate(120deg);">
+  <img src="../race/oil.png" id="oil4" style="top: 137px; left: 121px; transform: rotate(178deg);">
+</div>
+
+<!-- Elements -->
+<div id="elements">
+
+  <!-- Walls -->
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 325px;
+    top: 110px;
+    left: 197px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 24px;
+    left: 112px;
+"></div><div class="wall" style="height: 8px;position: fixed;width: 335px;top: 401px;left: 200px;"></div><div class="wall" style="height: 8px;position: fixed;width: 335px;top: 370px;left: 205px;"></div><div class="wall" style="height: 8px;position: fixed;width: 315px;top: 170px;left: 210px;"></div><div class="wall" style="height: 8px;position: fixed;width: 250px;top: 257px;left: 422px;"></div><div class="wall" style="height: 8px;position: fixed;width: 250px;top: 300px;left: 422px;"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 471px;
+    left: 117px;
+"></div><div class="wall" style="
+    height: 300px;
+    position: fixed;
+    width: 8px;
+    top: 111px;
+    left: 197px;
+"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 25px;
+    left: 111px;
+"></div><div class="wall" style="height: 70px;position: fixed;width: 8px;top: 110px;left: 520px;"></div><div class="wall" style="height: 210px;position: fixed;width: 8px;top: 170px;left: 335px;"></div><div class="wall" style="height: 45px;position: fixed;width: 8px;top: 260px;left: 422px;"></div><div class="wall" style="
+    height: 472px;
+    position: fixed;
+    width: 8px;
+    top: 24px;
+    left: 608px;
+"></div>
+
+  <!-- Arrival Line -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 8px;
+    top: 0px;
+    left: 346px;
+" id="arrival"></div>
+
+  <!-- Anti-reverse wall (codename Barrier) -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 20px;
+    top: 0;
+    left: 355px;
+" id="barrier"></div></div>
\ No newline at end of file
diff --git a/race/circuits/snowy.png b/race/circuits/snowy.png
new file mode 100644
index 0000000..31f28a9
--- /dev/null
+++ b/race/circuits/snowy.png
diff --git a/race/circuits/water.html b/race/circuits/water.html
new file mode 100644
index 0000000..1c6166a
--- /dev/null
+++ b/race/circuits/water.html
@@ -0,0 +1,133 @@
+<!-- Manifest version 5 (breaking with version 4) -->
+
+<!-- Metadata -->
+<circuit>
+  {
+    "name": {
+      "fr": "Attention à l'eau",
+      "en": "Keep out the water"
+    },
+    "author": "Minteck Projects"
+  }
+</circuit>
+
+<!-- Cars -->
+<div id="car0" style="display: inline-block;position: fixed;top: 42.9px;left: 428px;transform: rotate(0deg);"><img id="car0-img" style="
+    width: 36px;
+"></div>
+<div id="car1" style="display: inline-block;position: fixed;top: 79.4px;left: 388.9px;transform: rotate(0deg);"><span id="aibox-far" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: 0px;
+    right: -30px;
+    animation-name: aibox;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: alternate-reverse;
+"></span><span id="aibox-near" style="
+    position: absolute;
+    display: block;
+    top: -7px;
+    bottom: -7px;
+    left: -7px;
+    right: -7px;
+"></span><span id="aibox-nearest" style="
+    position: absolute;
+    display: block;
+    top: -3px;
+    bottom: -3px;
+    left: -3px;
+    right: -3px;
+"></span><img id="car1-img" style="
+    width: 36px;"></div>
+
+<!-- Oils -->
+<div id="oil">
+  <img src="../race/oil.png" id="oil0" style="top: 278px; left: 634px; transform: rotate(68deg);">
+  <img src="../race/oil.png" id="oil1" style="top: 22px; left: 457px; transform: rotate(217deg);">
+  <img src="../race/oil.png" id="oil2" style="top: 26px; left: 531px; transform: rotate(82deg);">
+  <img src="../race/oil.png" id="oil3" style="top: 155px; left: 425px; transform: rotate(120deg);">
+  <img src="../race/oil.png" id="oil4" style="top: 137px; left: 121px; transform: rotate(178deg);">
+</div>
+
+<!-- Elements -->
+<div id="elements">
+
+  <!-- Walls -->
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 325px;
+    top: 110px;
+    left: 193px;
+"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 498px;
+    top: 24px;
+    left: 107px;
+"></div><div class="wall" style="height: 8px;position: fixed;width: 325px;top: 288px;left: 193px;"></div><div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 302px;
+    top: 469px;
+    left: 107px;
+"></div><div class="wall" style="
+    height: 186px;
+    position: fixed;
+    width: 8px;
+    top: 111px;
+    left: 194px;
+"></div><div class="wall" style="
+    height: 452px;
+    position: fixed;
+    width: 8px;
+    top: 25px;
+    left: 106px;
+"></div><div class="wall" style="height: 186px;position: fixed;width: 8px;top: 110px;left: 515px;"></div><div class="wall" style="
+    height: 346px;
+    position: fixed;
+    width: 8px;
+    top: 24px;
+    left: 602px;
+"></div>
+
+  <div class="wall" style="
+    height: 8px;
+    position: fixed;
+    width: 210px;
+    top: 363px;
+    left: 401px;
+"></div><div class="wall" style="
+    height: 110px;
+    position: fixed;
+    width: 8px;
+    top: 363px;
+    left: 401px;
+"></div><div class="wall" style="
+    height: 145px;
+    position: fixed;
+    width: 180px;
+    top: 369px;
+    left: 187px;
+"></div><!-- Arrival Line -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 8px;
+    top: 0px;
+    left: 346px;
+" id="arrival"></div>
+
+  <!-- Anti-reverse wall (codename Barrier) -->
+  <div style="
+    height: 127px;
+    position: fixed;
+    width: 20px;
+    top: 0;
+    left: 355px;
+" id="barrier"></div></div>
\ No newline at end of file
diff --git a/race/circuits/water.png b/race/circuits/water.png
new file mode 100644
index 0000000..d065b1c
--- /dev/null
+++ b/race/circuits/water.png
diff --git a/race/models/alpspin_by_redman.png b/race/models/alpspin_by_redman.png
new file mode 100644
index 0000000..59bcd11
--- /dev/null
+++ b/race/models/alpspin_by_redman.png
diff --git a/race/models/argenquirie_by_redman.png b/race/models/argenquirie_by_redman.png
new file mode 100644
index 0000000..b3e0866
--- /dev/null
+++ b/race/models/argenquirie_by_redman.png
diff --git a/race/models/argenquiriedx_by_redman.png b/race/models/argenquiriedx_by_redman.png
new file mode 100644
index 0000000..ea97f54
--- /dev/null
+++ b/race/models/argenquiriedx_by_redman.png
diff --git a/race/models/blues_by_minteck.png b/race/models/blues_by_minteck.png
new file mode 100644
index 0000000..36d58b6
--- /dev/null
+++ b/race/models/blues_by_minteck.png
diff --git a/race/models/formula1_by_redman.png b/race/models/formula1_by_redman.png
new file mode 100644
index 0000000..596d26a
--- /dev/null
+++ b/race/models/formula1_by_redman.png
diff --git a/race/models/pinks_by_minteck.png b/race/models/pinks_by_minteck.png
new file mode 100644
index 0000000..927f58c
--- /dev/null
+++ b/race/models/pinks_by_minteck.png
diff --git a/race/models/spagetti11_by_redman.png b/race/models/spagetti11_by_redman.png
new file mode 100644
index 0000000..63707a5
--- /dev/null
+++ b/race/models/spagetti11_by_redman.png
diff --git a/race/oil.png b/race/oil.png
new file mode 100644
index 0000000..cb23917
--- /dev/null
+++ b/race/oil.png
diff --git a/race/pause.js b/race/pause.js
new file mode 100644
index 0000000..d1ee002
--- /dev/null
+++ b/race/pause.js
@@ -0,0 +1,102 @@
+global.quitting = false;
+
+startHooks.push(() => {
+    global.pause = (stat) => {
+        if (stat) {
+            if (location.search === "?sp") {
+                require('@electron/remote').getCurrentWindow().dstate = lang.discord.game[3];
+                require('@electron/remote').getCurrentWindow().ddetails = lang.discord.game[1];
+            } else {
+                require('@electron/remote').getCurrentWindow().dstate = lang.discord.game[3];
+                require('@electron/remote').getCurrentWindow().ddetails = lang.discord.game[2];
+            }
+            warn("Suspend", "Game paused");
+            Sound.pause();
+            if (require('@electron/remote').getCurrentWindow().music) {
+                shouldMusicPlay = false;
+                require('electron').ipcRenderer.send('prefademusic', "");
+            }
+            if (typeof e !== "undefined") {
+                if (e.currentTime < e.duration) {
+                    e.pause();
+                }
+            }
+            if (typeof b !== "undefined") {
+                b.pause();
+            }
+            paused = true;
+            document.getElementById('box').classList.add('paused');
+            $("#paused").show();
+            $("#credits").show();
+        } else {
+            if (location.search === "?sp") {
+                require('@electron/remote').getCurrentWindow().dstate = lang.discord.game[0];
+                require('@electron/remote').getCurrentWindow().ddetails = lang.discord.game[1];
+            } else {
+                require('@electron/remote').getCurrentWindow().dstate = lang.discord.game[0];
+                require('@electron/remote').getCurrentWindow().ddetails = lang.discord.game[2];
+            }
+            warn("Suspend", "Game resumed");
+            Sound.pause();
+            if (require('@electron/remote').getCurrentWindow().music) {
+                shouldMusicPlay = true;
+                require('electron').ipcRenderer.send('preunfademusic', "");
+            }
+            if (typeof me !== "undefined") {
+                if (me.currentTime < me.duration) {
+                    me.play();
+                }
+            }
+            if (typeof b !== "undefined") {
+                b.play();
+            }
+            paused = false;
+            document.getElementById('box').classList.remove('paused');
+            $("#paused").hide();
+            $("#credits").hide();
+        }
+    }
+
+    global.selectOption = () => {
+        item = document.querySelector(".selected a").id;
+        Sound.click();
+
+        switch (item) {
+            case 'continue':
+                pause(false);
+                break;
+            case 'hitboxes':
+                if (hitshow) {
+                    hitshow = false;
+                    document.getElementById("circuit").classList.remove("hitboxes");
+                    document.getElementById('hitboxes').innerText = lang.game.gpause.showhb;
+                    info("GameWindow", "Hitboxes hidden");
+                } else {
+                    hitshow = true;
+                    document.getElementById("circuit").classList.add("hitboxes");
+                    document.getElementById('hitboxes').innerText = lang.game.gpause.hidehb;
+                    info("GameWindow", "Hitboxes shown");
+                }
+                break;
+            case 'quit':
+                if (online) {
+                    global.quitting = true;
+                    clientWriter(JSON.stringify({
+                        _type: "ipc",
+                        action: "abort",
+                        message: null
+                    }) + "|")
+                }
+                keysEnabled = false;
+                require('electron').ipcRenderer.send('prefademusic', "");
+                $("#box").fadeOut(500);
+                $("#bg").fadeOut(500);
+                $("#paused").fadeOut(500);
+                setTimeout(() => {
+                    info("GameWindow", "Switching control to MenuWindow");
+                    location.href = "menu.html?back";
+                }, 1000)
+                break;
+        }
+    }
+})
\ No newline at end of file