mirror of
https://github.com/richardharrington/robotwar.git
synced 2024-05-28 23:41:31 +00:00
put in animation: instruction box gets swapped out for canvas upon user
input
This commit is contained in:
parent
6845fa51d8
commit
af25b1a2db
|
@ -16,7 +16,7 @@ h1 {
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -25,12 +25,23 @@ p {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 650px;
|
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 {
|
#canvas {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
border: solid #3ef74e 5px;
|
border: solid #3ef74e 5px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
opacity: 0;
|
||||||
|
-moz-transition: opacity 0.5s ease;
|
||||||
|
-webkit-transition: opacity 0.5s ease;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
|
||||||
}
|
}
|
||||||
#programsInput {
|
#programsInput {
|
||||||
|
|
|
@ -12,10 +12,12 @@
|
||||||
<h1>RobotWar</h1>
|
<h1>RobotWar</h1>
|
||||||
<h2>Welcome to the future. It is the year 2002. <br />
|
<h2>Welcome to the future. It is the year 2002. <br />
|
||||||
Wars still rage, but they are only fought by robots.</h2>
|
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>
|
<div class="instruction-box">
|
||||||
<p>You may choose more than one of each.</p>
|
<p>Type the names of up to five programs to load into the battle robots.</p>
|
||||||
<p>Then press return.</p>
|
<p>You may choose more than one of each.</p>
|
||||||
<p>(available robots: <span id="programNames"></span>)</p>
|
<p>Then press return.</p>
|
||||||
|
<p>(available robots: <span id="programNames"></span>)</p>
|
||||||
|
</div>
|
||||||
<input id="programsInput" type="text" autofocus></input>
|
<input id="programsInput" type="text" autofocus></input>
|
||||||
<canvas id="canvas" width="600" height="600"></canvas>
|
<canvas id="canvas" width="600" height="600"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -267,8 +267,21 @@
|
||||||
worlds.finish();
|
worlds.finish();
|
||||||
}
|
}
|
||||||
var programs = this.value;
|
var programs = this.value;
|
||||||
worlds = new Worlds(programs, BUFFER_LENGTH, startGame);
|
worlds = new Worlds(programs, BUFFER_LENGTH, function(gameInfo) {
|
||||||
$(this).blur();
|
// 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));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user