382 lines
24 KiB
PHP
382 lines
24 KiB
PHP
{{--
|
|
文件功能：百家乐前台弹窗组件
|
|
|
|
聊天室内百家乐游戏面板：
|
|
- 监听 WebSocket baccarat.opened 事件触发弹窗
|
|
- 倒计时下注（大/小/豹子）
|
|
- 监听 baccarat.settled 展示骰子动画 + 结果 + 个人赔付
|
|
- 展示近10局历史趋势
|
|
--}}
|
|
|
|
{{-- 百家乐主面板 --}}
|
|
<div id="baccarat-panel"
|
|
x-data="baccaratPanel()"
|
|
x-show="show"
|
|
x-cloak
|
|
data-baccarat-current-url="{{ route('baccarat.current') }}"
|
|
data-baccarat-bet-url="{{ route('baccarat.bet') }}"
|
|
data-baccarat-history-url="{{ route('baccarat.history') }}">
|
|
<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"
|
|
@click.self="close()"
|
|
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>
|
|
|
|
|
|
|
|
{{-- 乐彩百家乐悬浮按钮脚本已迁移到 resources/js/chat-room/baccarat-fab.js --}}
|
|
|
|
<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>
|
|
|
|
|
|
{{-- 乐彩百家乐主面板脚本已迁移到 resources/js/chat-room/baccarat-panel.js --}}
|