LINXIVERSE
/
prototype-design


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="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;
        }
    </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-amber-100 p-3 text-center">
                <div class="text-amber-700 font-medium">等待开始...</div>
                <div class="text-xs text-amber-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-amber-100 text-amber-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 border-b border-gray-200">
                <h3 class="font-medium mb-3">游戏设置</h3>
                
                <!-- 主题选择 -->
                <div class="mb-3">
                    <label class="block text-sm text-gray-700 mb-1">主题选择</label>
                    <div class="space-y-2">
                        <div class="flex items-center p-2 border border-gray-200 rounded-md bg-amber-50 border-amber-200">
                            <input type="radio" name="theme" id="theme1" checked class="w-4 h-4 text-amber-500">
                            <div class="ml-3 flex-1">
                                <div class="text-sm font-medium">经典解谜</div>
                                <div class="text-xs text-gray-500">基础主题 · 免费</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
                            <input type="radio" name="theme" id="theme2" class="w-4 h-4 text-amber-500">
                            <div class="ml-3 flex-1">
                                <div class="text-sm font-medium">环球影城</div>
                                <div class="text-xs text-gray-500">特色主题 · 20元/小时</div>
                            </div>
                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
                            <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">新</div>
                        </div>
                        
                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
                            <input type="radio" name="theme" id="theme3" class="w-4 h-4 text-amber-500">
                            <div class="ml-3 flex-1">
                                <div class="text-sm font-medium">迪士尼奇幻</div>
                                <div class="text-xs text-gray-500">特色主题 · 15元/小时</div>
                            </div>
                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
                        </div>
                        
                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
                            <input type="radio" name="theme" id="theme4" class="w-4 h-4 text-amber-500">
                            <div class="ml-3 flex-1">
                                <div class="text-sm font-medium">奇幻冒险</div>
                                <div class="text-xs text-gray-500">特色主题 · 12元/小时</div>
                            </div>
                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
                        </div>
                    </div>
                </div>
                
                <!-- 游戏难度 -->
                <div class="mb-3">
                    <label class="block text-sm text-gray-700 mb-1">游戏难度</label>
                    <div class="flex space-x-2">
                        <button id="easy" class="flex-1 py-2 bg-amber-500 text-white text-sm rounded-md difficulty-btn">简单</button>
                        <button id="medium" class="flex-1 py-2 bg-gray-200 text-gray-700 text-sm rounded-md difficulty-btn">中等</button>
                        <button id="hard" class="flex-1 py-2 bg-gray-200 text-gray-700 text-sm rounded-md difficulty-btn">困难</button>
                    </div>
                </div>
                
                <!-- 题目选择 -->
                <div class="mb-3">
                    <div class="flex justify-between items-center mb-2">
                        <label class="text-sm text-gray-700">题目选择</label>
                        <button id="randomBtn" class="text-xs bg-amber-100 text-amber-700 py-1 px-2 rounded-md flex items-center">
                            <i class="fas fa-random mr-1"></i> 随机题目
                        </button>
                    </div>
                    
                    <div id="puzzleSelection" class="space-y-2">
                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
                            <input type="radio" name="puzzle" id="puzzle1" checked class="w-4 h-4 text-amber-500">
                            <div class="ml-3">
                                <div class="text-sm font-medium">神秘的手表</div>
                                <div class="text-xs text-gray-500">简单 · 平均用时25分钟</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
                            <input type="radio" name="puzzle" id="puzzle2" class="w-4 h-4 text-amber-500">
                            <div class="ml-3">
                                <div class="text-sm font-medium">迷路的青蛙</div>
                                <div class="text-xs text-gray-500">中等 · 平均用时35分钟</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
                            <input type="radio" name="puzzle" id="puzzle3" class="w-4 h-4 text-amber-500">
                            <div class="ml-3">
                                <div class="text-sm font-medium">消失的邮轮</div>
                                <div class="text-xs text-gray-500">困难 · 平均用时50分钟</div>
                            </div>
                        </div>
                    </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 border border-amber-200">
                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-amber-500">
                            <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 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-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">小王</div>
                            <div class="text-xs user-status not-ready">
                                <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 class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
                <a href="game-turtle-host.html" class="app-button primary w-full flex justify-center items-center">
                    <i class="fas fa-play-circle mr-1"></i> 开始游戏 (<span id="readyCount">1</span>/<span id="totalPlayers">3</span>人已准备)
                </a>
            </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() {
            // 阻止页面跳转，以便预览
            if (window.location.href.indexOf('?nocheck=1') > -1 || window.location.href.indexOf('?t=') > -1) {
                console.log('预览模式，禁止跳转');
                return;
            }
            
            // 检查是否为主持人
            const currentRoom = JSON.parse(localStorage.getItem('currentRoom') || '{}');
            if (!currentRoom.isHost) {
                // 如果不是主持人，跳转到玩家等待页面
                window.location.href = 'room-waiting-player.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;
            document.getElementById('totalPlayers').textContent = currentRoom.currentPlayers || 3;
            
            // 假设第一个玩家已准备，总共三个玩家（包括主持人）
            document.getElementById('readyCount').textContent = 1;
            
            // 分享按钮功能
            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 difficultyBtns = document.querySelectorAll('.difficulty-btn');
            difficultyBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    difficultyBtns.forEach(b => {
                        b.classList.remove('bg-amber-500', 'text-white');
                        b.classList.add('bg-gray-200', 'text-gray-700');
                    });
                    this.classList.remove('bg-gray-200', 'text-gray-700');
                    this.classList.add('bg-amber-500', 'text-white');
                });
            });
            
            // 随机题目按钮功能
            const randomBtn = document.getElementById('randomBtn');
            const puzzleSelection = document.getElementById('puzzleSelection');
            const puzzleRadios = document.querySelectorAll('input[name="puzzle"]');
            
            randomBtn.addEventListener('click', function() {
                // 随机选择一个题目
                const randomIndex = Math.floor(Math.random() * puzzleRadios.length);
                puzzleRadios.forEach((radio, index) => {
                    radio.checked = (index === randomIndex);
                });
                
                // 闪烁显示效果
                puzzleSelection.classList.add('opacity-50');
                setTimeout(() => {
                    puzzleSelection.classList.remove('opacity-50');
                }, 300);
                
                // 选中的题目滚动到可见区域
                const selectedPuzzle = puzzleRadios[randomIndex].closest('.flex');
                if(selectedPuzzle) {
                    selectedPuzzle.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
                
                // 显示随机选择成功提示
                randomBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 已随机选择';
                randomBtn.classList.add('bg-green-100', 'text-green-700');
                randomBtn.classList.remove('bg-amber-100', 'text-amber-700');
                
                setTimeout(() => {
                    randomBtn.innerHTML = '<i class="fas fa-random mr-1"></i> 随机题目';
                    randomBtn.classList.remove('bg-green-100', 'text-green-700');
                    randomBtn.classList.add('bg-amber-100', 'text-amber-700');
                }, 1500);
            });
        });
    </script>
</body>
</html>