From 4b21de1e7f459791b67bbf6b6839d2e23659978f Mon Sep 17 00:00:00 2001 From: Tim Repke <timmothey@gmx.de> Date: Sun, 27 Sep 2015 18:16:22 +0200 Subject: [PATCH] changed the way maploading animation works to be more rubust and much nicer --- registration-system/view/signups/game1/index.php | 11 ++++++----- registration-system/view/signups/game1/js/game.js | 15 +++++++++++---- registration-system/view/signups/game1/test.html | 2 +- registration-system/view/signups/game1/ui.css | 14 ++++++++++++-- 4 files changed, 30 insertions(+), 12 deletions(-) diff --git a/registration-system/view/signups/game1/index.php b/registration-system/view/signups/game1/index.php index c624196..2b4be33 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 8247584..f5b4439 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 d109b61..b203f18 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 f6aa824..3de8775 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; -- GitLab