多人共享状态

app.py

@@ -49,28 +49,46 @@ model = SentenceTransformer('sentence-transformers/paraphrase-multilingual-MiniL
 with open("words.txt", "r", encoding="utf-8") as f:
     word_pool = [line.strip() for line in f if line.strip()]
 
-# Game state
-game_state = {
-    "secret_word": "",
-    "secret_vec": None,
-    "guesses": [],
-    "latest_guess": None
-}
+# 初始化游戏状态函数
+def initialize_game_state():
+    secret_word = random.choice(word_pool)
+    secret_vec = model.encode(secret_word, convert_to_tensor=True)
+    print(f"新游戏已开始，秘密词语: {secret_word}")
+    return {
+        "secret_word": secret_word,
+        "secret_vec": secret_vec,
+        "guesses": []
+    }
+
+# 服务启动时初始化游戏状态
+game_state = initialize_game_state()
 
 @app.route('/')
 def home():
     return render_template('index.html')
 
+@app.route('/game-status', methods=['GET'])
+def game_status():
+    """获取当前游戏状态，包括猜测历史，但不包含秘密词语"""
+    # 对猜测列表按相似度降序排序
+    sorted_guesses = sorted(game_state["guesses"], key=lambda x: x["similarity"], reverse=True)
+    
+    # 检查是否有人已经猜对了
+    has_correct_guess = any(guess["is_correct"] for guess in game_state["guesses"])
+    
+    return jsonify({
+        "status": "success",
+        "guesses": sorted_guesses,
+        "has_correct_guess": has_correct_guess,
+        "is_game_active": True
+    })
+
 @app.route('/new-game', methods=['POST'])
 def new_game():
     global game_state
-    # Reset game state
-    game_state["secret_word"] = random.choice(word_pool)
-    game_state["secret_vec"] = model.encode(game_state["secret_word"], convert_to_tensor=True)
-    game_state["guesses"] = []
-    game_state["latest_guess"] = None
-    
-    return jsonify({"status": "success", "message": "New game started"})
+    # 重置游戏状态
+    game_state = initialize_game_state()
+    return jsonify({"status": "success", "message": "新游戏已开始"})
 
 @app.route('/guess', methods=['POST'])
 def guess():
@@ -78,7 +96,7 @@ def guess():
     guess_word = data.get('guess', '').strip()
     
     if not guess_word:
-        return jsonify({"status": "error", "message": "No guess provided"})
+        return jsonify({"status": "error", "message": "请输入猜测词语"})
     
     # Encode the guess
     guess_vec = model.encode(guess_word, convert_to_tensor=True)
@@ -90,21 +108,17 @@ def guess():
     # Check if correct
     is_correct = (game_state["secret_word"] == guess_word)
     
-    # Update latest guess
-    game_state["latest_guess"] = guess_word
-    
-    # Store guess
-    game_state["guesses"].append({
-        "word": guess_word,
-        "similarity": percent,
-        "is_correct": is_correct,
-        "is_latest": True
-    })
+    # 检查猜测的词是否已存在于历史记录中
+    word_exists = any(g["word"] == guess_word for g in game_state["guesses"])
     
-    # Update previous guesses to not be latest
-    for i in range(len(game_state["guesses"]) - 1):
-        if "is_latest" in game_state["guesses"][i]:
-            game_state["guesses"][i]["is_latest"] = False
+    # 仅当词语不在历史记录中时，才添加到猜测历史
+    if not word_exists:
+        # Store guess
+        game_state["guesses"].append({
+            "word": guess_word,
+            "similarity": percent,
+            "is_correct": is_correct
+        })
     
     # Sort guesses by similarity (descending)
     sorted_guesses = sorted(game_state["guesses"], key=lambda x: x["similarity"], reverse=True)
@@ -113,8 +127,7 @@ def guess():
         "status": "success",
         "similarity": percent,
         "is_correct": is_correct,
-        "guesses": game_state["guesses"],
-        "latest_guess": guess_word
+        "guesses": sorted_guesses
     }
     
     if is_correct:

static/js/app.js

@@ -1,227 +1,149 @@
 // Semantic Hunter Game Frontend
 
-document.addEventListener('DOMContentLoaded', () => {
-    // DOM Elements
-    const guessInput = document.getElementById('guess-input');
-    const guessBtn = document.getElementById('guess-btn');
-    const messageArea = document.getElementById('message-area');
-    const guessesList = document.getElementById('guesses-list');
-    const newGameBtn = document.getElementById('new-game-btn');
-    const giveUpBtn = document.getElementById('give-up-btn');
-
-    // Game state
-    let gameActive = false;
-    let latestGuessId = null;
-    let allGuesses = [];
-    let currentPage = 1;
-    const itemsPerPage = 7;
+/**
+ * UI类 - 负责DOM操作和UI渲染
+ */
+class SemanticHunterUI {
+    constructor() {
+        // DOM元素
+        this.guessInput = document.getElementById('guess-input');
+        this.guessBtn = document.getElementById('guess-btn');
+        this.messageArea = document.getElementById('message-area');
+        this.guessesList = document.getElementById('guesses-list');
+        this.newGameBtn = document.getElementById('new-game-btn');
+        this.giveUpBtn = document.getElementById('give-up-btn');
+        this.itemsPerPage = 7;
+    }
 
-    // Initialize game
-    initGame();
+    // 清空输入框并聚焦
+    clearAndFocusInput() {
+        this.guessInput.value = '';
+        this.guessInput.focus();
+    }
 
-    // Event listeners
-    guessBtn.addEventListener('click', submitGuess);
-    guessInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') submitGuess();
-    });
-    newGameBtn.addEventListener('click', initGame);
-    giveUpBtn.addEventListener('click', giveUp);
+    // 获取输入值
+    getInputValue() {
+        return this.guessInput.value.trim();
+    }
 
-    // Functions
-    function initGame() {
-        fetch('/new-game', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.status === 'success') {
-                gameActive = true;
-                guessesList.innerHTML = '';
-                messageArea.innerHTML = '';
-                guessInput.value = '';
-                guessInput.focus();
-                allGuesses = [];
-                currentPage = 1;
-                latestGuessId = null;
-                messageArea.innerHTML = `<p class="message">游戏开始! 尝试猜测秘密词语!</p>`;
-            } else {
-                showError(data.message || '初始化游戏时出错');
-            }
-        })
-        .catch(err => {
-            showError('无法连接到服务器');
-            console.error(err);
-        });
+    // 显示消息
+    showMessage(msg) {
+        this.messageArea.innerHTML = `<p class="message">${msg}</p>`;
     }
 
-    function submitGuess() {
-        const guess = guessInput.value.trim();
-        if (!guess) return;
-        if (!gameActive) {
-            showError('游戏未开始，请点击新游戏');
-            return;
-        }
+    // 显示错误消息
+    showError(msg) {
+        this.messageArea.innerHTML = `<p class="message error">${msg}</p>`;
+    }
 
-        // Check if this word has already been guessed, but just proceed silently
-        const alreadyGuessed = allGuesses.some(g => g.word === guess) || 
-                              (latestGuessId && latestGuessId === guess);
+    // 显示成功消息
+    showSuccess(msg) {
+        this.messageArea.innerHTML = `<p class="message success">${msg}</p>`;
+    }
 
-        // Always send the request to get similarity, but we'll handle duplicates when updating the UI
-        fetch('/guess', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ guess })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.status === 'success') {
-                // If the word was already guessed, just update the latest guess display
-                // without adding a duplicate to the history
-                if (alreadyGuessed) {
-                    // Find this guess in our existing data to get its similarity
-                    const existingGuess = allGuesses.find(g => g.word === guess);
-                    if (existingGuess) {
-                        // Show just the latest guess with this word
-                        updateLatestGuess({
-                            word: guess,
-                            similarity: existingGuess.similarity,
-                            is_correct: existingGuess.is_correct
-                        });
-                        
-                        // Show similarity message
-                        showMessage(`相似度: ${existingGuess.similarity}%`);
-                    }
-                } else {
-                    // Normal flow for new guesses
-                    updateGuessList(data.guesses, guess);
-                    
-                    if (data.is_correct) {
-                        gameActive = false;
-                        showSuccess(`恭喜你猜对了! 秘密词语是: ${guess}`);
-                    } else {
-                        showMessage(`相似度: ${data.similarity}%`);
-                    }
-                }
-                
-                // Always update latest guess ID and clear input
-                latestGuessId = guess;
-                guessInput.value = '';
-                guessInput.focus();
-            } else {
-                showError(data.message || '提交猜测时出错');
-            }
-        })
-        .catch(err => {
-            showError('无法连接到服务器');
-            console.error(err);
-        });
+    // 重置猜测列表
+    resetGuessList() {
+        this.guessesList.innerHTML = '';
+        this.messageArea.innerHTML = '';
     }
 
-    function giveUp() {
-        if (!gameActive) {
-            showError('游戏未开始，请点击新游戏');
-            return;
+    // 获取相似度样式类
+    getSimilarityClass(similarity) {
+        if (similarity === 100) {
+            return 'similarity-perfect';
+        } else if (similarity >= 90) {
+            return 'similarity-super-high';
+        } else if (similarity >= 80) {
+            return 'similarity-very-high';
+        } else if (similarity >= 70) {
+            return 'similarity-high';
+        } else if (similarity >= 50) {
+            return 'similarity-medium';
+        } else {
+            return 'similarity-low';
         }
-
-        fetch('/give-up', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.status === 'success') {
-                gameActive = false;
-                showError(`你放弃了! 秘密词语是: ${data.secret_word}`);
-            } else {
-                showError(data.message || '放弃游戏时出错');
-            }
-        })
-        .catch(err => {
-            showError('无法连接到服务器');
-            console.error(err);
-        });
     }
 
-    function updateGuessList(guesses, latestGuess) {
-        guessesList.innerHTML = '';
-        
-        // Create a copy of the guesses array to avoid modifying the original
-        const sortedGuesses = [...guesses];
+    // 渲染猜测列表，包括最新猜测和历史猜测
+    renderGuessList(guesses, latestGuess, currentPage) {
+        this.guessesList.innerHTML = '';
         
-        // Find the latest guess and remove it from the sorted array
-        const latestGuessIndex = sortedGuesses.findIndex(g => g.word === latestGuess);
-        let latestGuessItem = null;
-        if (latestGuessIndex !== -1) {
-            latestGuessItem = sortedGuesses.splice(latestGuessIndex, 1)[0];
+        // 渲染最新猜测（如果有）
+        if (latestGuess) {
+            this.renderLatestGuess(latestGuess, guesses);
         }
         
-        // Sort the remaining guesses by similarity (descending)
-        sortedGuesses.sort((a, b) => b.similarity - a.similarity);
+        // 渲染历史猜测列表
+        this.renderHistoryGuesses(guesses, latestGuess, currentPage);
         
-        // Update our allGuesses array for pagination
-        allGuesses = sortedGuesses;
+        return guesses;
+    }
+    
+    // 渲染最新猜测（置顶显示）
+    renderLatestGuess(latestGuess, guesses) {
+        // 寻找最新猜测的详细信息
+        const latestGuessData = guesses.find(g => g.word === latestGuess.word);
+        if (!latestGuessData) return;
         
-        // If we have a latest guess, add it to the top of the list
-        if (latestGuessItem) {
-            // Create a container for the latest guess
-            const latestGuessContainer = document.createElement('div');
-            latestGuessContainer.className = 'latest-guess-container';
-            
-            // Add the latest guess with a different style
-            const latestGuessElement = document.createElement('div');
-            latestGuessElement.className = 'latest-guess';
-            
-            // Add perfect-match class if 100% similarity
-            if (latestGuessItem.similarity === 100) {
-                latestGuessElement.classList.add('perfect-match');
-            }
-            
-            // Determine similarity color class
-            let similarityClass = getSimilarityClass(latestGuessItem.similarity);
-            
-            latestGuessElement.innerHTML = `
-                <span class="guess-word">${latestGuessItem.word}</span>
-                <span class="guess-similarity ${similarityClass}">${latestGuessItem.similarity}%</span>
-            `;
-            
-            latestGuessContainer.appendChild(latestGuessElement);
-            
-            // Add separator line
-            const separator = document.createElement('div');
-            separator.className = 'guess-separator';
-            latestGuessContainer.appendChild(separator);
-            
-            guessesList.appendChild(latestGuessContainer);
+        // 创建最新猜测的容器
+        const latestGuessContainer = document.createElement('div');
+        latestGuessContainer.className = 'latest-guess-container';
+        
+        // 添加最新猜测并使用不同样式
+        const latestGuessElement = document.createElement('div');
+        latestGuessElement.className = 'latest-guess';
+        
+        // 如果100%匹配，添加perfect-match类
+        if (latestGuessData.similarity === 100) {
+            latestGuessElement.classList.add('perfect-match');
         }
         
-        // Create a container for history guesses
+        // 确定相似度颜色类
+        const similarityClass = this.getSimilarityClass(latestGuessData.similarity);
+        
+        latestGuessElement.innerHTML = `
+            <span class="guess-word">${latestGuessData.word}</span>
+            <span class="guess-similarity ${similarityClass}">${latestGuessData.similarity}%</span>
+        `;
+        
+        latestGuessContainer.appendChild(latestGuessElement);
+        
+        // 添加分隔线
+        const separator = document.createElement('div');
+        separator.className = 'guess-separator';
+        latestGuessContainer.appendChild(separator);
+        
+        this.guessesList.appendChild(latestGuessContainer);
+    }
+    
+    // 渲染历史猜测列表
+    renderHistoryGuesses(guesses, latestGuess, currentPage) {
+        // 创建历史猜测的容器
         const historyContainer = document.createElement('div');
         historyContainer.className = 'history-guesses-container';
         
-        // Get current page of items
-        const startIndex = (currentPage - 1) * itemsPerPage;
-        const endIndex = Math.min(startIndex + itemsPerPage, allGuesses.length);
-        const currentPageItems = allGuesses.slice(startIndex, endIndex);
+        // 获取当前页的项目
+        const startIndex = (currentPage - 1) * this.itemsPerPage;
+        const endIndex = Math.min(startIndex + this.itemsPerPage, guesses.length);
+        const currentPageItems = guesses.slice(startIndex, endIndex);
         
-        // Add the current page of guesses
+        // 添加当前页的猜测
         currentPageItems.forEach(guess => {
+            // 如果有最新猜测且与当前历史猜测相同，则跳过（避免重复显示）
+            if (latestGuess && guess.word === latestGuess.word) {
+                return;
+            }
+            
             const guessItem = document.createElement('div');
             guessItem.className = 'guess-item';
             
-            // Add perfect-match class if 100% similarity
+            // 如果100%匹配，添加perfect-match类
             if (guess.similarity === 100) {
                 guessItem.classList.add('perfect-match');
             }
             
-            // Determine similarity color class
-            let similarityClass = getSimilarityClass(guess.similarity);
+            // 确定相似度颜色类
+            const similarityClass = this.getSimilarityClass(guess.similarity);
             
             guessItem.innerHTML = `
                 <span class="guess-word">${guess.word}</span>
@@ -231,130 +153,292 @@ document.addEventListener('DOMContentLoaded', () => {
             historyContainer.appendChild(guessItem);
         });
         
-        guessesList.appendChild(historyContainer);
-        
-        // Add pagination if we have more than one page
-        if (allGuesses.length > itemsPerPage) {
-            addPagination();
-        }
+        this.guessesList.appendChild(historyContainer);
     }
-    
-    function addPagination() {
-        const totalPages = Math.ceil(allGuesses.length / itemsPerPage);
+
+    // 添加分页控件
+    addPagination(allGuesses, currentPage, onPageChange) {
+        const totalPages = Math.ceil(allGuesses.length / this.itemsPerPage);
+        if (totalPages <= 1) return; // 如果只有一页，不显示分页控件
         
-        // Create pagination container
+        // 创建分页容器
         const paginationContainer = document.createElement('div');
         paginationContainer.className = 'pagination-container';
         
-        // Previous button
+        // 上一页按钮
         const prevBtn = document.createElement('button');
         prevBtn.className = 'pagination-btn prev-btn';
         prevBtn.innerHTML = `<i class="fas fa-chevron-left"></i>`;
         prevBtn.disabled = currentPage === 1;
         prevBtn.addEventListener('click', () => {
             if (currentPage > 1) {
-                currentPage--;
-                updateGuessList(allGuesses.concat([]), ''); // Pass empty string for latestGuess to avoid highlighting
+                onPageChange(currentPage - 1);
             }
         });
         
-        // Page indicator
+        // 页面指示器
         const pageIndicator = document.createElement('div');
         pageIndicator.className = 'page-indicator';
         pageIndicator.textContent = `${currentPage} / ${totalPages}`;
         
-        // Next button
+        // 下一页按钮
         const nextBtn = document.createElement('button');
         nextBtn.className = 'pagination-btn next-btn';
         nextBtn.innerHTML = `<i class="fas fa-chevron-right"></i>`;
         nextBtn.disabled = currentPage === totalPages;
         nextBtn.addEventListener('click', () => {
             if (currentPage < totalPages) {
-                currentPage++;
-                updateGuessList(allGuesses.concat([]), ''); // Pass empty string for latestGuess to avoid highlighting
+                onPageChange(currentPage + 1);
             }
         });
         
-        // Append buttons to container
+        // 将按钮添加到容器
         paginationContainer.appendChild(prevBtn);
         paginationContainer.appendChild(pageIndicator);
         paginationContainer.appendChild(nextBtn);
         
-        // Add to the DOM
-        guessesList.appendChild(paginationContainer);
+        // 添加到DOM
+        this.guessesList.appendChild(paginationContainer);
     }
+}
 
-    function showMessage(msg) {
-        messageArea.innerHTML = `<p class="message">${msg}</p>`;
+/**
+ * API类 - 负责与后端通信
+ */
+class SemanticHunterAPI {
+    // 获取当前游戏状态
+    async getGameStatus() {
+        try {
+            const response = await fetch('/game-status', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('获取游戏状态时出错:', error);
+            throw new Error('无法连接到服务器');
+        }
     }
 
-    function showError(msg) {
-        messageArea.innerHTML = `<p class="message error">${msg}</p>`;
+    // 初始化新游戏
+    async initGame() {
+        try {
+            const response = await fetch('/new-game', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('初始化游戏时出错:', error);
+            throw new Error('无法连接到服务器');
+        }
     }
 
-    function showSuccess(msg) {
-        messageArea.innerHTML = `<p class="message success">${msg}</p>`;
+    // 提交猜测
+    async submitGuess(guess) {
+        try {
+            const response = await fetch('/guess', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ guess })
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('提交猜测时出错:', error);
+            throw new Error('无法连接到服务器');
+        }
     }
 
-    // Function to determine similarity class based on percentage
-    function getSimilarityClass(similarity) {
-        if (similarity === 100) {
-            return 'similarity-perfect';
-        } else if (similarity >= 90) {
-            return 'similarity-super-high';
-        } else if (similarity >= 80) {
-            return 'similarity-very-high';
-        } else if (similarity >= 70) {
-            return 'similarity-high';
-        } else if (similarity >= 50) {
-            return 'similarity-medium';
-        } else {
-            return 'similarity-low';
+    // 放弃游戏
+    async giveUp() {
+        try {
+            const response = await fetch('/give-up', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('放弃游戏时出错:', error);
+            throw new Error('无法连接到服务器');
         }
     }
+}
 
-    // Function to just update the latest guess display without changing history
-    function updateLatestGuess(guessItem) {
-        // Remove existing latest guess container if it exists
-        const existingContainer = document.querySelector('.latest-guess-container');
-        if (existingContainer) {
-            existingContainer.remove();
-        }
+/**
+ * 游戏控制器 - 处理游戏逻辑
+ */
+class SemanticHunterGame {
+    constructor() {
+        this.ui = new SemanticHunterUI();
+        this.api = new SemanticHunterAPI();
         
-        // Create a new container for the latest guess
-        const latestGuessContainer = document.createElement('div');
-        latestGuessContainer.className = 'latest-guess-container';
+        // 游戏状态
+        this.gameActive = true; // 默认假设游戏是活跃的
+        this.latestGuess = null; // 只在前端存储最新猜测
+        this.allGuesses = [];    // 所有猜测历史
+        this.currentPage = 1;    // 当前分页
         
-        // Add the latest guess with its style
-        const latestGuessElement = document.createElement('div');
-        latestGuessElement.className = 'latest-guess';
+        // 初始化事件监听器
+        this.initEventListeners();
         
-        // Add perfect-match class if 100% similarity
-        if (guessItem.similarity === 100) {
-            latestGuessElement.classList.add('perfect-match');
+        // 加载游戏状态
+        this.loadGameStatus();
+    }
+
+    // 初始化事件监听器
+    initEventListeners() {
+        this.ui.guessBtn.addEventListener('click', () => this.submitGuess());
+        this.ui.guessInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.submitGuess();
+        });
+        this.ui.newGameBtn.addEventListener('click', () => this.initGame());
+        this.ui.giveUpBtn.addEventListener('click', () => this.giveUp());
+    }
+
+    // 加载游戏状态 - 从后端获取当前状态
+    async loadGameStatus() {
+        try {
+            const data = await this.api.getGameStatus();
+            if (data.status === 'success') {
+                // 更新游戏状态
+                this.allGuesses = data.guesses;
+                this.gameActive = !data.has_correct_guess;
+                
+                // 如果有猜测历史，渲染它们
+                if (this.allGuesses.length > 0) {
+                    // 不指定最新猜测，所有猜测都在历史列表中显示
+                    this.updateGuessList(this.allGuesses, null);
+                    
+                    // 如果已经猜对了
+                    if (!this.gameActive) {
+                        const correctGuess = this.allGuesses.find(g => g.is_correct);
+                        if (correctGuess) {
+                            this.ui.showSuccess(`有人已经猜对了! 秘密词语是: ${correctGuess.word}`);
+                        }
+                    } else {
+                        this.ui.showMessage('游戏进行中! 尝试猜测秘密词语!');
+                    }
+                } else {
+                    this.ui.showMessage('游戏开始! 尝试猜测秘密词语!');
+                }
+                
+                // 清空输入框并聚焦
+                this.ui.clearAndFocusInput();
+            } else {
+                this.ui.showError('获取游戏状态失败');
+            }
+        } catch (error) {
+            this.ui.showError(error.message);
         }
+    }
+
+    // 初始化游戏 - 创建新游戏
+    async initGame() {
+        try {
+            const data = await this.api.initGame();
+            if (data.status === 'success') {
+                this.gameActive = true;
+                this.ui.resetGuessList();
+                this.ui.clearAndFocusInput();
+                this.allGuesses = [];
+                this.latestGuess = null;
+                this.currentPage = 1;
+                this.ui.showMessage('新游戏开始! 尝试猜测秘密词语!');
+            } else {
+                this.ui.showError(data.message || '初始化游戏时出错');
+            }
+        } catch (error) {
+            this.ui.showError(error.message);
+        }
+    }
+
+    // 提交猜测
+    async submitGuess() {
+        const guessWord = this.ui.getInputValue();
+        if (!guessWord) return;
+        if (!this.gameActive) {
+            this.ui.showError('游戏已结束，请点击新游戏');
+            return;
+        }
+
+        try {
+            const data = await this.api.submitGuess(guessWord);
+            if (data.status === 'success') {
+                // 更新猜测历史
+                this.allGuesses = data.guesses;
+                
+                // 在前端存储最新的猜测
+                this.latestGuess = {
+                    word: guessWord,
+                    similarity: data.similarity,
+                    is_correct: data.is_correct
+                };
+                
+                // 渲染猜测列表，将最新猜测置顶
+                this.updateGuessList(this.allGuesses, this.latestGuess);
+                
+                // 根据猜测结果更新游戏状态和显示消息
+                if (data.is_correct) {
+                    this.gameActive = false;
+                    this.ui.showSuccess(`恭喜你猜对了! 秘密词语是: ${guessWord}`);
+                } else {
+                    this.ui.showMessage(`相似度: ${data.similarity}%`);
+                }
+                
+                // 清空输入框并聚焦
+                this.ui.clearAndFocusInput();
+            } else {
+                this.ui.showError(data.message || '提交猜测时出错');
+            }
+        } catch (error) {
+            this.ui.showError(error.message);
+        }
+    }
+
+    // 放弃游戏
+    async giveUp() {
+        if (!this.gameActive) {
+            this.ui.showError('游戏已结束，请点击新游戏');
+            return;
+        }
+
+        try {
+            const data = await this.api.giveUp();
+            if (data.status === 'success') {
+                this.gameActive = false;
+                this.ui.showError(`你放弃了! 秘密词语是: ${data.secret_word}`);
+            } else {
+                this.ui.showError(data.message || '放弃游戏时出错');
+            }
+        } catch (error) {
+            this.ui.showError(error.message);
+        }
+    }
+
+    // 更新猜测列表 - 同时处理最新猜测和历史猜测
+    updateGuessList(guesses, latestGuess) {
+        // 渲染猜测列表
+        this.ui.renderGuessList(guesses, latestGuess, this.currentPage);
         
-        // Determine similarity color class
-        let similarityClass = getSimilarityClass(guessItem.similarity);
-        
-        latestGuessElement.innerHTML = `
-            <span class="guess-word">${guessItem.word}</span>
-            <span class="guess-similarity ${similarityClass}">${guessItem.similarity}%</span>
-        `;
-        
-        latestGuessContainer.appendChild(latestGuessElement);
-        
-        // Add separator line
-        const separator = document.createElement('div');
-        separator.className = 'guess-separator';
-        latestGuessContainer.appendChild(separator);
-        
-        // Add to DOM before the history container
-        const historyContainer = document.querySelector('.history-guesses-container');
-        if (historyContainer) {
-            guessesList.insertBefore(latestGuessContainer, historyContainer);
-        } else {
-            guessesList.appendChild(latestGuessContainer);
+        // 如果有多页，添加分页控件
+        if (guesses.length > this.ui.itemsPerPage) {
+            this.ui.addPagination(guesses, this.currentPage, (newPage) => {
+                this.currentPage = newPage;
+                this.updateGuessList(guesses, latestGuess);
+            });
         }
     }
+}
+
+// 当DOM内容加载完成时初始化游戏
+document.addEventListener('DOMContentLoaded', () => {
+    new SemanticHunterGame();
 }); 

templates/index.html

@@ -22,9 +22,9 @@
 
         <main>
             <div class="game-area">
-                <h2>Can you guess the secret word?</h2>
+                <h2>你能猜出秘密词语吗？</h2>
                 <div class="input-area">
-                    <input type="text" id="guess-input" placeholder="Can you guess the word?" autofocus>
+                    <input type="text" id="guess-input" placeholder="试试 洋葱" autofocus>
                     <button id="guess-btn" class="btn btn-primary">
                         <i class="fas fa-arrow-right"></i>
                     </button>