diff --git a/resources/css/app.css b/resources/css/app.css index 45fde76..32c4a72 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -10,6 +10,15 @@ 'Segoe UI Symbol', 'Noto Color Emoji'; } +/* 五子棋公屏邀请按钮由 Vite 事件委托接管,这里集中维护 hover 视觉态。 */ +.gomoku-invite-open:hover { + background: #ddeeff !important; +} + +.gomoku-invite-accept:hover { + opacity: .8 !important; +} + .vip-presence-banner { position: fixed; inset: 24px 24px auto 24px; diff --git a/resources/js/chat-room/game-panels.js b/resources/js/chat-room/game-panels.js index fee979a..9780570 100644 --- a/resources/js/chat-room/game-panels.js +++ b/resources/js/chat-room/game-panels.js @@ -27,6 +27,39 @@ function closeAlpineGamePanel(panelId) { panelData.show = false; } +/** + * 打开五子棋面板,作为公屏邀请按钮和存量全局函数之间的桥接。 + * + * @returns {void} + */ +function openGomokuPanelFromInvite() { + if (typeof window.openGomokuPanel === "function") { + window.openGomokuPanel(); + return; + } + + const panel = document.getElementById("gomoku-panel"); + const panelData = panel && typeof window.Alpine?.$data === "function" + ? window.Alpine.$data(panel) + : null; + + panelData?.open?.(); +} + +/** + * 接受五子棋公屏邀请,业务仍沿用五子棋面板里的存量全局函数。 + * + * @param {string} gameId 对局 ID + * @returns {void} + */ +function acceptGomokuInviteFromMessage(gameId) { + if (!gameId) { + return; + } + + window.acceptGomokuInvite?.(gameId); +} + /** * 绑定小型游戏面板通用关闭事件。 * @@ -43,6 +76,20 @@ export function bindGamePanelControls() { return; } + const gomokuOpenButton = event.target.closest("[data-gomoku-open-panel]"); + if (gomokuOpenButton) { + event.preventDefault(); + openGomokuPanelFromInvite(); + return; + } + + const gomokuAcceptButton = event.target.closest("[data-gomoku-accept-id]"); + if (gomokuAcceptButton) { + event.preventDefault(); + acceptGomokuInviteFromMessage(gomokuAcceptButton.getAttribute("data-gomoku-accept-id") || ""); + return; + } + const closeButton = event.target.closest("[data-game-panel-close]"); if (!closeButton) { return; diff --git a/resources/views/chat/partials/scripts.blade.php b/resources/views/chat/partials/scripts.blade.php index edeb493..457462b 100644 --- a/resources/views/chat/partials/scripts.blade.php +++ b/resources/views/chat/partials/scripts.blade.php @@ -3020,27 +3020,27 @@ div.style.cssText = 'background:linear-gradient(135deg,#e8eef8,#f0f4fc); ' + 'border-left:3px solid #336699; border-radius:4px; padding:6px 10px; margin:3px 0;'; + const safeInviterName = escapeHtml(e.inviter_name); + const gomokuGameId = Number.parseInt(e.game_id, 10) || 0; const acceptBtn = isSelf ? - // 自己的邀请:只显示打开面板按钮,方便被关掉后重新进入 - `` : - // 别人的邀请:显示接受挑战按钮 - ``; div.innerHTML = ` - ♟️ 【五子棋】${e.inviter_name} 发起了随机对战!${isSelf ? '(等待中)' : ''} + ♟️ 【五子棋】${safeInviterName} 发起了随机对战!${isSelf ? '(等待中)' : ''} ${acceptBtn} (${timeStr})`;