LINXIVERSE
/
prototype-design


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等待房间 - 玩家 - LineFunQueue</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="../css/custom.css">
    <style>
        .app-content {
            padding-bottom: 60px; /* 为底部导航栏留出空间 */
        }
        
        .share-btn {
            position: relative;
        }
        
        .share-options {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 8px 0;
            z-index: 100;
        }
        
        .share-option {
            padding: 8px 16px;
            display: flex;
            align-items: center;
        }
        
        .share-option i {
            width: 24px;
            margin-right: 8px;
            text-align: center;
        }
        
        .share-option:hover {
            background-color: #f3f4f6;
        }
        
        .user-status.ready {
            color: var(--color-primary);
        }
        
        .user-status.not-ready {
            color: #9ca3af;
        }
        
        .host-badge {
            background-color: #FFA000;
            color: white;
        }
        
        .player-badge {
            background-color: #0EA5E9;
            color: white;
        }
    </style>
</head>
<body>
    <div class="iphone-frame">
        <!-- 引入状态栏 -->
        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
        
        <!-- 导航栏 -->
        <div class="app-navbar">
            <div class="left-button" onclick="history.back()">
                <i class="fas fa-chevron-left mr-1"></i> 返回
            </div>
            <div class="title" id="roomName">欢乐海龟汤</div>
            <div class="right-button">
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="app-content bg-white">
            <!-- 房间状态 -->
            <div class="bg-sky-100 p-3 text-center">
                <div class="text-sky-700 font-medium">等待开始...</div>
                <div class="text-xs text-sky-600 mt-1"><span id="playerCount">3</span>/10人已加入，等待主持人开始游戏</div>
            </div>
            
            <!-- 房间信息和分享 -->
            <div class="p-3 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="font-bold text-lg mr-2" id="roomCode">ABC123</div>
                        <button id="copyBtn" class="text-xs text-gray-500 border border-gray-300 rounded px-1.5 py-0.5 flex items-center">
                            <i class="far fa-copy mr-1"></i> 复制
                        </button>
                    </div>
                    <div class="share-btn relative">
                        <button id="shareBtn" class="bg-sky-100 text-sky-700 py-1 px-3 rounded-full text-sm flex items-center">
                            <i class="fas fa-share-alt mr-1"></i> 邀请好友
                        </button>
                        <div class="share-options" id="shareOptions">
                            <div class="share-option">
                                <i class="fab fa-weixin text-green-500"></i>
                                <span>微信好友</span>
                            </div>
                            <div class="share-option">
                                <i class="fab fa-qq text-blue-500"></i>
                                <span>QQ好友</span>
                            </div>
                            <div class="share-option">
                                <i class="fas fa-comment text-yellow-500"></i>
                                <span>短信</span>
                            </div>
                            <div class="share-option">
                                <i class="fas fa-link text-gray-500"></i>
                                <span>复制链接</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 游戏信息 -->
            <div class="p-3 flex items-center border-b border-gray-200">
                <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
                </div>
                <div>
                    <h3 class="font-medium">海龟汤</h3>
                    <div class="text-xs text-gray-500">
                        <span>预计游戏时长: 30分钟</span>
                    </div>
                </div>
            </div>
            
            <!-- 玩家列表 -->
            <div class="p-3">
                <h3 class="font-medium mb-2">玩家 (<span id="currentPlayers">3</span>/<span id="maxPlayers">10</span>)</h3>
                
                <div class="space-y-2">
                    <!-- 主持人 -->
                    <div class="flex items-center p-2 bg-amber-50 rounded-lg">
                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
                        </div>
                        <div class="flex-1">
                            <div class="font-medium flex items-center">
                                小明
                                <span class="ml-2 text-xs host-badge px-1.5 py-0.5 rounded-full">主持人</span>
                            </div>
                            <div class="text-xs text-amber-600 user-status ready">准备中...</div>
                        </div>
                    </div>
                    
                    <!-- 玩家1 -->
                    <div class="flex items-center p-2 bg-gray-50 rounded-lg">
                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">小红</div>
                            <div class="text-xs user-status ready">
                                <i class="fas fa-check-circle mr-1"></i> 已准备
                            </div>
                        </div>
                    </div>
                    
                    <!-- 玩家2 (我) -->
                    <div id="player-view" class="flex items-center p-2 bg-sky-50 rounded-lg border border-sky-200">
                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-sky-500">
                            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
                        </div>
                        <div class="flex-1">
                            <div class="font-medium flex items-center">
                                我
                                <span class="ml-2 text-xs player-badge px-1.5 py-0.5 rounded-full">我</span>
                            </div>
                            <div class="text-xs user-status not-ready" id="myStatus">
                                <i class="fas fa-clock mr-1"></i> 等待准备
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 游戏说明 -->
            <div class="p-3 bg-gray-50 mb-3">
                <h3 class="font-medium mb-2 text-sm">游戏说明</h3>
                <p class="text-xs text-gray-700">
                    海龟汤是一种解谜类游戏，游戏开始时，主持人会给出一个离奇古怪的情境（汤面），玩家需要通过提问获取更多线索，最终解开谜题找出真相（汤底）。
                </p>
            </div>
            
            <!-- 玩家视图的按钮 -->
            <div id="player-controls" class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
                <button id="readyBtn" class="app-button primary w-full flex justify-center items-center">
                    <i class="fas fa-check-circle mr-1"></i> 我已准备
                </button>
            </div>
        </div>
        
        <!-- 引入底部导航栏 -->
        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
    </div>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // 检查是否为玩家
            const currentRoom = JSON.parse(localStorage.getItem('currentRoom') || '{}');
            if (currentRoom.isHost) {
                // 如果是主持人，跳转到主持人等待页面
                window.location.href = 'room-waiting.html';
                return;
            }
            
            // 填充房间信息
            document.getElementById('roomName').textContent = currentRoom.name || '欢乐海龟汤';
            document.getElementById('roomCode').textContent = currentRoom.id || 'ABC123';
            document.getElementById('playerCount').textContent = currentRoom.currentPlayers || 3;
            document.getElementById('currentPlayers').textContent = currentRoom.currentPlayers || 3;
            document.getElementById('maxPlayers').textContent = currentRoom.maxPlayers || 10;
            
            // 分享按钮功能
            const shareBtn = document.getElementById('shareBtn');
            const shareOptions = document.getElementById('shareOptions');
            
            shareBtn.addEventListener('click', function() {
                if (shareOptions.style.display === 'block') {
                    shareOptions.style.display = 'none';
                } else {
                    shareOptions.style.display = 'block';
                }
            });
            
            // 点击其他地方关闭分享选项
            document.addEventListener('click', function(e) {
                if (!shareBtn.contains(e.target) && !shareOptions.contains(e.target)) {
                    shareOptions.style.display = 'none';
                }
            });
            
            // 复制房间码功能
            const copyBtn = document.getElementById('copyBtn');
            copyBtn.addEventListener('click', function() {
                const roomCode = document.getElementById('roomCode').textContent;
                navigator.clipboard.writeText(roomCode).then(function() {
                    copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> 已复制';
                    setTimeout(function() {
                        copyBtn.innerHTML = '<i class="far fa-copy mr-1"></i> 复制';
                    }, 2000);
                });
            });
            
            // 准备按钮功能
            const readyBtn = document.getElementById('readyBtn');
            const myStatus = document.getElementById('myStatus');
            let isReady = false;
            
            readyBtn.addEventListener('click', function() {
                isReady = !isReady;
                
                if (isReady) {
                    // 已准备状态
                    myStatus.classList.remove('not-ready');
                    myStatus.classList.add('ready');
                    myStatus.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 已准备';
                    readyBtn.innerHTML = '<i class="fas fa-times-circle mr-1"></i> 取消准备';
                    readyBtn.classList.remove('primary');
                    readyBtn.classList.add('secondary');
                } else {
                    // 未准备状态
                    myStatus.classList.remove('ready');
                    myStatus.classList.add('not-ready');
                    myStatus.innerHTML = '<i class="fas fa-clock mr-1"></i> 等待准备';
                    readyBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 我已准备';
                    readyBtn.classList.remove('secondary');
                    readyBtn.classList.add('primary');
                }
                
                // 保存准备状态（模拟）
                currentRoom.isReady = isReady;
                localStorage.setItem('currentRoom', JSON.stringify(currentRoom));
            });
        });
    </script>
</body>
</html>