nanocode/happy-games/games/auth.js

/**
 * 游戏登录认证模块 - 所有游戏共用
 */

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 = `
            <div class="auth-overlay-backdrop">
                <div class="auth-overlay-box">
                    <div class="auth-icon">🔒</div>
                    <div class="auth-title">请先登录</div>
                    <div class="auth-subtitle">登录后才能游玩本游戏</div>
                    <button class="auth-btn" onclick="location.href='/'">去登录</button>
                </div>
            </div>
        `;
        
        // 添加样式
        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 = `
            <div class="score-info">
                <span class="score-label">${gameName}积分:</span>
                <span class="score-value" id="game-score-value">--</span>
            </div>
            <div class="user-name" id="game-user-name">--</div>
        `;
        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;
    }
};