mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
137 lines
No EOL
3 KiB
HTML
137 lines
No EOL
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chuck Lobby</title>
|
|
</head>
|
|
<body>
|
|
<form action="game.html" method="POST">
|
|
<p>
|
|
<label>
|
|
Nickname:<br>
|
|
<input id="nick" name="nick" type="text">
|
|
</label>
|
|
</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th>Name</th></tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>
|
|
<label>
|
|
<input type="radio" name="channel" id="radiochannel" checked>
|
|
custom channel: <input id="customname">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody id="list"></tbody>
|
|
</table>
|
|
<p>
|
|
<button>Join</button>
|
|
<button id="refresh">Refresh list</button>
|
|
</p>
|
|
</form>
|
|
<script>
|
|
function $(selector) {
|
|
return document.querySelector(selector);
|
|
}
|
|
|
|
if(localStorage["player"]) {
|
|
var player = JSON.parse(localStorage["player"]);
|
|
if(player.nickname) {
|
|
$("#nick").value = player.nickname;
|
|
}
|
|
}
|
|
|
|
$("#customname").onfocus = function() {
|
|
$("#radiochannel").checked = true;
|
|
}
|
|
|
|
if(localStorage["channel"]) {
|
|
var channel = JSON.parse(localStorage["channel"])
|
|
if(channel.customname) {
|
|
$("#customname").value = channel.customname;
|
|
}
|
|
}
|
|
|
|
var hash = window.location.hash.split("#").join("");
|
|
if(hash) {
|
|
$("#customname").value = hash;
|
|
$("#radiochannel").checked = true;
|
|
}
|
|
|
|
function refresh() {
|
|
$("#list").innerHTML = "";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function() {
|
|
if(xhr.readyState == 4) {
|
|
if(xhr.status == 200) {
|
|
populate(JSON.parse(xhr.responseText).success);
|
|
} else {
|
|
console.error("Ajax error: " + xhr.status + " " + xhr.statusText)
|
|
}
|
|
}
|
|
}
|
|
xhr.open("POST", "/api", true);
|
|
xhr.send(JSON.stringify({command:"getChannels"}));
|
|
return false
|
|
}
|
|
|
|
function populate(list) {
|
|
var html = "";
|
|
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(!hash && i == 0) html += " checked"
|
|
html += "> ";
|
|
html += channel.name
|
|
html += "</label></td></tr>";
|
|
};
|
|
$("#list").innerHTML = html;
|
|
}
|
|
|
|
$("form").onsubmit = function(e) {
|
|
var nickname = $("#nick").value;
|
|
if(!nickname || nickname.length < 3) {
|
|
alert("nickname too short")
|
|
return false;
|
|
}
|
|
localStorage["player"] = JSON.stringify({nickname: nickname});
|
|
if ($("#radiochannel").checked) {
|
|
var name = $("#customname").value;
|
|
if(name) {
|
|
$("#radiochannel").value = name;
|
|
} else {
|
|
alert("custom channel empty")
|
|
return false;
|
|
}
|
|
} else {
|
|
var radios = document.querySelectorAll("form 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,
|
|
customname: $("#customname").value
|
|
});
|
|
} else {
|
|
alert("no channel selected")
|
|
return false;
|
|
}
|
|
}
|
|
|
|
$("#refresh").onclick = refresh;
|
|
refresh();
|
|
</script>
|
|
</body>
|
|
</html> |