class Manager {

    pendulums: Pendulum[] = []

    timescale = 1;
    gravity = 9.81;

    playing = false;

    constructor() {
        p.colorMode(p.HSB, 100);
        let count = 100;
        for (let i = 0; i < count; i++){
            let rad = i / count / 1e3 + p.PI * 1.05;
            let hue = i / count * 100;
            let color = p.color(hue, 100, 100);
            this.pendulums.push(
                new Pendulum([1, 1, 1, 1, 1, 1, 1, 1], [50, 50, 50, 50, 50, 50, 50, 100 + i / count / 1000000], color)
            );
        }
        p.colorMode(p.RGB);

    }

    init(){
        // @ts-ignore
        const {createApp} = Vue;
        createApp({
            data() {
                return {
                    gravity: manager.gravity,
                    timescale: manager.timescale,
                    playingBtn: "play"
                };
            },
            watch: {
                gravity(newGravity: string) {
                    manager.gravity = parseFloat(newGravity);
                },
                timescale(newScale: string){
                    manager.timescale = parseFloat(newScale);
                }
            },
            methods: {
                togglePlay(){
                    manager.playing = !manager.playing;
                    this.playingBtn = manager.playing ? "pause" : "play";
                }
            }
        }).mount("#simulation");
    }

    update(){
        if (this.playing) {
            const h = this.timescale / (p.frameRate() || 60);
            this.pendulums.forEach(p => p.update(h));
        }
    }

    draw(){
        p.push()
        p.translate(p.width / 2, p.height / 2);
        this.pendulums.forEach(p => p.draw());
        p.pop();
    }

}