863 lines
42 KiB
PHP
863 lines
42 KiB
PHP
{{--
|
|
文件功能：百家乐前台弹窗组件
|
|
|
|
聊天室内百家乐游戏面板：
|
|
- 监听 WebSocket baccarat.opened 事件触发弹窗
|
|
- 倒计时下注（大/小/豹子）
|
|
- 监听 baccarat.settled 展示骰子动画 + 结果 + 个人赔付
|
|
- 展示近10局历史趋势
|
|
--}}
|
|
|
|
{{-- 百家乐主面板 --}}
|
|
<div id="baccarat-panel" x-data="baccaratPanel()" x-show="show" x-cloak>
|
|
<div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
|
|
style="position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9940;
|
|
display:flex; align-items:center; justify-content:center;">
|
|
|
|
<div
|
|
style="width:460px; max-width:96vw; border-radius:8px; overflow:hidden;
|
|
box-shadow:0 8px 32px rgba(0,0,0,.3); font-family:'Microsoft YaHei',SimSun,sans-serif; background:#fff;">
|
|
|
|
{{-- ─── 顶部标题 ─── --}}
|
|
<div
|
|
style="background:linear-gradient(135deg,#336699,#5a8fc0); padding:10px 16px;
|
|
display:flex; align-items:center; justify-content:space-between;">
|
|
<div style="flex: 1;">
|
|
<div style="color:#fff; font-weight:bold; font-size:14px;">🎲 百家乐</div>
|
|
<div style="color:rgba(255,255,255,.75); font-size:11px; margin-top:1px;">
|
|
<span x-show="roundId">第 <span x-text="'#' + roundId"></span> 局</span>
|
|
<span x-show="!roundId" style="display:none;">等待开局中</span>
|
|
</div>
|
|
</div>
|
|
{{-- 金币余额 --}}
|
|
<div
|
|
style="font-size:12px; color:#d0e8ff; display:flex; align-items:center; gap:3px; margin-right: 12px;
|
|
background:rgba(0,0,0,.2); padding:2px 8px; border-radius:10px;">
|
|
💰 <strong style="color:#ffe082; font-size:13px;" x-text="Number(window.chatContext?.userJjb || 0).toLocaleString()">--</strong> 金币
|
|
</div>
|
|
{{-- 倒计时 --}}
|
|
<div x-show="phase === 'betting'" style="text-align:center;">
|
|
<div style="color:#fbbf24; font-size:28px; font-weight:900; line-height:1;" x-text="countdown">
|
|
</div>
|
|
<div style="color:rgba(255,255,255,.7); font-size:11px;">秒后截止</div>
|
|
</div>
|
|
{{-- 骰子结果 --}}
|
|
<div x-show="phase === 'settled'" style="display:none; text-align:center;">
|
|
<div style="font-size:24px;" x-text="diceEmoji"></div>
|
|
<div style="color:#fbbf24; font-size:12px; font-weight:bold; margin-top:2px;" x-text="resultLabel">
|
|
</div>
|
|
</div>
|
|
<div x-show="phase === 'idle'" style="display:none; text-align:center;">
|
|
<div style="color:#dbeafe; font-size:11px; letter-spacing:3px;">未开始</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 进度条 --}}
|
|
<div x-show="phase === 'betting'" style="height:3px; background:rgba(255,255,255,.2);">
|
|
<div style="height:100%; background:#fbbf24; transition:width 1s linear;"
|
|
:style="'width:' + Math.max(0, (countdown / totalSeconds * 100)) + '%'"></div>
|
|
</div>
|
|
|
|
{{-- ─── 历史趋势 ─── --}}
|
|
<div
|
|
style="background:#f0f6ff; padding:7px 14px; display:flex; gap:5px; align-items:center;
|
|
flex-wrap:wrap; border-bottom:1px solid #d0e4f5;">
|
|
<span style="color:#99b0cc; font-size:11px; margin-right:2px;">近期</span>
|
|
<template x-for="h in history" :key="h.id">
|
|
<span
|
|
style="width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:bold;
|
|
display:flex; align-items:center; justify-content:center; color:#fff;"
|
|
:style="h.result === 'big' ? 'background:#1d4ed8' :
|
|
h.result === 'small' ? 'background:#d97706' :
|
|
h.result === 'triple' ? 'background:#7c3aed' :
|
|
'background:#94a3b8'"
|
|
:title="'#' + h.id + ' ' + (h.result === 'big' ? '大' : h.result === 'small' ? '小' : h
|
|
.result === 'triple' ? '豹' : '☠')"
|
|
x-text="h.result === 'big' ? '大' : h.result === 'small' ? '小' : h.result === 'triple' ? '豹' : '☠'">
|
|
</span>
|
|
</template>
|
|
<span x-show="history.length === 0" style="color:#b0c4d8; font-size:11px;">暂无记录</span>
|
|
</div>
|
|
|
|
{{-- ─── 主体内容（白底） ─── --}}
|
|
<div style="background:#fff; padding:14px 16px;">
|
|
|
|
{{-- 未开局状态 --}}
|
|
<div x-show="phase === 'idle'" style="display:none; text-align:center; padding:34px 12px 28px;">
|
|
<div
|
|
style="width:74px; height:74px; margin:0 auto 16px; border-radius:22px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
background:linear-gradient(145deg,#eff6ff,#dbeafe);
|
|
border:1px solid #bfdbfe; box-shadow:0 10px 24px rgba(59,130,246,.16);">
|
|
<span style="font-size:34px;">🎲</span>
|
|
</div>
|
|
<div style="color:#1e3a5f; font-size:20px; font-weight:900; letter-spacing:1px;">游戏还没开启</div>
|
|
<div style="color:#7b93ad; font-size:13px; line-height:1.7; margin-top:10px;">
|
|
当前暂无进行中的百家乐局次
|
|
<br>
|
|
请等待系统开局后再来下注
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 押注阶段 --}}
|
|
<div x-show="phase === 'betting'">
|
|
|
|
{{-- 已下注后显示押注人数统计（未下注时隐藏，以免和下方按钮重复） --}}
|
|
<div x-show="myBet">
|
|
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
|
|
<div style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:12px 8px; text-align:center;">
|
|
<div style="color:#1d4ed8; font-size:13px; font-weight:bold;">
|
|
押大
|
|
<span x-text="'👤 ' + betCountBig" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
|
|
</div>
|
|
</div>
|
|
<div style="background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:12px 8px; text-align:center;">
|
|
<div style="color:#d97706; font-size:13px; font-weight:bold;">
|
|
押小
|
|
<span x-text="'👤 ' + betCountSmall" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
|
|
</div>
|
|
</div>
|
|
<div style="background:#f5f3ff; border:1px solid #ddd6fe; border-radius:8px; padding:12px 8px; text-align:center;">
|
|
<div style="color:#7c3aed; font-size:13px; font-weight:bold;">
|
|
押豹子
|
|
<span x-text="'👤 ' + betCountTriple" style="font-size:12px; font-weight:normal; opacity:0.85; margin-left:4px;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 已下注状态 --}}
|
|
<div x-show="myBet">
|
|
<div
|
|
style="background:#f0fdf4; border:1px solid #86efac; border-radius:10px;
|
|
padding:10px 14px; text-align:center; margin-bottom:10px;">
|
|
<div style="color:#16a34a; font-weight:bold; font-size:13px;">
|
|
✅ 已押注「<span x-text="betTypeLabel(myBetType)"></span>」
|
|
<span x-text="Number(myBetAmount).toLocaleString()"></span> 金币
|
|
</div>
|
|
<div style="color:#86a896; font-size:11px; margin-top:3px;">等待开奖中…</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 下注表单 --}}
|
|
<div x-show="!myBet">
|
|
{{-- 押注选项 --}}
|
|
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px;">
|
|
{{-- 大 --}}
|
|
<button x-on:click="selectedType='big'"
|
|
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
|
:style="selectedType === 'big'
|
|
?
|
|
'border:2px solid #1d4ed8; background:#1d4ed8; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(29,78,216,.3);' :
|
|
'border:2px solid #bfdbfe; background:#eff6ff; color:#1d4ed8;'">
|
|
<div style="font-size:22px;">🔵</div>
|
|
<div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
|
|
<span>大</span>
|
|
<span x-show="betCountBig > 0" x-text="'👤 ' + betCountBig" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
|
|
</div>
|
|
<div style="font-size:10px; margin-top:2px; opacity:.75;">11~17点 • 1:1</div>
|
|
</button>
|
|
{{-- 小 --}}
|
|
<button x-on:click="selectedType='small'"
|
|
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
|
:style="selectedType === 'small'
|
|
?
|
|
'border:2px solid #d97706; background:#d97706; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(217,119,6,.3);' :
|
|
'border:2px solid #fde68a; background:#fffbeb; color:#b45309;'">
|
|
<div style="font-size:22px;">🟡</div>
|
|
<div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
|
|
<span>小</span>
|
|
<span x-show="betCountSmall > 0" x-text="'👤 ' + betCountSmall" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
|
|
</div>
|
|
<div style="font-size:10px; margin-top:2px; opacity:.75;">4~10点 • 1:1</div>
|
|
</button>
|
|
{{-- 豹子 --}}
|
|
<button x-on:click="selectedType='triple'"
|
|
style="border-radius:10px; padding:12px 0; cursor:pointer; transition:all .15s; font-weight:bold; font-family:inherit;"
|
|
:style="selectedType === 'triple'
|
|
?
|
|
'border:2px solid #7c3aed; background:#7c3aed; color:#fff; transform:scale(1.05); box-shadow:0 4px 14px rgba(124,58,237,.3);' :
|
|
'border:2px solid #ddd6fe; background:#f5f3ff; color:#7c3aed;'">
|
|
<div style="font-size:22px;">💥</div>
|
|
<div style="font-size:13px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:4px;">
|
|
<span>豹子</span>
|
|
<span x-show="betCountTriple > 0" x-text="'👤 ' + betCountTriple" style="font-size:11px; opacity:0.85; font-weight:normal;"></span>
|
|
</div>
|
|
<div style="font-size:10px; margin-top:2px; opacity:.75;">三同 • 1:24</div>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 快捷金额 --}}
|
|
<div style="display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px;">
|
|
<template x-for="preset in quickBetAmounts" :key="preset">
|
|
<button x-on:click="betAmount = preset"
|
|
style="border-radius:20px; padding:8px 2px; font-size:13px; font-weight:bold;
|
|
cursor:pointer; transition:all .15s; font-family:inherit; text-align:center;"
|
|
:style="betAmount === preset ?
|
|
'background:#336699; color:#fff; border:none; box-shadow:0 3px 10px rgba(51,102,153,.35); transform:translateY(-1px);' :
|
|
'background:#fff; color:#336699; border:1.5px solid #c0d8ef;'"
|
|
x-text="preset >= 10000 ? (preset/1000)+'k' : (preset >= 1000 ? (preset/1000)+'k' : preset)">
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
{{-- 自定义金额 (带有 id 和 name 防止 Bitwarden 等密码管理插件检索 DOM 时因属性为 null 报错) --}}
|
|
<input type="number" id="baccarat-bet-amount" name="bet_amount" x-model.number="betAmount" min="100" placeholder="自定义金额"
|
|
autocomplete="off" data-bwignore="true" data-lpignore="true" data-1p-ignore="true"
|
|
style="width:100%; background:#f6faff; border:1.5px solid #d0e4f5;
|
|
border-radius:8px; padding:8px 12px; color:#225588; font-size:13px;
|
|
box-sizing:border-box; margin-bottom:10px;"
|
|
x-on:focus="$event.target.select()">
|
|
|
|
{{-- 下注按钮 --}}
|
|
<button x-on:click="submitBet()" :disabled="!roundId || !selectedType || betAmount < 100 || submitting"
|
|
:style="(!roundId || !selectedType || betAmount < 100 || submitting) ?
|
|
'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:not-allowed; transition:all .2s; background:#e0e8f0; color:#99a8b8; box-shadow:none; font-family:inherit;' :
|
|
'display:block; width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:pointer; transition:all .2s; background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff; box-shadow:0 4px 14px rgba(51,102,153,.3); font-family:inherit;'">
|
|
<span
|
|
x-text="!roundId ? '尚未开局' : (submitting ? '提交中…' : (!selectedType ? '请先选择大/小/豹子' : '🎲 押注「' + betTypeLabel(selectedType) + '」 ' + Number(betAmount).toLocaleString() + ' 金币'))"></span>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- 规则提示 --}}
|
|
<div style="margin-top:10px; color:#99b0cc; font-size:10px; text-align:center;">
|
|
☠️ 3点或18点为庄家收割，全灭无退款。豹子优先于大小判断。
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 等待开奖阶段 --}}
|
|
<div x-show="phase === 'waiting'" style="display:none; text-align:center; padding:20px 0;">
|
|
<div style="font-size:44px; animation:spin 1s linear infinite; display:inline-block;">🎲</div>
|
|
<div style="color:#5a8fc0; margin-top:10px; font-weight:bold;">正在摇骰子…</div>
|
|
</div>
|
|
|
|
{{-- 结算阶段 --}}
|
|
<div x-show="phase === 'settled'" style="display:none;">
|
|
|
|
{{-- 骰子展示 --}}
|
|
<div style="display:flex; justify-content:center; gap:10px; margin-bottom:16px;">
|
|
<template x-for="(d, i) in settledDice" :key="i">
|
|
<div style="width:56px; height:56px; border-radius:12px; font-weight:900;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-size:26px; animation:dice-pop .4s ease-out both;
|
|
color:#1e3a5f; background:linear-gradient(145deg,#ffffff,#e8f0fb);
|
|
border:1.5px solid #d0e4f5; box-shadow:0 4px 14px rgba(51,102,153,.12);"
|
|
:style="'animation-delay:' + (i * 0.18) + 's'" x-text="d">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
{{-- 结果标签 --}}
|
|
<div style="text-align:center; margin-bottom:14px;">
|
|
<div style="font-size:24px; font-weight:900; letter-spacing:2px;"
|
|
:style="settledResult === 'big' ? 'color:#1d4ed8' :
|
|
settledResult === 'small' ? 'color:#d97706' :
|
|
settledResult === 'triple' ? 'color:#7c3aed' :
|
|
settledResult === 'kill' ? 'color:#dc2626' : 'color:#336699'"
|
|
x-text="resultLabel"></div>
|
|
<div style="color:#99b0cc; font-size:12px; margin-top:4px;"
|
|
x-text="'骰子总点数：' + settledTotal + ' 点'"></div>
|
|
</div>
|
|
|
|
{{-- 个人结果卡片 --}}
|
|
<div x-show="myBet">
|
|
{{-- 中奖 --}}
|
|
<div x-show="myWon"
|
|
style="border-radius:12px; overflow:hidden; margin-bottom:4px;
|
|
background:#f0fdf4; border:1px solid #86efac;">
|
|
<div style="padding:14px 16px; text-align:center;">
|
|
<div style="font-size:32px; margin-bottom:4px;">🎉</div>
|
|
<div style="color:#16a34a; font-size:18px; font-weight:900;">恭喜中奖！</div>
|
|
<div style="color:#15803d; font-size:24px; font-weight:bold; margin:6px 0;"
|
|
x-text="'+' + Number(myPayout).toLocaleString() + ' 💰'"></div>
|
|
<div style="color:#86a896; font-size:11px;"
|
|
x-text="'押「' + betTypeLabel(myBetType) + '」' + Number(myBetAmount).toLocaleString() + ' 金币 → 赢得 ' + Number(myPayout).toLocaleString() + ' 金币'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 未中奖 --}}
|
|
<div x-show="!myWon"
|
|
style="border-radius:12px; overflow:hidden; margin-bottom:4px;
|
|
background:#fff5f5; border:1px solid #fecaca;">
|
|
<div style="padding:14px 16px; text-align:center;">
|
|
<div style="font-size:28px; margin-bottom:4px;">😔</div>
|
|
<div style="color:#dc2626; font-size:16px; font-weight:bold; margin-bottom:8px;">本局未中奖
|
|
</div>
|
|
<div
|
|
style="display:inline-flex; align-items:center; gap:8px;
|
|
background:#fef2f2; border-radius:20px; padding:5px 14px; border:1px solid #fecaca;">
|
|
<span style="color:#64748b; font-size:12px;">你押了</span>
|
|
<span style="font-weight:bold; font-size:13px; color:#d97706;"
|
|
x-text="betTypeLabel(myBetType)"></span>
|
|
<span style="color:#d0d5db; font-size:11px;">·</span>
|
|
<span style="color:#64748b; font-size:12px;">开了</span>
|
|
<span style="font-weight:bold; font-size:13px;"
|
|
:style="settledResult === 'big' ? 'color:#1d4ed8' :
|
|
settledResult === 'small' ? 'color:#d97706' :
|
|
settledResult === 'triple' ? 'color:#7c3aed' : 'color:#dc2626'"
|
|
x-text="resultLabel"></span>
|
|
</div>
|
|
<div style="color:#94a3b8; font-size:11px; margin-top:8px;"
|
|
x-text="'损失 ' + Number(myBetAmount).toLocaleString() + ' 金币'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 未下注但看结果 --}}
|
|
<div x-show="!myBet" style="text-align:center; color:#99b0cc; font-size:12px; padding:8px 0;">
|
|
本局未参与下注
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 底部关闭 --}}
|
|
<div
|
|
style="background:#fff; border-top:1px solid #d0e4f5; padding:12px 16px; display:flex; flex-direction:column; align-items:center; gap:6px;">
|
|
<button x-on:click="close()"
|
|
style="padding:10px 48px; min-width:140px; background:#f0f6ff; border:1px solid #b0d0ee; border-radius:12px;
|
|
font-size:14px; font-weight:bold; color:#336699; cursor:pointer; transition:all .15s; font-family:inherit;"
|
|
onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">
|
|
关闭
|
|
</button>
|
|
{{-- 结算后显示自动关闭倒计时 --}}
|
|
<div x-show="phase === 'settled' && autoCloseCountdown > 0" style="display:none;
|
|
color:#b0c4d8; font-size:11px;" x-text="autoCloseCountdown + ' 秒后自动关闭'"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
<style>
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes dice-pop {
|
|
0% {
|
|
transform: scale(0) rotate(-20deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1.15) rotate(5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-fab {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 4px 20px rgba(51, 102, 153, .4);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 4px 30px rgba(51, 102, 153, .8);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/**
|
|
* 百家乐游戏面板 Alpine 组件
|
|
*/
|
|
function baccaratPanel() {
|
|
return {
|
|
show: false,
|
|
phase: 'idle', // idle | betting | waiting | settled
|
|
|
|
roundId: null,
|
|
totalSeconds: 60,
|
|
countdown: 60,
|
|
countdownTimer: null,
|
|
|
|
// 下注池统计
|
|
totalBetBig: 0,
|
|
totalBetSmall: 0,
|
|
totalBetTriple: 0,
|
|
|
|
// 押注人数统计
|
|
betCountBig: 0,
|
|
betCountSmall: 0,
|
|
betCountTriple: 0,
|
|
|
|
// 本人下注
|
|
myBet: false,
|
|
myBetType: '',
|
|
myBetAmount: 0,
|
|
|
|
// 下注表单
|
|
selectedType: '',
|
|
betAmount: 100,
|
|
minBet: 100,
|
|
maxBet: 50000,
|
|
submitting: false,
|
|
|
|
// 结算结果
|
|
settledDice: [],
|
|
settledTotal: 0,
|
|
settledResult: '',
|
|
resultLabel: '',
|
|
diceEmoji: '',
|
|
myWon: false,
|
|
myPayout: 0,
|
|
|
|
// 历史记录
|
|
history: [],
|
|
|
|
// 结算后定时自动关闭
|
|
autoCloseTimer: null,
|
|
autoCloseCountdown: 0,
|
|
|
|
/**
|
|
* 同步全局聊天上下文中的金币余额，供弹窗右上角与其他面板共用。
|
|
*/
|
|
syncUserGold(jjb) {
|
|
if (jjb === undefined || jjb === null) return;
|
|
if (!window.chatContext) return;
|
|
window.chatContext.userJjb = Number(jjb);
|
|
window.chatContext.myGold = Number(jjb);
|
|
},
|
|
|
|
/**
|
|
* 获取快捷下注金额数组
|
|
*/
|
|
get quickBetAmounts() {
|
|
const min = this.minBet || 100;
|
|
const max = this.maxBet || 50000;
|
|
|
|
// 预设候选倍数，尽量生成美观的数字
|
|
const candidates = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
|
|
let steps = candidates.map(m => min * m).filter(v => v >= min && v < max);
|
|
steps.push(max);
|
|
steps = [...new Set(steps)].sort((a, b) => a - b);
|
|
|
|
if (steps.length >= 5) {
|
|
// 如果候选值足够多，均匀采样，确保首尾是最小值和最大值
|
|
return [
|
|
steps[0],
|
|
steps[Math.floor((steps.length - 1) * 0.25)],
|
|
steps[Math.floor((steps.length - 1) * 0.5)],
|
|
steps[Math.floor((steps.length - 1) * 0.75)],
|
|
steps[steps.length - 1]
|
|
];
|
|
} else {
|
|
// 如果候选值不足5个（范围太小），通过线性插值补齐
|
|
while (steps.length < 5) {
|
|
let maxGap = 0;
|
|
let insertIdx = -1;
|
|
for (let i = 0; i < steps.length - 1; i++) {
|
|
if (steps[i+1] - steps[i] > maxGap) {
|
|
maxGap = steps[i+1] - steps[i];
|
|
insertIdx = i;
|
|
}
|
|
}
|
|
if (insertIdx === -1) break;
|
|
let newVal = Math.floor((steps[insertIdx] + steps[insertIdx+1]) / 2);
|
|
if (newVal > 100) newVal = Math.floor(newVal / 10) * 10; // 简单取整
|
|
steps.splice(insertIdx + 1, 0, newVal);
|
|
}
|
|
return steps;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 从大厅或通知点击打开
|
|
*/
|
|
openFromHall() {
|
|
this.show = true;
|
|
this.loadCurrentRound();
|
|
},
|
|
|
|
/**
|
|
* 自动重置为未开局空状态
|
|
*/
|
|
setIdleState() {
|
|
clearInterval(this.countdownTimer);
|
|
clearInterval(this.autoCloseTimer);
|
|
this.phase = 'idle';
|
|
this.roundId = null;
|
|
this.countdown = 0;
|
|
this.autoCloseCountdown = 0;
|
|
this.totalBetBig = 0;
|
|
this.totalBetSmall = 0;
|
|
this.totalBetTriple = 0;
|
|
this.betCountBig = 0;
|
|
this.betCountSmall = 0;
|
|
this.betCountTriple = 0;
|
|
this.myBet = false;
|
|
this.myBetType = '';
|
|
this.myBetAmount = 0;
|
|
this.selectedType = '';
|
|
this.settledDice = [];
|
|
this.settledTotal = 0;
|
|
this.settledResult = '';
|
|
this.resultLabel = '';
|
|
this.diceEmoji = '';
|
|
this.myWon = false;
|
|
this.myPayout = 0;
|
|
this.updateFab(false);
|
|
},
|
|
|
|
/**
|
|
* 开局：填充局次数据并开始倒计时
|
|
*/
|
|
openRound(data) {
|
|
this.phase = 'betting';
|
|
this.roundId = data.round_id;
|
|
this.countdown = data.bet_seconds || 60;
|
|
this.totalSeconds = this.countdown;
|
|
this.myBet = false;
|
|
this.myBetType = '';
|
|
this.myBetAmount = 0;
|
|
this.settledDice = [];
|
|
this.selectedType = '';
|
|
this.betAmount = 100;
|
|
this.betCountBig = 0;
|
|
this.betCountSmall = 0;
|
|
this.betCountTriple = 0;
|
|
this.show = true;
|
|
|
|
this.loadCurrentRound();
|
|
this.startCountdown();
|
|
this.updateFab(true);
|
|
},
|
|
|
|
/**
|
|
* 从接口获取当前局的状态（我的下注、投注池）
|
|
*/
|
|
async loadCurrentRound() {
|
|
try {
|
|
const res = await fetch('/baccarat/current');
|
|
const data = await res.json();
|
|
// 每次打开或刷新局次信息时，都用服务端最新金币覆盖右上角余额。
|
|
this.syncUserGold(data.jjb);
|
|
if (data.round && (data.round.seconds_left || 0) > 0) {
|
|
this.phase = 'betting';
|
|
this.roundId = data.round.id;
|
|
this.countdown = data.round.seconds_left || this.countdown || 0;
|
|
this.totalBetBig = data.round.total_bet_big;
|
|
this.totalBetSmall = data.round.total_bet_small;
|
|
this.totalBetTriple = data.round.total_bet_triple;
|
|
this.betCountBig = data.round.bet_count_big;
|
|
this.betCountSmall = data.round.bet_count_small;
|
|
this.betCountTriple = data.round.bet_count_triple;
|
|
this.minBet = data.round.min_bet || 100;
|
|
this.maxBet = data.round.max_bet || 50000;
|
|
if (data.round.my_bet) {
|
|
this.myBet = true;
|
|
this.myBetType = data.round.my_bet.bet_type;
|
|
this.myBetAmount = data.round.my_bet.amount;
|
|
} else {
|
|
this.myBet = false;
|
|
this.myBetType = '';
|
|
this.myBetAmount = 0;
|
|
}
|
|
} else {
|
|
this.setIdleState();
|
|
}
|
|
} catch {
|
|
this.setIdleState();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 启动倒计时
|
|
*/
|
|
startCountdown() {
|
|
clearInterval(this.countdownTimer);
|
|
this.countdownTimer = setInterval(() => {
|
|
this.countdown--;
|
|
if (this.countdown <= 0) {
|
|
clearInterval(this.countdownTimer);
|
|
this.phase = 'waiting';
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
/**
|
|
* 提交下注
|
|
*/
|
|
async submitBet() {
|
|
if (!this.roundId || !this.selectedType || this.betAmount < 100 || this.submitting) return;
|
|
this.submitting = true;
|
|
|
|
try {
|
|
const res = await fetch('/baccarat/bet', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content,
|
|
},
|
|
body: JSON.stringify({
|
|
round_id: this.roundId,
|
|
bet_type: this.selectedType,
|
|
amount: this.betAmount,
|
|
}),
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (res.ok && data.ok) {
|
|
this.myBet = true;
|
|
this.myBetType = data.bet_type;
|
|
this.myBetAmount = data.amount;
|
|
} else if (res.status === 422 && data.errors) {
|
|
// 取出第一条 Laravel 验证失败原因
|
|
const firstError = Object.values(data.errors)[0][0];
|
|
window.chatDialog?.alert(firstError, '下注验证失败', '#ef4444');
|
|
} else {
|
|
window.chatDialog?.alert(data.message || '下注失败', '提示', '#ef4444');
|
|
}
|
|
} catch {
|
|
window.chatDialog?.alert('网络异常，请稍后重试。', '错误', '#ef4444');
|
|
}
|
|
|
|
this.submitting = false;
|
|
},
|
|
|
|
/**
|
|
* 显示开奖结果动画
|
|
*/
|
|
showResult(data) {
|
|
clearInterval(this.countdownTimer);
|
|
this.settledDice = data.dice;
|
|
this.settledTotal = data.total_points;
|
|
this.settledResult = data.result;
|
|
this.resultLabel = data.result_label;
|
|
this.phase = 'settled';
|
|
// 只有本局有押注的用户才弹出结算面板
|
|
if (this.myBet) {
|
|
this.show = true;
|
|
}
|
|
|
|
// 判断本人是否中奖（从后端拿到的 result 与我的下注 type 比较）
|
|
if (this.myBet && this.myBetType === data.result && data.result !== 'kill') {
|
|
this.myWon = true;
|
|
// 简单计算前端显示赔付（实际赔付以后端为准）
|
|
const payoutRate = data.result === 'triple' ? 24 : 1;
|
|
this.myPayout = this.myBetAmount * (payoutRate + 1);
|
|
} else {
|
|
this.myWon = false;
|
|
this.myPayout = 0;
|
|
}
|
|
|
|
this.updateFab(false);
|
|
this.loadHistory();
|
|
|
|
// 结算后 10 秒自动关闭
|
|
this.autoCloseCountdown = 10;
|
|
clearInterval(this.autoCloseTimer);
|
|
this.autoCloseTimer = setInterval(() => {
|
|
this.autoCloseCountdown--;
|
|
if (this.autoCloseCountdown <= 0) {
|
|
clearInterval(this.autoCloseTimer);
|
|
this.close();
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
/**
|
|
* 加载历史趋势
|
|
*/
|
|
async loadHistory() {
|
|
try {
|
|
const res = await fetch('/baccarat/history');
|
|
const data = await res.json();
|
|
this.history = (data.history || []).reverse();
|
|
} catch {}
|
|
},
|
|
|
|
/**
|
|
* 更新悬浮按钮显示状态
|
|
*/
|
|
updateFab(visible) {
|
|
const fab = document.getElementById('baccarat-fab');
|
|
if (fab) Alpine.$data(fab).visible = visible;
|
|
},
|
|
|
|
/**
|
|
* 关闭面板
|
|
*/
|
|
close() {
|
|
// 手动关闭时清除自动关闭定时器
|
|
clearInterval(this.autoCloseTimer);
|
|
this.autoCloseCountdown = 0;
|
|
this.show = false;
|
|
if (this.phase === 'betting') {
|
|
this.updateFab(true); // 还在下注阶段时保留悬浮按钮
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 押注类型中文标签
|
|
*/
|
|
betTypeLabel(type) {
|
|
return {
|
|
big: '大',
|
|
small: '小',
|
|
triple: '豹子'
|
|
} [type] || '';
|
|
},
|
|
};
|
|
}
|
|
|
|
// ─── WebSocket 监听 ──────────────────────────────────────────────
|
|
|
|
/** 收到开局事件：弹出押注面板 */
|
|
window.addEventListener('chat:baccarat.opened', (e) => {
|
|
const panel = document.getElementById('baccarat-panel');
|
|
if (panel) Alpine.$data(panel).openRound(e.detail);
|
|
});
|
|
|
|
/** 收到结算事件：展示骰子动画和结果 */
|
|
window.addEventListener('chat:baccarat.settled', (e) => {
|
|
const panel = document.getElementById('baccarat-panel');
|
|
if (panel) Alpine.$data(panel).showResult(e.detail);
|
|
});
|
|
|
|
/** 收到下注池更新：更新押注人数 */
|
|
window.addEventListener('chat:baccarat.pool_updated', (e) => {
|
|
const panel = document.getElementById('baccarat-panel');
|
|
if (panel) {
|
|
const pd = Alpine.$data(panel);
|
|
const data = e.detail;
|
|
// 判断 round_id 是否一致
|
|
if (pd.roundId === data.round_id) {
|
|
pd.betCountBig = data.bet_count_big;
|
|
pd.betCountSmall = data.bet_count_small;
|
|
pd.betCountTriple = data.bet_count_triple;
|
|
}
|
|
}
|
|
});
|
|
|
|
/** 页面加载时：检查是否有进行中的局，有则自动恢复面板 */
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
try {
|
|
// 先加载历史趋势
|
|
const histRes = await fetch('/baccarat/history');
|
|
const histData = await histRes.json();
|
|
const panel = document.getElementById('baccarat-panel');
|
|
if (panel) {
|
|
Alpine.$data(panel).history = (histData.history || []).reverse();
|
|
}
|
|
|
|
// 再检查是否有正在进行的局
|
|
const curRes = await fetch('/baccarat/current');
|
|
const curData = await curRes.json();
|
|
if (panel) {
|
|
Alpine.$data(panel).syncUserGold(curData.jjb);
|
|
}
|
|
|
|
if (curData.round && panel) {
|
|
const round = curData.round;
|
|
const seconds = round.seconds_left || 0;
|
|
const panelData = Alpine.$data(panel);
|
|
|
|
if (seconds > 0) {
|
|
// 有进行中的局且还在押注时间内 → 恢复押注面板
|
|
panelData.phase = 'betting';
|
|
panelData.roundId = round.id;
|
|
panelData.totalSeconds = 60; // 服务端配置的窗口
|
|
panelData.countdown = seconds;
|
|
panelData.totalBetBig = round.total_bet_big;
|
|
panelData.totalBetSmall = round.total_bet_small;
|
|
panelData.totalBetTriple = round.total_bet_triple;
|
|
panelData.betCountBig = round.bet_count_big;
|
|
panelData.betCountSmall = round.bet_count_small;
|
|
panelData.betCountTriple = round.bet_count_triple;
|
|
|
|
if (round.my_bet) {
|
|
panelData.myBet = true;
|
|
panelData.myBetType = round.my_bet.bet_type;
|
|
panelData.myBetAmount = round.my_bet.amount;
|
|
}
|
|
|
|
// 只显示悬浮按钮，不自动弹出全屏（避免打扰刚进入的用户）
|
|
panelData.updateFab(true);
|
|
} else {
|
|
panelData.setIdleState();
|
|
}
|
|
} else if (panel) {
|
|
Alpine.$data(panel).setIdleState();
|
|
}
|
|
} catch (e) {
|
|
console.warn('[百家乐] 初始化失败', e);
|
|
}
|
|
});
|
|
</script>
|