session.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <html>
  2. <head>
  3. <title>hive mind draft</title>
  4. <meta charset="utf-8">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. .img-container {
  10. float: left;
  11. width: 384px;
  12. height: 534px;
  13. padding: 20px;
  14. }
  15. div.img-container img {
  16. z-index: -1;
  17. }
  18. .clearfix::after {
  19. content: "";
  20. clear: both;
  21. display: table;
  22. }
  23. div.zhsdesc {
  24. visibility: hidden;
  25. position: relative;
  26. top: -110px;
  27. left: 7px;
  28. width: 170px;
  29. border: 2px black;
  30. font-size: 10px;
  31. margin: 7px;
  32. padding: 7px;
  33. z-index: 9999;
  34. }
  35. div.img-container:hover :nth-child(3) {
  36. background-color: #ffffff;
  37. visibility: visible;
  38. display: block;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <p>当前游戏状态: {{state}}</p>
  44. <table border="1">
  45. {{#players}}
  46. <tr>
  47. <td>{{nick}}</td>
  48. <td>{{packnum}}</td>
  49. </tr>
  50. {{/players}}
  51. </table>
  52. {{#download}}
  53. <a href="/download/{{sessionid}}">下载牌组列表</a>
  54. {{/download}}
  55. {{#start}}
  56. <br><br>
  57. <form action="/start-session/{{sessionid}}" method="POST">
  58. <input type="submit" value="开始">
  59. </form>
  60. {{/start}}
  61. {{#join}}
  62. <br><br>
  63. <form action="/join/{{sessionid}}" method="POST">
  64. <label for="nickname">名字:</label><br>
  65. <input type="text" id="nickname" name="nickname" value=""><br>
  66. <input type="submit" value="加入">
  67. </form>
  68. {{/join}}
  69. <h1>可选牌</h1>
  70. <div class="clearfix">
  71. {{#cardstopick}}
  72. <div class="img-container">
  73. <div><form action="/select/{{sessionid}}/{{nameurl}}" method="POST">
  74. <input type="submit" value="{{name}}">
  75. </form></div>
  76. <img class="cardimg" src="{{imgurl}}" alt="{{name}}" style="width:100%">
  77. <!-- {{{stab}}}
  78. <div class="zhsdesc">
  79. <p>{{{zhstext}}}</p>
  80. </div> -->
  81. </div>
  82. {{/cardstopick}}
  83. </div>
  84. <h1>已选牌</h1>
  85. <div class="clearfix">
  86. {{#cardspicked}}
  87. <div class="img-container">
  88. <div></div>
  89. <img class="cardimg" src="{{imgurl}}" alt="{{name}}" style="width:100%">
  90. <!-- {{{stab}}}
  91. <div class="zhsdesc">
  92. <p>{{{zhstext}}}</p>
  93. </div> -->
  94. </div>
  95. {{/cardspicked}}
  96. </div>
  97. <script>
  98. window.lastUpdate = 0;
  99. function reqListener () {
  100. if (this.readyState != 4 || this.status != 200) {
  101. return;
  102. }
  103. console.log(this.responseText);
  104. let timestamp = parseInt(this.responseText);
  105. if (window.lastUpdate == 0) {
  106. window.lastUpdate = timestamp;
  107. return;
  108. }
  109. if (window.lastUpdate < timestamp) {
  110. window.lastUpdate = timestamp;
  111. location.reload();
  112. }
  113. }
  114. function checkTimestamp() {
  115. var oReq = new XMLHttpRequest();
  116. oReq.onreadystatechange = reqListener;
  117. var url = window.location.href;
  118. oReq.open("GET", url.replace("/session/", "/timestamp/"), true);
  119. oReq.send();
  120. }
  121. checkTimestamp();
  122. setInterval(checkTimestamp, 5000);
  123. </script>
  124. </body>
  125. </html>