jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

removed game.html, fixes #85

Browse source
This commit is contained in:
Jeena 2014-06-28 23:43:58 +02:00
parent b86052e93b
commit 9e6c42f221
8 changed files with 444 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/Game/Client/Networker.js
View file

@ -9,7 +9,9 @@ define([
function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
function Networker (socketLink) {
function Networker (socketLink, channelName, nickname) {
this.channelName = channelName;
this.nickname = nickname;
this.socketLink = socketLink;
this.gameController = null;
this.users = {};
@ -38,14 +40,13 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
Networker.prototype.onConnect = function () {
console.log('connected.')
var channel = JSON.parse(localStorage["channel"]);
var player = JSON.parse(localStorage["player"]);
if(channel.name) {
if(this.channelName) {
var options = {
channelName: channel.name,
nickname: player.nickname
channelName: this.channelName,
nickname: this.nickname
}
this.sendCommand('join', options);
DomController.setConnected(true);
} else {
window.location.href = "/";
}
@ -55,7 +56,7 @@ function (ProtocolHelper, GameController, User, Nc, Settings, DomController) {
//if(this.gameController) this.gameController.destruct();
//this.gameController = null;
console.log('disconnected. game destroyed. no auto-reconnect');
document.body.style.backgroundColor = '#aaaaaa';
DomController.setConnected(false);
}
Networker.prototype.onJoinSuccess = function (options) {

8
app/Game/Client/View/DomController.js
View file

@ -123,6 +123,14 @@ function (Settings, Nc, Stats, Screenfull) {
this.health.innerHTML = "Health: " + parseInt(health, 10);
};
DomController.prototype.setConnected = function(connected) {
if(connected) {
document.body.style.backgroundColor = '';
} else {
document.body.style.backgroundColor = '#aaaaaa';
}
};
return new DomController();

2
app/Game/Config/Settings.js
View file

@ -62,12 +62,12 @@ define(function() {
// NETWORKING
NETWORK_UPDATE_INTERVAL: 70,
CHANNEL_DESTRUCTION_TIME: 30,
NETWORK_LOG_INCOMING: false,
NETWORK_LOG_OUTGOING: false,
NETWORK_LOG_FILTER: ['ping', 'pong', 'worldUpdate', 'lookAt'],
// CHANNEL
CHANNEL_DESTRUCTION_TIME: 5 * 60,
CHANNEL_END_ROUND_TIME: 4, //10,
CHANNEL_DEFAULT_MAX_USERS: 40,
CHANNEL_DEFAULT_SCORE_LIMIT: 10,

13
client.js
View file

@ -6,7 +6,8 @@ requirejs.config({
waitSeconds: 0
});
var inspector = {};
if(!Chuck) var Chuck = {};
Chuck.inspector = {};
requirejs([
"Game/Client/Networker",
@ -18,6 +19,7 @@ requirejs([
function (Networker, SocketIO, Settings, Exception, PIXI) {
Chuck.run = function(channelName, nickname) {
var options = {
"reconnect": false,
"reconnection delay": 500,
@ -28,8 +30,9 @@ function (Networker, SocketIO, Settings, Exception, PIXI) {
]
};
var socket = SocketIO.connect("/", options);
var networker = new Networker(socket);
inspector.networker = networker;
inspector.settings = Settings;
inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); }
var networker = new Networker(socket, channelName, nickname);
Chuck.inspector.networker = networker;
Chuck.inspector.settings = Settings;
Chuck.inspector.resetLevel = function() { networker.sendGameCommand("resetLevel"); }
}
});

108
static/css/screen.css Normal file
View file

@ -0,0 +1,108 @@
html, body {
width: 100%;
height: 100%;
}
body {
background: #222;
color: #ccc;
font-family: "Lucida Grande", sans-serif;
margin: 0;
padding: 0;
display: table;
}
::selection {
background: #607950; /* Safari */
}
::-moz-selection {
background: #607950; /* Firefox */
}
input, button {
background: black;
color: #ccc;
border: 0;
padding: 0.3em 0.6em;
font-size: 1em;
}
#createform, #customjoinform, #game {
display: none;
}
article#menu {
margin: 4em auto;
background: #1a1a1a;
padding: 2em;
max-width: 30em;
}
table, th, td {
border: 1px solid #777;
border-collapse: collapse;
}
th, td {
padding: 0.5em 1em;
}
ul {
list-style-type: none;
padding-left: 0;
}
#link {
width: 100%;
}
.offline {
background: #ccc;
}
tr:hover td {
background: #222;
}
a {
color: #ccc;
}
#canvasContainer {
/*
text-align: center;
display: table-cell;
vertical-align: middle;
*/
height: 100%;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
:-webkit-full-screen {
top: 0;
left: 0;
margin: 0;
padding: 0;
}
#devtools {
font-family: monospace;
position: absolute;
right: 0;
top: 0;
padding: 10px;
background: #222;
}
#devtools p {
padding: 5px 0 0 0;
margin: 0;
}

63
static/html/game.html
View file

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chuck</title>
<style>
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
background: black;
color: white;
font-family: monospace;
}
#canvasContainer {
/*
text-align: center;
display: table-cell;
vertical-align: middle;
*/
height: 100%;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
:-webkit-full-screen {
top: 0;
left: 0;
margin: 0;
padding: 0;
}
#devtools {
position: absolute;
right: 0;
top: 0;
padding: 10px;
background: #222;
}
#devtools p {
padding: 5px 0 0 0;
margin: 0;
}
</style>
</head>
<body>
<div id="canvasContainer">
<canvas id="canvas"></canvas>
</div>
<script data-main="client" src="require.js"></script>
</body>
</html>

35
static/html/index.html
View file

@ -2,20 +2,10 @@
<html>
<head>
<title>Chuck Lobby</title>
<style type="text/css">
body { background: #222; color: #ccc; font-family: "Lucida Grande", sans-serif; }
input, button { background: black; color: #ccc; border: 0; padding: 0.3em 0.6em; font-size: 1em; }
#createform, #customjoinform { display: none; }
article { margin: 4em auto; background: #1a1a1a; padding: 2em; max-width: 30em; }
table, th, td { border: 1px solid #777; border-collapse: collapse; }
th, td { padding: 0.5em 1em; }
ul { list-style-type: none; padding-left: 0; }
#link { width: 100%; }
.offline { background: #ccc; }
</style>
<link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen">
</head>
<body>
<article>
<article id="menu">
<h1>Chuck</h1>
<p>
<label>
@ -42,8 +32,8 @@
</fieldset>
<p>
<button>Run</button>
<button onclick="show('#listform'); return false;">Cancel</button>
<button>Create</button>
<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
</p>
</div>
</form>
@ -51,13 +41,14 @@
<form action="#" method="GET" id="customjoinform">
<p>
<label>
Link to share with your friends<br>
<input id="link">
Link to share with your friends:<br>
<input id="link" readonly onclick="this.select()">
</label>
</p>
<p>
<button>Join</button>
<span id="timeout"></span>
<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
</p>
</form>
@ -73,13 +64,19 @@
<tbody id="list"></tbody>
</table>
<p>
<button>Join</button>
<button id="refresh">Refresh list</button>
<button onclick="show('#createform'); return false;">Create</button>
<button onclick="quickstart(); return false;">Quickstart</button>
<button onclick="Chuck.menu.show('#createform'); return false;">Create</button>
<button onclick="Chuck.menu.quickstart(); return false;">Quickstart</button>
</p>
</form>
</article>
<article id="game">
<button onclick="window.location.href='/'">Menu</button>
<div id="canvasContainer">
<canvas id="canvas"></canvas>
</div>
</article>
<script type="text/javascript" src="/static/js/menu.js"></script>
<script data-main="client" src="require.js"></script>
</body>
</html>

51
static/js/menu.js
View file

@ -1,3 +1,22 @@
if(!Chuck) var Chuck = {};
(function(Chuck) {
window.onhashchange = function() {
if(window.location.hash) {
refresh(function(list) {
var channelName = unescape(window.location.hash.substr(1));
if(channelExists(list, channelName)) {
showCustomJoinForm()
} else {
alert("Channel \"" + channelName + "\" does not exist (anymore).")
window.location.href = "/";
}
});
}
}
window.onload = window.onhashchange;
function $(selector) {
return document.querySelector(selector);
}
@ -55,12 +74,10 @@ function populate(list) {
if(list.length > 0) {
for (var i = 0; i < list.length; i++) {
var channel = list[i];
html += "<tr><td><label>";
html += "<input name='channel' type='radio' value='" + channel.name + "'"
if(i == 0) html += " checked"
html += "> ";
html += "<tr><td>";
html += "<a href='#" + channel.name + "'>";
html += channel.name
html += "</label></td><td></td></tr>";
html += "</a></td><td>death match</td></tr>";
};
} else {
html += "<tr><td colspan='2'>No channels found.</td></tr>";
@ -105,16 +122,25 @@ $("form#customjoinform").onsubmit = function(e) {
}
function onCreateSuccess(options) {
$("#customname").value = options.channelName;
$("#link").value = window.location.href + options.link;
show("#customjoinform");
window.location.hash = options.channelName;
startTimer(options.timeout);
}
function showCustomJoinForm() {
$("#customname").value = unescape(window.location.hash.substr(1));
$("#link").value = window.location.href;
show("#customjoinform");
}
function show(id) {
$("#createform").style.display = "none";
$("#listform").style.display = "none";
$("#customjoinform").style.display = "none";
$("#game").style.display = "none";
if(id != "#customjoinform") {
history.pushState("", document.title, window.location.pathname);
}
$(id).style.display = "block";
}
@ -233,7 +259,10 @@ function join(nickname, channelName) {
name: channelName
});
window.location.href = "/game.html";
//window.location.href = "/game.html";
$("#menu").style.display = "none";
$("#game").style.display = "block";
Chuck.run(channelName, nickname);
}
}
@ -274,3 +303,7 @@ $("#refresh").onclick = refresh;
refresh();
setInterval(refresh, 5000);
Chuck.menu = {
show: show
}
})(Chuck);