|
|
@@ -27,7 +27,7 @@
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
- max-height: 250px;
|
|
|
+ max-height: 120px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
@@ -81,6 +81,105 @@
|
|
|
.solution-header i {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+
|
|
|
+ /* 主题选择组件样式 */
|
|
|
+ .theme-selector-modal {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 50;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-selector-content {
|
|
|
+ background-color: white;
|
|
|
+ width: 91.666667%;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-selector-header {
|
|
|
+ padding: 0.75rem;
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-selector-step {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-selector-step.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0.5rem;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 0.375rem;
|
|
|
+ margin-bottom: 0.75rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-item:hover {
|
|
|
+ border-color: #FFA000;
|
|
|
+ background-color: #FFF8E1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .theme-item.selected {
|
|
|
+ background-color: #FFF8E1;
|
|
|
+ border-color: #FFA000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .difficulty-btn {
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ color: #374151;
|
|
|
+ font-size: 0.875rem;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ border-radius: 0.375rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .difficulty-btn:hover {
|
|
|
+ background-color: #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .difficulty-btn.selected {
|
|
|
+ background-color: #FFA000;
|
|
|
+ color: white;
|
|
|
+ border-color: #FFA000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .puzzle-item {
|
|
|
+ padding: 0.75rem;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 0.375rem;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .puzzle-item:hover {
|
|
|
+ border-color: #FFA000;
|
|
|
+ background-color: #FFF8E1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .puzzle-item.selected {
|
|
|
+ background-color: #FFF8E1;
|
|
|
+ border-color: #FFA000;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="host-theme">
|
|
|
@@ -154,10 +253,11 @@
|
|
|
<p class="text-sm mt-1">这块手表有特殊功能，不是普通手表。</p>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 已揭示线索2 -->
|
|
|
<div class="turtle-soup-clue">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs text-primary font-medium">线索2（已揭示）</span>
|
|
|
- <span class="text-xs text-gray-500">12:08揭示</span>
|
|
|
+ <span class="text-xs text-gray-500">12:10揭示</span>
|
|
|
</div>
|
|
|
<p class="text-sm mt-1">手表可以显示未来将发生的事情。</p>
|
|
|
</div>
|
|
|
@@ -166,94 +266,53 @@
|
|
|
<div class="turtle-soup-clue unrevealed">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs text-gray-500 font-medium">线索3（未揭示）</span>
|
|
|
- <button class="text-xs text-amber-600 font-medium">揭示</button>
|
|
|
+ <button class="text-xs text-amber-600 font-medium reveal-clue-btn">揭示</button>
|
|
|
</div>
|
|
|
<p class="text-sm mt-1 text-gray-400">男人尝试了多种方法阻止预言的实现，但都失败了。</p>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 未揭示线索 -->
|
|
|
<div class="turtle-soup-clue unrevealed">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs text-gray-500 font-medium">线索4（未揭示）</span>
|
|
|
- <button class="text-xs text-amber-600 font-medium">揭示</button>
|
|
|
+ <button class="text-xs text-amber-600 font-medium reveal-clue-btn">揭示</button>
|
|
|
</div>
|
|
|
- <p class="text-sm mt-1 text-gray-400">手表预测的是他的死亡，但没有预测到死亡的具体方式。</p>
|
|
|
+ <p class="text-sm mt-1 text-gray-400">手表预示了他在一周后会死亡。</p>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 未揭示线索 -->
|
|
|
<div class="turtle-soup-clue unrevealed">
|
|
|
<div class="flex justify-between items-center">
|
|
|
<span class="text-xs text-gray-500 font-medium">线索5（未揭示）</span>
|
|
|
- <button class="text-xs text-amber-600 font-medium">揭示</button>
|
|
|
+ <button class="text-xs text-amber-600 font-medium reveal-clue-btn">揭示</button>
|
|
|
</div>
|
|
|
- <p class="text-sm mt-1 text-gray-400">手表的预言总是会实现，但方式可能有所不同。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 问答互动区域 -->
|
|
|
- <div class="p-3 bg-white border-t border-gray-200">
|
|
|
- <h3 class="font-medium mb-3 flex items-center">
|
|
|
- <i class="fas fa-comments text-amber-500 mr-1"></i> 玩家问题
|
|
|
- </h3>
|
|
|
-
|
|
|
- <div class="chat-container flex flex-col">
|
|
|
- <!-- 玩家问题1 -->
|
|
|
- <div class="chat-bubble left">
|
|
|
- <div class="text-xs text-gray-500 mb-1">小红 · 2分钟前</div>
|
|
|
- 手表是有特殊功能的吗？
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 主持人回答1 -->
|
|
|
- <div class="chat-bubble right bg-amber-50 border-amber-200">
|
|
|
- <div class="text-xs text-amber-500 mb-1">我 (主持人) · 2分钟前</div>
|
|
|
- 是的
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 玩家问题2 -->
|
|
|
- <div class="chat-bubble left">
|
|
|
- <div class="text-xs text-gray-500 mb-1">小明 · 1分钟前</div>
|
|
|
- 这块手表能预测未来吗？
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 主持人回答2 -->
|
|
|
- <div class="chat-bubble right bg-amber-50 border-amber-200">
|
|
|
- <div class="text-xs text-amber-500 mb-1">我 (主持人) · 1分钟前</div>
|
|
|
- 是的
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 玩家问题3 -->
|
|
|
- <div class="chat-bubble left">
|
|
|
- <div class="text-xs text-gray-500 mb-1">小红 · 刚刚</div>
|
|
|
- 手表预测了他的死亡？
|
|
|
+ <p class="text-sm mt-1 text-gray-400">男人因无法承受预知自己死亡的恐惧而自杀。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 快速回答按钮 -->
|
|
|
- <div class="flex flex-wrap gap-2 mt-3">
|
|
|
- <button class="bg-amber-100 text-amber-700 text-sm py-1 px-3 rounded-full">是的</button>
|
|
|
- <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">不是</button>
|
|
|
- <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">相关</button>
|
|
|
- <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">不相关</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 回答输入框 -->
|
|
|
- <div class="mt-3 flex">
|
|
|
- <input type="text" class="app-input flex-1" placeholder="输入回答...">
|
|
|
- <button class="bg-amber-500 text-white ml-2 px-3 py-2 rounded-md">
|
|
|
- <i class="fas fa-paper-plane"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 游戏控制按钮 -->
|
|
|
<div class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
|
|
|
- <div class="flex items-center justify-between mb-2">
|
|
|
- <button class="bg-amber-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
|
|
|
- <i class="fas fa-lightbulb mr-1"></i> 揭示线索
|
|
|
- </button>
|
|
|
- <button class="bg-amber-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
|
|
|
+ <div class="flex items-center justify-center mb-2">
|
|
|
+ <button class="bg-amber-500 text-white rounded-md text-sm px-4 py-2 flex items-center" id="endGameBtn">
|
|
|
<i class="fas fa-trophy mr-1"></i> 结束游戏
|
|
|
</button>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 结束游戏后显示的操作区域 -->
|
|
|
+ <div class="bg-green-50 rounded-lg p-3 mb-2 border border-green-200 hidden" id="gameEndedOptions">
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <div class="text-sm font-medium text-green-700">游戏已结束</div>
|
|
|
+ <div class="text-xs text-gray-500">选择下一步操作</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex gap-2">
|
|
|
+ <button class="bg-amber-500 text-white text-xs py-1.5 px-3 rounded-md flex items-center" id="selectNextThemeBtn">
|
|
|
+ <i class="fas fa-redo-alt mr-1"></i> 下一题
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 道具购买区 -->
|
|
|
<div class="bg-blue-50 rounded-lg p-2 mb-2 border border-blue-200">
|
|
|
@@ -267,88 +326,170 @@
|
|
|
<div class="text-xs text-gray-500">解锁多种主题内容</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button class="bg-blue-500 text-white text-xs py-1 px-2 rounded-md" id="openPropsBtn">
|
|
|
+ <button class="bg-blue-500 text-white text-xs py-1 px-2 rounded-md" id="openThemeSelector">
|
|
|
更换主题
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主题选择弹窗组件 -->
|
|
|
+ <div id="themeSelector" class="theme-selector-modal hidden">
|
|
|
+ <div class="theme-selector-content">
|
|
|
+ <div class="theme-selector-header">
|
|
|
+ <h3 class="font-bold theme-selector-title">选择主题</h3>
|
|
|
+ <button id="closeThemeSelector" class="text-gray-500">
|
|
|
+ <i class="fas fa-times"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 道具弹窗 -->
|
|
|
- <div id="propsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
|
|
- <div class="bg-white w-11/12 rounded-lg max-h-[80vh] overflow-y-auto">
|
|
|
- <div class="p-3 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white">
|
|
|
- <h3 class="font-bold">游戏主题</h3>
|
|
|
- <button id="closePropsBtn" class="text-gray-500">
|
|
|
- <i class="fas fa-times"></i>
|
|
|
- </button>
|
|
|
+ <!-- 步骤1：选择主题 -->
|
|
|
+ <div id="step1" class="theme-selector-step active p-3">
|
|
|
+ <div class="text-xs text-gray-500 mb-3">
|
|
|
+ 选择一个主题，不同主题包含不同类型的谜题
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-2">
|
|
|
+ <!-- 主题列表 -->
|
|
|
+ <div class="theme-item selected" data-theme="classic">
|
|
|
+ <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-bookmark text-amber-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">经典解谜</div>
|
|
|
+ <div class="text-xs text-amber-600">免费</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500">基础主题，包含多种经典谜题</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">已解锁</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="p-3">
|
|
|
- <div class="space-y-3">
|
|
|
- <!-- 主题包 -->
|
|
|
- <div class="flex items-center p-2 border border-gray-200 rounded-md bg-amber-50 border-amber-200">
|
|
|
- <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
- <i class="fas fa-bookmark text-amber-500"></i>
|
|
|
- </div>
|
|
|
- <div class="flex-1">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div class="text-sm font-medium">经典解谜</div>
|
|
|
- <div class="text-xs text-amber-600">免费</div>
|
|
|
- </div>
|
|
|
- <div class="text-xs text-gray-500">基础主题，包含多种经典谜题</div>
|
|
|
- </div>
|
|
|
- <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">已解锁</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex items-center p-2 border border-gray-200 rounded-md bg-white relative">
|
|
|
- <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
- <i class="fas fa-ticket-alt text-amber-500"></i>
|
|
|
- </div>
|
|
|
- <div class="flex-1">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div class="text-sm font-medium">环球影城</div>
|
|
|
- <div class="text-xs text-amber-600">20元/小时</div>
|
|
|
- </div>
|
|
|
- <div class="text-xs text-gray-500">包含多个环球影城主题谜题</div>
|
|
|
- </div>
|
|
|
- <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</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 bg-white">
|
|
|
- <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
- <i class="fas fa-hat-wizard text-amber-500"></i>
|
|
|
- </div>
|
|
|
- <div class="flex-1">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div class="text-sm font-medium">迪士尼奇幻</div>
|
|
|
- <div class="text-xs text-amber-600">15元/小时</div>
|
|
|
- </div>
|
|
|
- <div class="text-xs text-gray-500">迪士尼主题相关谜题</div>
|
|
|
- </div>
|
|
|
- <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</button>
|
|
|
+ <div class="theme-item" data-theme="universal">
|
|
|
+ <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-ticket-alt text-amber-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">环球影城</div>
|
|
|
+ <div class="text-xs text-amber-600">20元/小时</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="flex items-center p-2 border border-gray-200 rounded-md bg-white">
|
|
|
- <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
- <i class="fas fa-dragon text-amber-500"></i>
|
|
|
- </div>
|
|
|
- <div class="flex-1">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div class="text-sm font-medium">奇幻冒险</div>
|
|
|
- <div class="text-xs text-amber-600">12元/小时</div>
|
|
|
- </div>
|
|
|
- <div class="text-xs text-gray-500">奇幻世界主题谜题</div>
|
|
|
- </div>
|
|
|
- <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</button>
|
|
|
+ <div class="text-xs text-gray-500">包含多个环球影城主题谜题</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="theme-item" data-theme="disney">
|
|
|
+ <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-hat-wizard text-amber-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">迪士尼奇幻</div>
|
|
|
+ <div class="text-xs text-amber-600">15元/小时</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="mt-3 py-2 text-center border-t border-gray-200">
|
|
|
- <div class="text-xs text-gray-500">主题随时可切换，计费按使用时长计算</div>
|
|
|
+ <div class="text-xs text-gray-500">迪士尼主题相关谜题</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="theme-item" data-theme="fantasy">
|
|
|
+ <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-dragon text-amber-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">奇幻冒险</div>
|
|
|
+ <div class="text-xs text-amber-600">12元/小时</div>
|
|
|
</div>
|
|
|
+ <div class="text-xs text-gray-500">奇幻世界主题谜题</div>
|
|
|
</div>
|
|
|
+ <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-4 flex justify-end">
|
|
|
+ <button id="nextToStep2" class="bg-amber-500 text-white py-2 px-4 rounded-md text-sm">下一步</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤2：选择难度 -->
|
|
|
+ <div id="step2" class="theme-selector-step p-3">
|
|
|
+ <div class="text-xs text-gray-500 mb-3">
|
|
|
+ 选择游戏难度，不同难度适合不同玩家群体
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex justify-between gap-3 mb-4">
|
|
|
+ <button class="difficulty-btn flex-1 selected" data-difficulty="easy">
|
|
|
+ 简单
|
|
|
+ </button>
|
|
|
+ <button class="difficulty-btn flex-1" data-difficulty="medium">
|
|
|
+ 中等
|
|
|
+ </button>
|
|
|
+ <button class="difficulty-btn flex-1" data-difficulty="hard">
|
|
|
+ 困难
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="my-3">
|
|
|
+ <div class="text-sm font-medium">难度说明：</div>
|
|
|
+ <div id="difficultyDescription" class="text-xs text-gray-500 mt-1">
|
|
|
+ 简单难度适合初次接触海龟汤的玩家，解题时间约10-15分钟。
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="mt-4 flex justify-between">
|
|
|
+ <button id="backToStep1" class="border border-gray-300 text-gray-700 py-2 px-4 rounded-md text-sm">上一步</button>
|
|
|
+ <button id="nextToStep3" class="bg-amber-500 text-white py-2 px-4 rounded-md text-sm">下一步</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 步骤3：选择题目 -->
|
|
|
+ <div id="step3" class="theme-selector-step p-3">
|
|
|
+ <div class="text-xs text-gray-500 mb-3">
|
|
|
+ 从当前主题和难度中选择一个谜题
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-2 max-h-60 overflow-y-auto mb-4">
|
|
|
+ <!-- 题目列表 -->
|
|
|
+ <div class="puzzle-item selected" data-puzzle="watch">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">神秘的手表</div>
|
|
|
+ <div class="text-xs text-amber-600">简单 · 平均用时25分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500 mt-1">一个男人收到了一块神秘的手表，戴上后就再也无法取下来...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="puzzle-item" data-puzzle="apartment">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">高层公寓</div>
|
|
|
+ <div class="text-xs text-amber-600">简单 · 平均用时20分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500 mt-1">一个男人走进电梯，按下了最低的按钮，然后走到自己家...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="puzzle-item" data-puzzle="mirror">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">破碎的镜子</div>
|
|
|
+ <div class="text-xs text-amber-600">简单 · 平均用时18分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500 mt-1">一面镜子碎了，但没有人受伤，为什么所有人都很高兴...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="puzzle-item" data-puzzle="snow">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="text-sm font-medium">雪地足迹</div>
|
|
|
+ <div class="text-xs text-amber-600">简单 · 平均用时22分钟</div>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500 mt-1">一个人走进雪地，留下了足迹，但回来时却没有足迹...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mt-4 flex justify-between">
|
|
|
+ <button id="backToStep2" class="border border-gray-300 text-gray-700 py-2 px-4 rounded-md text-sm">上一步</button>
|
|
|
+ <button id="confirmSelection" class="bg-amber-500 text-white py-2 px-4 rounded-md text-sm">确认选择</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -359,26 +500,190 @@
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
- // 道具弹窗控制
|
|
|
- const openPropsBtn = document.getElementById('openPropsBtn');
|
|
|
- const closePropsBtn = document.getElementById('closePropsBtn');
|
|
|
- const propsModal = document.getElementById('propsModal');
|
|
|
+ // 结束游戏按钮功能
|
|
|
+ const endGameBtn = document.getElementById('endGameBtn');
|
|
|
+ const gameEndedOptions = document.getElementById('gameEndedOptions');
|
|
|
+
|
|
|
+ endGameBtn.addEventListener('click', function() {
|
|
|
+ gameEndedOptions.classList.remove('hidden');
|
|
|
+ endGameBtn.classList.add('hidden');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 线索揭示功能
|
|
|
+ const revealButtons = document.querySelectorAll('.reveal-clue-btn');
|
|
|
+
|
|
|
+ revealButtons.forEach(button => {
|
|
|
+ button.addEventListener('click', function() {
|
|
|
+ const clueElement = this.closest('.turtle-soup-clue');
|
|
|
+ clueElement.classList.remove('unrevealed');
|
|
|
+
|
|
|
+ // 更改线索状态文本
|
|
|
+ const statusSpan = clueElement.querySelector('span:first-child');
|
|
|
+ const originalText = statusSpan.textContent;
|
|
|
+ const clueNumber = originalText.match(/线索(\d+)/)[1];
|
|
|
+ statusSpan.textContent = `线索${clueNumber}（已揭示）`;
|
|
|
+ statusSpan.classList.remove('text-gray-500');
|
|
|
+ statusSpan.classList.add('text-primary');
|
|
|
+
|
|
|
+ // 替换揭示按钮为时间
|
|
|
+ const now = new Date();
|
|
|
+ const timeText = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}揭示`;
|
|
|
+ const timeSpan = document.createElement('span');
|
|
|
+ timeSpan.className = 'text-xs text-gray-500';
|
|
|
+ timeSpan.textContent = timeText;
|
|
|
+ this.parentNode.replaceChild(timeSpan, this);
|
|
|
+
|
|
|
+ // 文本变为正常可见
|
|
|
+ const clueText = clueElement.querySelector('p');
|
|
|
+ clueText.classList.remove('text-gray-400');
|
|
|
+
|
|
|
+ // 更新已揭示线索计数
|
|
|
+ updateClueCount();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新已揭示线索计数
|
|
|
+ function updateClueCount() {
|
|
|
+ const totalClues = document.querySelectorAll('.turtle-soup-clue').length;
|
|
|
+ const revealedClues = document.querySelectorAll('.turtle-soup-clue:not(.unrevealed)').length;
|
|
|
+ const clueCountElement = document.querySelector('.bg-amber-100.text-amber-700.rounded-full');
|
|
|
+ clueCountElement.textContent = `${revealedClues}/${totalClues}已揭示`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 主题选择弹窗控制
|
|
|
+ const themeSelector = document.getElementById('themeSelector');
|
|
|
+ const openThemeSelector = document.getElementById('openThemeSelector');
|
|
|
+ const closeThemeSelector = document.getElementById('closeThemeSelector');
|
|
|
+ const selectNextThemeBtn = document.getElementById('selectNextThemeBtn');
|
|
|
+
|
|
|
+ // 打开主题选择弹窗
|
|
|
+ openThemeSelector.addEventListener('click', function() {
|
|
|
+ themeSelector.classList.remove('hidden');
|
|
|
+ // 重置到第一步
|
|
|
+ showStep(1);
|
|
|
+ });
|
|
|
|
|
|
- openPropsBtn.addEventListener('click', function() {
|
|
|
- propsModal.classList.remove('hidden');
|
|
|
+ // 下一题按钮也打开主题选择弹窗
|
|
|
+ selectNextThemeBtn.addEventListener('click', function() {
|
|
|
+ themeSelector.classList.remove('hidden');
|
|
|
+ // 重置到第一步
|
|
|
+ showStep(1);
|
|
|
});
|
|
|
|
|
|
- closePropsBtn.addEventListener('click', function() {
|
|
|
- propsModal.classList.add('hidden');
|
|
|
+ // 关闭主题选择弹窗
|
|
|
+ closeThemeSelector.addEventListener('click', function() {
|
|
|
+ themeSelector.classList.add('hidden');
|
|
|
});
|
|
|
|
|
|
// 点击弹窗外部关闭
|
|
|
- propsModal.addEventListener('click', function(e) {
|
|
|
- if (e.target === propsModal) {
|
|
|
- propsModal.classList.add('hidden');
|
|
|
+ themeSelector.addEventListener('click', function(e) {
|
|
|
+ if (e.target === themeSelector) {
|
|
|
+ themeSelector.classList.add('hidden');
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ // 步骤控制
|
|
|
+ const nextToStep2 = document.getElementById('nextToStep2');
|
|
|
+ const backToStep1 = document.getElementById('backToStep1');
|
|
|
+ const nextToStep3 = document.getElementById('nextToStep3');
|
|
|
+ const backToStep2 = document.getElementById('backToStep2');
|
|
|
+ const confirmSelection = document.getElementById('confirmSelection');
|
|
|
+
|
|
|
+ nextToStep2.addEventListener('click', function() {
|
|
|
+ showStep(2);
|
|
|
+ });
|
|
|
+
|
|
|
+ backToStep1.addEventListener('click', function() {
|
|
|
+ showStep(1);
|
|
|
+ });
|
|
|
+
|
|
|
+ nextToStep3.addEventListener('click', function() {
|
|
|
+ showStep(3);
|
|
|
+ });
|
|
|
+
|
|
|
+ backToStep2.addEventListener('click', function() {
|
|
|
+ showStep(2);
|
|
|
+ });
|
|
|
+
|
|
|
+ confirmSelection.addEventListener('click', function() {
|
|
|
+ // 这里可以添加选择完成后的逻辑
|
|
|
+ themeSelector.classList.add('hidden');
|
|
|
+ // 模拟选择完成，刷新页面
|
|
|
+ alert('已选择新题目，游戏即将开始!');
|
|
|
+ // 实际应用中这里应该是通过API加载新题目，而不是刷新页面
|
|
|
+ });
|
|
|
+
|
|
|
+ function showStep(step) {
|
|
|
+ // 隐藏所有步骤
|
|
|
+ document.querySelectorAll('.theme-selector-step').forEach(el => {
|
|
|
+ el.classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 显示当前步骤
|
|
|
+ document.getElementById(`step${step}`).classList.add('active');
|
|
|
+
|
|
|
+ // 更新标题
|
|
|
+ const titleElement = document.querySelector('.theme-selector-title');
|
|
|
+ if (step === 1) {
|
|
|
+ titleElement.textContent = '选择主题';
|
|
|
+ } else if (step === 2) {
|
|
|
+ titleElement.textContent = '选择难度';
|
|
|
+ } else if (step === 3) {
|
|
|
+ titleElement.textContent = '选择题目';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 主题项选择
|
|
|
+ const themeItems = document.querySelectorAll('.theme-item');
|
|
|
+ themeItems.forEach(item => {
|
|
|
+ item.addEventListener('click', function() {
|
|
|
+ // 移除其他选中状态
|
|
|
+ themeItems.forEach(el => {
|
|
|
+ el.classList.remove('selected');
|
|
|
+ });
|
|
|
+ // 添加当前选中状态
|
|
|
+ this.classList.add('selected');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 难度按钮选择
|
|
|
+ const difficultyBtns = document.querySelectorAll('.difficulty-btn');
|
|
|
+ difficultyBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
+ // 移除其他选中状态
|
|
|
+ difficultyBtns.forEach(el => {
|
|
|
+ el.classList.remove('selected');
|
|
|
+ });
|
|
|
+ // 添加当前选中状态
|
|
|
+ this.classList.add('selected');
|
|
|
+
|
|
|
+ // 更新难度说明
|
|
|
+ const difficultyDescription = document.getElementById('difficultyDescription');
|
|
|
+ const difficulty = this.dataset.difficulty;
|
|
|
+
|
|
|
+ if (difficulty === 'easy') {
|
|
|
+ difficultyDescription.textContent = '简单难度适合初次接触海龟汤的玩家，解题时间约10-15分钟。';
|
|
|
+ } else if (difficulty === 'medium') {
|
|
|
+ difficultyDescription.textContent = '中等难度需要一定的逻辑思维能力，解题时间约15-25分钟。';
|
|
|
+ } else if (difficulty === 'hard') {
|
|
|
+ difficultyDescription.textContent = '困难难度挑战你的思维极限，解题时间约25-40分钟。';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 题目项选择
|
|
|
+ const puzzleItems = document.querySelectorAll('.puzzle-item');
|
|
|
+ puzzleItems.forEach(item => {
|
|
|
+ item.addEventListener('click', function() {
|
|
|
+ // 移除其他选中状态
|
|
|
+ puzzleItems.forEach(el => {
|
|
|
+ el.classList.remove('selected');
|
|
|
+ });
|
|
|
+ // 添加当前选中状态
|
|
|
+ this.classList.add('selected');
|
|
|
+ });
|
|
|
+ });
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
