mirror of
https://github.com/amark/gun.git
synced 2026-03-03 16:00:29 +00:00
81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="admin">
|
|
<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="../../gun.js"></script>
|
|
</head>
|
|
<body ng-controller="editor">
|
|
<style>
|
|
html, body {
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
}
|
|
a {
|
|
color: skyblue;
|
|
text-decoration: none;
|
|
cursor: poiner;
|
|
}
|
|
ul, li {
|
|
list-style-type: none;
|
|
}
|
|
ul:hover, li:hover {
|
|
list-style-type: inherit;
|
|
}
|
|
input {
|
|
border: none;
|
|
border-bottom: dashed 1px gainsboro;
|
|
}
|
|
.none {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<h2>Gun Duel!</h2>
|
|
<span>Old western cowboy style! Two players are needed, whoever can shoot the other first wins!</span>
|
|
<span><b>Fastest gun in the west, <span name="fastest">nut'n</span> by <span name="slinger">nobody</span>.</b></span>
|
|
<form id="p1" class="assign-player" onsubmit="return false;">
|
|
Player 1: <input type="text" name="p1" class="player" placeholder="nickname">
|
|
<input type="submit" class="take" value="Join!">
|
|
</form>
|
|
<form id="p2" class="assign-player" onsubmit="return false;">
|
|
Player 2: <input type="text" name="p2" class="player" placeholder="nickname">
|
|
<input type="submit" class="take" value="Join!">
|
|
</form>
|
|
<div id="duel">
|
|
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var me = {},
|
|
gun = Gun(['http://localhost:8888/' + 'gun'])
|
|
.load('game/duel', function(game){
|
|
console.log(game);
|
|
$(document).on('submit', '.assign-player', function(e){
|
|
e.preventDefault();
|
|
var nick = $(this).find('input').val();
|
|
if(!nick){ return }
|
|
gun.path(this.id).get(function(val){
|
|
if(val){ return }
|
|
gun.path(this.id).set(me.player = nick);
|
|
});
|
|
})
|
|
Gun.on(game._[Gun.sym.id]).event(function(node){
|
|
console.log("change!", node);
|
|
});
|
|
Gun.obj.map(game, me.set);
|
|
});
|
|
me.set = function(val, name){
|
|
$("[name='" + name + "']").text(val).val(val);
|
|
Gun.on("duel-" + name).emit(val, name);
|
|
}
|
|
me.plock = function(val, id){
|
|
console.log("OH?", val, id);
|
|
$("#" + id).find('.player').attr("readonly", val? true : false);
|
|
$("#" + id).find('.take').val(val? "Taken!" : "Join!").attr("disabled", val? true : false);
|
|
}
|
|
Gun.on("duel-p1").event(me.plock);
|
|
Gun.on("duel-p2").event(me.plock);
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html> |