cards/server/public/test_client.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Cards For Humanity Test Client</title>
    <link type="text/css" rel="stylesheet" href="css">
  </head>
  <body>
    <h1>Cards For Humanity Test Client</h1>
    <hr />
    <div id="status">
      <p><em>Disconnected...</em></p>
    </div>
    <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="talk shit" />
      </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>
    <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>
    <script type="text/javascript">
      socket = new WebSocket("ws://localhost:3030/websocket");

      function socketTest() {
        let code = testCloseCode.value;
        let reason = testCloseReason.value;
        socket.close(code, reason)
      };

      function createGame() {
        let CAHPlayer = {
          name: username.value,
          role: 'Host',
          white: [],
          black: [],
        };

        let NewGameRequest = {
          name: gamename.value,
          host: CAHPlayer,
          packs: [0],
        };

        socket.send(JSON.stringify(NewGameRequest));
      };

      function joinGame() {
        console.log('not done yet');
      }

      socket.onopen = function() {
        console.log("connection opened",socket.extensions, socket.protocol, socket.readyState);
        document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
      }

      socket.onclose = function() {
        console.log("connection closed");
        document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';
        document.getElementById("chat-history").value = "";
      }

      socket.onmessage = function(e) {
        const history = document.getElementById("chat-history")
        console.log("received message: "+e.data);
        history.value += e.data+"\r";
        history.scrollTop = history.scrollHeight;
      }

      function chatSubmit() {
        let input = document.getElementById("chat-input");
          socket.send(input.value);
          input.value = "";
      };

      socket.addEventListener("error", (event) => {
        console.log("WebSocket error: ", event);
      });
    </script>
  </body>
</html>
change everything again -- axum 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>`
css 2024-06-23 04:49:32 -04:00			`<link type="text/css" rel="stylesheet" href="css">`
change everything again -- axum 2024-04-28 04:53:00 -04:00			`</head>`
			`<body>`
			`<h1>Cards For Humanity Test Client</h1>`
message handling 2024-05-02 00:39:34 -04:00			`<hr />`
expand client 2024-04-29 02:18:20 -04:00			`<div id="status">`
			`<p><em>Disconnected...</em></p>`
			`</div>`
yee big sloppy 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>`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`<input id="chat-input" type="text" style="width: 30rem;" placeholder="talk shit" />`
yee big sloppy 2024-05-03 21:12:23 -04:00			`</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>`
message handling 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>`
change everything again -- axum 2024-04-28 04:53:00 -04:00			`<script type="text/javascript">`
stuff 2024-05-01 04:56:58 -04:00			`socket = new WebSocket("ws://localhost:3030/websocket");`
change everything again -- axum 2024-04-28 04:53:00 -04:00
message handling 2024-05-02 00:39:34 -04:00			`function socketTest() {`
			`let code = testCloseCode.value;`
			`let reason = testCloseReason.value;`
			`socket.close(code, reason)`
			`};`
ye 2024-04-30 02:28:43 -04:00
message handling 2024-05-02 00:39:34 -04:00			`function createGame() {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`let CAHPlayer = {`
			`name: username.value,`
			`role: 'Host',`
			`white: [],`
			`black: [],`
			`};`
ye 2024-04-30 02:28:43 -04:00
damnit, i changed again 2024-05-03 23:17:39 -04:00			`let NewGameRequest = {`
			`name: gamename.value,`
			`host: CAHPlayer,`
			`packs: [0],`
			`};`
ye 2024-04-30 02:28:43 -04:00
stuff 2024-05-01 04:56:58 -04:00			`socket.send(JSON.stringify(NewGameRequest));`
expand client 2024-04-29 02:18:20 -04:00			`};`
change everything again -- axum 2024-04-28 04:53:00 -04:00
message handling 2024-05-02 00:39:34 -04:00			`function joinGame() {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`console.log('not done yet');`
message handling 2024-05-02 00:39:34 -04:00			`}`

stuff 2024-05-01 04:56:58 -04:00			`socket.onopen = function() {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`console.log("connection opened",socket.extensions, socket.protocol, socket.readyState);`
			`document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';`
expand client 2024-04-29 02:18:20 -04:00			`}`
change everything again -- axum 2024-04-28 04:53:00 -04:00
stuff 2024-05-01 04:56:58 -04:00			`socket.onclose = function() {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`console.log("connection closed");`
			`document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';`
			`document.getElementById("chat-history").value = "";`
expand client 2024-04-29 02:18:20 -04:00			`}`
change everything again -- axum 2024-04-28 04:53:00 -04:00
stuff 2024-05-01 04:56:58 -04:00			`socket.onmessage = function(e) {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`const history = document.getElementById("chat-history")`
			`console.log("received message: "+e.data);`
			`history.value += e.data+"\r";`
			`history.scrollTop = history.scrollHeight;`
expand client 2024-04-29 02:18:20 -04:00			`}`
change everything again -- axum 2024-04-28 04:53:00 -04:00
expand client 2024-04-29 02:18:20 -04:00			`function chatSubmit() {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`let input = document.getElementById("chat-input");`
			`socket.send(input.value);`
			`input.value = "";`
expand client 2024-04-29 02:18:20 -04:00			`};`
expand client 2024-04-29 03:32:44 -04:00
stuff 2024-05-01 04:56:58 -04:00			`socket.addEventListener("error", (event) => {`
damnit, i changed again 2024-05-03 23:17:39 -04:00			`console.log("WebSocket error: ", event);`
expand client 2024-04-29 03:32:44 -04:00			`});`
change everything again -- axum 2024-04-28 04:53:00 -04:00			`</script>`
			`</body>`
			`</html>`