index_dongri.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  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. <label><input type="checkbox" id="autoDaily_checkbox"> 自动每日</label>
  73. </div>
  74. <div class="operate-container">
  75. <button class="custom-button" id="atuo_btn" onclick="begin_paticipate()">自动打熊</button>
  76. <button class="custom-button" id="resetScript_btn" onclick="reset_script()">重置脚本</button>
  77. <button class="custom-button" id="closegame_btn" onclick="close_game()">关闭游戏</button>
  78. <button class="custom-button" id="restartgame_btn" onclick="restart_game()">重新关闭并自动游戏</button>
  79. <button class="custom-button" id="atuo_btn" onclick="begin_auto()">自动模式</button>
  80. </div>
  81. </div>
  82. <script src="https://cdnjs.loli.net/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
  83. <script>
  84. const socket = io();
  85. socket.on('connect', () => {
  86. console.log('Connected to server');
  87. });
  88. socket.on('disconnect', () => {
  89. console.log('Disconnected from server');
  90. });
  91. socket.on('image_data', (image_data_base64) => {
  92. const canvas = document.getElementById('canvas');
  93. const ctx = canvas.getContext('2d');
  94. const image = new Image();
  95. image.onload = () => {
  96. ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  97. };
  98. image.src = 'data:image/jpeg;base64,' + image_data_base64;
  99. });
  100. socket.on('processing_status', (msg) => {
  101. var messageBox = document.getElementById('status_message');
  102. messageBox.innerHTML = msg;
  103. console.log(msg);
  104. });
  105. socket.on('processing_title', (msg) => {
  106. var messageBox = document.getElementById('title_message');
  107. messageBox.innerHTML = msg;
  108. });
  109. socket.on('processing_cfg', (msg) => {
  110. console.log(msg);
  111. // 获取元素
  112. const maxCollectInput = document.getElementById('maxCollectCheckbox'); // 文本输入框
  113. const jiNaSelect = document.getElementById('JiNaCheckbox'); // 下拉列表
  114. const simpleCheckbox = document.getElementById('SimpleCheckbox'); // 复选框
  115. const AddStrenghCheckbox = document.getElementById('AddStrenghCheckbox'); // 复选框
  116. const participateJijieCheckbox = document.getElementById('participateJijieCheckbox'); // 复选框
  117. const AcitivitySelect = document.getElementById('AcitivityCheckbox'); // 下拉列表
  118. const autoDaily_checkbox = document.getElementById('autoDaily_checkbox'); // 复选框
  119. // 设置值
  120. maxCollectInput.value = msg['maxCollect']; // 设置文本输入框的值
  121. jiNaSelect.value = msg['jina']; // 设置下拉列表的值
  122. simpleCheckbox.checked = msg['simple']; // 设置复选框的状态
  123. AddStrenghCheckbox.checked = msg['add_strength']; // 设置复选框的状态
  124. AcitivitySelect.value = msg['activity']; // 设置下拉列表的值
  125. participateJijieCheckbox.checked = msg['participate_jijie']; // 设置复选框的状态
  126. autoDaily_checkbox.checked = msg['auto_daily']; // 设置复选框的状态
  127. // 如果需要显示消息,可以取消注释以下代码
  128. // var messageBox = document.getElementById('title_message');
  129. // messageBox.innerHTML = msg;
  130. });
  131. socket.on('processing_hint', (msg) => {
  132. var messageBox = document.getElementById('hint_message');
  133. var data = JSON.parse(msg);
  134. var listDiv = document.createElement("div");
  135. for (var i = 0; i < data.length; i++) {
  136. var listItem = document.createElement("p");
  137. listItem.textContent = data[i];
  138. listDiv.appendChild(listItem);
  139. }
  140. messageBox.innerHTML = "";
  141. messageBox.appendChild(listDiv)
  142. });
  143. var timerId;
  144. function executeTask() {
  145. var selectElement = document.getElementById("timeInterval");
  146. var selectedValue = selectElement.value;
  147. if (selectedValue == '0'){
  148. clearInterval(timerId)
  149. var canvas = document.getElementById("canvas");
  150. var ctx = canvas.getContext("2d");
  151. ctx.clearRect(0, 0, canvas.width, canvas.height);
  152. timerId = setInterval(executeTask, 1000);
  153. }
  154. else
  155. {
  156. socket.emit('monitor_begin');
  157. clearInterval(timerId)
  158. timerId = setInterval(executeTask, parseInt(selectedValue));
  159. }
  160. }
  161. function begin_auto() {
  162. const maxCollectValue = document.getElementById('maxCollectCheckbox').value; // 获取文本输入框的值
  163. const jiNaValue = document.getElementById('JiNaCheckbox').value; // 获取下拉列表的值
  164. const isSimple = document.getElementById('SimpleCheckbox').checked; // 获取复选框的状态
  165. const isAddStrengh = document.getElementById('AddStrenghCheckbox').checked; // 获取复选框的状态
  166. const activityValue = document.getElementById('AcitivityCheckbox').value; // 获取下拉列表的值
  167. const participateJijie = document.getElementById('participateJijieCheckbox').checked; // 获取复选框的状态
  168. const autoDaily = document.getElementById('autoDaily_checkbox').checked; // 获取复选框的状态
  169. // 发出数据
  170. socket.emit('begin_auto', {
  171. maxCollect: maxCollectValue, // 发送文本输入框的值
  172. jina: jiNaValue, // 发送下拉列表的值
  173. simple: isSimple // 发送复选框的状态
  174. ,add_strength:isAddStrengh
  175. ,activity:activityValue
  176. ,participate_jijie:participateJijie
  177. ,auto_daily:autoDaily
  178. });
  179. }
  180. function begin_paticipate(){
  181. socket.emit('begin_auto_participate');
  182. }
  183. function restart_game()
  184. {
  185. socket.emit('restart_game');
  186. }
  187. function close_game()
  188. {
  189. socket.emit('close_game');
  190. }
  191. function get_title()
  192. {
  193. socket.emit('get_title');
  194. }
  195. function read_cfg()
  196. {
  197. socket.emit('read_cfg');
  198. }
  199. function reset_script(){
  200. socket.emit('reset_script');
  201. }
  202. function stopPageAndCloseSocket() {
  203. // 获取当前连接的 WebSocket URL
  204. const socketUrl = socket.io.uri;
  205. // 检查是否为本地连接
  206. if (!socketUrl.includes("127.0.0.1")) {
  207. // 停止定时器
  208. clearInterval(timerId);
  209. // 关闭 WebSocket 连接
  210. socket.disconnect();
  211. // 清除画布内容(可选)
  212. var canvas = document.getElementById("canvas");
  213. var ctx = canvas.getContext("2d");
  214. ctx.clearRect(0, 0, canvas.width, canvas.height);
  215. // 可以添加其他停止页面运行的逻辑...
  216. }
  217. }
  218. // 页面加载时设置5分钟后的定时器
  219. window.onload = function() {
  220. get_title();
  221. read_cfg();
  222. executeTask();
  223. setTimeout(stopPageAndCloseSocket, 600000); // 1分钟 = 60000毫秒
  224. };
  225. </script>
  226. </body>
  227. </html>