Feat: 实现全屏特效系统（烟花/下雨/雷电），管理员一键触发全房间广播

2026-02-27 14:14:35 +08:00
parent adab033afc
commit 709e0d4975
47 changed files with 621 additions and 1751 deletions
@@ -63,6 +63,11 @@ export function initChat(roomId) {
            window.dispatchEvent(
                new CustomEvent("chat:screen-cleared", { detail: e }),
            );
+        })
+        // 监听管理员触发的全屏特效（烟花/下雨/雷电）
+        .listen("EffectBroadcast", (e) => {
+            console.log("特效播放:", e);
+            window.dispatchEvent(new CustomEvent("chat:effect", { detail: e }));
        });
 }

@@ -93,6 +93,13 @@

    {{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
    @include('chat.partials.user-actions')
+
+    {{-- 全屏特效系统：管理员烟花/下雨/雷电 --}}
+    <script src="/js/effects/effect-manager.js"></script>
+    <script src="/js/effects/fireworks.js"></script>
+    <script src="/js/effects/rain.js"></script>
+    <script src="/js/effects/lightning.js"></script>
+
    @include('chat.partials.scripts')


@@ -77,6 +77,16 @@
                <button type="button" onclick="adminClearScreen()"
                    style="font-size: 11px; padding: 1px 6px; background: #dc2626; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🧹
                    清屏</button>
+                {{-- 全屏特效按钮组（仅管理员可见） --}}
+                <button type="button" onclick="triggerEffect('fireworks')" title="全屏烟花"
+                    style="font-size: 11px; padding: 1px 6px; background: #ea580c; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🎆
+                    烟花</button>
+                <button type="button" onclick="triggerEffect('rain')" title="全屏下雨"
+                    style="font-size: 11px; padding: 1px 6px; background: #2563eb; color: #fff; border: none; border-radius: 2px; cursor: pointer;">🌧️
+                    下雨</button>
+                <button type="button" onclick="triggerEffect('lightning')" title="全屏雷电"
+                    style="font-size: 11px; padding: 1px 6px; background: #7c3aed; color: #fff; border: none; border-radius: 2px; cursor: pointer;">⚡
+                    雷电</button>
            @endif

            <button type="button" onclick="location.reload()"
@@ -614,6 +614,38 @@
    // DOMContentLoaded 后启动，确保 Vite 编译的 JS 已加载
    document.addEventListener('DOMContentLoaded', setupScreenClearedListener);

+    // ── 全屏特效事件监听（烟花/下雨/雷电）───────────────
+    window.addEventListener('chat:effect', (e) => {
+        const type = e.detail?.type;
+        if (type && typeof EffectManager !== 'undefined') {
+            EffectManager.play(type);
+        }
+    });
+
+    /**
+     * 管理员点击特效按钮，向后端 POST /command/effect
+     *
+     * @param {string} type  特效类型：fireworks / rain / lightning
+     */
+    function triggerEffect(type) {
+        const roomId = window.chatContext?.roomId;
+        if (!roomId) return;
+        fetch('/command/effect', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+            },
+            body: JSON.stringify({
+                room_id: roomId,
+                type
+            }),
+        }).then(r => r.json()).then(data => {
+            if (data.status !== 'success') alert(data.message);
+        }).catch(err => console.error('特效触发失败:', err));
+    }
+    window.triggerEffect = triggerEffect;
+
    // ── 发送消息（Enter 发送） ───────────────────────
    document.getElementById('content').addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {