changed the way maploading animation works to be more rubust and much nicer

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++) {

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

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>

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;