Apple-2-SW/robotwar
1
0
Fork 0
mirror of https://github.com/richardharrington/robotwar.git synced 2024-05-28 23:41:31 +00:00
Code Issues Projects Releases Wiki Activity

put in animation: instruction box gets swapped out for canvas upon user

Browse Source 
input
This commit is contained in:
Richard Harrington 2013-08-24 09:27:44 -04:00
parent 6845fa51d8
commit af25b1a2db
3 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/main.css
View File

@ -16,7 +16,7 @@ h1 {
}
h2 {
font-size: 24px;
margin-bottom: 30px;
margin-bottom: 20px;
}
p {
font-size: 18px;
@ -25,12 +25,23 @@ p {
margin: auto;
width: 650px;
}
.instruction-box {
height: 95px;
overflow: hidden;
-moz-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease;
}
#canvas {
width: 600px;
height: 600px;
border: solid #3ef74e 5px;
border-radius: 15px;
background-color: black;
opacity: 0;
-moz-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#programsInput {

10
public/index.html
View File

@ -12,10 +12,12 @@
<h1>RobotWar</h1>
<h2>Welcome to the future. It is the year 2002. <br />
Wars still rage, but they are only fought by robots.</h2>
<p>Type the names of up to five programs to load into the battle robots.</p>
<p>You may choose more than one of each.</p>
<p>Then press return.</p>
<p>(available robots: <span id="programNames"></span>)</p>
<div class="instruction-box">
<p>Type the names of up to five programs to load into the battle robots.</p>
<p>You may choose more than one of each.</p>
<p>Then press return.</p>
<p>(available robots: <span id="programNames"></span>)</p>
</div>
<input id="programsInput" type="text" autofocus></input>
<canvas id="canvas" width="600" height="600"></canvas>
</div>

17
public/js/main.js
View File

@ -267,8 +267,21 @@
worlds.finish();
}
var programs = this.value;
worlds = new Worlds(programs, BUFFER_LENGTH, startGame);
$(this).blur();
worlds = new Worlds(programs, BUFFER_LENGTH, function(gameInfo) {
// TODO: instead of these hacky setTimeouts, set up
// some jQuery promise objects such that we make
// sure the css animation happens WHILE the initial
// info and the first 1000 worlds are
// being downloaded, not after.
$('.instruction-box').css({height: 0});
setTimeout(function() {
$('#canvas').css({opacity: 1});
setTimeout(function() {
startGame(gameInfo);
}, 500);
}, 500);
$(this).blur();
}.bind(this));
}
});