proposal.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Join</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <style>
  7. .proposal {
  8. display: flex;
  9. flex-direction: column;
  10. }
  11. .buttons {
  12. display: flex;
  13. flex-direction: row;
  14. justify-content: space-around;
  15. }
  16. .button {
  17. width: 6em;
  18. }
  19. .match-info {
  20. text-align: center;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="proposal">
  26. <div class="match-info">
  27. Do you want to play?
  28. </div>
  29. <div class="buttons">
  30. <button id="yes-button" class="button" onclick='websocket.send(JSON.stringify(["proposal"]));'>Yes</button>
  31. <button id="no-button" class="button" onclick='cancel()'>Cancel</button>
  32. </div>
  33. <div id="result"></div>
  34. </div>
  35. <script>
  36. var url = new URL(window.location.toString());
  37. var table_url = window.location.host + "/tables/" + url.searchParams.get("table");
  38. var wsUri = "ws://" + table_url;
  39. var websocket = new WebSocket(wsUri);
  40. function cancel() {
  41. websocket.send(JSON.stringify(["proposal-cancel"]));
  42. ["yes-button", "no-button"].forEach(function(id) {
  43. document.getElementById(id).disabled = true;
  44. });
  45. document.getElementById("result").innerHTML = "Cancelled.";
  46. }
  47. function setupWebSocket()
  48. {
  49. websocket.onopen = function(evt) { onOpen(evt) };
  50. websocket.onclose = function(evt) { onClose(evt) };
  51. websocket.onmessage = function(evt) { onMessage(evt) };
  52. websocket.onerror = function(evt) { onError(evt) };
  53. }
  54. function onOpen(evt)
  55. {
  56. }
  57. function onClose(evt)
  58. {
  59. statusBar().innerHTML = "disconnected";
  60. }
  61. function onMessage(evt)
  62. {
  63. //setGameFromJSON(board, evt.data.toLowerCase());
  64. var reply = JSON.parse(evt.data.toLowerCase());
  65. console.log(reply);
  66. if (reply[0] === "accepted") window.location = "http://" + table_url;
  67. else if (reply[0] === "rejected") document.getElementById("result").innerHTML = "Declined.";
  68. //alert(evt.data.toLowerCase());
  69. }
  70. function onError(evt)
  71. {
  72. }
  73. function doSend(message)
  74. {
  75. }
  76. function writeToScreen(message)
  77. {
  78. }
  79. //window.addEventListener("load", setupWebSocket, false);
  80. setupWebSocket();
  81. //console.log(new checkerPic("black", pointX(board, 3), pointTopY(board, 3) - board.checkerRadius, "15"));
  82. //var st = new SVGStorage(board, 1);
  83. //st.setCheckers(4, "white");
  84. //
  85. /*
  86. {
  87. this.points.forEach(function(p, i) {
  88. let a = physicalToAbsolute(i, board.clockwise, board.orientation);
  89. p.setCheckers(game.board.points[a].checkers, game.board.points[a].player);
  90. });
  91. this.bar.setCheckers(game.board.bar.white, "white");
  92. this.bar.setCheckers(game.board.bar.black, "black");
  93. this.undoButton.disabled = !ui.undoEnabled;
  94. this.leftPane.refresh();
  95. document.getElementById("accept").disabled = !ui.acceptDoubleEnabled;
  96. document.getElementById("refuse").disabled = !ui.acceptDoubleEnabled;
  97. document.getElementById("double").disabled = !ui.offerDoubleEnabled;
  98. var offWhite = this.bearoffStorageID.white();
  99. var offBlack = this.bearoffStorageID.black();
  100. var cubeLocation = this.cubeLocation();
  101. for (let i = 0; i < 4; ++i) {
  102. if (i === offWhite) {
  103. this.storages[i].setCheckers(game.board.off.white, "white");
  104. } else if (i === offBlack) {
  105. this.storages[i].setCheckers(game.board.off.black, "black");
  106. } else if (i === cubeLocation) {
  107. this.storages[i].setCube(game.cube);
  108. } else {
  109. this.storages[i].setCheckers(0, null);
  110. }
  111. }
  112. if (cubeLocation === "left") this.setCubeLeft(game.cube)
  113. else if (cubeLocation === "right") this.setCubeRight(game.cube)
  114. else if (cubeLocation === "leftPane") this.setCubeLeftPane(2*game.cube);
  115. else if (cubeLocation === "rightPane") this.setCubeRightPane(2*game.cube)
  116. else if (cubeLocation === null && this.cubePic) this.cubePic.remove();
  117. document.getElementById("pips").innerHTML = "Pips: white " + game.pips("white") + " black " + game.pips("black");
  118. oc
  119. if (!game.winner) statusBar().innerHTML = game.turn + " " + game.restDice;
  120. else {
  121. let winner = game.winner;
  122. let res = game.score;
  123. let text = (res === 1) ? winner + " wins 1 point." : winner + " wins " + res + " points."
  124. alert(text);
  125. statusBar().innerHTML = text;
  126. }
  127. }
  128. */
  129. </script>
  130. </body>