<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yys Display</title>
    <style>
        .monitor-container {
            display: flex;
            flex-direction: row;
        }
        .checkbox-container {
            display: flex;
            flex-direction: column;
        }
        .operate-container {
            display: flex;
            flex-direction: column;
        }
        .status-container {
            display: flex;
            flex-direction: row;
        }
        #hint_message p {
            font-size: 10px; /* 设置为较小的字体大小 */
        }
    </style>
</head>
<body>
    <h2 id="title_message">Monitor Display</h2>
    <div class="monitor-container">
        <h3>请选择时间间隔：</h3>
        <select id="timeInterval">
            <option value="500">0.5 秒</option>
            <option value="1000" selected>1 秒</option>
            <option value="2000">2 秒</option>
            <option value="5000">5 秒</option>
            <option value="0">停止</option>
        </select>
        <canvas id="canvas" width="300" height="400"></canvas>
        <h3>待办列表:</h3>
        <div id="task_message" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
    </div>

    <div class="status-container">
        <h3>状态：</h3>
        <div id="status_message" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
        <h3>任务列表：</h3>
        <div id="hint_message"></div>
        <div class="checkbox-container">
            <label>
                收集：
                <input type="text" id="maxCollectCheckbox" value="0">
            </label>
            <label>
                治疗大小：
                <input type="text" id="cureNumberCheckbox" value="300">
            </label>
            <label>
                打怪：
                <select id="JiNaCheckbox">
                    <option value="None">None</option>
                    <option value="monster">monster</option>
                    <option value="big_monster">big_monster</option>
                    <option value="bigMonster_max">bigMonster_max</option>
                    <option value="yongbing">yongbing</option>
                    <option value="jina" selected>jina</option>
                    <option value="jina_call">jina_call</option>
                    <option value="jina_onlyFight">jina_onlyFight</option>
                </select>
            </label>
            <label>
                活动：
                <select id="AcitivityCheckbox">
                    <option value="None" selected>None</option>
                    <option value="lianmeng">lianmeng</option>
                    <option value="cure">cure</option>
                    <option value="only_cure">only_cure</option>
                    <option value="redPackage">redPackage</option>
                </select>
            </label>
            <label>
                训练方式：
                <select id="trainCheckbox">
                    <option value="None">None</option>
                    <option value="default" selected>default</option>
                    <option value="lv1">优先lv1</option>
                    <option value="lv8">优先lv8</option>
                    <option value="lv9">优先lv9</option>
                    <option value="upgrade">优先升级</option>
                </select>
            </label>
            <label><input type="checkbox" id="SimpleCheckbox"> 是否小号</label>
            <label><input type="checkbox" id="switchCheckbox"> 是否切换</label>
            <label><input type="checkbox" id="lineCheckbox"> 预留队列</label>
            <label><input type="checkbox" id="AddStrenghCheckbox"> 是否添加体力</label>
            <label><input type="checkbox" id="participateJijieCheckbox"> 是否参与集结</label>
            <label><input type="checkbox" id="isRestart_checkbox"> 是否重启</label>
            <label><input type="checkbox" id="always_checkbox"> 无尽运行</label>
        </div>
        <div class="operate-container">
            <button class="custom-button" id="autoPalace_btn" onclick="auto_palace()">自动王城</button>
            <button class="custom-button" id="atuo_btn" onclick="begin_paticipate()">自动打熊</button>
            <button class="custom-button" id="resetScript_btn" onclick="reset_script()">重置脚本</button>
            <button class="custom-button" id="closegame_btn" onclick="close_game()">关闭游戏</button>
            <button class="custom-button" id="restartgame_btn" onclick="restart_game()">重新关闭并自动游戏</button>
            <button class="custom-button" id="atuoRun_btn" onclick="begin_auto()">自动模式</button>
            <button class="custom-button" id="testNewFun_btn" onclick="begin_testNewFun()">测试新功能</button>
        </div>
    </div>
    
    <script src="https://cdnjs.loli.net/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
    <script>

        const socket = io();
        socket.on('connect', () => {
            console.log('Connected to server');
        });
        socket.on('disconnect', () => {
            console.log('Disconnected from server');
        });
        socket.on('image_data', (image_data_base64) => {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const image = new Image();
            image.onload = () => {
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
            };
            image.src = 'data:image/jpeg;base64,' + image_data_base64;
        });
        socket.on('processing_status', (msg) => {
            var messageBox = document.getElementById('status_message');
            messageBox.innerHTML = msg;
            console.log(msg);
        });
        socket.on('processing_todo', (msg) => {
            var messageBox = document.getElementById('task_message');
            messageBox.innerHTML = msg;
            console.log(msg);
        });
        socket.on('processing_title', (msg) => {
            var messageBox = document.getElementById('title_message');
            messageBox.innerHTML = msg;
        });
        socket.on('processing_cfg', (msg) => {
            console.log(msg);

            // 获取元素
            const maxCollectInput = document.getElementById('maxCollectCheckbox'); // 文本输入框
            const cureNumberInput = document.getElementById('cureNumberCheckbox'); // 文本输入框
            const jiNaSelect = document.getElementById('JiNaCheckbox'); // 下拉列表
            const simpleCheckbox = document.getElementById('SimpleCheckbox'); // 复选框
            const switchCheckbox = document.getElementById('switchCheckbox'); // 复选框
            const lineCheckbox = document.getElementById('lineCheckbox'); // 复选框
            const AddStrenghCheckbox = document.getElementById('AddStrenghCheckbox'); // 复选框
            const participateJijieCheckbox = document.getElementById('participateJijieCheckbox'); // 复选框
            const AcitivitySelect = document.getElementById('AcitivityCheckbox'); // 下拉列表 
            const isRestart_checkbox = document.getElementById('isRestart_checkbox'); // 复选框
            const trainSelect = document.getElementById('trainCheckbox'); // 下拉列表
            const always_checkbox = document.getElementById('always_checkbox'); // 复选框





            // 设置值
            maxCollectInput.value = msg['maxCollect']; // 设置文本输入框的值
            cureNumberInput.value = msg['cureNumber']; // 设置文本输入框的值
            jiNaSelect.value = msg['jina']; // 设置下拉列表的值
            simpleCheckbox.checked = msg['simple']; // 设置复选框的状态
            switchCheckbox.checked = msg['switch']; // 设置复选框的状态
            lineCheckbox.checked = msg['lineCheck']; // 设置复选框的状态
            AddStrenghCheckbox.checked = msg['add_strength']; // 设置复选框的状态
            AcitivitySelect.value = msg['activity']; // 设置下拉列表的值
            participateJijieCheckbox.checked = msg['participate_jijie']; // 设置复选框的状态
            isRestart_checkbox.checked = msg['is_restart']; // 设置复选框的状态
            trainSelect.value = msg['train']; // 设置下拉列表的值
            always_checkbox.checked = msg['always']; // 设置复选框的状态


            // 如果需要显示消息，可以取消注释以下代码
            // var messageBox = document.getElementById('title_message');
            // messageBox.innerHTML = msg;
        });


        socket.on('processing_hint', (msg) => {
            var messageBox = document.getElementById('hint_message');
            var data = JSON.parse(msg);
            var listDiv = document.createElement("div");
            for (var i = 0; i < data.length; i++) {
                var listItem = document.createElement("p");
                listItem.textContent = data[i];
                listDiv.appendChild(listItem);
            }
            messageBox.innerHTML = "";
            messageBox.appendChild(listDiv)
           
        });
        var timerId;
        function executeTask() {
            var selectElement = document.getElementById("timeInterval");
            var selectedValue = selectElement.value;
            if (selectedValue == '0'){
                clearInterval(timerId)
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                timerId = setInterval(executeTask, 1000);
            }
            else
            {
                socket.emit('monitor_begin');
                clearInterval(timerId)
                timerId = setInterval(executeTask, parseInt(selectedValue));
            }
        }

        function begin_testNewFun() {
            socket.emit('begin_testNewFun');
        }

        function begin_auto() {
            const maxCollectValue = document.getElementById('maxCollectCheckbox').value; // 获取文本输入框的值
            const cureNumberValue = document.getElementById('cureNumberCheckbox').value; // 获取文本输入框的值
            const jiNaValue = document.getElementById('JiNaCheckbox').value; // 获取下拉列表的值
            const isSimple = document.getElementById('SimpleCheckbox').checked; // 获取复选框的状态
            const switchValue = document.getElementById('switchCheckbox').checked; // 获取复选框的状态
            const lineCheck = document.getElementById('lineCheckbox').checked; // 获取复选框的状态
            const isAddStrengh = document.getElementById('AddStrenghCheckbox').checked; // 获取复选框的状态
            const activityValue = document.getElementById('AcitivityCheckbox').value; // 获取下拉列表的值
            const participateJijie = document.getElementById('participateJijieCheckbox').checked; // 获取复选框的状态
            const isRestart = document.getElementById('isRestart_checkbox').checked; // 获取复选框的状态
            const trainValue = document.getElementById('trainCheckbox').value; // 获取下拉列表的值
            const always = document.getElementById('always_checkbox').checked; // 获取复选框的状态

            // 发出数据
            socket.emit('begin_auto', {
                maxCollect: maxCollectValue, // 发送文本输入框的值
                cureNumber: cureNumberValue, // 发送文本输入框的值
                jina: jiNaValue, // 发送下拉列表的值
                simple: isSimple // 发送复选框的状态
                ,switch:switchValue
                ,lineCheck:lineCheck
                ,add_strength:isAddStrengh
                ,activity:activityValue
                ,participate_jijie:participateJijie
                ,is_restart:isRestart
                ,train:trainValue
                ,always:always
            });
        }

        function begin_paticipate(){
            socket.emit('begin_auto_participate');
        }



        function auto_palace()
        {
            socket.emit('auto_palace')
        }
        
        function restart_game()
        {
            socket.emit('restart_game');
        }

        function close_game()
        {
            socket.emit('close_game');
        }
        function get_title()
        {
            socket.emit('get_title');
        }

        function read_cfg()
        {
            socket.emit('read_cfg');
        }

        function reset_script(){
            socket.emit('reset_script');
        }

        function isWorkingHours() {
            // 检查是否为本地域名
            const isLocalDomain = window.location.hostname === 'localhost' || 
                                window.location.hostname === '127.0.0.1' || 
                                window.location.hostname === '';
            
            if (isLocalDomain) {
                return false;
            }
            const now = new Date();
            const day = now.getDay(); // 0是周日，1是周一，...，6是周六
            const hours = now.getHours();
            const minutes = now.getMinutes();
            
            // 将当前时间转换为分钟数，方便比较
            const currentTime = hours * 60 + minutes;
            
            // 工作日检查（周一到周五）
            const isWeekday = day >= 1 && day <= 5;
            
            // 工作时间段1: 9:00-11:30 (480-690分钟)
            const morningStart = 9 * 60;      // 8:00
            const morningEnd = 11 * 60 + 30;  // 11:30
            
            // 工作时间段2: 14:00-17:30 (840-1050分钟)
            const afternoonStart = 14 * 60;    // 14:00
            const afternoonEnd = 17 * 60 + 30; // 17:30
            
            // 检查是否在工作时间段内
            const isWorkingTime = isWeekday && 
                ((currentTime >= morningStart && currentTime <= morningEnd) || 
                (currentTime >= afternoonStart && currentTime <= afternoonEnd));
            
            return isWorkingTime;
        }

        function updateButtonStatus() {
            const buttons = document.querySelectorAll('.custom-button');
            const isDisabled = isWorkingHours();
            console.log("isDisabled:", isDisabled);
            
            buttons.forEach(button => {
            // 排除restartgame_btn按钮
            if(button.id !== 'restartgame_btn') {
                button.disabled = isDisabled;
            }
        });
        }

        function stopPageAndCloseSocket() {
            // 获取当前连接的 WebSocket URL
            const socketUrl = socket.io.uri;

            // 检查是否为本地连接
            if (!socketUrl.includes("127.0.0.1")) {
                // 停止定时器
                clearInterval(timerId);
                // 关闭 WebSocket 连接
                socket.disconnect();
                // 清除画布内容（可选）
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 可以添加其他停止页面运行的逻辑...
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            updateButtonStatus();
            // 每分钟检查一次时间变化
            setInterval(updateButtonStatus, 60000);
        });
        // 页面加载时设置5分钟后的定时器
        window.onload = function() {
            get_title();
            read_cfg();
            executeTask();
            setTimeout(stopPageAndCloseSocket, 600000); // 1分钟 = 60000毫秒
        };
        
    </script>
</body>
</html>


