studyup 0.0.0-stage → 1.0.1

package/sandboxels-package/sandboxels-1.13.2/mods/doom.js

@@ -0,0 +1,935 @@
+elements.screen = {
+    name: "Screen",
+    color: "#000000",
+    hidden: true
+}
+elements.doom = {
+    color: "#000000",
+    onSelect: function() {
+        startDoom()
+    }
+}
+
+let running = false;
+
+const offsetX = 0;
+const offsetY = 0;
+const screenWidth = 166 - (2 * offsetX);
+const screenHeight = 82 - (2 * offsetY);
+const halfHeight = screenHeight / 2 + offsetY;
+
+const fov = 50;
+const halfFov = fov / 2;
+
+const showDebugText = true;
+
+const map = [
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,2,2,2,2,2,0,0,0,0,3,0,3,0,3,0,0,0,1],
+    [1,0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,2,0,0,0,2,0,0,0,0,3,0,0,0,3,0,0,0,1],
+    [1,0,0,0,0,0,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,2,2,0,2,2,0,0,0,0,3,0,3,0,3,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,0,4,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,0,0,0,0,5,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,0,4,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,0,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+];
+
+const colors = ["#ff0000", "#0000ff", "#ffffff", "#808080", "#ff5000"];
+
+const defaults = {
+    x: 2,
+    y: 2,
+    angle: 90
+}
+
+const colorSettings = {
+    floor: "#cccccc",
+    ceiling: "#1e1e1e",
+}
+
+const mapHeight = map.length;
+const mapWidth = map[0].length;
+const minimapOffset = 5;
+
+const speed = {
+    movementSpeed: 0.5,
+    rotationalSpeed: 5,
+    verticalRotationalSpeed: 5,
+}
+
+const planeX = 0;
+const planeY = 0.66;
+
+const inc = fov / screenWidth;
+const precision_ = 64;
+const maxDist = 25;
+const accuracy = 1;
+
+
+// const colorSettings = {
+//     floor: "#d1bd62",
+//     ceiling: "#f0c743"
+// }
+
+const degToRad = (deg) => deg * (Math.PI / 180);
+const radToDeg = (rad) => rad * (180 / Math.PI);
+const splitHex = (hex) => hex.slice(1).match(/../g).map(a => Math.floor(parseInt(a, 16)));
+const hexify = (rgb) => rgb.map(a => Math.floor(a).toString(16).padStart(2, "0")).join("");
+function colorLerp(color_, color2_, t) {
+    const color = splitHex(color_);
+    const color2 = splitHex(color2_);
+    const r = (1 - t) * color[0] + t * color2[0];
+    const g = (1 - t) * color[1] + t * color2[1];
+    const b = (1 - t) * color[2] + t * color2[2];
+    return hexify([r, g, b]);
+}
+
+function clamp(x, min, max) {
+    return Math.max(min, Math.min(x, max));
+}
+
+class Player {
+    constructor(x, y, angle) {
+        this.x = x;
+        this.y = y;
+        this.angle = angle;
+        this.verticalOffset = 0;
+    }
+
+    update(key) {
+        // if (key.keyCode == 37) { // left
+        if (key.key == "a") {
+            this.angle -= speed.rotationalSpeed;
+        // } else if (key.keyCode == 39) { // right
+        } else if (key.key == "d") {
+            this.angle += speed.rotationalSpeed;
+        } else if (key.key == "b") { // up
+            this.verticalOffset = clamp(this.verticalOffset + 5, -45, 45);
+        } else if (key.key == "n") { // down
+            this.verticalOffset = clamp(this.verticalOffset - 5, -45, 45);
+        }
+        if (key.key == "w") {
+            console.log(this.angle);
+            const playerCos = Math.cos(degToRad(this.angle)) * speed.movementSpeed;
+            const playerSin = Math.sin(degToRad(this.angle)) * speed.movementSpeed;
+            const newX = this.x + playerCos;
+            const newY = this.y + playerSin;
+            const oldX = this.x;
+            const oldY = this.y;
+            if (map[Math.floor(newY)][Math.floor(oldX)] == 0) {
+                this.y = newY;
+            }
+            if (map[Math.floor(oldY)][Math.floor(newX)] == 0) {
+                this.x = newX;
+            }
+        } else if (key.key == "s") {
+            const playerCos = Math.cos(degToRad(this.angle)) * speed.movementSpeed;
+            const playerSin = Math.sin(degToRad(this.angle)) * speed.movementSpeed;
+            const newX = this.x - playerCos;
+            const newY = this.y - playerSin;
+            const oldX = this.x;
+            const oldY = this.y;
+            if (map[Math.floor(newY)][Math.floor(oldX)] == 0) {
+                this.y = newY;
+            }
+            if (map[Math.floor(oldY)][Math.floor(newX)] == 0) {
+                this.x = newX;
+            }
+        } else if (key.key == "a" && shiftDown) {
+            const playerCos = Math.cos(degToRad(this.angle + 90)) * speed.movementSpeed;
+            const playerSin = Math.sin(degToRad(this.angle + 90)) * speed.movementSpeed;
+            const newX = this.x - playerCos;
+            const newY = this.y - playerSin;
+            const oldX = this.x;
+            const oldY = this.y;
+            if (map[Math.floor(newY)][Math.floor(oldX)] == 0) {
+                this.y = newY;
+            }
+            if (map[Math.floor(oldY)][Math.floor(newX)] == 0) {
+                this.x = newX;
+            }
+        } else if (key.key == "d" && shiftDown) {
+            const playerCos = Math.cos(degToRad(this.angle - 90)) * speed.movementSpeed;
+            const playerSin = Math.sin(degToRad(this.angle - 90)) * speed.movementSpeed;
+            const newX = this.x - playerCos;
+            const newY = this.y - playerSin;
+            const oldX = this.x;
+            const oldY = this.y;
+            if (map[Math.floor(newY)][Math.floor(oldX)] == 0) {
+                this.y = newY;
+            }
+            if (map[Math.floor(oldY)][Math.floor(newX)] == 0) {
+                this.x = newX;
+            }
+        }
+    }
+}
+
+const player = new Player(defaults.x, defaults.y, defaults.angle);
+
+// 5x5
+const font = {
+    a: [
+        0, 1, 1, 1, 0,
+        0, 0, 0, 0, 1,
+        0, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 1, 1, 1
+    ],
+    b: [
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 0
+    ],
+    c: [
+        0, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 1, 1, 1, 1
+    ],
+    d: [
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 0
+    ],
+    e: [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 1
+    ],
+    f: [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    g: [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 0, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    h: [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1
+    ],
+    i: [
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    j: [
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 1, 1, 0
+    ],
+    k: [
+        1, 0, 0, 1, 0,
+        1, 0, 0, 1, 0,
+        1, 1, 1, 0, 0,
+        1, 0, 0, 1, 0,
+        1, 0, 0, 1, 0
+    ],
+    l: [
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 0
+    ],
+    m: [
+        1, 1, 1, 1, 0,
+        1, 0, 1, 0, 1,
+        1, 0, 1, 0, 1,
+        1, 0, 1, 0, 1,
+        1, 0, 1, 0, 1
+    ],
+    n: [
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1
+    ],
+    o: [
+        0, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 1, 1, 0
+    ],
+    p: [
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    q: [
+        0, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1
+    ],
+    r: [
+        1, 0, 1, 1, 1,
+        1, 1, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    s: [
+        0, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        0, 1, 1, 1, 0,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 0
+    ],
+    t: [
+        1, 1, 1, 1, 1,
+        0, 0, 1, 0, 0,
+        0, 0, 1, 0, 0,
+        0, 0, 1, 0, 0,
+        0, 0, 1, 0, 0
+    ],
+    u: [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    v: [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 0, 1, 0,
+        0, 1, 0, 1, 0,
+        0, 0, 1, 0, 0
+    ],
+    w: [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 0, 1, 0, 1,
+        1, 0, 1, 0, 1,
+        0, 1, 0, 1, 0
+    ],
+    x: [
+        1, 0, 0, 0, 1,
+        0, 1, 0, 1, 0,
+        0, 0, 1, 0, 0,
+        0, 1, 0, 1, 0,
+        1, 0, 0, 0, 1
+    ],
+    y: [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        0, 1, 0, 1, 0,
+        0, 0, 1, 0, 0,
+        0, 0, 1, 0, 0
+    ],
+    z: [
+        1, 1, 1, 1, 0,
+        0, 0, 0, 1, 0,
+        0, 1, 1, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 0
+    ],
+    "0": [
+        1, 1, 1, 1, 0,
+        1, 0, 0, 1, 0,
+        1, 0, 0, 1, 0,
+        1, 0, 0, 1, 0,
+        1, 1, 1, 1, 0
+    ],
+    "1": [
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    "2": [
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 1
+    ],
+    "3": [
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    "4": [
+        1, 0, 0, 0, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1
+    ],
+    "5": [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    "6": [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 0,
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    "7": [
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1,
+        0, 0, 0, 0, 1
+    ],
+    "8": [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    "9": [
+        1, 1, 1, 1, 1,
+        1, 0, 0, 0, 1,
+        1, 1, 1, 1, 1,
+        0, 0, 0, 0, 1,
+        1, 1, 1, 1, 1
+    ],
+    ".": [
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    ":": [
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 0, 0, 0, 0
+    ],
+    "-": [
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 1, 1, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0
+    ],
+    "+": [
+        0, 0, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 1, 1, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 0, 0, 0, 0,
+    ],
+    ",": [
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+    ],
+    "[": [
+        1, 1, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 1, 0, 0, 0
+    ],
+    "]": [
+        1, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 1, 0, 0, 0
+    ],
+    "(": [
+        0, 1, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 1, 0, 0, 0
+    ],
+    ")": [
+        1, 0, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    ";": [
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    "!": [
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ],
+    "{": [
+        0, 1, 1, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 1, 1, 0, 0
+    ],
+    "}": [
+        1, 1, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 0, 1, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 1, 0, 0, 0
+    ],
+    "_": [
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0,
+        1, 1, 1, 0, 0
+    ],
+    "°": [
+        1, 1, 1, 0, 0,
+        1, 0, 1, 0, 0,
+        1, 1, 1, 0, 0,
+        0, 0, 0, 0, 0,
+        0, 0, 0, 0, 0
+    ],
+    "|": [
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        1, 0, 0, 0, 0
+    ]
+}
+
+const customWidth = {
+    i: 1,
+    l: 4,
+    z: 4,
+    "0": 4,
+    "1": 1,
+    ".": 1,
+    ":": 1,
+    "-": 3,
+    "+": 3,
+    ",": 1,
+    "[": 2,
+    "]": 2,
+    "(": 2,
+    ")": 2,
+    ";": 1,
+    "!": 1,
+    "{": 3,
+    "}": 3,
+    "_": 3,
+    "°": 3,
+    " ": 3,
+    "|": 1,
+}
+
+class TextRenderer {
+    static getCharWidth(char) {
+        return customWidth[char] ?? 5;
+    }
+
+    static drawChar(char, x, y, color) {
+        if (!font[char]) return;
+        const width = this.getCharWidth();
+        for (let i = 0; i < width; i++) {
+            for (let j = 0; j < 5; j++) {
+                if (font[char][j * 5 + i] == 1) {
+                    pixelMap[x + offsetX + i][y + offsetY + j].color = color;
+                }
+            }
+        }
+    }
+
+    static drawText(text, x, y, color) {
+        let offset = 0;
+        for (const char of text.toLowerCase().split("")) {
+            const width = this.getCharWidth(char);
+            this.drawChar(char, x + offset, y, color);
+            offset += width + 1;
+        }
+    }
+
+    static getStringWidth(text) {
+        return text.split("").map(a => this.getCharWidth(a)).reduce((a, b) => a + b, 0) + text.length - 1;
+    }
+
+    static drawCenteredText(text, x1, y, color) {
+        const x = Math.floor(x1 - (this.getStringWidth(text) / 2));
+        this.drawText(text, x, y, color);
+    }
+}
+
+class ButtonRegistry {
+    constructor (screen, buttons) {
+        this.screen = screen;
+        this.buttons = buttons;
+        this.currentButton = 0;
+        if (this.buttons.length > 0) {
+            this.buttons[this.currentButton].toggleSelection();
+        }
+    }
+
+    next() {
+        this.buttons[this.currentButton].toggleSelection();
+        this.currentButton++;
+        if (this.currentButton >= this.buttons.length) {
+            this.currentButton %= this.buttons.length;
+        }
+        this.buttons[this.currentButton].toggleSelection();
+    }
+
+    prev() {
+        this.buttons[this.currentButton].toggleSelection();
+        this.currentButton--;
+        if (this.currentButton < 0) {
+            this.currentButton = this.buttons.length - 1;
+        }
+        this.buttons[this.currentButton].toggleSelection();
+    }
+
+    current() {
+        return this.buttons[this.currentButton];
+    }
+}
+
+class GameMenu {
+    constructor (name, screen, width, height, offsets = null) {
+        this.name = name;
+        this.screen = screen;
+        this.width = width;
+        this.height = height;
+        this.offsetX = Math.floor((screenWidth - width - (offsets ? offsets.x : 0)) / 2) + (offsets ? offsets.x : 0);
+        this.offsetY = Math.floor((screenHeight - height - 10 - (offsets ? offsets.y : 0)) / 2) + (offsets ? offsets.y : 0) + 10;
+        this.buttons = [];
+        this.buttonRegistry = new ButtonRegistry(this, []);
+    }
+
+    draw() {
+        for (const button of this.buttons) {
+            button.draw();
+        }
+    }
+
+    getOffsetX() {
+        return offsetX + this.offsetX;
+    }
+
+    getOffsetY() {
+        return offsetY + this.offsetY;
+    }
+    
+    onKey(ev) {
+        if (ev.key == "b") { // up
+            this.buttonRegistry.prev();
+        } else if (ev.key == "n") { // down
+            this.buttonRegistry.next();
+        } else if (ev.key == "Enter") {
+            this.buttonRegistry.current().click();
+        }
+    }
+
+    addButtons(...buttons) {
+        this.buttons.push(...buttons);
+        this.updateButtonRegistry();
+    }
+
+    getButtons() {
+        return this.buttons;
+    }
+
+    updateButtonRegistry() {
+        this.buttonRegistry = new ButtonRegistry(this, this.buttons);
+    }
+}
+
+class GuiButton {
+    constructor (x, y, width, height, text, color, screen) {
+        this.x = x + screen.getOffsetX();
+        this.y = y + screen.getOffsetY();
+        this.width = width;
+        this.height = height;
+        this.text = text;
+        this.color = color;
+        this.onPressed = () => {};
+        this.selected = false;
+        this.screen = screen;
+    }
+    
+    draw() {
+        for (let i = this.x; i < this.x + this.width; i++) {
+            for (let j = this.y; j < this.y + this.height; j++) {
+                if (this.selected && (i == this.x || j == this.y || i == this.x + this.width - 1 || j == this.y + this.height - 1)) {
+                    pixelMap[i][j] = "#0080000";
+                } else pixelMap[i][j] = this.color
+            }
+        }
+        TextRenderer.drawCenteredText(this.text, this.x + (this.width / 2), Math.floor(this.y + (this.height / 2) - 5/2), "#ffffff");
+    }
+    
+    onClick(cb) {
+        this.onPressed = cb;
+    }
+
+    click() {
+        this.onPressed();
+    }
+
+    toggleSelection() {
+        this.selected = !this.selected;
+    }
+}
+
+class GuiUtils {
+    static drawRect(x1, y1, x2, y2, color) {
+        for (let i = Math.max(Math.min(x1, x2), 0); i < Math.min(Math.max(x1, x2), width); i++) {
+            for (let j = Math.max(Math.min(y1, y2), 0); j < Math.min(Math.max(y1, y2), height); j++) {
+                pixelMap[i][j].color = color;
+            }
+        }
+    }
+
+    static drawOutline(x1, y1, x2, y2, color) {
+        const initI = Math.max(Math.min(x1, x2), 0);
+        const endI = Math.min(Math.max(x1, x2), width);
+        const initJ = Math.max(Math.min(y1, y2), 0);
+        const endJ = Math.min(Math.max(y1, y2), height);
+        for (let i = initI; i < endI; i++) {
+            for (let j = initJ; j < endJ; j++) {
+                if (i == initI || i == endI - 1 || j == initJ || j == endJ - 1) {
+                    pixelMap[i][j].color = color;
+                } 
+            }
+        }
+    }
+
+    static drawVerticalLine(x, y1, y2, color) {
+        for (let i = Math.max(Math.min(y1, y2), 0); i <= Math.min(Math.max(y1, y2), height); i++) {
+            if (!pixelMap[x][i]) continue;
+            pixelMap[x][i].color = color;
+        }
+    }
+}
+
+class TestGameMenu extends GameMenu {
+    constructor (screen, width, height, offsets = null) {
+        super("test menu screen", screen, width, height, offsets);
+        const button1 = new GuiButton(1, 1, width - 2, 20, "button", "#005555", this);
+        button1.onClick(() => {
+            button1.color = "#ff0000";
+            button2.color = "#005555";
+        })
+        const button2 = new GuiButton(1, 22, width - 2, 20, "button 2", "#005555", this);
+        button2.onClick(() => {
+            button2.color = "#ff0000";
+            button1.color = "#005555";
+        })
+        this.addButtons(
+            button1,
+            button2
+        )
+    }
+    draw() {
+        for (let i = this.getOffsetX(); i < this.width + this.getOffsetX(); i++) {
+            for (let j = this.getOffsetY(); j < this.height + this.getOffsetY(); j++) {
+                pixelMap[i][j].color = "#ffffff";
+            }
+        }
+        super.draw();
+    }
+}
+
+class GameScreen {
+    clock() {
+        this.fps = this.currentFrames;
+        this.currentFrames = 0;
+    }
+    clear() {
+        for (let i = offsetX; i < width - offsetX; i++) {
+            for (let j = offsetY; j < height - offsetY; j++) {
+                pixelMap[i][j].color = "#ffffff";
+            }
+        }
+    }
+
+    draw() {
+        if (!this.currentFrames) this.currentFrames = 0;
+        this.currentFrames++;
+        this.clear();
+        this.drawLevel();
+        this.drawMinimap();
+        if (showDebugText) {
+            TextRenderer.drawText(`angle: ${Math.floor(player.angle)}°`, 1, 1, "#ffffff");
+            TextRenderer.drawText(`pos: ${player.x.toFixed(2)} | ${player.y.toFixed(2)}`, 1, 7, "#ffffff");
+            TextRenderer.drawText(`fps: ${this.fps}`, 1, 13, "#ffffff");
+            TextRenderer.drawText(`vertangle: ${player.verticalOffset}`, 1, 19, "#ffffff");
+        }
+        if (this.menuScreen) {
+            this.drawMenu();
+        }
+    }
+
+    drawMenu() {
+        this.drawOverlay();
+        GuiUtils.drawRect(this.menuScreen.getOffsetX(), Math.floor((screenHeight - this.menuScreen.height) / 2) - 2, this.menuScreen.getOffsetX() + this.menuScreen.width, this.menuScreen.getOffsetY(), "#1e1e1e");
+        TextRenderer.drawCenteredText(this.menuScreen.name, (this.menuScreen.width / 2) + this.menuScreen.getOffsetX(), Math.floor((screenHeight - this.menuScreen.height) / 2) - 1, "#ffffff");
+        this.menuScreen.draw();
+    }
+
+    drawOverlay() {
+        for (let i = offsetX; i < width - offsetX; i++) {
+            for (let j = offsetY; j < height - offsetY; j++) {
+                pixelMap[i][j].color = "#" + colorLerp(pixelMap[i][j].color, "#000000", 0.5);
+            }
+        }
+    }
+
+    drawLevel() {
+        let rayAngle = player.angle - halfFov;
+        for (let i = 0; i < screenWidth; i += accuracy) {
+            let rayX = player.x;
+            let rayY = player.y;
+            const rayCos = Math.cos(degToRad(rayAngle)) / precision_;
+            const raySin = Math.sin(degToRad(rayAngle)) / precision_;
+            let wall = 0;
+            
+            while (wall == 0) {
+                rayX += rayCos;
+                rayY += raySin;
+                wall = map[Math.floor(rayY)][Math.floor(rayX)];
+            }
+
+            const angle = radToDeg(Math.atan2(rayY, rayX));
+            const side = (angle >= 45 && angle <= 135) || (angle >= 275 && angle <= 315);
+
+            const distance = Math.sqrt((player.x - rayX) ** 2 + (player.y - rayY) ** 2) * Math.cos(degToRad(rayAngle - player.angle));
+
+            const wallHeight = Math.floor(halfHeight / distance);
+
+            let t = Math.min(1, (1 / maxDist) * distance);
+
+            const color = "#" + colorLerp(colors[wall - 1], "#000000", t);
+            const ceilingColor = colorSettings.ceiling;
+            const floorColor = colorSettings.floor;
+
+            GuiUtils.drawVerticalLine(offsetX + i, halfHeight - wallHeight - player.verticalOffset, halfHeight + wallHeight - player.verticalOffset, color);
+            GuiUtils.drawVerticalLine(offsetX + i, offsetY, halfHeight - wallHeight - 1 - player.verticalOffset, ceilingColor);
+            GuiUtils.drawVerticalLine(offsetX + i, halfHeight + wallHeight + 1 - player.verticalOffset, height - offsetY - 1, floorColor);
+
+            rayAngle += inc;
+        }
+    }
+
+    drawMinimap() {
+        for (let i = 0; i < mapWidth; i++) {
+            for (let j = 0; j < mapHeight; j++) {
+                const x = width - offsetX - minimapOffset - mapWidth + i;
+                const y = offsetY + minimapOffset + j;
+                if (map[j][i] == 0) {
+                    pixelMap[x][y].color = colorSettings.floor;
+                } else {
+                    pixelMap[x][y].color = colors[map[j][i] - 1];
+                }
+                if (i == Math.floor(player.x) && j == Math.floor(player.y)) {
+                    pixelMap[x][y].color = "#00ffff";
+                }
+            }
+        }
+    }
+
+    onKey(ev) {
+        // if (ev.key == "Escape") {
+        //     this.menuScreen = this.menuScreen ? null : new TestGameMenu(this, Math.floor(0.75 * screenWidth), Math.floor(0.75 * screenHeight));
+        // }
+        if (!this.menuScreen) {
+            player.update(ev);
+        } else {
+            this.menuScreen.onKey(ev);
+        }
+    }
+}
+
+const game = new GameScreen();
+
+setInterval(cellTick, (1000/(tps*4)));
+setInterval(() => {game.clock()}, 1000);
+
+function cellTick() {
+    if (running && !paused) {
+        game.draw();
+    }
+}
+
+function startDoom() {
+    if (!running) {
+        videoFrame = 0;
+
+        for (let i = offsetX; i < width - offsetX; i++) {
+            for (let j = offsetY; j < height - offsetY; j++) {
+                if (pixelMap[i][j]) deletePixel(i, j);
+                createPixel("screen", i, j);
+            }
+        }
+    }
+    running = !running;
+}
+
+window.addEventListener("keydown", (ev) => {
+    if (ev.key == "u") {
+        startDoom();
+    } else {
+        game.onKey(ev);
+    }
+})