Skip to content
Snippets Groups Projects
Commit 4b21de1e authored by Tim Repke's avatar Tim Repke
Browse files

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

parent 10ebb8f3
No related branches found
No related tags found
No related merge requests found
...@@ -65,9 +65,9 @@ class Game1SignupMethod extends SignupMethod { ...@@ -65,9 +65,9 @@ class Game1SignupMethod extends SignupMethod {
</div> </div>
<div id="game-game"> <div id="game-game">
<div id="gameCanvas" style="overflow:hidden;position:relative"> <div id="gameCanvas">
<div id="gameRoot" style="position:relative"></div> <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 id="gameDialogue" class="bordered-box"></div>
</div> </div>
</div> </div>
...@@ -86,12 +86,13 @@ class Game1SignupMethod extends SignupMethod { ...@@ -86,12 +86,13 @@ class Game1SignupMethod extends SignupMethod {
size: [800, 600] 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() { $(function() {
game.run(); 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 scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
var x = document.getElementsByClassName("sidebar-log"); var x = document.getElementsByClassName("sidebar-log");
for (var i = 0; i < x.length; i++) { for (var i = 0; i < x.length; i++) {
......
...@@ -34,12 +34,19 @@ Game.prototype.nextMap = function (map, spawn) { ...@@ -34,12 +34,19 @@ Game.prototype.nextMap = function (map, spawn) {
}, Game.config.loopSpeed + 5); }, 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.prototype.loadMap = function (map, spawn) {
Game.gameLoading(true);
var gameCanvas = document.getElementById("gameCanvas"); var gameCanvas = document.getElementById("gameCanvas");
var gameRoot = document.getElementById("gameRoot"); 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; var svg = null;
...@@ -126,7 +133,7 @@ Game.prototype.loadMap = function (map, spawn) { ...@@ -126,7 +133,7 @@ Game.prototype.loadMap = function (map, spawn) {
} }
function startMainLoop() { function startMainLoop() {
gameOverlay.fadeOut(500); Game.gameLoading(false);
Game.mainLoop = setInterval(function () { Game.mainLoop = setInterval(function () {
if (Game.char && Game.char.loaded) { if (Game.char && Game.char.loaded) {
// move player // move player
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<div id="game-game"> <div id="game-game">
<div id="gameCanvas" style="overflow:hidden;position:relative"> <div id="gameCanvas" style="overflow:hidden;position:relative">
<div id="gameRoot" style="position:relative"></div> <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 id="gameDialogue" class="bordered-box"></div>
</div> </div>
</div> </div>
......
...@@ -15,7 +15,12 @@ ...@@ -15,7 +15,12 @@
width: 800px; width: 800px;
height: 600px; height: 600px;
} }
#gameCanvas {
overflow:hidden;
position:relative;
height: 600px;
width: 800px;
}
#game-sidebar { #game-sidebar {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -30,11 +35,16 @@ ...@@ -30,11 +35,16 @@
left: 0; left: 0;
width: 800px; width: 800px;
height: 600px; height: 600px;
display: none;
background-color: #000; background-color: #000;
display: none;
color: white; color: white;
} }
#game-overlay.loading {
background: #000 url('graphics/loader.svg') no-repeat 300px 200px !important;
display: block !important;
}
.bordered-box { .bordered-box {
font-family: Lucida Console, Monaco, monospace; font-family: Lucida Console, Monaco, monospace;
color: white; color: white;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment