注释

赴爱 · 发表于 13 小时前

ChatGPT · 发表于 13 小时前

下面是您提供的代码的注释和简体中文翻译：

// 应用渐变文本效果的函数
const applyGradientTextEffect = (element, color, screen) => {
    // 如果颜色为红色且屏幕编号为3
    if (color === "red" && screen === 3) {
        // 设置背景渐变和文本阴影效果
        element.style.background = 'linear-gradient(to right, rgba(195, 7, 63, 0.6), #f83d3dcb, #f83d3dcb, rgba(195, 7, 63, 0.6))';
        element.style.textShadow = '0 0 5px rgba(243, 33, 33, 0.199), 0 0 10px rgba(243, 33, 33, 0.199), ...'; //省略部分
        element.style.webkitTextFillColor = 'transparent'; // 文字填充透明
        element.style.webkitBackgroundClip = 'text'; // 背景裁剪为文本
        return; // 结束函数
    }

    // 如果颜色为蓝色且屏幕编号为3
    if (color === "blue" && screen === 3) {
        // 设置背景渐变和文本阴影效果
        element.style.background = 'linear-gradient(to right, rgba(7, 63, 195, 0.6), #3d3df8cb, #3d3df8cb, rgba(7, 63, 195, 0.6))';
        element.style.textShadow = '0 0 5px rgba(33, 33, 243, 0.199), 0 0 10px rgba(33, 33, 243, 0.199), ...'; //省略部分
        element.style.webkitTextFillColor = 'transparent'; // 文字填充透明
        element.style.webkitBackgroundClip = 'text'; // 背景裁剪为文本
        return; // 结束函数
    }

    // 如果颜色不是以#开头，则转换为十六进制
    if (!color.startsWith('#')) {
        color = colorNameToHex(color);
    }

    // 解析十六进制颜色为RGB
    const hexColor = color.slice(1);
    const r = parseInt(hexColor.substr(0, 2), 16); // 红色分量
    const g = parseInt(hexColor.substr(2, 2), 16); // 绿色分量
    const b = parseInt(hexColor.substr(4, 2), 16); // 蓝色分量

    // 针对屏幕3设置样式
    if (screen === 3) {
        // 计算更浅和更深的颜色
        const lighterColor = `rgba(${r}, ${g}, ${b}, 0.3)`;
        const darkerColor = `rgba(${Math.max(r - 30, 0)}, ${Math.max(g - 30, 0)}, ${Math.max(b - 30, 0)}, 1)`;
        element.style.background = `linear-gradient(to right, ${lighterColor}, ${darkerColor}, ${darkerColor}, ${lighterColor})`;
        element.style.textShadow = `0 0 5px rgba(${r}, ${g}, ${b}, 0.4), ...`; //省略部分
    } 
    // 针对屏幕5设置样式
    else if (screen === 5) {
        const darkerColor = `rgba(${Math.max(r - 30, 0)}, ${Math.max(g - 30, 0)}, ${Math.max(b - 30, 0)}, 1)`;
        element.style.background = `linear-gradient(to top, ${darkerColor} 0%, rgba(${r}, ${g}, ${b}, 0) 6%)`;
        element.style.webkitTextStroke = `1px rgba(${r}, ${g}, ${b}, 1.0)`; // 设置文本描边
        element.style.textShadow = `0 0 10px rgba(${r}, ${g}, ${b}, 0.2), ...`; //省略部分
    }
    
    // 设定文本填充透明及背景裁剪
    element.style.webkitTextFillColor = 'transparent';
    element.style.webkitBackgroundClip = 'text';
    element.style.backgroundClip = 'text';
}

// 显示屏幕三的信息
const displayScreenThree = (data, color) => {
    // 设置容器的样式
    Object.assign(elements.container.style, { bottom: "5%", top: "20%" });
    // 调整EMS计数器的样式
    Object.assign(elements.emsCounter.style, {
        display: "block",
        top: "10px",
        left: "50%",
        transform: "translateX(-50%)",
        textAlign: "center"
    });

    adjustEMS(data.emsOnline, color, data.showCount); // 调整EMS显示

    // 设置计时器容器样式
    Object.assign(elements.timerContainer.style, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: '20px'
    });

    applyGradientTextEffect(elements.dyingHeader, color, 3); // 应用渐变文本效果

    elements.dyingHeader.style.fontSize = "1.4rem"; // 设置字体大小
    elements.dyingHeader.style.fontWeight = "bolder"; // 设置字体加粗

    // 设置计时框样式
    elements.timerBoxes.forEach(element => {
        Object.assign(element.style, {
            backgroundColor: "#333",
            padding: "10px",
            borderRadius: "5px",
            margin: "0 5px",
            display: "flex"
        });
    });

    elements.timerSeparator.innerHTML = ":"; // 设置时间分隔符

    // 设置计时器标题
    elements.timerHeader.innerHTML = translationStrings.player_hurt_find_help_or_ems;
    Object.assign(elements.timerHeader.style, {
        fontWeight: "normal",
        color: "rgb(185, 185, 185)",
        marginBottom: "1.2%",
        fontSize: ".8rem"
    });

    // 设置副标题
    elements.timerSubheader.innerHTML = translationStrings.player_hurt_time_to_live;
    Object.assign(elements.timerSubheader.style, {
        marginBottom: "2%",
        marginTop: "1%",
        fontWeight: "bold",
        fontSize: ".8rem"
    });

    elements.emergencyText.innerHTML = ""; // 清空紧急文本
    elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)'; // 设置背景色

    updateTimerDisplay(data.counter); // 更新计时器显示

    // 计算分钟和秒数并更新显示
    const minutes = Math.floor(data.counter / 60);
    const seconds = data.counter % 60;
    elements.minuteTens.innerHTML = Math.floor(minutes / 10);
    elements.minuteOnes.innerHTML = minutes % 10;
    elements.secondTens.innerHTML = Math.floor(seconds / 10);
    elements.secondOnes.innerHTML = seconds % 10;

    elements.container.style.display = 'flex'; // 显示容器
};

// 显示屏幕四的信息
const displayScreenFour = (data, color) => {
    elements.online.innerHTML = translationStrings.currently_online + data.emsOnline; // 当前在线人数
    Object.assign(elements.emsCounter.style, {
        display: "block",
        top: "10px",
        left: "50%",
        transform: "translateX(-50%)",
        textAlign: "center"
    });

    adjustEMS(data.emsOnline, color, data.showCount); // 调整EMS显示

    elements.timer.style.padding = "1%"; // 设置计时器的填充
    elements.timer.style.color = color !== "red" ? color : ''; // 设置计时器颜色

    elements.dyingHeader.innerHTML = translationStrings.player_hurt_critical.toUpperCase(); // 设置死亡提示
    elements.dyingHeader.classList.add("fading-text"); // 添加动画类
    elements.dyingHeader.style.fontSize = ".9rem";
    elements.dyingHeader.style.fontWeight = "500"; // 设置字体权重
    elements.dyingHeader.style.backgroundColor = color !== "red" ? color : 'red'; // 设置背景颜色
    elements.dyingHeader.style.padding = "5px"; // 设置填充

    // 设置计时器标题样式
    Object.assign(elements.timerHeader.style, {
        fontWeight: "normal",
        color: "rgb(185, 185, 185)",
        fontSize: ".8rem"
    });
    elements.timerHeader.innerHTML = translationStrings.player_hurt_find_help_or_ems; // 设置标题内容

    // 设置副标题样式
    Object.assign(elements.timerSubheader.style, {
        marginTop: "1%",
        fontWeight: "450",
        fontSize: ".8rem"
    });
    elements.timerSubheader.innerHTML = translationStrings.player_hurt_time_to_live; // 设置副标题内容

    // 设置容器样式
    Object.assign(elements.container.style, { bottom: "5%", top: "75%" });
    elements.emergencyText.innerHTML = ""; // 清空紧急文本

    elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.329)'; // 设置背景色
    updateTimerDisplay(data.counter); // 更新计时器显示
    elements.timer.style.display = "flex"; // 显示计时器
    elements.container.style.display = 'flex'; // 显示容器
};

// 显示屏幕五的信息
const displayScreenFive = (data, color) => {
    elements.ems.innerHTML = translationStrings.ems_online; // EMS在线文本
    elements.online.innerHTML = translationStrings.currently_online + data.emsOnline; // 当前在线人数
    elements.ems.style.color = color; // 设置EMS颜色
    Object.assign(elements.container.style, { bottom: "5%", top: "20%" });
    Object.assign(elements.emsCounter.style, {
        display: "block",
        top: "10px",
        left: "50%",
        transform: "translateX(-50%)",
        textAlign: "center"
    });

    Object.assign(elements.timerContainer.style, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: '20px'
    });

    elements.dyingHeader.innerHTML = translationStrings.player_dying; // 死亡提示

    applyGradientTextEffect(elements.dyingHeader, color, 5); // 应用渐变文本效果

    elements.dyingHeader.style.fontSize = "1.6rem"; // 设置字体大小
    elements.dyingHeader.style.fontWeight = "800"; // 设置字体加粗
    elements.dyingHeader.style.marginBottom = "6px"; // 设置底部外边距

    // 设置计时框样式
    elements.timerBoxes.forEach(element => {
        Object.assign(element.style, {
            background: "linear-gradient(to top right, rgba(211, 211, 211, 0.2), rgba(211, 211, 211, 0.00))",
            padding: "15px 15px",
            borderRadius: "1px",
            margin: "0 5px",
            display: "flex",
            fontSize: "1.4rem",
            fontWeight: "bolder",
            border: ".5px solid rgba(211, 211, 211, 0.2)"
        });
    });

    elements.timerSeparator.innerHTML = ":"; // 设置时间分隔符
    elements.timerSeparator.style.margin = "0px 8px"; // 设置左、右外边距

    elements.timerHeader.innerHTML = translationStrings.player_hurt_severe; // 严重受伤提示
    Object.assign(elements.timerHeader.style, {
        fontWeight: "normal",
        color: "rgb(185, 185, 185)",
        marginBottom: ".7%",
        fontSize: ".8rem"
    });

    elements.timerSubheader.innerHTML = translationStrings.player_hurt_find_help_or_ems.toUpperCase(); // 副标题
    Object.assign(elements.timerSubheader.style, {
        marginBottom: "2%",
        marginTop: "1%",
        fontWeight: "500",
        fontSize: ".7rem"
    });

    elements.emergencyText.innerHTML = ""; // 清空紧急文本
    elements.body.style.backgroundColor = 'rgba(0, 0, 0, 0.429)'; // 设置背景色
    updateTimerDisplay(data.counter); // 更新计时器显示

    // 计算分钟和秒数并更新显示
    const minutes = Math.floor(data.counter / 60);
    const seconds = data.counter % 60;
    elements.minuteTens.innerHTML = Math.floor(minutes / 10);
    elements.minuteOnes.innerHTML = minutes % 10;
    elements.secondTens.innerHTML = Math.floor(seconds / 10);
    elements.secondOnes.innerHTML = seconds % 10;

    elements.container.style.display = 'flex'; // 显示容器
};

// 监听消息事件
window.addEventListener('message', (event) => {
    // 当接收到"显示死亡屏幕"命令时
    if (event.data.action === "displayDeathScreen") {
        color = event.data.color; // 获取颜色
        translationStrings = event.data.translationStrings; // 获取翻译字符串

        elements.dyingHeader.innerHTML = translationStrings.player_dying; // 设置死亡提示
        elements.timerHeader.innerHTML = translationStrings.time_to_respawn; // 设置重生时间提示
        elements.emergencyText.innerHTML = translationStrings.player_hurt_find_help_or_ems; // 设置急救提示

        setColorCSSRule(color); // 设置颜色的CSS规则

        // 根据不同类型显示相应的屏幕
        switch (event.data.type) {
            case 1: displayScreenOne(event.data, color); break;
            case 2: displayScreenTwo(event.data, color); break;
            case 3: displayScreenThree(event.data, color); break;
            case 4: displayScreenFour(event.data, color); break;
            case 5: displayScreenFive(event.data, color); break;
        }
    }

    // 更新死亡屏幕信息
    if (event.data.action === "updateDeathScreen") {
        elements.online.innerHTML = translationStrings.currently_online + (event.data.emsOnline || 0); // 更新在线人数

        // 根据不同情况调整EMS显示
        if (!event.data.showCount) {
            elements.ems.style.display = "none"; // 隐藏EMS
            elements.online.style.display = "none"; // 隐藏在线人数
        } else if (event.data.emsOnline < 1) {
            elements.online.style.display = "none"; // 隐藏在线人数
            elements.ems.innerHTML = translationStrings.ems_offline; // 显示EMS离线提示
            elements.emsCounter.style.bottom = "40px"; // 调整EMS计数器位置
            elements.ems.style.color = "rgba(195, 7, 63, 1)"; // 设置颜色
        } else {
            elements.ems.innerHTML = translationStrings.ems_online; // 显示EMS在线提示
            elements.ems.style.color = event.data.color; // 设置颜色
            elements.online.style.display = "block"; // 显示在线人数
        }

        // 根据不同类型更新提示信息
        switch (event.data.type) {
            case 1:
            case 2:
                if (event.data.dispatched) elements.emergencyText.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
                if (event.data.canRespawn) {
                    elements.dyingHeader.innerHTML = translationStrings.player_passed; // 玩家已去世
                    elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
                }
                break;
            case 3:
            case 4:
                if (event.data.dispatched) elements.timerHeader.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
                if (event.data.canRespawn) {
                    elements.dyingHeader.innerHTML = translationStrings.player_hurt_unconscious; // 玩家失去意识
                    elements.timerSubheader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
                }
                break;
            case 5:
                if (event.data.dispatched) elements.timerSubheader.innerHTML = translationStrings.ems_on_the_way; // EMS正在赶来
                if (event.data.canRespawn) {
                    elements.dyingHeader.innerHTML = translationStrings.player_hurt_unconscious.toUpperCase(); // 玩家失去意识
                    elements.timerHeader.innerHTML = translationStrings.player_hurt_respawn; // 重生倒计时
                }
                break;
        }

        // 更新计时器显示
        updateTimerDisplay(event.data.counter);

        // 检查屏幕类型并更新计时器
        if ([3, 5].includes(event.data.type)) {
            const minutes = Math.floor(event.data.counter / 60);
            const seconds = event.data.counter % 60;
            elements.minuteTens.innerHTML = Math.floor(minutes / 10);
            elements.minuteOnes.innerHTML = minutes % 10;
            elements.secondTens.innerHTML = Math.floor(seconds / 10);
            elements.secondOnes.innerHTML = seconds % 10;
        }

        elements.container.style.display = 'flex'; // 显示容器
    }

    // 隐藏死亡屏幕
    if (event.data.action === "hideDeathScreen") {
        elements.emsCounter.style.display = "none"; // 隐藏EMS计数器
        elements.container.style.display = 'none'; // 隐藏容器
        elements.body.style.backgroundColor = ''; // 恢复背景色
        elements.body.style.backgroundImage = 'none'; // 移除背景图片
    }
});

以上是代码的逐行注释和对应的中文翻译。请根据需要调整注释内容。如果有其他问题或需要帮助，请随时告知！