Ticket 93 Turned text into loading bar

client/js/boot.js

@@ -67,7 +67,6 @@ bootState.updateBootText = () => {
 }
 
 bootState.startState = () => {
-
     //Initial Load State
     game.state.start('load');
 }

client/js/gameLoop.js

@@ -1,3 +1,4 @@
+
 //initiliaze gameLoop 1st so it functions as a namespace
 const spriteTest = () => {
     let playerStartData = [

client/js/gameLoop.js.orig

@@ -0,0 +1,130 @@
+//initiliaze gameLoop 1st so it functions as a namespace
+const spriteTest = () => {
+    let playerStartData = [
+        50,
+        50,
+        config.loader.placeHolder.key
+    ];
+    // setup player
+    gameLoop.testBlock = game.add.sprite(...playerStartData);
+    var blk = gameLoop.testBlock;
+    game.physics.enable(blk, Phaser.Physics.ARCADE);
+    blk.immovable = true;
+    blk.scale.setTo(2,2);
+};
+let gameLoop = {};
+gameLoop = {
+    init: (data) => {
+        data = typeof data === "undefined" ? {} : data;
+        gameLoop.player  = data.player   || config.default.player;
+        gameLoop.score   = data.score    || config.default.score;
+        gameLoop.width  = data.width    || config.init.screenWidth;
+        gameLoop.height = data.height   || config.init.screenHeight;
+        gameLoop.xStartRegion = data.xStartRegion || config.gameLoop.xStartRegion;
+        gameLoop.yStartRegion = data.yStartRegion || config.gameLoop.yStartRegion;
+        gameLoop.difficulty   = data.difficulty || 1;
+        gameLoop.player.controlType  = data.controlType || config.default.controls.mouse;
+        if (data.debug && data.debug.isOn === true){
+            gameLoop.debugMode = data.debug.isOn;
+            gameLoop.debug = data.debug;
+        }
+        else {
+            gameLoop.debugMode = false;
+        }
+    },
+    // phaser default methods (subStates) -------------------------
+    mouseMovement: (player, playerSpeed) => {
+        console.log("gameInputX: " + game.input.x);
+        console.log("gameInputY: " + game.input.y);
+        console.log("playerX: " + player.x);
+        console.log("playerY: " + player.y);
+        let cursorPlayerDistanceX = game.input.x - player.x;
+        let cursorPlayerDistanceY = game.input.y - player.y;
+        let movementDeltaXY = [cursorPlayerDistanceX, cursorPlayerDistanceY];
+            console.log("cursorDistanceX: " + cursorPlayerDistanceX);
+            console.log("cursorDistanceY: " + cursorPlayerDistanceY);
+        let moveDirectionXY = movementDeltaXY.map(function(cursorPlayerDistance){
+            Math.sign(cursorPlayerDistance);
+        });
+        if (Math.abs(game.input.x) > player.x) {
+            console.log("yeet");
+            movementDeltaXY[0] = moveDirectionXY[0] * playerSpeed;
+        }
+        if (Math.abs(game.input.y) > player.y) {
+            console.log("yote");
+            movementDeltaXY[1] = moveDirectionXY[1] * playerSpeed;
+        }
+        player.x += movementDeltaXY[0];
+        player.y += movementDeltaXY[1];
+    },
+
+    keyboardMovement: (player, playerSpeed) => {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            player.x -= playerSpeed;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            player.x += playerSpeed;
+        }
+    },
+
+    movePlayer : (player, speed, type) => {
+        var mouse = 0;
+        var keyboard = 1;
+
+        if (type === keyboard) {
+            gameLoop.keyboardMovement(player, speed);
+        }
+        else {
+            gameLoop.mouseMovement(player,speed);
+        }
+    },
+    // phaser methods -------------------------
+
+    create: () => {
+        game.physics.startSystem(Phaser.Physics.ARCADE);
+        neutralMap.create();    // setup neutral map sprites
+        spriteTest(); //eanDebug get rid of this function when finished testing
+
+        //setup player object
+        let playerStartData = [
+            gameLoop.width  * gameLoop.xStartRegion,
+            gameLoop.height * gameLoop.yStartRegion,
+            gameLoop.player.key
+        ];
+        gameLoop.player.sprite = game.add.sprite(...playerStartData);
+        playerUtilities.create(gameLoop.player);
+
+        //setup score UI
+        let gameScoreData = [
+            gameLoop.score.x,
+            gameLoop.score.y,
+            gameLoop.score.text,
+            gameLoop.score.style
+        ];
+        gameLoop.score.interface = game.add.text(...gameScoreData);
+        if (gameLoop.debugMode === true) {
+            gameLoop.debug.controls  = game.input.keyboard;
+        }
+    },
+
+    update: () => {
+        neutralMap.updateMap();    // update neutral map states[]
+        playerUtilities.update(gameLoop.player);
+
+        //gameLoop.score.amount += gameLoop.score.bonus1;
+
+        // update score and text
+        gameLoop.score.interface.setText(gameLoop.score.text + gameLoop.score.amount);
+
+        if(gameLoop.debugMode){
+            let upScrollCheat   = gameLoop.debug.controls.isDown(Phaser.KeyCode.OPEN_BRACKET);
+            let downScrollCheat = gameLoop.debug.controls.isDown(Phaser.KeyCode.CLOSED_BRACKET);
+            let gameOverCheat   = gameLoop.debug.controls.isDown(Phaser.KeyCode.SPACEBAR);
+
+            upScrollCheat   ? neutralMap.changeMapSpeed(-gameLoop.difficulty) : -1;
+            downScrollCheat ? neutralMap.changeMapSpeed(gameLoop.difficulty)  : -1;
+            gameOverCheat   ? game.state.start("end") : -1;
+        }
+
+    }
+};

client/js/load.js

@@ -36,19 +36,29 @@ loadState = {
      */
     createScreenImg: () => {
         let tempScreenImg = game.add.sprite(loadState.screenImgX, game.world.centerY/2, loadState.screenImgLabel);
-        let tempTextImg = game.add.sprite(loadState.textImgX, loadState.textImgY, loadState.textImgLabel);
+        //let tempTextImg = game.add.sprite(loadState.textImgX, loadState.textImgY, loadState.textImgLabel);
         // hide sprites initially
         tempScreenImg.alpha = 0;
-        tempTextImg.alpha = 0;
+        //tempTextImg.alpha = 0;
 
         // ensure map fits on screen
         let scaleMapValue = config.init.screenWidth / tempScreenImg.width;
         tempScreenImg.scale.setTo(scaleMapValue);
         loadState.screenSprite = tempScreenImg;
 
-        scaleMapValue = config.init.screenWidth / tempTextImg.width;
-        tempTextImg.scale.setTo(scaleMapValue);
-        loadState.textSprite = tempTextImg;
+        //scaleMapValue = config.init.screenWidth / tempTextImg.width;
+        //tempTextImg.scale.setTo(scaleMapValue);
+        //loadState.textSprite = tempTextImg;
+    },
+
+    loadingBar: (barSprite, barX, barY) => {
+        //console.log("loading is " + game.load.progress + " complete");
+        var loadingBar = game.add.sprite(barX, barY, barSprite);
+        scaleMapValue = config.init.screenWidth / loadingBar.width;
+        loadingBar.scale.setTo(scaleMapValue);
+        //console.log(loadingBar.height);
+        loadState.create();
+        game.load.setPreloadSprite(loadingBar);
     },
 
     /**
@@ -106,7 +116,7 @@ loadState = {
 
         let tempAlpha = loadState.loadValue / 100;
         loadState.screenSprite.alpha = tempAlpha;
-        loadState.textSprite.alpha = tempAlpha;
+        //loadState.textSprite.alpha = tempAlpha;
         //loadState.screenSprite.setTo({alpha: tempAlpha});
         //game.add.tween(loadState.screenSprite).to( { alpha: loadState.loadValue }, 0, "Linear", true);
         if (loadState.loadValue >= 100)
@@ -121,10 +131,9 @@ loadState = {
      */
     preload: () => {
         //Load your images, spritesheets, bitmaps...
-
         // Loader loads
-        game.load.image(loadState.screenImgLabel, loadState.screenImgSrc);
         game.load.image(loadState.textImgLabel, loadState.textImgSrc);
+        game.load.image(loadState.screenImgLabel, loadState.screenImgSrc);
         // Firefox doesn't support mp3 files, so use ogg
         game.load.audio(loadState.bgmLabel, [loadState.mp3, loadState.ogg]);
 
@@ -142,6 +151,7 @@ loadState = {
 
         // Game over loads
         game.load.image(config.gameOverState.restartButton.key, config.gameOverState.restartButton.src);
+        game.load.onFileComplete.add(function(){loadState.loadingBar(loadState.textImgLabel, loadState.textImgX, loadState.textImgY);}, loadState);
     },
 
     /**
@@ -154,7 +164,6 @@ loadState = {
         game.stage.backgroundColor = loadState.background;
         //loadState.getMapSpeed();
         loadState.createScreenImg();
-
         // simulate loading sequence, if loadValue is 100%, end scene
         let repeatCount = 100;
         game.time.events.repeat(Phaser.Timer.SECOND*3/repeatCount, repeatCount, loadState.updateLoadImgs, this);