Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-03-30 15:08:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
gun/examples/admin/slinger.html
Mark Nadal e9b1790774 ?
2014-12-18 03:48:01 -07:00

229 lines
7.6 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="old_gun_for_slinger.js"></script>
</head>
<body><center>
<style>
html, body {
font-family: Papyrus, fantasy;
font-size: 18pt;
}
.start .player {
color: white;
border: none;
padding: 1.5em;
background: skyblue;
font-family: Papyrus, fantasy;
}
.screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.off {
display: none;
}
.white {
color: white;
}
.winner input, .winner button {
font-size: 18pt;
}
</style>
<div class="start screen">
<!--<pre>
¦¦¦¦¦¦+ ¦¦+ ¦¦+ ¦¦¦+ ¦¦+ ¦¦¦¦¦¦¦+ ¦¦+ ¦¦+ ¦¦¦+ ¦¦+ ¦¦¦¦¦¦+ ¦¦¦¦¦¦¦+ ¦¦¦¦¦¦+
¦¦+----+ ¦¦¦ ¦¦¦ ¦¦¦¦+ ¦¦¦ ¦¦+----+ ¦¦¦ ¦¦¦ ¦¦¦¦+ ¦¦¦ ¦¦+----+ ¦¦+----+ ¦¦+--¦¦+
¦¦¦ ¦¦¦+ ¦¦¦ ¦¦¦ ¦¦+¦¦+ ¦¦¦ ¦¦¦¦¦¦¦+ ¦¦¦ ¦¦¦ ¦¦+¦¦+ ¦¦¦ ¦¦¦ ¦¦¦+ ¦¦¦¦¦+ ¦¦¦¦¦¦++
¦¦¦ ¦¦¦ ¦¦¦ ¦¦¦ ¦¦¦+¦¦+¦¦¦ +----¦¦¦ ¦¦¦ ¦¦¦ ¦¦¦+¦¦+¦¦¦ ¦¦¦ ¦¦¦ ¦¦+--+ ¦¦+--¦¦+
+¦¦¦¦¦¦++ +¦¦¦¦¦¦++ ¦¦¦ +¦¦¦¦¦ ¦¦¦¦¦¦¦¦ ¦¦¦¦¦¦¦+ ¦¦¦ ¦¦¦ +¦¦¦¦¦ +¦¦¦¦¦¦++ ¦¦¦¦¦¦¦+ ¦¦¦ ¦¦¦
+-----+ +-----+ +-+ +---+ +------+ +------+ +-+ +-+ +---+ +-----+ +------+ +-+ +-+
</pre>-->
<h1>GUN SLINGER</h1>
<h3>Select!</h3>
<button id="one" class="player">Player 1</button>
<button id="two" class="player">Player 2</button>
<h5>Next game available in 15 seconds or less...<h5>
<h4>Fastest draw in the west, <span id="fastest">no</span> seconds, by <span id="slinger">nobody</span>.</h4>
<h5>Previous duel won in <span id="previous">no</span> seconds, by <span id="last">no one</span>.</h5>
</div>
<div class="shoot screen off white" style="background: tan;">
<h3>GET READY!</h3>
</div>
<div class="fire screen off" style="background: lime;">
<h3>FIRE!</h3>
<h5>by tapping this screen</h5>
</div>
<div class="stop screen off" style="background: yellow;">
<h3>STOP!</h3>
<h5>...waiting for the other player...</h5>
</div>
<div class="disqualified screen off white" style="background: red;">
<h3>DISQUALIFIED!</h3>
</div>
<div class="loser screen off white" style="background: red;">
<h3>YOU DIED!</h3>
</div>
<div class="draw screen off white" style="background: red;">
<h3>YOU BOTH DIED!</h3>
<button onclick="game.reset()">Reset Game</button>
</div>
<div class="default screen off white" style="background: skyblue;">
<h3>YOU WON!</h3>
<button onclick="game.reset()">Reset</button>
</div>
<div class="winner screen off white" style="background: skyblue;">
<h3>YOU WON!</h3>
<form onsubmit="game.rank()">
<input placeholder="nickname">
<button onclick="game.rank()">Rank</button>
</form>
</div>
<script>
$(function(){
var game = window.game = {me:{}}
, gun = Gun('https://gunjs.herokuapp.com/gun')
//, gun = window.gun = Gun('http://localhost:8888' + '/gun')
.load('game/duel')
;
gun.path('name').get(function(val){
console.log('gunslinger has results', val);
});
gun.get(function(player){
console.log("Game update", player);
if(game.timeout){
clearTimeout(game.timeout);
} else {
game.timeout = setTimeout(game.reset, 15 * 1000);
}
$('.start').find('#one').text(player.one? 'Taken!' : 'Player 1').attr('disabled', player.one? true : false);
$('.start').find('#two').text(player.two? 'Taken!' : 'Player 2').attr('disabled', player.two? true : false);
$('.start').find('#fastest').text(player.fastest || 'no');
$('.start').find('#slinger').text(player.slinger || 'nobody');
$('.start').find('#previous').text(player.previous || 'no');
$('.start').find('#last').text(player.last || 'no one');
game.start(player);
game.compare(player);
});
gun.path('dqed').get(function(){
if(!game.me.player || game.me.dqed){ return }
game.me.default = true;
game.screen('default');
});
gun.path('one').get(function(val){
console.log('gun player one', val);
if(null === val){
game.cancel();
}
})
game.start = function(player){
if(game.me.started){ return }
if(!player.one || !player.two){ return }
if(!player || !game.me || !game.me.player){ return }
console.log("start?", player, game.me);
if(player[game.me.player] == game.me[game.me.player]){
game.screen('shoot');
game.coordinate();
} else {
game.cancel();
}
}
gun.path('coordinate').get(game.coordinate = function(at){
if(!game.me.player){ return }
var started = game.me.started = Gun.roulette();
if(at){
Gun.schedule(at, function(){
if(game.me.dqed || game.me.default || started != game.me.started){ return }
game.screen('fire');
game.me.draw = (+new Date());
});
return;
}
if(game.me.player != 'two'){ return }
game.me.coordinate = (+new Date()) + Math.round(Math.random() * 2000 + 2700); // MIN is the right number, and MAX is the SUM of both numbers.
gun.path('coordinate').set(game.me.coordinate);
});
game.compare = function(score){
if(!game.me.player || game.me.over || !score.onespeed || !score.twospeed){ return }
if(score.onespeed < score.twospeed){
if(game.me.one){
win(score.onespeed);
} else {
game.screen('loser');
}
} else
if(score.twospeed < score.onespeed){
if(game.me.two){
win(score.twospeed);
} else {
game.screen('loser');
}
} else {
game.screen('draw');
}
function win(speed){
game.me.over = true;
game.screen('winner');
speed = speed / 1000; // convert to seconds
if(score.fastest && speed < score.fastest){
gun.path('fastest').set(speed);
game.me.fastest = true;
}
gun.path('previous').set(speed);
}
}
game.rank = function(){
var nick = $(".winner").find('input').val() || 'Masked Cowboy';
gun.path('last').set(nick);
if(game.me.fastest){
gun.path('slinger').set(nick);
}
game.reset();
}
game.reset = function(){
console.log("Resetting game");
gun.path('one').set(null);
gun.path('two').set(null);
gun.path('dqed').set(null);
gun.path('coordinate').set(null);
gun.path('onespeed').set(null);
gun.path('twospeed').set(null);
game.cancel();
}
game.cancel = function(){
game.screen();
game.me = {};
}
game.screen = function(screen){
$('.screen').addClass('off').filter('.' + (screen || 'start')).removeClass('off');
}
$('.player').on('click', function(){
if(game.me.player){ return }
game.me = {};
gun.path(game.me.player = this.id).set(game.me[game.me.player] = Gun.roulette());
});
$('.shoot').on('click', function(){
if(!game.me.player){ return }
game.me.dqed = true;
game.screen('disqualified');
gun.path('dqed').set(game.me[game.me.player]);
});
$('.fire').on('click', function(){
if(!game.me.player || game.me.fired){ return }
game.me.fired = (+new Date());
game.me.speed = game.me.fired - game.me.draw;
gun.path(game.me.player + 'speed').set(game.me.speed);
game.screen('stop');
});
})
</script>
</center></body>
</html>
Reference in New Issue View Git Blame Copy Permalink