lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

迁移百家乐悬浮按钮脚本

Browse Source
This commit is contained in:
流星
2026-04-25 15:03:33 +08:00
parent 3bbde9b4dd
commit 414dc52a3b
3 changed files with 139 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/chat-room.js
+7
View File
@@ -23,6 +23,7 @@
* - user-target-actions.js：处理点击用户名切换私聊目标和打开名片。
* - welcome-menu.js：处理欢迎菜单交互。
* - admin-menu.js：处理聊天室管理菜单交互。
* - baccarat-fab.js：处理百家乐悬浮按钮拖动与打开面板。
* - baccarat-loss-cover-admin.js：处理百家乐买单活动管理弹层。
* - baccarat-loss-cover.js：处理百家乐买单活动前台弹窗。
* - game-hall.js：处理娱乐大厅弹窗和游戏入口卡片。
@@ -86,6 +87,7 @@ export { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./cha
export { bindUserTargetActions, openUserCard, switchTarget } from "./chat-room/user-target-actions.js";
export { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
export { bindAdminMenuControls } from "./chat-room/admin-menu.js";
export { baccaratFab, bindBaccaratFabControls } from "./chat-room/baccarat-fab.js";
export {
bindBaccaratLossCoverAdminControls,
closeAdminBaccaratLossCoverModal,
@@ -229,6 +231,7 @@ import { bindToolbarControls, runFeatureShortcut, runToolbarAction } from "./cha
import { bindUserTargetActions, openUserCard, switchTarget } from "./chat-room/user-target-actions.js";
import { bindWelcomeMenuControls } from "./chat-room/welcome-menu.js";
import { bindAdminMenuControls } from "./chat-room/admin-menu.js";
import { baccaratFab, bindBaccaratFabControls } from "./chat-room/baccarat-fab.js";
import {
bindBaccaratLossCoverAdminControls,
closeAdminBaccaratLossCoverModal,
@@ -382,6 +385,8 @@ if (typeof window !== "undefined") {
switchTarget,
bindWelcomeMenuControls,
bindAdminMenuControls,
baccaratFab,
bindBaccaratFabControls,
bindBaccaratLossCoverAdminControls,
closeAdminBaccaratLossCoverModal,
closeCurrentBaccaratLossCoverEvent,
@@ -523,6 +528,7 @@ if (typeof window !== "undefined") {
window.scheduleRenderMobileUserList = scheduleRenderMobileUserList;
window.switchMobileTab = switchMobileTab;
window.switchTarget = switchTarget;
window.baccaratFab = baccaratFab;
window.clearChatBotContext = clearChatBotContext;
window.sendToChatBot = sendToChatBot;
window.slotFab = slotFab;
@@ -626,6 +632,7 @@ if (typeof window !== "undefined") {
bindToolbarControls();
bindUserTargetActions();
bindAdminMenuControls();
bindBaccaratFabControls();
bindBaccaratLossCoverAdminControls();
bindBaccaratLossCoverControls();
bindGameHallControls();
resources/js/chat-room/baccarat-fab.js
+131
View File
@@ -0,0 +1,131 @@
// 乐彩百家乐悬浮按钮组件，负责拖动位置持久化和打开游戏面板。
const BACCARAT_FAB_STORAGE_KEY = "baccarat_fab_pos";
/**
* 安全读取悬浮按钮上次保存的位置。
*
* @returns {{x?: number, y?: number}|null}
*/
function readSavedBaccaratFabPosition() {
try {
return JSON.parse(localStorage.getItem(BACCARAT_FAB_STORAGE_KEY) || "null");
} catch (error) {
return null;
}
}
/**
* 创建百家乐悬浮按钮 Alpine 组件。
*
* @returns {Record<string, any>}
*/
export function baccaratFab() {
const saved = readSavedBaccaratFabPosition();
return {
visible: false,
posX: saved?.x ?? 18,
posY: saved?.y ?? 90,
dragging: false,
_startX: 0,
_startY: 0,
_origX: 0,
_origY: 0,
_moved: false,
/**
* 开始拖动悬浮按钮。
*
* @param {PointerEvent} event 指针事件
* @returns {void}
*/
startDrag(event) {
this.dragging = true;
this._moved = false;
this._startX = event.clientX;
this._startY = event.clientY;
this._origX = this.posX;
this._origY = this.posY;
event.currentTarget.setPointerCapture?.(event.pointerId);
},
/**
* 拖动过程中约束按钮不超出视口。
*
* @param {PointerEvent} event 指针事件
* @returns {void}
*/
onDrag(event) {
if (!this.dragging) {
return;
}
const dx = event.clientX - this._startX;
const dy = event.clientY - this._startY;
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
this._moved = true;
}
this.posX = Math.max(4, Math.min(window.innerWidth - 60, this._origX - dx));
this.posY = Math.max(4, Math.min(window.innerHeight - 60, this._origY + dy));
},
/**
* 结束拖动；没有移动时按点击处理并打开面板。
*
* @returns {void}
*/
endDrag() {
if (!this.dragging) {
return;
}
this.dragging = false;
localStorage.setItem(BACCARAT_FAB_STORAGE_KEY, JSON.stringify({
x: this.posX,
y: this.posY,
}));
if (!this._moved) {
this.openPanel();
}
},
/**
* 打开百家乐面板，并恢复当前局倒计时。
*
* @returns {void}
*/
openPanel() {
const panel = document.getElementById("baccarat-panel");
if (!panel || typeof window.Alpine?.$data !== "function") {
return;
}
const panelState = window.Alpine.$data(panel);
panelState.show = true;
panelState.loadCurrentRound();
// 重新打开面板时，如果仍在下注阶段，需要恢复本地倒计时。
if (panelState.phase === "betting" && panelState.countdown > 0 && !panelState.countdownTimer) {
panelState.startCountdown();
}
},
};
}
/**
* 挂载百家乐悬浮按钮全局组件名，兼容 Blade 的 x-data。
*
* @returns {void}
*/
export function bindBaccaratFabControls() {
if (typeof window === "undefined") {
return;
}
window.baccaratFab = baccaratFab;
}
resources/views/chat/partials/games/baccarat-panel.blade.php
+1 -62
View File
@@ -333,68 +333,7 @@
<script>
/**
* 百家乐骨骰悬浮按钮 Alpine 组件（拖动 + localStorage 位置持久化）
*/
function baccaratFab() {
const STORAGE_KEY = 'baccarat_fab_pos';
const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
return {
visible: false,
posX: saved?.x ?? 18,
posY: saved?.y ?? 90,
dragging: false,
_startX: 0,
_startY: 0,
_origX: 0,
_origY: 0,
_moved: false,
startDrag(e) {
this.dragging = true;
this._moved = false;
this._startX = e.clientX;
this._startY = e.clientY;
this._origX = this.posX;
this._origY = this.posY;
e.currentTarget.setPointerCapture?.(e.pointerId);
},
onDrag(e) {
if (!this.dragging) return;
const dx = e.clientX - this._startX;
const dy = e.clientY - this._startY;
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) this._moved = true;
this.posX = Math.max(4, Math.min(window.innerWidth - 60, this._origX - dx));
this.posY = Math.max(4, Math.min(window.innerHeight - 60, this._origY + dy));
},
endDrag(e) {
if (!this.dragging) return;
this.dragging = false;
localStorage.setItem(STORAGE_KEY, JSON.stringify({
x: this.posX,
y: this.posY
}));
if (!this._moved) this.openPanel();
},
openPanel() {
const panel = document.getElementById('baccarat-panel');
if (!panel) {
return;
}
const p = Alpine.$data(panel);
p.show = true;
p.loadCurrentRound();
if (p.phase === 'betting' && p.countdown > 0 && !p.countdownTimer) {
p.startCountdown();
}
},
};
}
</script>
{{-- 乐彩百家乐悬浮按钮脚本已迁移到 resources/js/chat-room/baccarat-fab.js --}}
<style>
@keyframes spin {