mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
removed game.html, fixes #85
This commit is contained in:
Jeena
parent
b86052e93b
commit
9e6c42f221
8 changed files with 444 additions and 357 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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
13
client.js
|
|
@ -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
108
static/css/screen.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,24 +1,43 @@
|
|||
function $(selector) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
function $$(selector) {
|
||||
function $$(selector) {
|
||||
return document.querySelectorAll(selector);
|
||||
}
|
||||
}
|
||||
|
||||
if(localStorage["player"]) {
|
||||
if(localStorage["player"]) {
|
||||
var player = JSON.parse(localStorage["player"]);
|
||||
if(player.nickname) {
|
||||
$("#nick").value = player.nickname;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(localStorage["customname"]) {
|
||||
if(localStorage["customname"]) {
|
||||
$("#customname").value = localStorage["customname"];
|
||||
}
|
||||
}
|
||||
|
||||
var lastRefreshResponse;
|
||||
function refresh(callback) {
|
||||
var lastRefreshResponse;
|
||||
function refresh(callback) {
|
||||
try {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
|
|
@ -48,28 +67,26 @@ function refresh(callback) {
|
|||
console.error(e)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function populate(list) {
|
||||
function populate(list) {
|
||||
var html = "";
|
||||
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>";
|
||||
}
|
||||
|
||||
$("#list").innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
$("form#listform").onsubmit = function(e) {
|
||||
$("form#listform").onsubmit = function(e) {
|
||||
try {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = getSelectedChannel();
|
||||
|
|
@ -79,9 +96,9 @@ $("form#listform").onsubmit = function(e) {
|
|||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$("form#createform").onsubmit = function(e) {
|
||||
$("form#createform").onsubmit = function(e) {
|
||||
try {
|
||||
var channelName = $("#customname").value;
|
||||
create(channelName, onCreateSuccess);
|
||||
|
|
@ -90,9 +107,9 @@ $("form#createform").onsubmit = function(e) {
|
|||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$("form#customjoinform").onsubmit = function(e) {
|
||||
$("form#customjoinform").onsubmit = function(e) {
|
||||
try {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = $("#customname").value;
|
||||
|
|
@ -102,24 +119,33 @@ $("form#customjoinform").onsubmit = function(e) {
|
|||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function onCreateSuccess(options) {
|
||||
$("#customname").value = options.channelName;
|
||||
$("#link").value = window.location.href + options.link;
|
||||
show("#customjoinform");
|
||||
function onCreateSuccess(options) {
|
||||
window.location.hash = options.channelName;
|
||||
startTimer(options.timeout);
|
||||
}
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
function quickstart() {
|
||||
function quickstart() {
|
||||
refresh(function(list){
|
||||
var defaultChannelName = "Dungeon";
|
||||
var nickname = $("#nick").value;
|
||||
|
|
@ -136,9 +162,9 @@ function quickstart() {
|
|||
join(nickname, defaultChannelName);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function startTimer(seconds) {
|
||||
function startTimer(seconds) {
|
||||
var now = new Date();
|
||||
var end = new Date(now.getTime() + seconds * 1000);
|
||||
setInterval(function() {
|
||||
|
|
@ -151,18 +177,18 @@ function startTimer(seconds) {
|
|||
$("#timeout").innerHTML = " within " + formatDate(diff) + " minutes";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
function formatDate(date) {
|
||||
var minutes = date.getMinutes();
|
||||
var seconds = date.getSeconds();
|
||||
if(minutes < 10) minutes = "0" + minutes;
|
||||
if(seconds < 10) seconds = "0" + seconds;
|
||||
|
||||
return minutes + ":" + seconds;
|
||||
}
|
||||
}
|
||||
|
||||
function channelExists(list, channelName) {
|
||||
function channelExists(list, channelName) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var channel = list[i];
|
||||
if(channel.name == channelName) {
|
||||
|
|
@ -170,9 +196,9 @@ function channelExists(list, channelName) {
|
|||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function validateForJoin(nickname, channelName) {
|
||||
function validateForJoin(nickname, channelName) {
|
||||
if(!nickname || nickname.length < 3) {
|
||||
alert("Nickname too short")
|
||||
return false;
|
||||
|
|
@ -182,9 +208,9 @@ function validateForJoin(nickname, channelName) {
|
|||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function validateForCreate(channelName, maps) {
|
||||
function validateForCreate(channelName, maps) {
|
||||
return true;
|
||||
if(maps.length < 1) {
|
||||
alert("Please choose at least one map.")
|
||||
|
|
@ -196,9 +222,9 @@ function validateForCreate(channelName, maps) {
|
|||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedMaps() {
|
||||
function getSelectedMaps() {
|
||||
var maps = [];
|
||||
var checkboxes = document.querySelectorAll("form#createform input[name=maps]");
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
|
|
@ -208,9 +234,9 @@ function getSelectedMaps() {
|
|||
}
|
||||
};
|
||||
return maps;
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedChannel() {
|
||||
function getSelectedChannel() {
|
||||
var name = null;
|
||||
var radios = document.querySelectorAll("form#listform input[name=channel]");
|
||||
for (var i = 0; i < radios.length; i++) {
|
||||
|
|
@ -221,9 +247,9 @@ function getSelectedChannel() {
|
|||
}
|
||||
};
|
||||
return name
|
||||
}
|
||||
}
|
||||
|
||||
function join(nickname, channelName) {
|
||||
function join(nickname, channelName) {
|
||||
|
||||
if(validateForJoin(nickname, channelName)) {
|
||||
localStorage["player"] = JSON.stringify({
|
||||
|
|
@ -233,11 +259,14 @@ 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function create(channelName, callback) {
|
||||
function create(channelName, callback) {
|
||||
var maps = getSelectedMaps();
|
||||
|
||||
if(validateForCreate(channelName, maps)) {
|
||||
|
|
@ -268,9 +297,13 @@ function create(channelName, callback) {
|
|||
xhr.open("POST", "/api", true);
|
||||
xhr.send(JSON.stringify({command:"createChannel", options: options}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$("#refresh").onclick = refresh;
|
||||
refresh();
|
||||
setInterval(refresh, 5000);
|
||||
$("#refresh").onclick = refresh;
|
||||
refresh();
|
||||
setInterval(refresh, 5000);
|
||||
|
||||
Chuck.menu = {
|
||||
show: show
|
||||
}
|
||||
})(Chuck);
|
||||
Loading…
Add table
Add a link
Reference in a new issue