2024-04-28 04:53:00 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Cards For Humanity Test Client</title>
|
|
|
|
|
<style>
|
|
|
|
|
html, body, input, textarea, button {
|
2024-05-02 00:39:34 -04:00
|
|
|
font-family: monospace;
|
2024-05-03 21:12:23 -04:00
|
|
|
background-color: #111;
|
|
|
|
|
color: #DDD;
|
|
|
|
|
margin: 0;
|
|
|
|
|
parring: 0;
|
2024-04-28 04:53:00 -04:00
|
|
|
}
|
2024-04-29 03:32:44 -04:00
|
|
|
div {
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
}
|
2024-05-03 21:12:23 -04:00
|
|
|
span {
|
|
|
|
|
padding-left: 1rem;
|
|
|
|
|
}
|
2024-04-30 02:28:43 -04:00
|
|
|
p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
2024-05-02 00:39:34 -04:00
|
|
|
input {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 10rem;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Cards For Humanity Test Client</h1>
|
2024-05-02 00:39:34 -04:00
|
|
|
<hr />
|
2024-04-29 02:18:20 -04:00
|
|
|
<div id="status">
|
|
|
|
|
<p><em>Disconnected...</em></p>
|
|
|
|
|
</div>
|
2024-05-03 21:12:23 -04:00
|
|
|
<div id="chat">
|
|
|
|
|
<form id="chat" onsubmit="chatSubmit();return false">
|
|
|
|
|
<textarea id="chat-history" readonly="true" wrap="soft" style="display:block; width:30rem; height:10rem; box-sizing: border-box" cols="30" rows="10"></textarea>
|
|
|
|
|
<input id="chat-input" type="text" style="width: 30rem;" placeholder="chat" />
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
|
|
|
|
<form id="new-game" onsubmit="createGame(); return false">
|
|
|
|
|
<p>Username:</p>
|
|
|
|
|
<input id="username" type="text" placeholder="username" />
|
|
|
|
|
<p>Game Name:</p>
|
|
|
|
|
<input id="gamename" type="text" placeholder="game name" />
|
|
|
|
|
<button id="create-game" type="submit">Create Game</button>
|
|
|
|
|
</form>
|
2024-05-02 00:39:34 -04:00
|
|
|
<hr />
|
|
|
|
|
<div id="socketTest">
|
|
|
|
|
<h3>Socket Test</h3>
|
|
|
|
|
<form id="socketForm" onsubmit="socketTest(); return false">
|
|
|
|
|
<p>int 3000-4999</p>
|
|
|
|
|
<input id="testCloseCode" placeholder="code" type="number" />
|
|
|
|
|
<p>string 123 bytes or less</p>
|
|
|
|
|
<input id="testCloseReason" placeholder="reason" />
|
|
|
|
|
<button id="close" type="submit">Close Connection</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2024-04-28 04:53:00 -04:00
|
|
|
<script type="text/javascript">
|
2024-05-01 04:56:58 -04:00
|
|
|
socket = new WebSocket("ws://localhost:3030/websocket");
|
|
|
|
|
socket.binaryType = "ArrayBuffer";
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-05-02 00:39:34 -04:00
|
|
|
function socketTest() {
|
|
|
|
|
let code = testCloseCode.value;
|
|
|
|
|
let reason = testCloseReason.value;
|
|
|
|
|
socket.close(code, reason)
|
|
|
|
|
};
|
2024-04-30 02:28:43 -04:00
|
|
|
|
2024-05-02 00:39:34 -04:00
|
|
|
function createGame() {
|
2024-04-30 02:28:43 -04:00
|
|
|
let CAHPlayer = {
|
|
|
|
|
name: username.value,
|
2024-05-01 04:56:58 -04:00
|
|
|
role: 'Host',
|
2024-04-30 02:28:43 -04:00
|
|
|
white: [],
|
|
|
|
|
black: [],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let NewGameRequest = {
|
|
|
|
|
name: gamename.value,
|
|
|
|
|
host: CAHPlayer,
|
|
|
|
|
packs: [0],
|
|
|
|
|
};
|
|
|
|
|
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.send(JSON.stringify(NewGameRequest));
|
2024-04-29 02:18:20 -04:00
|
|
|
};
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-05-02 00:39:34 -04:00
|
|
|
function joinGame() {
|
2024-05-03 18:48:12 -04:00
|
|
|
console.log('not done yet');
|
2024-05-02 00:39:34 -04:00
|
|
|
}
|
|
|
|
|
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.onopen = function() {
|
|
|
|
|
console.log("connection opened",socket.extensions, socket.protocol, socket.readyState);
|
2024-04-29 02:18:20 -04:00
|
|
|
document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
|
|
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.onclose = function() {
|
2024-04-29 02:18:20 -04:00
|
|
|
console.log("connection closed");
|
|
|
|
|
document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';
|
2024-05-03 18:48:12 -04:00
|
|
|
document.getElementById("chat-history").value = "";
|
2024-04-29 02:18:20 -04:00
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.onmessage = function(e) {
|
2024-04-29 03:32:44 -04:00
|
|
|
const history = document.getElementById("chat-history")
|
2024-04-29 02:18:20 -04:00
|
|
|
console.log("received message: "+e.data);
|
2024-04-29 03:32:44 -04:00
|
|
|
history.value += e.data+"\r";
|
|
|
|
|
history.scrollTop = history.scrollHeight;
|
2024-04-29 02:18:20 -04:00
|
|
|
}
|
2024-04-28 04:53:00 -04:00
|
|
|
|
2024-04-29 02:18:20 -04:00
|
|
|
function chatSubmit() {
|
|
|
|
|
let input = document.getElementById("chat-input");
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.send(input.value);
|
2024-04-29 02:18:20 -04:00
|
|
|
input.value = "";
|
|
|
|
|
};
|
2024-04-29 03:32:44 -04:00
|
|
|
|
2024-05-01 04:56:58 -04:00
|
|
|
socket.addEventListener("error", (event) => {
|
2024-04-29 03:32:44 -04:00
|
|
|
console.log("WebSocket error: ", event);
|
|
|
|
|
});
|
2024-04-28 04:53:00 -04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
