Pong/public/data/scripts/ts/init.ts

let debug = false,
	viewPort = {x: 0, y: 0},
    localFont: any,
    localSettings: Settings.Global;

let state = 'menu',
    game: Game | OnlineGame,
    onlineManager: OnlineManager,
    loader: Loader,
    icons : {
        speed: {
            positive
            negative
        }
        border: {
            positive
            negative
        }
    }

const p = new p5((p: p5) => {
	p.preload = (): void => {
		localSettings = <Settings.Global>p.loadJSON('data/settings/settings.json', {}, "json", (json) => {
			console.log('Local settings loaded: ', json)
		}, (error) => {
			console.log('Local settings failed: ', error)
		})

		localFont = p.loadFont('data/styles/font.ttf', (json) => {
			console.log('Local font loaded: ', json)
		}, error => {
			console.log('Local font failed: ', error)
		})

		p.loadJSON('data/settings/libraries.json', json => {
			loadScripts(json)
			console.log('BenjoCraeft library scripts loaded: ', json)
		})

		icons = {speed: {positive: null, negative: null}, border: {positive: null, negative: null}}
		icons.speed.positive = p.loadImage('data/images/speed_icon_positive.png')
		icons.speed.negative = p.loadImage('data/images/speed_icon_negative.png')
		icons.border.positive = p.loadImage('data/images/border_icon_positive.png')
		icons.border.negative = p.loadImage('data/images/border_icon_negative.png')
	}

	p.setup = (): void => {
		canvasSetup(localSettings.frameWork, localFont)
		interfaceSetup()
	}

	p.draw = (): void => {
		p.background(90, 90, 120)
		//p.image(img, 0, 0, p.width, p.height)

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

		if (loader){
			loader.update()
			loader.display()
		}

		if (debug) debugInformation()
	}
});

p.keyPressed = myKeyPressed;
p.keyReleased = myKeyReleased;

declare let debugInformation: () => void
declare let ranBool: (chance: number) => boolean
declare let Collision: {
    ellipseToEllipse: (e1: Ball, e2: Ball) => void
}


function canvasSetup(settings: Settings.FrameWork, font): void{
	p.frameRate(settings.frameRate)
	let canvas = p.createCanvas(settings.width, settings.height)
    canvas.parent('canvasHolder')
    adjustDOMSizes()
    p.textFont(font)
}

function startOfflineGame(): void{
    $('#setup-controls').hide()
    $('#game-controls').show()
    game = new Game(localSettings.game)
    game.init()

    console.log('Offline Game started:', game)
}

function adjustDOMSizes(){
    let w = window.innerWidth
    let h = window.innerHeight
    $('canvas, #canvasHolder').css({
        width: h * 0.95, 
        height: h * 0.95
    })
    $('#interface, #chat').css({
        width: (w - h * 0.95 - 4) / 2 - 4 - 10,
        height: h * 0.95,
        'margin-top': h * 0.025 - 2,
        'margin-left': 5
    })
    $('#chat').css({
        'margin-right': 5
    })
}

function interfaceSetup(): void{
    
    function handleRadioInput(): void{
        let type = $('#game-type input[type=radio]:checked').val()
        $('#game-properties > *').hide()
        if (type === 'offline'){
            $('.start').show()
            state = 'offline-start'
        } else if (type === 'online'){
            $('.player-name').show()
            state = 'player-name'
        }
        
        $('#game-properties').show()
    }
    
    $('#lobby, #chat').hide()
    $('#game-type input[type=radio]').change(handleRadioInput)
    handleRadioInput()
    
}

function continueForm(dom: any): void{
    $(dom).blur()
    switch(state){
        case 'offline-start':
            startOfflineGame()
            break;
        case 'player-name':
            let input = getValidInput(state)
            if (input){
                onlineManager = new OnlineManager(input, localSettings)
                $('.player-name').hide()
                $('.player-actions').show()
                state = 'player-actions'
            }
            break
    }
}

function randomToken(): string{
    return Math.floor((1 + Math.random()) * 1e16).toString(16).substring(1)
}

function loadScripts(libs: string[]){
    for (let script in libs){
        if (libs[script]){
            let url = '/lib/benjocraeft/' + script + '.js'
            $.getScript(url, () => {
                console.log('Successfully loaded script: ', url)
            })
        }
    }
}