index_dongri.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  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. <h3>待办列表:</h3>
  42. <div id="task_message" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
  43. </div>
  44. <div class="status-container">
  45. <h3>状态:</h3>
  46. <div id="status_message" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
  47. <h3>任务列表:</h3>
  48. <div id="hint_message"></div>
  49. <div class="checkbox-container">
  50. <label>
  51. 是否最大收集:
  52. <input type="text" id="maxCollectCheckbox" value="4,4,3,3,3,2,2,2,1,1">
  53. </label>
  54. <label>
  55. 打怪:
  56. <select id="JiNaCheckbox">
  57. <option value="None">None</option>
  58. <option value="monster">monster</option>
  59. <option value="big_monster">big_monster</option>
  60. <option value="yongbing">yongbing</option>
  61. <option value="jina" selected>jina</option>
  62. </select>
  63. </label>
  64. <label>
  65. 活动:
  66. <select id="AcitivityCheckbox">
  67. <option value="None" selected>None</option>
  68. <option value="lianmeng">lianmeng</option>
  69. </select>
  70. </label>
  71. <label>
  72. 训练方式:
  73. <select id="trainCheckbox">
  74. <option value="None" selected>None</option>
  75. <option value="lv1">优先lv1</option>
  76. <option value="lv8">优先lv8</option>
  77. <option value="lv9">优先lv9</option>
  78. </select>
  79. </label>
  80. <label><input type="checkbox" id="SimpleCheckbox"> 是否小号</label>
  81. <label><input type="checkbox" id="AddStrenghCheckbox"> 是否添加体力</label>
  82. <label><input type="checkbox" id="participateJijieCheckbox"> 是否参与集结</label>
  83. <label><input type="checkbox" id="autoDaily_checkbox"> 自动每日</label>
  84. <label><input type="checkbox" id="always_checkbox"> 无尽运行</label>
  85. </div>
  86. <div class="operate-container">
  87. <button class="custom-button" id="atuo_btn" onclick="begin_paticipate()">自动打熊</button>
  88. <button class="custom-button" id="resetScript_btn" onclick="reset_script()">重置脚本</button>
  89. <button class="custom-button" id="closegame_btn" onclick="close_game()">关闭游戏</button>
  90. <button class="custom-button" id="restartgame_btn" onclick="restart_game()">重新关闭并自动游戏</button>
  91. <button class="custom-button" id="atuoRun_btn" onclick="begin_auto()">自动模式</button>
  92. </div>
  93. </div>
  94. <script src="https://cdnjs.loli.net/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
  95. <script>
  96. const socket = io();
  97. socket.on('connect', () => {
  98. console.log('Connected to server');
  99. });
  100. socket.on('disconnect', () => {
  101. console.log('Disconnected from server');
  102. });
  103. socket.on('image_data', (image_data_base64) => {
  104. const canvas = document.getElementById('canvas');
  105. const ctx = canvas.getContext('2d');
  106. const image = new Image();
  107. image.onload = () => {
  108. ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  109. };
  110. image.src = 'data:image/jpeg;base64,' + image_data_base64;
  111. });
  112. socket.on('processing_status', (msg) => {
  113. var messageBox = document.getElementById('status_message');
  114. messageBox.innerHTML = msg;
  115. console.log(msg);
  116. });
  117. socket.on('processing_todo', (msg) => {
  118. var messageBox = document.getElementById('task_message');
  119. messageBox.innerHTML = msg;
  120. console.log(msg);
  121. });
  122. socket.on('processing_title', (msg) => {
  123. var messageBox = document.getElementById('title_message');
  124. messageBox.innerHTML = msg;
  125. });
  126. socket.on('processing_cfg', (msg) => {
  127. console.log(msg);
  128. // 获取元素
  129. const maxCollectInput = document.getElementById('maxCollectCheckbox'); // 文本输入框
  130. const jiNaSelect = document.getElementById('JiNaCheckbox'); // 下拉列表
  131. const simpleCheckbox = document.getElementById('SimpleCheckbox'); // 复选框
  132. const AddStrenghCheckbox = document.getElementById('AddStrenghCheckbox'); // 复选框
  133. const participateJijieCheckbox = document.getElementById('participateJijieCheckbox'); // 复选框
  134. const AcitivitySelect = document.getElementById('AcitivityCheckbox'); // 下拉列表
  135. const autoDaily_checkbox = document.getElementById('autoDaily_checkbox'); // 复选框
  136. const trainSelect = document.getElementById('trainCheckbox'); // 下拉列表
  137. const always_checkbox = document.getElementById('always_checkbox'); // 复选框
  138. // 设置值
  139. maxCollectInput.value = msg['maxCollect']; // 设置文本输入框的值
  140. jiNaSelect.value = msg['jina']; // 设置下拉列表的值
  141. simpleCheckbox.checked = msg['simple']; // 设置复选框的状态
  142. AddStrenghCheckbox.checked = msg['add_strength']; // 设置复选框的状态
  143. AcitivitySelect.value = msg['activity']; // 设置下拉列表的值
  144. participateJijieCheckbox.checked = msg['participate_jijie']; // 设置复选框的状态
  145. autoDaily_checkbox.checked = msg['auto_daily']; // 设置复选框的状态
  146. trainSelect.value = msg['train']; // 设置下拉列表的值
  147. always_checkbox.checked = msg['always']; // 设置复选框的状态
  148. // 如果需要显示消息,可以取消注释以下代码
  149. // var messageBox = document.getElementById('title_message');
  150. // messageBox.innerHTML = msg;
  151. });
  152. socket.on('processing_hint', (msg) => {
  153. var messageBox = document.getElementById('hint_message');
  154. var data = JSON.parse(msg);
  155. var listDiv = document.createElement("div");
  156. for (var i = 0; i < data.length; i++) {
  157. var listItem = document.createElement("p");
  158. listItem.textContent = data[i];
  159. listDiv.appendChild(listItem);
  160. }
  161. messageBox.innerHTML = "";
  162. messageBox.appendChild(listDiv)
  163. });
  164. var timerId;
  165. function executeTask() {
  166. var selectElement = document.getElementById("timeInterval");
  167. var selectedValue = selectElement.value;
  168. if (selectedValue == '0'){
  169. clearInterval(timerId)
  170. var canvas = document.getElementById("canvas");
  171. var ctx = canvas.getContext("2d");
  172. ctx.clearRect(0, 0, canvas.width, canvas.height);
  173. timerId = setInterval(executeTask, 1000);
  174. }
  175. else
  176. {
  177. socket.emit('monitor_begin');
  178. clearInterval(timerId)
  179. timerId = setInterval(executeTask, parseInt(selectedValue));
  180. }
  181. }
  182. function begin_auto() {
  183. const maxCollectValue = document.getElementById('maxCollectCheckbox').value; // 获取文本输入框的值
  184. const jiNaValue = document.getElementById('JiNaCheckbox').value; // 获取下拉列表的值
  185. const isSimple = document.getElementById('SimpleCheckbox').checked; // 获取复选框的状态
  186. const isAddStrengh = document.getElementById('AddStrenghCheckbox').checked; // 获取复选框的状态
  187. const activityValue = document.getElementById('AcitivityCheckbox').value; // 获取下拉列表的值
  188. const participateJijie = document.getElementById('participateJijieCheckbox').checked; // 获取复选框的状态
  189. const autoDaily = document.getElementById('autoDaily_checkbox').checked; // 获取复选框的状态
  190. const trainValue = document.getElementById('trainCheckbox').value; // 获取下拉列表的值
  191. const always = document.getElementById('always_checkbox').checked; // 获取复选框的状态
  192. // 发出数据
  193. socket.emit('begin_auto', {
  194. maxCollect: maxCollectValue, // 发送文本输入框的值
  195. jina: jiNaValue, // 发送下拉列表的值
  196. simple: isSimple // 发送复选框的状态
  197. ,add_strength:isAddStrengh
  198. ,activity:activityValue
  199. ,participate_jijie:participateJijie
  200. ,auto_daily:autoDaily
  201. ,train:trainValue
  202. ,always:always
  203. });
  204. }
  205. function begin_paticipate(){
  206. socket.emit('begin_auto_participate');
  207. }
  208. function restart_game()
  209. {
  210. socket.emit('restart_game');
  211. }
  212. function close_game()
  213. {
  214. socket.emit('close_game');
  215. }
  216. function get_title()
  217. {
  218. socket.emit('get_title');
  219. }
  220. function read_cfg()
  221. {
  222. socket.emit('read_cfg');
  223. }
  224. function reset_script(){
  225. socket.emit('reset_script');
  226. }
  227. function isWorkingHours() {
  228. const now = new Date();
  229. const day = now.getDay(); // 0是周日,1是周一,...,6是周六
  230. const hours = now.getHours();
  231. const minutes = now.getMinutes();
  232. // 将当前时间转换为分钟数,方便比较
  233. const currentTime = hours * 60 + minutes;
  234. // 工作日检查(周一到周五)
  235. const isWeekday = day >= 1 && day <= 5;
  236. // 工作时间段1: 9:00-11:30 (480-690分钟)
  237. const morningStart = 9 * 60; // 8:00
  238. const morningEnd = 11 * 60 + 30; // 11:30
  239. // 工作时间段2: 14:00-17:30 (840-1050分钟)
  240. const afternoonStart = 14 * 60; // 14:00
  241. const afternoonEnd = 17 * 60 + 30; // 17:30
  242. // 检查是否在工作时间段内
  243. const isWorkingTime = isWeekday &&
  244. ((currentTime >= morningStart && currentTime <= morningEnd) ||
  245. (currentTime >= afternoonStart && currentTime <= afternoonEnd));
  246. return isWorkingTime;
  247. }
  248. function updateButtonStatus() {
  249. const buttons = document.querySelectorAll('.custom-button');
  250. const isDisabled = isWorkingHours();
  251. console.log("isDisabled:", isDisabled);
  252. buttons.forEach(button => {
  253. // 排除restartgame_btn按钮
  254. if(button.id !== 'restartgame_btn') {
  255. button.disabled = isDisabled;
  256. }
  257. });
  258. }
  259. function stopPageAndCloseSocket() {
  260. // 获取当前连接的 WebSocket URL
  261. const socketUrl = socket.io.uri;
  262. // 检查是否为本地连接
  263. if (!socketUrl.includes("127.0.0.1")) {
  264. // 停止定时器
  265. clearInterval(timerId);
  266. // 关闭 WebSocket 连接
  267. socket.disconnect();
  268. // 清除画布内容(可选)
  269. var canvas = document.getElementById("canvas");
  270. var ctx = canvas.getContext("2d");
  271. ctx.clearRect(0, 0, canvas.width, canvas.height);
  272. // 可以添加其他停止页面运行的逻辑...
  273. }
  274. }
  275. document.addEventListener('DOMContentLoaded', function() {
  276. updateButtonStatus();
  277. // 每分钟检查一次时间变化
  278. setInterval(updateButtonStatus, 60000);
  279. });
  280. // 页面加载时设置5分钟后的定时器
  281. window.onload = function() {
  282. get_title();
  283. read_cfg();
  284. executeTask();
  285. setTimeout(stopPageAndCloseSocket, 600000); // 1分钟 = 60000毫秒
  286. };
  287. </script>
  288. </body>
  289. </html>