/** * 游戏登录认证模块 - 所有游戏共用 */ const GAME_AUTH = { // 检查登录状态 async checkLogin() { try { const response = await fetch('/api/auth/status', { credentials: 'include' }); const data = await response.json(); return data.authenticated ? data.user : null; } catch (error) { return null; } }, // 显示登录遮罩 showLoginRequired() { const overlay = document.createElement('div'); overlay.id = 'login-required-overlay'; overlay.innerHTML = `
🔒
请先登录
登录后才能游玩本游戏
`; // 添加样式 const style = document.createElement('style'); style.textContent = ` .auth-overlay-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 100000; backdrop-filter: blur(10px); } .auth-overlay-box { background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); padding: 40px; border-radius: 16px; text-align: center; max-width: 320px; border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .auth-icon { font-size: 48px; margin-bottom: 16px; } .auth-title { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 8px; } .auth-subtitle { font-size: 14px; color: #888; margin-bottom: 24px; } .auth-btn { padding: 12px 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: opacity 0.2s; } .auth-btn:hover { opacity: 0.9; } /* 分数栏样式 */ .game-score-bar { position: fixed; top: 10px; right: 10px; display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .game-score-bar .score-info { display: flex; align-items: center; gap: 6px; } .game-score-bar .score-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); } .game-score-bar .score-value { font-size: 16px; font-weight: bold; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .game-score-bar .user-name { font-size: 13px; color: rgba(255, 255, 255, 0.8); padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.2); } `; document.head.appendChild(style); document.body.appendChild(overlay); }, // 创建分数栏 createScoreBar(gameId, gameName) { const bar = document.createElement('div'); bar.className = 'game-score-bar'; bar.id = 'game-score-bar'; bar.innerHTML = `
${gameName}积分: --
--
`; document.body.appendChild(bar); // 加载分数 this.loadScore(gameId); this.loadUserInfo(); }, // 加载用户分数 async loadScore(gameId) { try { const response = await fetch(`/api/user/score/${gameId}`, { credentials: 'include' }); if (response.ok) { const data = await response.json(); const el = document.getElementById('game-score-value'); if (el) el.textContent = data.score || 0; } } catch (e) {} }, // 加载用户信息 async loadUserInfo() { try { const response = await fetch('/api/auth/status', { credentials: 'include' }); const data = await response.json(); if (data.authenticated && data.user) { const el = document.getElementById('game-user-name'); if (el) el.textContent = data.user.username; } } catch (e) {} }, // 提交分数 async submitScore(gameId, points) { if (points <= 0) return; try { const response = await fetch('/api/user/score', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ game: gameId, points: points }) }); if (response.ok) { const data = await response.json(); if (data.success) { const el = document.getElementById('game-score-value'); if (el) el.textContent = data.score; } } } catch (e) {} }, // 初始化:检查登录并创建UI async init(gameId, gameName) { const user = await this.checkLogin(); if (!user) { this.showLoginRequired(); return false; } this.createScoreBar(gameId, gameName); return true; } };