123/main.js

const randomPhrases = [
    "就决定是你了！: ${name} (${id}), 积分: ${score}",
    "真相只有一个！: ${name} (${id}), 积分: ${score}",
    "你被选中了！: ${name} (${id}), 积分: ${score}",
    "幸运儿是你！: ${name} (${id}), 积分: ${score}",
    "命运之轮转动！: ${name} (${id}), 积分: ${score}",
    "你想成为一个【大人物】吗？: ${name} (${id}), pipis: ${score}",
    "你醒啦？你现在是一个 ${name} 了，不要忘了(${id}), 你还能活 ${score}天"
];

function load2D_bg(){
    var background = document.getElementById("background");
    var range = 40;
    var calcValue = function calcValue(a, b) {
        return (a / b * range - range / 2).toFixed(1);
    };
    var timeout = void 0;
    document.addEventListener('mousemove',
    function(_ref) {
        var x = _ref.x,
        y = _ref.y;
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        timeout = window.requestAnimationFrame(function() {
            var yValue = calcValue(y, window.innerHeight);
            var xValue = calcValue(x, window.innerWidth);
            
                    
            background.style.backgroundPositionX = xValue * 1 -200+ "px ";
            background.style.backgroundPositionY =  (-yValue * 0.75-50 ) + "px";
        })
    },false);

}

function load2D_bg2(){
    var background = document.getElementById("background2");
    var range = 40;
    var calcValue = function calcValue(a, b) {
        return (a / b * range - range / 2).toFixed(1);
    };
    var timeout = void 0;
    document.addEventListener('mousemove',
    function(_ref) {
        var x = _ref.x,
        y = _ref.y;
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        timeout = window.requestAnimationFrame(function() {
            var yValue = calcValue(y, window.innerHeight);
            var xValue = calcValue(x, window.innerWidth);
            
            background.style.backgroundPositionX = xValue *1 -200+ "px ";
            background.style.backgroundPositionY =  (-yValue * 0.75-50 ) + "px";
        })
    },false);

}

function load2D_bg2_2(){
    var background = document.getElementById("background2");
    document.onmousemove=function(){
        console.log(window.outerHeight);
        background.style.opacity=1-(getMousePos()/window.outerHeight*2.5);
    }
}

function getMousePos(event) {
    var e = event || window.event;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var y = e.pageY || e.clientY + scrollY;
    return y;
}

function load2D_yinghua(){
    var background = document.getElementById("yinghua");
    var range = 40;
    var calcValue = function calcValue(a, b) {
        return (a / b * range - range / 2).toFixed(1);
    };
    var timeout = void 0;
    document.addEventListener('mousemove',
    function(_ref) {
        var x = _ref.x,
        y = _ref.y;
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        timeout = window.requestAnimationFrame(function() {
            var yValue = calcValue(y, window.innerHeight);
            var xValue = calcValue(x, window.innerWidth);
            background.style.backgroundPositionX = xValue * 1.5 -200+ "px ";
            background.style.backgroundPositionY =  (-yValue * 1-50 ) + "px";
        })
    },false);

}
var i=0;


function startExtraction() {
    // 渐隐现有画面
    document.querySelector('.proflieCard').style.transition = 'opacity 1s';
    document.querySelector('.proflieCard').style.opacity = '0';

    // 1秒后显示新画面
    setTimeout(function() {
        document.querySelector('.proflieCard').style.display = 'none';
        document.querySelector('.newScreen').style.display = 'block';
        document.querySelector('.newScreen').style.opacity = '1';
    }, 1000);
}


function importFile() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.xlsx';

    input.onchange = function(event) {
        const file = event.target.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('file', file);

            fetch('http://127.0.0.1:5000/upload', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('导入成功');
                    } else {
                        alert('导入失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('导入失败');
                });
        }
    };

    input.click();
}

function drawStudent() {
    // 发送请求到服务器的 /select_student 路由
    fetch('http://127.0.0.1:5000/select_student')
        .then(response => {
            // 确保我们得到了一个成功的响应
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 将抽取的学生信息显示在界面上
            if (data && data.name && data.id) {
                const studentInfo = document.getElementById('selectedStudent');
                const randomPhrase = randomPhrases[Math.floor(Math.random() * randomPhrases.length)];
                const phraseWithData = randomPhrase
                    .replace('${name}', data.name)
                    .replace('${id}', data.id)
                    .replace('${score}', data.score);

                studentInfo.innerHTML = `
                    <p style="font-size: 24px;">${phraseWithData}</p>
                    <button class = button1 id = "arrivedButton">到达课堂</button>
                    <div id="scoreButtons" style="display: none;">
                        <button class = button1 id="repeatedButton" style="margin: 40px 0; left = 1cm">正确重复</button>
                        <button class = button1 id="distractedButton" style="margin: 10px 0;">上课走神</button>
                        <br>
                        <input type="number" id="correctInput" placeholder="输入分数" style = "width: 200px;">
                        <button class = button1 id="addScoreButton" style="margin: 10px 0;">加分</button>
                    </div>
                `;

                // 添加事件监听器
                const arrivedButton = document.getElementById('arrivedButton');
                const repeatedButton = document.getElementById('repeatedButton');
                const distractedButton = document.getElementById('distractedButton');
                const correctInput = document.getElementById('correctInput');
                const addScoreButton = document.getElementById('addScoreButton');
                const scoreButtons = document.getElementById('scoreButtons');

                arrivedButton.onclick = () => {
                    updateScore(data.id, 1, 0, 0);
                    scoreButtons.style.display = 'block';
                };

                repeatedButton.onclick = () => updateScore(data.id, 0, 1, 0);
                distractedButton.onclick = () => updateScore(data.id, 0, 2, 0);
                addScoreButton.onclick = () => {
                    const correct = parseFloat(correctInput.value) || 0;
                    updateScore(data.id, 0, 0, correct);
                };
                if (data.score >= 1) {
                    fetch(`http://127.0.0.1:5000/check_probability?id=${data.id}`)
                        .then(response => response.json())
                        .then(probData => {
                            if (probData.probability < 0.02) {
                                alert(`恭喜${data.name}同学喜提超级无敌终极宇宙至尊非酋称号！！！`);
                            } else if (probData.probability < 0.1) {
                                alert(`恭喜${data.name}同学喜提万中挑一的非酋称号！！！`);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                }
            } else {
                const studentInfo = document.getElementById('selectedStudent');
                studentInfo.innerHTML = '<p>No student selected.</p>';
            }
        })
        .catch(error => {
            console.error('你的fetch被GAY了:', error);
        });
}


function updateScore(studentId, arrived, repeated, correct) {
    fetch('http://127.0.0.1:5000/update_score', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            id: studentId,
            arrived: arrived,
            repeated: repeated,
            correct: correct
        })
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`更新积分成功。新的积分: ${data.score}`);
            } else {
                alert(`难以更新积分: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('你的fetch被GAY了:', error);
        });
}

function exportFile() {
    fetch('http://127.0.0.1:5000/export_file')
        .then(response => response.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'students.xlsx';
            document.body.appendChild(a);
            a.click();
            a.remove();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('导出文件失败');
        });
}

function drawTenStudents() {
    // 发送请求到服务器的 /select_ten_students 路由
    fetch('http://127.0.0.1:5000/select_ten_students')
        .then(response => {
            // 确保我们得到了一个成功的响应
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // 将抽取的十个学生信息显示在界面上
            if (data && data.students) {
                const studentInfo = document.getElementById('selectedStudent');
                studentInfo.innerHTML = ''; // 清空之前的内容

                data.students.forEach(student => {
                    studentInfo.innerHTML += `
                        <p style="font-size: 24px;">人多力量大！！！: ${student.name} (${student.id}), 积分: ${student.score}</p>
                    `;
                });
            } else {
                const studentInfo = document.getElementById('selectedStudent');
                studentInfo.innerHTML = '<p>No students selected.</p>';
            }
        })
        .catch(error => {
            console.error('你的fetch被GAY了:', error);
        });
}