123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Join</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- .proposal {
- display: flex;
- flex-direction: column;
- }
- .buttons {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- }
- .button {
- width: 6em;
- }
- .match-info {
- text-align: center;
- }
- </style>
-
- </head>
- <body>
- <div class="proposal">
- <div class="match-info">
- Do you want to play?
- </div>
- <div class="buttons">
- <button id="yes-button" class="button" onclick='websocket.send(JSON.stringify(["proposal"]));'>Yes</button>
- <button id="no-button" class="button" onclick='cancel()'>Cancel</button>
- </div>
- <div id="result"></div>
- </div>
- <script>
- var url = new URL(window.location.toString());
- var table_url = window.location.host + "/tables/" + url.searchParams.get("table");
- var wsUri = "ws://" + table_url;
- var websocket = new WebSocket(wsUri);
- function cancel() {
- websocket.send(JSON.stringify(["proposal-cancel"]));
- ["yes-button", "no-button"].forEach(function(id) {
- document.getElementById(id).disabled = true;
- });
- document.getElementById("result").innerHTML = "Cancelled.";
- }
- function setupWebSocket()
- {
- websocket.onopen = function(evt) { onOpen(evt) };
- websocket.onclose = function(evt) { onClose(evt) };
- websocket.onmessage = function(evt) { onMessage(evt) };
- websocket.onerror = function(evt) { onError(evt) };
- }
- function onOpen(evt)
- {
-
- }
- function onClose(evt)
- {
- statusBar().innerHTML = "disconnected";
- }
- function onMessage(evt)
- {
- //setGameFromJSON(board, evt.data.toLowerCase());
- var reply = JSON.parse(evt.data.toLowerCase());
- console.log(reply);
- if (reply[0] === "accepted") window.location = "http://" + table_url;
- else if (reply[0] === "rejected") document.getElementById("result").innerHTML = "Declined.";
- //alert(evt.data.toLowerCase());
- }
- function onError(evt)
- {
- }
- function doSend(message)
- {
- }
- function writeToScreen(message)
- {
- }
- //window.addEventListener("load", setupWebSocket, false);
- setupWebSocket();
- //console.log(new checkerPic("black", pointX(board, 3), pointTopY(board, 3) - board.checkerRadius, "15"));
- //var st = new SVGStorage(board, 1);
- //st.setCheckers(4, "white");
- //
- /*
- {
- this.points.forEach(function(p, i) {
- let a = physicalToAbsolute(i, board.clockwise, board.orientation);
- p.setCheckers(game.board.points[a].checkers, game.board.points[a].player);
- });
- this.bar.setCheckers(game.board.bar.white, "white");
- this.bar.setCheckers(game.board.bar.black, "black");
- this.undoButton.disabled = !ui.undoEnabled;
- this.leftPane.refresh();
- document.getElementById("accept").disabled = !ui.acceptDoubleEnabled;
- document.getElementById("refuse").disabled = !ui.acceptDoubleEnabled;
- document.getElementById("double").disabled = !ui.offerDoubleEnabled;
- var offWhite = this.bearoffStorageID.white();
- var offBlack = this.bearoffStorageID.black();
- var cubeLocation = this.cubeLocation();
- for (let i = 0; i < 4; ++i) {
- if (i === offWhite) {
- this.storages[i].setCheckers(game.board.off.white, "white");
- } else if (i === offBlack) {
- this.storages[i].setCheckers(game.board.off.black, "black");
- } else if (i === cubeLocation) {
- this.storages[i].setCube(game.cube);
- } else {
- this.storages[i].setCheckers(0, null);
- }
- }
- if (cubeLocation === "left") this.setCubeLeft(game.cube)
- else if (cubeLocation === "right") this.setCubeRight(game.cube)
- else if (cubeLocation === "leftPane") this.setCubeLeftPane(2*game.cube);
- else if (cubeLocation === "rightPane") this.setCubeRightPane(2*game.cube)
- else if (cubeLocation === null && this.cubePic) this.cubePic.remove();
- document.getElementById("pips").innerHTML = "Pips: white " + game.pips("white") + " black " + game.pips("black");
- oc
- if (!game.winner) statusBar().innerHTML = game.turn + " " + game.restDice;
- else {
- let winner = game.winner;
- let res = game.score;
- let text = (res === 1) ? winner + " wins 1 point." : winner + " wins " + res + " points."
- alert(text);
- statusBar().innerHTML = text;
- }
- }
- */
- </script>
- </body>
|