import { Env, TypeEntity } from "./Env.js";
import { Plane } from "./Plane.js";
import { Player } from "./Player.js";
import { Quality } from "./utils.js";

window.addEventListener("load", () => main());

const main = () => {
    // THREE.js
    const env = new Env();
    document.body.appendChild(env.getDomElement());

    // World
    const plan = new Plane(
        window.innerWidth / 50,
        10,
        THREE.Color.NAMES.white,
        THREE.Color.NAMES.black
    );
    env.addToScene(plan);

    // Player
    const player = new Player(THREE.Color.NAMES.red);
    env.addToScene(player, TypeEntity.player);
    addEventListener("keypress", player.controlUser);

    // Generate random map
    env.generateRandomMap(20);

    // GUI
    const gui = new dat.gui.GUI({ closeOnTop: true });
    const menu = Quality.buildGUI(env.quality);
    for (const quality in menu) {
        gui.add(menu, quality)
            .listen()
            .onFinishChange(() => {
                Quality.update(env.setQuality, menu, quality);
            });
    }

    let score = document.getElementById("score");
    score.style =
        "position: absolute; \
         top: 10px; \
         width: 100%; \
         text-align: center; \
         z-index: 100; \
         display: block; \
         color: white; \
         font-size: xx-large; \
         font-family: sans-serif;";

    /**
     * Run the game
     */
    const animate = () => {
        const delta = env.clock.getDelta();
        const ticks = Math.round(delta / (1 / 120));
        for (let i = 0; i < ticks; i++) {
            env.update();
        }

        score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;

        requestAnimationFrame(animate);
    };

    // Run it
    animate();
};