mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
Moved menu to require.js style, ref #77
This commit is contained in:
Jeena
parent
2213a50623
commit
1a6d8effad
4 changed files with 81 additions and 83 deletions
|
|
@ -40,6 +40,12 @@ input, button {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#primarycolor {
|
||||
padding: 0.3em;
|
||||
width: 1em;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
article#menu {
|
||||
margin: 4em auto;
|
||||
background: #1a1a1a;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<label>
|
||||
Nickname:<br>
|
||||
<input id="nick" name="nick" type="text">
|
||||
<input id="primarycolor">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
|
||||
<p>
|
||||
<button>Create</button>
|
||||
<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
|
||||
<button class="cancel">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
<p>
|
||||
<button>Join</button>
|
||||
<span id="timeout"></span>
|
||||
<button onclick="Chuck.menu.show('#listform'); return false;">Cancel</button>
|
||||
<button class="cancel">Cancel</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
|
|
@ -65,8 +66,8 @@
|
|||
</table>
|
||||
<p>
|
||||
<button id="refresh">Refresh list</button>
|
||||
<button onclick="Chuck.menu.show('#createform'); return false;">Create</button>
|
||||
<button onclick="Chuck.menu.quickstart(); return false;">Quickstart</button>
|
||||
<button id="createbutton">Create</button>
|
||||
<button id="quickstartbutton">Quickstart</button>
|
||||
</p>
|
||||
</form>
|
||||
</article>
|
||||
|
|
@ -76,7 +77,6 @@
|
|||
<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,398 +0,0 @@
|
|||
if(!Chuck) var Chuck = {};
|
||||
(function(Chuck) {
|
||||
|
||||
window.onhashchange = function() {
|
||||
if(window.location.hash) {
|
||||
if($("#game").style.display == "block") {
|
||||
window.location.reload();
|
||||
}
|
||||
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) {
|
||||
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) {
|
||||
|
||||
ajax("getChannels", {}, function(response) {
|
||||
if(response != lastRefreshResponse) {
|
||||
lastRefreshResponse = response;
|
||||
populate(JSON.parse(response).success);
|
||||
}
|
||||
document.body.className = "";
|
||||
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(response).success)
|
||||
}
|
||||
|
||||
}, function(status, responseText) {
|
||||
console.error("getChannels error: ", responseText)
|
||||
});
|
||||
|
||||
/*
|
||||
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 ajax(command, options, callback, errorCallback) {
|
||||
try {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if(xhr.readyState == 4) {
|
||||
if(xhr.status == 200) {
|
||||
if(typeof callback == 'function') {
|
||||
callback(xhr.responseText)
|
||||
}
|
||||
} else {
|
||||
if(typeof errorCallback == 'function' && xhr.status == "400") {
|
||||
errorCallback(xhr.status, xhr.responseText);
|
||||
} 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:command, options:options}));
|
||||
} catch(e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function populateMaps() {
|
||||
ajax("getMaps", {}, function(responseText) {
|
||||
var maps = JSON.parse(responseText).success;
|
||||
var html = "";
|
||||
for (var i = 0; i < maps.length; i++) {
|
||||
var map = maps[i];
|
||||
html += "<li><label>";
|
||||
html += '<input name="maps" value="' + map + '" type="checkbox" checked> ';
|
||||
html += map;
|
||||
html += "</label></li>";
|
||||
};
|
||||
|
||||
$("#maps").innerHTML = html;
|
||||
}, function(status, responseText) {
|
||||
console.error("getMaps error:", status, responseText);
|
||||
});
|
||||
}
|
||||
|
||||
$("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) {
|
||||
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";
|
||||
history.pushState("", document.title, window.location.pathname + "#" + defaultChannelName);
|
||||
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);
|
||||
channelDestructionTimeout = 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;
|
||||
}
|
||||
}
|
||||
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 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
|
||||
});
|
||||
|
||||
//window.location.href = "/game.html";
|
||||
$("#menu").style.display = "none";
|
||||
$("#game").style.display = "block";
|
||||
Chuck.run(channelName, nickname);
|
||||
|
||||
if(refreshInterval) {
|
||||
clearInterval(refreshInterval);
|
||||
}
|
||||
|
||||
if(channelDestructionTimeout) {
|
||||
clearInterval(channelDestructionTimeout);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function create(channelName, callback) {
|
||||
var maps = getSelectedMaps();
|
||||
|
||||
if(validateForCreate(channelName, maps)) {
|
||||
|
||||
var options = {
|
||||
channelName: channelName,
|
||||
levelUids: maps,
|
||||
maxUsers: 10,
|
||||
minUsers: 2,
|
||||
scoreLimit: parseInt($("#scoreLimit").value, 10)
|
||||
}
|
||||
|
||||
localStorage["customname"] = channelName;
|
||||
|
||||
ajax("createChannel", options, function(responseText) {
|
||||
if(typeof callback == 'function') {
|
||||
callback(JSON.parse(responseText).success);
|
||||
}
|
||||
}, function(status, responseText) {
|
||||
console.log(responseText)
|
||||
alert(JSON.parse(responseText).error)
|
||||
});
|
||||
|
||||
/*
|
||||
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}));
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
$("#refresh").onclick = refresh;
|
||||
refresh();
|
||||
populateMaps();
|
||||
var channelDestructionTimeout = null;
|
||||
var refreshInterval = setInterval(refresh, 5000);
|
||||
|
||||
Chuck.menu = {
|
||||
show: show,
|
||||
quickstart: quickstart
|
||||
}
|
||||
})(Chuck);
|
||||
Loading…
Add table
Add a link
Reference in a new issue