-html, body { width:100%; height:100%;
- font-family:Geogrotesque,Helvetica; font-size:12pt; color:#fff;
- background-color:#3F3F3F; }
-h1 { position:fixed; top:0; right:0; margin:0; padding:0; font-size:3em; color:#000; opacity:0.25; z-index:100; }
-h2, h3, h4, h5 { margin:0; margin-bottom:0.5em; }
+html { width:100%; height:100%; top:0; left:0; margin:0; padding:0; background-color:#3F3F3F; }
+body { position:absolute; width:100%; top:0; left:0; margin:0; padding:0;
+ font-family:Geogrotesque,Helvetica; font-size:12pt; color:#fff; }
+h1, h2, h3, h4, h5 { margin:0.75em 0; font-weight:normal; }
ul, ol, li { list-style: none ! important; margin:0; padding:0; }
+.clearer { clear:both !important; float:none !important;
+ margin:0 !important; padding:0 !important; }
+.rounded { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }
+.box {
+ padding:0.5em; background-color:rgba(0,0,0, 0.1); color:#787878;
+ border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }
+
+body > h1 { position:fixed; top:0; right:0; margin:0; padding:0; font-size:3em; color:#000; opacity:0.25; z-index:100; }
+
table { border-spacing:0; }
td { text-align:center; vertical-align:middle; }
margin:0; padding:0; white-space:nowrap; overflow:hidden; }
.gridShowCoords table.grid td:hover { color:rgba(255,255,255,0.1); }
-.rounded { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }
-.box {
- padding:0.5em; background-color:rgba(0,0,0, 0.1); color:#787878;
- border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }
+#viewport { position:relative; width:500px; height:500px; margin:1em auto; /* overflow:hidden; */ }
+
+
+#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.5; z-index:100; }
+
+.bigblue { position:fixed; width:100%; top:50%; margin-top:-200px; z-index:101; }
+ .bigblue .box { width:400px; margin:0 auto; padding:1em; color:#000; background-color:#2992C5;
+ box-shadow:7.5px 7.5px 15px #000; -moz-box-shadow:7.5px 7.5px 15px #000; -webkit-box-shadow:7.5px 7.5px 15px #000; }
+ .bigblue h1 { text-align:center; font-size:2em; letter-spacing:2px; }
+ .bigblue h2 { font-size:1.1em; letter-spacing:2px; }
+ .bigblue .start { margin:1.5em 0 0.5em; text-align:center; border:0; }
+
+ #notes { /* position:fixed; top:4em; right:1em; color:#BFBFBF;*/ }
+ #notes ul, #notes ol, #notes li { list-style:circle ! important; }
+ #notes li { margin-left:1em; }
-#config { position:fixed; top:1em; left:1em; width:250px; }
+
+/*
+#welcome fieldset { border:1px solid #182B53; padding:1em; }
+#welcome legend { padding:0.5em; text-transform:uppercase; }
+*/
+
+#debug { position:relative; top:1em; right:1em; }
+ #debug .inner { position:absolute; top:0; right:0; padding:1em; }
+ #debug .inner > * { float:right; margin-right:1em; }
+
+#config { position:relative; width:250px; }
#config > div { position:relative; line-height:1.5em; }
#config label { position:relative; width:69%; display:inline-block; }
#config input { position:absolute; width:30%; top:0; right:0; text-align:center;
border:0; background-color:rgba(0,0,0, 0.1) ! important; color:#5c5c5c; }
#config input[type=checkbox] { top:0.33em; }
-#viewport { position:relative; top:1em; width:500px; height:500px; margin:0 auto; /* overflow:hidden; */ }
-#info { position:fixed; bottom:10px; right:1em; }
+#info { position:relative; width:250px; }
#info #state { font-weight:bold; }
#info label { display:block; float:left; width:3em; margin-right:0.5em; color:#787878; }
#info input { border:0; background-color:transparent; min-width:5em; width:5em; color:#5c5c5c; }
#info .sep { opacity:0.1; background-color:#999; margin:5px 0; height:1px; }
#info .fps-sparkline { width:100%; height:1.5em; margin-top:0.5em; }
-#notes { position:fixed; top:4em; right:1em; color:#BFBFBF; width:300px; }
- #notes ul, #notes ol, #notes li { list-style:circle ! important; }
- #notes li { margin-left:1em; }
-
<link rel="stylesheet" href="css/lttl.css" type="text/css" media="screen">
</head>
<body class="lttl tanks">
-<h1>The Littlest Battletank</h1>
-<ul id="notes" class="box">
- <li>Press <code>enter</code> to start! (And to pause.)<br><br></li>
-
- <li>Move around with <code>wasd</code> or the arrow keys.</li>
- <li>Use the mouse to aim; left click or press <code>spacebar</code> to shoot.<br><br></li>
-
- <li>For now, refresh the page to play again. :)</li>
-</ul>
+<div id="overlay"></div>
-<div id="config" class="box">
- <h3>config</h3>
- <!--<div><label for="bullets">bullets</label> <input id="bullets" name="bullets" value="10" type="text"></div>-->
- <div><label for="pathmap">overlay pathmap</label> <input id="pathmap" name="pathmap" value="1" type="checkbox"></div>
- <div><label for="aipaths">overlay ai paths</label> <input id="aipaths" name="aipaths" value="1" type="checkbox"></div>
- <div><label for="trajectories">trace trajectories</label> <input id="trajectories" name="trajectories" value="1" type="checkbox"></div>
- <div><label for="gridCoords">show coords on hover</label> <input id="gridCoords" name="gridCoords" value="1" type="checkbox"></div>
+<div id="welcome" class="bigblue">
+ <div class="box">
+ <h1>The Littlest Battletank</h1>
+
+ <h2>How To Play</h2>
+
+ <ul id="notes">
+ <li>Move your tank with <code>wasd</code> or the arrow keys.</li>
+ <li>Use the mouse to aim; click to shoot (or press <code>spacebar</code>).</li>
+ <li>Press <code>enter</code> to pause.</li>
+ <li>For now, refresh the page to play again. :)</li>
+ </ul>
+
+ <h2 class="start">Click anywhere to start!</h2>
+ </div>
</div>
+
<div id="viewport"></div>
-<ul id="info" class="box">
- <li id="state"></li>
- <li><div class="fps-sparkline"></div></li>
- <li><label for="info_fps" >fps</label> <input id="info_fps" name="fps" value="" type="text"></li>
- <li><label for="info_frame" >frame</label> <input id="info_frame" name="frame" value="" type="text"></li>
- <li><div class="sep"></div></li>
- <li><label for="info_active" >active</label> <input id="info_active" name="active" value="" type="text"></li>
- <li><label for="info_units" >units</label> <input id="info_units" name="units" value="" type="text"></li>
- <li><label for="info_bullets">bullets</label> <input id="info_bullets" name="bullets" value="" type="text"></li>
-</ul>
+
+<div id="debug" style="display:none"><div class="inner box">
+
+ <div id="config">
+ <h3>config</h3>
+ <!--<div><label for="bullets">bullets</label> <input id="bullets" name="bullets" value="10" type="text"></div>-->
+ <div><label for="pathmap">overlay pathmap</label> <input id="pathmap" name="pathmap" value="1" type="checkbox"></div>
+ <div><label for="aipaths">overlay ai paths</label> <input id="aipaths" name="aipaths" value="1" type="checkbox"></div>
+ <div><label for="trajectories">trace trajectories</label> <input id="trajectories" name="trajectories" value="1" type="checkbox"></div>
+ <div><label for="gridCoords">show coords on hover</label> <input id="gridCoords" name="gridCoords" value="1" type="checkbox"></div>
+ </div>
+
+ <ul id="info">
+ <li id="state"></li>
+ <li><div class="fps-sparkline"></div></li>
+ <li><label for="info_fps" >fps</label> <input id="info_fps" name="fps" value="" type="text"></li>
+ <li><label for="info_frame" >frame</label> <input id="info_frame" name="frame" value="" type="text"></li>
+ <li><div class="sep"></div></li>
+ <li><label for="info_active" >active</label> <input id="info_active" name="active" value="" type="text"></li>
+ <li><label for="info_units" >units</label> <input id="info_units" name="units" value="" type="text"></li>
+ <li><label for="info_bullets">bullets</label> <input id="info_bullets" name="bullets" value="" type="text"></li>
+ </ul>
+
+ <div class="clearer"></div>
+</div></div>
<div id="scripts">
<?php require "tanks.php"; Tanks::writeTags( Tanks::ALL_SCRIPTS ); ?>
(function(){
jQuery(main);
-var btank = null
-, bullets = new Y.YArray()
-;
-
this.main = main;
function main(){
var v = $('#viewport');
function setupUI(){
LBT.loop.spark = new FpsSparkline(LBT.loop, '.fps-sparkline', 0,0);
- // btank = new Tank(1);
- // btank.act = function(){ return this; };
- // btank.stats.shots = Infinity;
- // LBT.addUnit(btank, 0,0);
- // LBT.pathmap.removeBlocker(btank);
- // btank.shape.hide();
-
initConfig();
$('#config').bind('mousedown', Y.op.K(false));
$('#config input').bind('change', updateConfig);
LBT.root.draw();
+ $(document).bind('keydown', 'ctrl+c', toggleConfig);
+
// Start button (click or return key)
- $(document).bind('keydown', 'return', toggleGame);
- $(document).bind('keydown', 'ctrl+o', toggleOverlay);
+ $(document).bind('keydown', 'return', startGame);
+ $(document).bind('click', startGame);
+
+ $('#welcome').clone()
+ .attr('id', 'pause')
+ .hide()
+ .appendTo( $('body') )
+ .find('.box').html('<h1>Paused!</h1>');
- // $('#bullets').bind('blur', function(evt){
- // var n = parseInt($('#bullets').val() || 0);
- // updateBullets(n);
- // });
LBT.root.draw();
setInterval(updateInfo, 1000);
}
+function startGame(evt){
+ $(document).unbind('click', startGame);
+ $(document).unbind('keydown', startGame);
+
+ $('#welcome').hide();
+ countdownToStart(3);
+}
+
+function onGameStart(){
+ $('#overlay').hide();
+ toggleGame();
+ $(document).bind('keydown', 'return', pauseGame);
+}
+
+function countdownToStart(n){
+ var el
+ , showFor = 750
+ , pauseFor = 500
+
+ , body = $('body')
+ , sizeRatio = 0.6
+ , values = new Y(1,n+1).unshift('GO').end()
+ , colors = [ '#E73075', '#2992C5', '#2992C5', '#2992C5' ]
+ ;
+
+ function tickDown(){
+ var bw = body.width()
+ , bh = body.height()
+ , size = bh*sizeRatio
+
+ , el = $('<div/>')
+ .width(bh*0.75).height(bh*0.75)
+ .text( values.pop() )
+ .css({
+ 'position' : 'fixed',
+ 'top' : ((bh - size)/2)+'px',
+ 'left' : (bw/2 - bh*0.375)+'px',
+ 'overflow' : 'hidden',
+ 'z-index' : 1000,
+
+ 'text-align' : 'center',
+ 'font-size' : size+'px',
+ 'color' : '#000000',
+ 'background-color' : colors.pop(),
+ })
+ ;
+
+ ' -moz- -webkit-'
+ .split(' ')
+ .forEach(function(prefix){
+ // el.css(prefix+'border-radius', (size*0.25)+'px');
+ el.css(prefix+'border-radius', (bh/2)+'px');
+ });
+
+ body.append(el);
+
+ setTimeout(function(){
+ el.remove();
+
+ if ( values.length ) {
+ setTimeout(tickDown, pauseFor);
+ } else {
+ onGameStart();
+ }
+ }, showFor);
+ }
+
+ tickDown();
+}
+
+function pauseGame(evt){
+ toggleOverlay();
+ $('#pause').toggle();
+ toggleGame();
+}
+
+
+
function toggleGame(evt){
if (LBT.loop.running)
updateInfo();
}
-function toggleOverlay(evt){
- LBT.showOverlay = !(LBT.showOverlay);
-}
+function toggleConfig(evt){ $('#debug').toggle(); }
+function toggleOverlay(evt){ $('#overlay').toggle(); }
+function togglePathingOverlay(evt){ LBT.showOverlay = !(LBT.showOverlay); }
function resizeGame(evt){
LBT.resize(evt);
projects / tanks.git / commitdiff