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

added rube knife, quickstart in menu lobby, cleaned up the lobby code a bit

Browse source
This commit is contained in:
logsol 2014-03-03 02:47:23 +01:00
parent d0e9f0d458
commit 8730324a83
8 changed files with 968 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

213
static/html/index.html
View file

@ -75,219 +75,10 @@
<button>Join</button>
<button id="refresh">Refresh list</button>
<button onclick="show('#createform'); return false;">Create</button>
<button onclick="quickstart(); return false;">Quickstart</button>
</p>
</form>
</article>
<script>
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() {
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 = "";
} 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"}));
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><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) {
var nickname = $("#nick").value;
if(!nickname || nickname.length < 3) {
alert("nickname too short")
return false;
}
localStorage["player"] = JSON.stringify({nickname: nickname});
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;
}
};
if(name) {
localStorage["channel"] = JSON.stringify({
name: name
});
window.location.href = "/game.html";
return false;
} else {
alert("No channel selected")
return false;
}
}
$("form#createform").onsubmit = function(e) {
try {
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);
}
};
if(maps.length == 0) {
alert("Please choose at least one map.")
return false;
}
var name = $("#customname").value;
if(!name) {
alert("Please provide a channel name.")
return false;
}
localStorage["customname"] = name;
var options = {
channelName: name,
maps: maps,
maxUsers: 10,
minUsers: 2
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
onCreateSuccess(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}));
} catch(e) {
console.error(e)
}
return false;
}
$("form#customjoinform").onsubmit = function(e) {
try {
var nickname = $("#nick").value;
if(!nickname || nickname.length < 3) {
alert("nickname too short")
return false;
}
localStorage["player"] = JSON.stringify({nickname: nickname});
var name = $("#customname").value;
localStorage["channel"] = JSON.stringify({
name: name
});
window.location.href = "/game.html";
} 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 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;
}
$("#refresh").onclick = refresh;
refresh();
setInterval(refresh, 5000);
</script>
<script type="text/javascript" src="/static/js/menu.js"></script>
</body>
</html>