index_dongri.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>yys Display</title>
  7. <style>
  8. .monitor-container {
  9. display: flex;
  10. flex-direction: row;
  11. }
  12. .checkbox-container {
  13. display: flex;
  14. flex-direction: column;
  15. }
  16. .operate-container {
  17. display: flex;
  18. flex-direction: column;
  19. }
  20. .status-container {
  21. display: flex;
  22. flex-direction: row;
  23. }
  24. #hint_message p {
  25. font-size: 10px; /* 设置为较小的字体大小 */
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h2 id="title_message">Monitor Display</h2>
  31. <div class="monitor-container">
  32. <h3>请选择时间间隔:</h3>
  33. <select id="timeInterval">
  34. <option value="500">0.5 秒</option>
  35. <option value="1000" selected>1 秒</option>
  36. <option value="2000">2 秒</option>
  37. <option value="5000">5 秒</option>
  38. <option value="0">停止</option>
  39. </select>
  40. <canvas id="canvas" width="300" height="400"></canvas>
  41. </div>
  42. <div class="status-container ">
  43. <h3>状态:</h3>
  44. <div id="status_message" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
  45. <h3>任务列表:</h3>
  46. <div id="hint_message"></div>
  47. <div class="checkbox-container">
  48. <label>
  49. 是否最大收集:
  50. <input type="text" id="maxCollectCheckbox" value="4,4,3,3,3,2,2,2,1,1">
  51. </label>
  52. <label>
  53. 打怪:
  54. <select id="JiNaCheckbox">
  55. <option value="None">None</option>
  56. <option value="monster">monster</option>
  57. <option value="big_monster">big_monster</option>
  58. <option value="yongbing">yongbing</option>
  59. <option value="jina" selected>jina</option>
  60. </select>
  61. </label>
  62. <label>
  63. 活动:
  64. <select id="AcitivityCheckbox">
  65. <option value="None" selected>None</option>
  66. <option value="lianmeng">lianmeng</option>
  67. </select>
  68. </label>
  69. <label><input type="checkbox" id="SimpleCheckbox"> 是否小号</label>
  70. <label><input type="checkbox" id="AddStrenghCheckbox"> 是否添加体力</label>
  71. <label><input type="checkbox" id="participateJijieCheckbox"> 是否参与集结</label>
  72. </div>
  73. <div class="operate-container">
  74. <button class="custom-button" id="atuo_btn" onclick="begin_paticipate()">自动打熊</button>
  75. <button class="custom-button" id="resetScript_btn" onclick="reset_script()">重置脚本</button>
  76. <button class="custom-button" id="closegame_btn" onclick="close_game()">关闭游戏</button>
  77. <button class="custom-button" id="restartgame_btn" onclick="restart_game()">重新关闭并自动游戏</button>
  78. <button class="custom-button" id="atuo_btn" onclick="begin_auto()">自动模式</button>
  79. </div>
  80. </div>
  81. <script src="https://cdnjs.loli.net/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
  82. <script>
  83. const socket = io();
  84. socket.on('connect', () => {
  85. console.log('Connected to server');
  86. });
  87. socket.on('disconnect', () => {
  88. console.log('Disconnected from server');
  89. });
  90. socket.on('image_data', (image_data_base64) => {
  91. const canvas = document.getElementById('canvas');
  92. const ctx = canvas.getContext('2d');
  93. const image = new Image();
  94. image.onload = () => {
  95. ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  96. };
  97. image.src = 'data:image/jpeg;base64,' + image_data_base64;
  98. });
  99. socket.on('processing_status', (msg) => {
  100. var messageBox = document.getElementById('status_message');
  101. messageBox.innerHTML = msg;
  102. console.log(msg);
  103. });
  104. socket.on('processing_title', (msg) => {
  105. var messageBox = document.getElementById('title_message');
  106. messageBox.innerHTML = msg;
  107. });
  108. socket.on('processing_cfg', (msg) => {
  109. console.log(msg);
  110. // 获取元素
  111. const maxCollectInput = document.getElementById('maxCollectCheckbox'); // 文本输入框
  112. const jiNaSelect = document.getElementById('JiNaCheckbox'); // 下拉列表
  113. const simpleCheckbox = document.getElementById('SimpleCheckbox'); // 复选框
  114. const AddStrenghCheckbox = document.getElementById('AddStrenghCheckbox'); // 复选框
  115. const participateJijieCheckbox = document.getElementById('participateJijieCheckbox'); // 复选框
  116. const AcitivitySelect = document.getElementById('AcitivityCheckbox'); // 下拉列表
  117. // 设置值
  118. maxCollectInput.value = msg['maxCollect']; // 设置文本输入框的值
  119. jiNaSelect.value = msg['jina']; // 设置下拉列表的值
  120. simpleCheckbox.checked = msg['simple']; // 设置复选框的状态
  121. AddStrenghCheckbox.checked = msg['add_strength']; // 设置复选框的状态
  122. AcitivitySelect.value = msg['activity']; // 设置下拉列表的值
  123. participateJijieCheckbox.checked = msg['participate_jijie']; // 设置复选框的状态
  124. // 如果需要显示消息,可以取消注释以下代码
  125. // var messageBox = document.getElementById('title_message');
  126. // messageBox.innerHTML = msg;
  127. });
  128. socket.on('processing_hint', (msg) => {
  129. var messageBox = document.getElementById('hint_message');
  130. var data = JSON.parse(msg);
  131. var listDiv = document.createElement("div");
  132. for (var i = 0; i < data.length; i++) {
  133. var listItem = document.createElement("p");
  134. listItem.textContent = data[i];
  135. listDiv.appendChild(listItem);
  136. }
  137. messageBox.innerHTML = "";
  138. messageBox.appendChild(listDiv)
  139. });
  140. var timerId;
  141. function executeTask() {
  142. var selectElement = document.getElementById("timeInterval");
  143. var selectedValue = selectElement.value;
  144. if (selectedValue == '0'){
  145. clearInterval(timerId)
  146. var canvas = document.getElementById("canvas");
  147. var ctx = canvas.getContext("2d");
  148. ctx.clearRect(0, 0, canvas.width, canvas.height);
  149. timerId = setInterval(executeTask, 1000);
  150. }
  151. else
  152. {
  153. socket.emit('monitor_begin');
  154. clearInterval(timerId)
  155. timerId = setInterval(executeTask, parseInt(selectedValue));
  156. }
  157. }
  158. function begin_auto() {
  159. const maxCollectValue = document.getElementById('maxCollectCheckbox').value; // 获取文本输入框的值
  160. const jiNaValue = document.getElementById('JiNaCheckbox').value; // 获取下拉列表的值
  161. const isSimple = document.getElementById('SimpleCheckbox').checked; // 获取复选框的状态
  162. const isAddStrengh = document.getElementById('AddStrenghCheckbox').checked; // 获取复选框的状态
  163. const activityValue = document.getElementById('AcitivityCheckbox').value; // 获取下拉列表的值
  164. const participateJijie = document.getElementById('participateJijieCheckbox').checked; // 获取复选框的状态
  165. // 发出数据
  166. socket.emit('begin_auto', {
  167. maxCollect: maxCollectValue, // 发送文本输入框的值
  168. jina: jiNaValue, // 发送下拉列表的值
  169. simple: isSimple // 发送复选框的状态
  170. ,add_strength:isAddStrengh
  171. ,activity:activityValue
  172. ,participate_jijie:participateJijie
  173. });
  174. }
  175. function begin_paticipate(){
  176. socket.emit('begin_auto_participate');
  177. }
  178. function restart_game()
  179. {
  180. socket.emit('restart_game');
  181. }
  182. function close_game()
  183. {
  184. socket.emit('close_game');
  185. }
  186. function get_title()
  187. {
  188. socket.emit('get_title');
  189. }
  190. function read_cfg()
  191. {
  192. socket.emit('read_cfg');
  193. }
  194. function reset_script(){
  195. socket.emit('reset_script');
  196. }
  197. function stopPageAndCloseSocket() {
  198. // 获取当前连接的 WebSocket URL
  199. const socketUrl = socket.io.uri;
  200. // 检查是否为本地连接
  201. if (!socketUrl.includes("127.0.0.1")) {
  202. // 停止定时器
  203. clearInterval(timerId);
  204. // 关闭 WebSocket 连接
  205. socket.disconnect();
  206. // 清除画布内容(可选)
  207. var canvas = document.getElementById("canvas");
  208. var ctx = canvas.getContext("2d");
  209. ctx.clearRect(0, 0, canvas.width, canvas.height);
  210. // 可以添加其他停止页面运行的逻辑...
  211. }
  212. }
  213. // 页面加载时设置5分钟后的定时器
  214. window.onload = function() {
  215. get_title();
  216. read_cfg();
  217. executeTask();
  218. setTimeout(stopPageAndCloseSocket, 600000); // 1分钟 = 60000毫秒
  219. };
  220. </script>
  221. </body>
  222. </html>