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
|
|
@ -1,276 +1,309 @@
|
|||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
if(!Chuck) var Chuck = {};
|
||||
(function(Chuck) {
|
||||
|
||||
function $$(selector) {
|
||||
return document.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
if(localStorage["player"]) {
|
||||
var player = JSON.parse(localStorage["player"]);
|
||||
if(player.nickname) {
|
||||
$("#nick").value = player.nickname;
|
||||
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 = "/";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(localStorage["customname"]) {
|
||||
$("#customname").value = localStorage["customname"];
|
||||
}
|
||||
window.onload = window.onhashchange;
|
||||
|
||||
var lastRefreshResponse;
|
||||
function refresh(callback) {
|
||||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
function $$(selector) {
|
||||
return document.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
if(localStorage["player"]) {
|
||||
var player = JSON.parse(localStorage["player"]);
|
||||
if(player.nickname) {
|
||||
$("#nick").value = player.nickname;
|
||||
}
|
||||
}
|
||||
|
||||
if(localStorage["customname"]) {
|
||||
$("#customname").value = localStorage["customname"];
|
||||
}
|
||||
|
||||
var lastRefreshResponse;
|
||||
function refresh(callback) {
|
||||
try {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == 4) {
|
||||
if(xhr.status == 200) {
|
||||
|
||||
var response = xhr.responseText;
|
||||
if(response != lastRefreshResponse) {
|
||||
lastRefreshResponse = response;
|
||||
populate(JSON.parse(response).success);
|
||||
}
|
||||
document.body.className = "";
|
||||
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(response).success)
|
||||
}
|
||||
} else {
|
||||
console.error("Ajax error: " + xhr.status + " " + xhr.responseText)
|
||||
$("#list").innerHTML = "";
|
||||
document.body.className = "offline";
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.open("POST", "/api", true);
|
||||
xhr.send(JSON.stringify({command:"getChannels"}));
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function populate(list) {
|
||||
var html = "";
|
||||
if(list.length > 0) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var channel = list[i];
|
||||
html += "<tr><td>";
|
||||
html += "<a href='#" + channel.name + "'>";
|
||||
html += channel.name
|
||||
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) {
|
||||
try {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == 4) {
|
||||
if(xhr.status == 200) {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = getSelectedChannel();
|
||||
join(nickname, channelName);
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
var response = xhr.responseText;
|
||||
if(response != lastRefreshResponse) {
|
||||
lastRefreshResponse = response;
|
||||
populate(JSON.parse(response).success);
|
||||
}
|
||||
document.body.className = "";
|
||||
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(response).success)
|
||||
}
|
||||
} else {
|
||||
console.error("Ajax error: " + xhr.status + " " + xhr.responseText)
|
||||
$("#list").innerHTML = "";
|
||||
document.body.className = "offline";
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.open("POST", "/api", true);
|
||||
xhr.send(JSON.stringify({command:"getChannels"}));
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function populate(list) {
|
||||
var html = "";
|
||||
if(list.length > 0) {
|
||||
$("form#createform").onsubmit = function(e) {
|
||||
try {
|
||||
var channelName = $("#customname").value;
|
||||
create(channelName, onCreateSuccess);
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$("form#customjoinform").onsubmit = function(e) {
|
||||
try {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = $("#customname").value;
|
||||
join(nickname, channelName);
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onCreateSuccess(options) {
|
||||
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";
|
||||
}
|
||||
|
||||
function quickstart() {
|
||||
refresh(function(list){
|
||||
var defaultChannelName = "Dungeon";
|
||||
var nickname = $("#nick").value;
|
||||
|
||||
if(!nickname) {
|
||||
nickname = "Guest" + (Math.floor(Math.random() * 899) + 100)
|
||||
}
|
||||
|
||||
if(!channelExists(list, defaultChannelName)) {
|
||||
create(defaultChannelName, function() {
|
||||
join(nickname, defaultChannelName); // only called on success
|
||||
});
|
||||
} else {
|
||||
join(nickname, defaultChannelName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startTimer(seconds) {
|
||||
var now = new Date();
|
||||
var end = new Date(now.getTime() + seconds * 1000);
|
||||
setInterval(function() {
|
||||
now = new Date();
|
||||
var diff = new Date(end.getTime() - now.getTime());
|
||||
if(diff.getTime() < 0) {
|
||||
alert("Your channel has timed out.");
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
$("#timeout").innerHTML = " within " + formatDate(diff) + " minutes";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
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) {
|
||||
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 += channel.name
|
||||
html += "</label></td><td></td></tr>";
|
||||
};
|
||||
} else {
|
||||
html += "<tr><td colspan='2'>No channels found.</td></tr>";
|
||||
}
|
||||
|
||||
$("#list").innerHTML = html;
|
||||
}
|
||||
|
||||
$("form#listform").onsubmit = function(e) {
|
||||
try {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = getSelectedChannel();
|
||||
join(nickname, channelName);
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$("form#createform").onsubmit = function(e) {
|
||||
try {
|
||||
var channelName = $("#customname").value;
|
||||
create(channelName, onCreateSuccess);
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$("form#customjoinform").onsubmit = function(e) {
|
||||
try {
|
||||
var nickname = $("#nick").value;
|
||||
var channelName = $("#customname").value;
|
||||
join(nickname, channelName);
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onCreateSuccess(options) {
|
||||
$("#customname").value = options.channelName;
|
||||
$("#link").value = window.location.href + options.link;
|
||||
show("#customjoinform");
|
||||
startTimer(options.timeout);
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
$("#createform").style.display = "none";
|
||||
$("#listform").style.display = "none";
|
||||
$("#customjoinform").style.display = "none";
|
||||
|
||||
$(id).style.display = "block";
|
||||
}
|
||||
|
||||
function quickstart() {
|
||||
refresh(function(list){
|
||||
var defaultChannelName = "Dungeon";
|
||||
var nickname = $("#nick").value;
|
||||
|
||||
if(!nickname) {
|
||||
nickname = "Guest" + (Math.floor(Math.random() * 899) + 100)
|
||||
if(channel.name == channelName) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!channelExists(list, defaultChannelName)) {
|
||||
create(defaultChannelName, function() {
|
||||
join(nickname, defaultChannelName); // only called on success
|
||||
function validateForJoin(nickname, channelName) {
|
||||
if(!nickname || nickname.length < 3) {
|
||||
alert("Nickname too short")
|
||||
return false;
|
||||
}
|
||||
if(!channelName) {
|
||||
alert('No channel name provided');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateForCreate(channelName, maps) {
|
||||
return true;
|
||||
if(maps.length < 1) {
|
||||
alert("Please choose at least one map.")
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!channelName) {
|
||||
alert("Please provide a channel name.")
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function getSelectedMaps() {
|
||||
var maps = [];
|
||||
var checkboxes = document.querySelectorAll("form#createform input[name=maps]");
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
if(checkbox.checked) {
|
||||
maps.push(checkbox.value);
|
||||
}
|
||||
};
|
||||
return maps;
|
||||
}
|
||||
|
||||
function getSelectedChannel() {
|
||||
var name = null;
|
||||
var radios = document.querySelectorAll("form#listform input[name=channel]");
|
||||
for (var i = 0; i < radios.length; i++) {
|
||||
var radio = radios[i];
|
||||
if(radio.checked) {
|
||||
name = radio.value;
|
||||
break;
|
||||
}
|
||||
};
|
||||
return name
|
||||
}
|
||||
|
||||
function join(nickname, channelName) {
|
||||
|
||||
if(validateForJoin(nickname, channelName)) {
|
||||
localStorage["player"] = JSON.stringify({
|
||||
nickname: nickname
|
||||
});
|
||||
localStorage["channel"] = JSON.stringify({
|
||||
name: channelName
|
||||
});
|
||||
} else {
|
||||
join(nickname, defaultChannelName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startTimer(seconds) {
|
||||
var now = new Date();
|
||||
var end = new Date(now.getTime() + seconds * 1000);
|
||||
setInterval(function() {
|
||||
now = new Date();
|
||||
var diff = new Date(end.getTime() - now.getTime());
|
||||
if(diff.getTime() < 0) {
|
||||
alert("Your channel has timed out.");
|
||||
window.location.href = "/";
|
||||
} else {
|
||||
$("#timeout").innerHTML = " within " + formatDate(diff) + " minutes";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
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) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var channel = list[i];
|
||||
if(channel.name == channelName) {
|
||||
return true;
|
||||
//window.location.href = "/game.html";
|
||||
$("#menu").style.display = "none";
|
||||
$("#game").style.display = "block";
|
||||
Chuck.run(channelName, nickname);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function validateForJoin(nickname, channelName) {
|
||||
if(!nickname || nickname.length < 3) {
|
||||
alert("Nickname too short")
|
||||
return false;
|
||||
}
|
||||
if(!channelName) {
|
||||
alert('No channel name provided');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function create(channelName, callback) {
|
||||
var maps = getSelectedMaps();
|
||||
|
||||
if(validateForCreate(channelName, maps)) {
|
||||
|
||||
function validateForCreate(channelName, maps) {
|
||||
return true;
|
||||
if(maps.length < 1) {
|
||||
alert("Please choose at least one map.")
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!channelName) {
|
||||
alert("Please provide a channel name.")
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
var options = {
|
||||
channelName: channelName,
|
||||
levelUids: maps,
|
||||
maxUsers: 10,
|
||||
minUsers: 2,
|
||||
scoreLimit: parseInt($("#scoreLimit").value, 10)
|
||||
}
|
||||
|
||||
function getSelectedMaps() {
|
||||
var maps = [];
|
||||
var checkboxes = document.querySelectorAll("form#createform input[name=maps]");
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
var checkbox = checkboxes[i];
|
||||
if(checkbox.checked) {
|
||||
maps.push(checkbox.value);
|
||||
localStorage["customname"] = channelName;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == 4) {
|
||||
if(xhr.status == 200) {
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(xhr.responseText).success);
|
||||
}
|
||||
} else {
|
||||
console.log(xhr.responseText)
|
||||
alert(JSON.parse(xhr.responseText).error)
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.open("POST", "/api", true);
|
||||
xhr.send(JSON.stringify({command:"createChannel", options: options}));
|
||||
}
|
||||
};
|
||||
return maps;
|
||||
}
|
||||
|
||||
function getSelectedChannel() {
|
||||
var name = null;
|
||||
var radios = document.querySelectorAll("form#listform input[name=channel]");
|
||||
for (var i = 0; i < radios.length; i++) {
|
||||
var radio = radios[i];
|
||||
if(radio.checked) {
|
||||
name = radio.value;
|
||||
break;
|
||||
}
|
||||
};
|
||||
return name
|
||||
}
|
||||
|
||||
function join(nickname, channelName) {
|
||||
|
||||
if(validateForJoin(nickname, channelName)) {
|
||||
localStorage["player"] = JSON.stringify({
|
||||
nickname: nickname
|
||||
});
|
||||
localStorage["channel"] = JSON.stringify({
|
||||
name: channelName
|
||||
});
|
||||
|
||||
window.location.href = "/game.html";
|
||||
}
|
||||
}
|
||||
|
||||
function create(channelName, callback) {
|
||||
var maps = getSelectedMaps();
|
||||
|
||||
if(validateForCreate(channelName, maps)) {
|
||||
$("#refresh").onclick = refresh;
|
||||
refresh();
|
||||
setInterval(refresh, 5000);
|
||||
|
||||
var options = {
|
||||
channelName: channelName,
|
||||
levelUids: maps,
|
||||
maxUsers: 10,
|
||||
minUsers: 2,
|
||||
scoreLimit: parseInt($("#scoreLimit").value, 10)
|
||||
}
|
||||
|
||||
localStorage["customname"] = channelName;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == 4) {
|
||||
if(xhr.status == 200) {
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(xhr.responseText).success);
|
||||
}
|
||||
} else {
|
||||
console.log(xhr.responseText)
|
||||
alert(JSON.parse(xhr.responseText).error)
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.open("POST", "/api", true);
|
||||
xhr.send(JSON.stringify({command:"createChannel", options: options}));
|
||||
Chuck.menu = {
|
||||
show: show
|
||||
}
|
||||
}
|
||||
|
||||
$("#refresh").onclick = refresh;
|
||||
refresh();
|
||||
setInterval(refresh, 5000);
|
||||
|
||||
})(Chuck);
|
||||
Loading…
Add table
Add a link
Reference in a new issue