Christmas_Tree/public/data/scripts/ts/init.ts

'use strict';

let debug = false,
    font,
    settings: any,
    loader: any;

let antiCacheQuery = '?_=' + new Date().getTime();

let game: Game;

let released = false;

let images: object = {

};

const p = new p5((p: p5) => {

    p.preload = () => {
        settings = p.loadJSON('data/settings/settings.json' + antiCacheQuery, {}, 'json', (json: any) => {
            console.log('Local settings loaded: ', json);
        }, (error: any) => {
            console.log('Local settings failed: ', error);
        });
    
        font = p.loadFont('data/styles/fonts/Tajawal/Tajawal-Regular.ttf' + antiCacheQuery, (font) => {
            console.log('Local font loaded: ', font);
        }, (error: any) => {
            console.log('Local font failed: ', error);
        });

        images['ball'] = p.loadImage('data/images/ball.png' + antiCacheQuery, img => {
            console.log('Ball image loaded: ', img);
        }, error => {
            console.log('Ball image failed: ', error);
        });

        images['box'] = p.loadImage('data/images/box.png' + antiCacheQuery, img => {
            console.log('Box image loaded: ', img);
        }, error => {
            console.log('Box image failed: ', error);
        });
    },

    p.setup = () => {
        interfaceSetup();
        canvasSetup();
        //loader = new Loader(p.createVector(p.width / 2, p.height / 2), Math.min(p.width, p.height) / 2);
        loadDynamicScripts().then(() => {
            //Load other stuff, then => 
            //loader = null;

            game = new Game();
            game.trees[0].container.mousePressed();
        });
    },

    p.draw = () => {
        p.clear();

        if (game){
            game.update();
            game.display();
        }

        if (loader){
            loader.update();
            loader.display();
        }
    
        if (debug) debugInformation();
    }
})

function debugInformation(){

}


function interfaceSetup(){
    let files_elem = $('#file_browser');
    files_elem.on('change', () => {
        let file = (files_elem.get(0) as HTMLInputElement).files[0];
        file.text().then(text => {
           game.restoreTrees(JSON.parse(text)[0]);
        });
    });

    let colorSelect = $('#color');
    let possibleColors = $('#possible_colors');
    for (let colorName in settings.game.colors){
        if (!settings.game.colors.hasOwnProperty(colorName))
            continue;

        let publicName = colorName.substr(0, 1).toUpperCase() + colorName.substr(1);

        let option = $('<option></option>');
        option.html(publicName);
        option.val("[" + settings.game.colors[colorName] + "]");
        colorSelect.append(option);

        let checkbox = $('<input/>');
        checkbox.attr({
            type: 'checkbox',
            id: colorName
        });
        checkbox.on('click', event => {
            if (game){
                if (!game.updateChainSettings($(event.target))){
                    console.info('failed');
                    event.preventDefault();
                }
            }
        });

        let label = $('<label></label>');
        label.html(publicName);
        label.attr('for', colorName);

        possibleColors.append(checkbox, label);
    }


}

function downloadTrees(){
    let str = JSON.stringify(game.trees, (key, value) => {
        if (value instanceof p5.Vector){
            return {
                x: value.x,
                y: value.y
            };
        }
        return value;
    });
    let data = 'data:application/json;charset=utf-8,['+ encodeURIComponent(str) + "]";
    $("#save_link").attr("href", data);
    $("#save_link")[0].click();
}

function canvasSetup(){
    p.frameRate(60);
    let w = $('#canvas_holder').width(),
        h = $('#canvas_holder').height();
	let canvas = p.createCanvas(w, h);
	canvas.parent('canvas_holder');
    p.textFont(font);
    p.imageMode(p.CENTER);
}

async function loadDynamicScripts(){
    const json = await p.httpGet('data/settings/libraries.json' + antiCacheQuery, 'json');
    let requests = [];
    for (let script in json) {
        if (json[script]) {
            let url = '/lib/benjocraeft/' + script + '.js';
            requests.push($.getScript(url, () => {
                console.log('Successfully loaded script: ', url);
            }));
        }
    }
    await $.when(...requests);
    console.log('All dynamic scripts have been loaded!');
}