GitHub Contributions Snake

turn github contribs to snake game
// ==UserScript==
// @name         GitHub Contributions Snake
// @namespace    http://tampermonkey.net/
// @version      2024-07-19
// @description  turn github contribs to snake game
// @author       GV3Dev
// @match        https://github.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @grant        none
// @license      MIT
// ==/UserScript==

class SnakeElem {
    constructor() {
        this.body = [{x: 0, y: 0}];
        this.length = 1;
        this.foodEaten = 0;
        this.direction = "right";
    }

    createSnake(cells, columns) {
        for (let i = 0; i < this.length; i++) {
            const pos = this.body[i];
            makeGreen(cells[pos.y * columns + pos.x], 4);
        }
    }

    move(direction, cells, columns, rows, food) {
        const head = { ...this.body[0] };

        switch (direction) {
            case "left":
                if (this.direction !== "right") this.direction = "left";
                break;
            case "right":
                if (this.direction !== "left") this.direction = "right";
                break;
            case "down":
                if (this.direction !== "up") this.direction = "down";
                break;
            case "up":
                if (this.direction !== "down") this.direction = "up";
                break;
        }

        switch (this.direction) {
            case "left":
                head.x = (head.x - 1 + columns) % columns;
                break;
            case "right":
                head.x = (head.x + 1) % columns;
                break;
            case "down":
                head.y = (head.y + 1) % rows;
                break;
            case "up":
                head.y = (head.y - 1 + rows) % rows;
                break;
        }

        this.body.unshift(head);

        if (head.x === food.position.x && head.y === food.position.y) {
            this.foodEaten++;
            this.length += 2;
            food.getEaten(cells, this, columns, rows);
        } else {
            const tail = this.body.pop();
            cells[tail.y * columns + tail.x].setAttribute("data-level", "0");
        }

        this.createSnake(cells, columns);
    }
}

class FoodElem {
    constructor() {
        this.position = null;
    }

    getEaten(cells, snake, columns, rows) {
        cells[this.position.y * columns + this.position.x].style.backgroundColor = "#161b22";
        this.createFood(cells, columns, rows, snake);
    }

    createFood(cells, columns, rows, snake) {
        let randCell;
        let x, y;
        do {
            randCell = Math.floor(Math.random() * cells.length);
            y = Math.floor(randCell / columns);
            x = randCell % columns;
        } while (cells[randCell].getAttribute("data-level") !== "0" || snake.body.some(part => part.x === x && part.y === y));

        cells[y * columns + x].style.backgroundColor = "red";
        this.position = {x, y};
    }
}

const main = () => {
    const keepCheck = setInterval(() => {
        const contribBoard = document.querySelector(".js-yearly-contributions");
        if (contribBoard !== null) {
            clearInterval(keepCheck);
            let cells = contribBoard.querySelectorAll(`.ContributionCalendar-day`);
            let columns = contribBoard.querySelector(`.js-calendar-graph-table tbody`).firstElementChild.children.length;
            let rows = Math.floor(cells.length / columns+1);
            cleanGrid();
            const snake = new SnakeElem();
            const food = new FoodElem();
            food.createFood(cells, columns, rows, snake);
            snake.createSnake(cells, columns);
            appendControls(snake, cells, columns, rows, food);
        }
    }, 100);
}

const appendControls = (snake, cells, columns, rows, food) => {
    window.addEventListener("keydown", (evt) => {
        if (["ArrowUp", "ArrowRight", "ArrowLeft", "ArrowDown"].includes(evt.code)) {
            evt.preventDefault();
        }
        if (evt.code === "ArrowUp") {
            snake.move("up", cells, columns, rows, food);
        } else if (evt.code === "ArrowRight") {
            snake.move("right", cells, columns, rows, food);
        } else if (evt.code === "ArrowLeft") {
            snake.move("left", cells, columns, rows, food);
        } else if (evt.code === "ArrowDown") {
            snake.move("down", cells, columns, rows, food);
        }
    });
}

function makeGreen(elem, level) {
    elem.setAttribute("data-level", `${level}`);
}

function cleanGrid() {
    const contribBoard = document.querySelector(".js-yearly-contributions");
    let cells = contribBoard.querySelectorAll(`.ContributionCalendar-day`);
    cells.forEach((cell) => { cell.setAttribute("data-level", "0"); });
}

main();