Add new chat effects and shop items

This commit is contained in:
2026-04-12 16:48:58 +08:00
parent 33a3e5d118
commit 70cb170f2c
25 changed files with 1707 additions and 60 deletions
@@ -140,8 +140,9 @@ $welcomeMessages = [
特效
</button>
<div id="effect-menu"
style="display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:10020;min-width:186px;padding:8px;background:#fff7ed;border:1px solid #fdba74;border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.18);">
<div style="font-size:11px;font-weight:bold;color:#9a3412;padding:0 2px 6px;">选择要播放的特效</div>
style="display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:10020;min-width:228px;max-width:min(76vw,260px);max-height:min(58vh,420px);overflow-y:auto;padding:10px;background:#fff7ed;border:1px solid #fdba74;border-radius:10px;box-shadow:0 10px 24px rgba(15,23,42,.18);">
<div style="font-size:11px;font-weight:bold;color:#9a3412;padding:0 2px 8px;">选择要播放的特效</div>
<div style="font-size:10px;color:#c2410c;padding:0 2px 6px;">经典特效</div>
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;">
<button type="button" onclick="selectEffect('fireworks')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#ea580c;border:1px solid #fdba74;border-radius:6px;cursor:pointer;">🎆 烟花</button>
@@ -152,6 +153,21 @@ $welcomeMessages = [
<button type="button" onclick="selectEffect('snow')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#0891b2;border:1px solid #bae6fd;border-radius:6px;cursor:pointer;">❄️ 下雪</button>
</div>
<div style="font-size:10px;color:#c2410c;padding:10px 2px 6px;">新增氛围特效</div>
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;">
<button type="button" onclick="selectEffect('sakura')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#db2777;border:1px solid #f9a8d4;border-radius:6px;cursor:pointer;">🌸 樱花飘落</button>
<button type="button" onclick="selectEffect('meteors')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#2563eb;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;">🌠 流星</button>
<button type="button" onclick="selectEffect('gold-rain')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#ca8a04;border:1px solid #fde68a;border-radius:6px;cursor:pointer;">🪙 金币雨</button>
<button type="button" onclick="selectEffect('hearts')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#e11d48;border:1px solid #fda4af;border-radius:6px;cursor:pointer;">💖 爱心飘落</button>
<button type="button" onclick="selectEffect('confetti')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#7c3aed;border:1px solid #ddd6fe;border-radius:6px;cursor:pointer;">🎊 彩带庆典</button>
<button type="button" onclick="selectEffect('fireflies')"
style="font-size:11px;padding:6px 8px;background:#fff;color:#15803d;border:1px solid #bbf7d0;border-radius:6px;cursor:pointer;"> 萤火虫</button>
</div>
</div>
</div>
@endif
@@ -1152,7 +1152,13 @@ async function generateWechatBindCode() {
fireworks: '🎆',
rain: '🌧',
lightning: '⚡',
snow: '❄️'
snow: '❄️',
sakura: '🌸',
meteors: '🌠',
'gold-rain': '🪙',
hearts: '💖',
confetti: '🎊',
fireflies: '✨'
};
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
badge.style.display = 'inline-block';
@@ -1277,7 +1277,7 @@
}
document.addEventListener('DOMContentLoaded', setupGomokuInviteListener);
// ── 全屏特效事件监听(烟花/下雨/雷电/下雪)─────────
// ── 全屏特效事件监听(管理员菜单 / 会员进出场通用)─────────
window.addEventListener('chat:effect', (e) => {
const type = e.detail?.type;
const target = e.detail?.target_username; // null = 全员,otherwise 指定昵称
@@ -1294,7 +1294,7 @@
/**
* 管理员点击特效按钮,向后端 POST /command/effect
*
* @param {string} type 特效类型:fireworks / rain / lightning
* @param {string} type 特效类型:fireworks / rain / lightning / snow / sakura / meteors / gold-rain / hearts / confetti / fireflies
*/
function triggerEffect(type) {
const roomId = window.chatContext?.roomId;
@@ -312,7 +312,13 @@
fireworks: '🎆',
rain: '🌧',
lightning: '⚡',
snow: '❄️'
snow: '❄️',
sakura: '🌸',
meteors: '🌠',
'gold-rain': '🪙',
hearts: '💖',
confetti: '🎊',
fireflies: '✨'
};
badge.textContent = (icons[data.active_week_effect] ?? '') + ' 周卡生效中';
badge.style.display = 'inline-block';