diff --git a/registration-system/view/signups/game1/index.php b/registration-system/view/signups/game1/index.php index c6241960c0fbd30d7c2b111b69e82761d783c41d..2b4be33ca534f34115b5480dbd3944731299d22f 100644 --- a/registration-system/view/signups/game1/index.php +++ b/registration-system/view/signups/game1/index.php @@ -65,9 +65,9 @@ class Game1SignupMethod extends SignupMethod { </div> <div id="game-game"> - <div id="gameCanvas" style="overflow:hidden;position:relative"> + <div id="gameCanvas"> <div id="gameRoot" style="position:relative"></div> - <div id="game-overlay"></div> + <div id="game-overlay" class="loading"></div> <div id="gameDialogue" class="bordered-box"></div> </div> </div> @@ -86,12 +86,13 @@ class Game1SignupMethod extends SignupMethod { size: [800, 600] }); - // this following stuff is to prevent the page from scrolling, when the user - // actually just wants to scroll inside the logs. - // it removes the main scrollbar and adds a padding of its size to replace the space + $(function() { game.run(); + // this following stuff is to prevent the page from scrolling, when the user + // actually just wants to scroll inside the logs. + // it removes the main scrollbar and adds a padding of its size to replace the space var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; var x = document.getElementsByClassName("sidebar-log"); for (var i = 0; i < x.length; i++) { diff --git a/registration-system/view/signups/game1/js/game.js b/registration-system/view/signups/game1/js/game.js index 824758469802a96c36c4165e1e17c3438902bfce..f5b44397e01ecde5d5c0e59f47bce65f763ce815 100644 --- a/registration-system/view/signups/game1/js/game.js +++ b/registration-system/view/signups/game1/js/game.js @@ -34,12 +34,19 @@ Game.prototype.nextMap = function (map, spawn) { }, Game.config.loopSpeed + 5); }; +Game.gameLoading = function(tf) { + if(tf) { + $('#game-overlay').html('').fadeIn(500).addClass('loading'); + } else { + $('#game-overlay').fadeOut(500).removeClass('loading'); + } +}; + Game.prototype.loadMap = function (map, spawn) { + Game.gameLoading(true); + var gameCanvas = document.getElementById("gameCanvas"); var gameRoot = document.getElementById("gameRoot"); - var gameOverlay = $('#game-overlay'); - - gameOverlay.html('<img src="' + FAPI.resolvePath('graphics/loader.svg') + '" style="position: absolute; left: 300px; top: 200px;" />').fadeIn(500); var svg = null; @@ -126,7 +133,7 @@ Game.prototype.loadMap = function (map, spawn) { } function startMainLoop() { - gameOverlay.fadeOut(500); + Game.gameLoading(false); Game.mainLoop = setInterval(function () { if (Game.char && Game.char.loaded) { // move player diff --git a/registration-system/view/signups/game1/test.html b/registration-system/view/signups/game1/test.html index d109b619d517a9baa10e836cc1f47e2f5bbc6019..b203f180a782d2c3f980e01ec0a956bbf7aad036 100644 --- a/registration-system/view/signups/game1/test.html +++ b/registration-system/view/signups/game1/test.html @@ -55,7 +55,7 @@ <div id="game-game"> <div id="gameCanvas" style="overflow:hidden;position:relative"> <div id="gameRoot" style="position:relative"></div> - <div id="game-overlay"></div> + <div id="game-overlay" class="loading"></div> <div id="gameDialogue" class="bordered-box"></div> </div> </div> diff --git a/registration-system/view/signups/game1/ui.css b/registration-system/view/signups/game1/ui.css index f6aa8240ce006a1c01b0677f04c10cc839b4b59f..3de87751040e6303d35283eb297cde9017a94757 100644 --- a/registration-system/view/signups/game1/ui.css +++ b/registration-system/view/signups/game1/ui.css @@ -15,7 +15,12 @@ width: 800px; height: 600px; } - +#gameCanvas { + overflow:hidden; + position:relative; + height: 600px; + width: 800px; +} #game-sidebar { position: absolute; top: 0; @@ -30,11 +35,16 @@ left: 0; width: 800px; height: 600px; - display: none; background-color: #000; + display: none; color: white; } +#game-overlay.loading { + background: #000 url('graphics/loader.svg') no-repeat 300px 200px !important; + display: block !important; +} + .bordered-box { font-family: ‘Lucida Console’, Monaco, monospace; color: white;