From ae0f61cda934af87e5ce7a6accaf1b69f07eb826 Mon Sep 17 00:00:00 2001
From: Allen <49468724+Allenyzh@users.noreply.github.com>
Date: Sun, 2 Feb 2025 15:29:04 -0500
Subject: [PATCH 1/2] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx            | 49 +++++-------------------------------------
 src/Router.jsx         | 22 +++++++++++++++++++
 src/pages/ChatPage.jsx | 22 +++++++++++--------
 3 files changed, 40 insertions(+), 53 deletions(-)
 create mode 100644 src/Router.jsx

diff --git a/src/App.jsx b/src/App.jsx
index a057b2b..a90a5a9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,51 +1,12 @@
 import "./App.css";
-import Messages from "./components/Messages";
-import ChatPage from "./pages/ChatPage";
-import AdminPage from "./pages/admin";
-import Scenario from "../src/pages/Scenarios";
-import ScenarioForm from "./pages/admin/ScenarioForm";
-import { BrowserRouter, Routes, Route } from "react-router";
+
+import Router from "./Router";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <div className="flex flex-col h-screen">
-              <Scenario />
-            </div>
-          }
-        />
-        <Route
-          path="/game"
-          element={
-            <div className="flex flex-col h-screen">
-              <ChatPage />
-            </div>
-          }
-        >
-          <Route path="/game/:sid" element={<Messages />} />
-        </Route>
-        <Route
-          path="/admin"
-          element={
-            <div className="flex flex-col h-screen">
-              <AdminPage />
-            </div>
-          }
-        />
-        <Route
-          path="/admin/:id"
-          element={
-            <div className="flex flex-col h-screen">
-              <ScenarioForm />
-            </div>
-          }
-        />
-      </Routes>
-    </BrowserRouter>
+    <div className="flex flex-col h-screen">
+      <Router />
+    </div>
   );
 }
 
diff --git a/src/Router.jsx b/src/Router.jsx
new file mode 100644
index 0000000..41e1346
--- /dev/null
+++ b/src/Router.jsx
@@ -0,0 +1,22 @@
+import { BrowserRouter, Routes, Route } from "react-router";
+import Scenarios from "./pages/Scenarios";
+import ChatPage from "./pages/ChatPage";
+// import Messages from "./components/Messages";
+import AdminPage from "./pages/admin";
+import ScenarioForm from "./pages/admin/ScenarioForm";
+
+export default function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Scenarios />} />
+        <Route path="/game">
+          <Route path="/game/:sid" element={<ChatPage />} />
+        </Route>
+
+        <Route path="/admin" element={<AdminPage />} />
+        <Route path="/admin/:id" element={<ScenarioForm />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
diff --git a/src/pages/ChatPage.jsx b/src/pages/ChatPage.jsx
index d924f1e..e8e42ed 100644
--- a/src/pages/ChatPage.jsx
+++ b/src/pages/ChatPage.jsx
@@ -68,15 +68,19 @@ export default function ChatPage() {
           <h1 className="text-xl font-bold text-gray-800">
             MTLove Score: <span className="text-blue-600">{score}</span>
           </h1>
-          <button
-            className="btn"
-            onClick={() => document.getElementById("my_modal_2").showModal()}
-          >
-            Challenge Description
-          </button>
-          <Link to="/">
-            <button className="btn btn-neutral">Home</button>
-          </Link>
+
+          <div className="flex justify-end gap-2">
+            <button
+              className="btn"
+              onClick={() => document.getElementById("my_modal_2").showModal()}
+            >
+              Challenge Description
+            </button>
+
+            <Link to="/" className="btn btn-neutral">
+              Home
+            </Link>
+          </div>
         </div>
       </nav>
 

From dc659030226e4386e79856c96631872c3636f32c Mon Sep 17 00:00:00 2001
From: Allenyzh <allenyangzhenhao@gmail.com>
Date: Sun, 2 Feb 2025 21:38:27 -0500
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复移动端布局异常
- 修复游戏结束后点击exit再点击对话界面，仍显示之前游戏状态的错误
---
 src/App.jsx                 |  6 +---
 src/components/GameOver.jsx | 12 ++++++++
 src/components/Messages.jsx | 11 ++++---
 src/components/Win.jsx      | 10 +++++++
 src/pages/ChatPage.jsx      | 16 +++++-----
 src/store/store.js          | 58 +++++++++++++++++++++----------------
 vite.config.js              |  9 ++++--
 7 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index a90a5a9..4cde4ef 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,11 +3,7 @@ import "./App.css";
 import Router from "./Router";
 
 function App() {
-  return (
-    <div className="flex flex-col h-screen">
-      <Router />
-    </div>
-  );
+  return <Router />;
 }
 
 export default App;
diff --git a/src/components/GameOver.jsx b/src/components/GameOver.jsx
index 0d60e92..d04b1dc 100644
--- a/src/components/GameOver.jsx
+++ b/src/components/GameOver.jsx
@@ -1,9 +1,13 @@
 /* eslint-disable react/prop-types */
 import { useState, useEffect } from "react";
 import { Link } from "react-router";
+import { useStore } from "../store/store";
 
 export default function GameOver({ score, onRestart }) {
   const [visible, setVisible] = useState(false);
+  const { messages, resetGame } = useStore();
+
+  console.log(messages);
 
   useEffect(() => {
     setTimeout(() => setVisible(true), 500);
@@ -20,6 +24,13 @@ export default function GameOver({ score, onRestart }) {
         Your Score: <span className="font-bold text-yellow-400">{score}</span>
       </p>
 
+      <p className="text-2xl mt-4">
+        The last word is:
+        <span className="font-bold text-yellow-400">
+          {messages[messages.length - 1].content}
+        </span>
+      </p>
+
       <div className="mt-6 flex gap-4">
         <button
           className="bg-blue-500 hover:bg-blue-700 text-white px-6 py-3 rounded-xl text-lg"
@@ -30,6 +41,7 @@ export default function GameOver({ score, onRestart }) {
         <Link
           className="bg-gray-700 hover:bg-gray-500 text-white px-6 py-3 rounded-xl text-lg"
           to="/"
+          onClick={resetGame}
         >
           Exit
         </Link>
diff --git a/src/components/Messages.jsx b/src/components/Messages.jsx
index 0e54f65..8af4a14 100644
--- a/src/components/Messages.jsx
+++ b/src/components/Messages.jsx
@@ -1,9 +1,8 @@
 import { useStore } from "../store/store";
-import { useEffect, useRef} from "react";
+import { useEffect, useRef } from "react";
 
 export default function Messages() {
   const { messages, scoreHistory } = useStore();
- 
 
   let assistantIndex = -1;
   const messagesEndRef = useRef(null);
@@ -13,7 +12,7 @@ export default function Messages() {
   }, [messages]);
 
   return (
-    <div className="flex-1 overflow-y-auto flex flex-col pb-4">
+    <div className="overflow-y-auto flex flex-col pb-4">
       {messages.map((message, index) => {
         if (message.role === "assistant") {
           assistantIndex++; // 只在 assistant 消息时递增
@@ -40,9 +39,9 @@ export default function Messages() {
                   : "chat-bubble-primary"
               }`}
               style={{
-                wordBreak: 'break-word',
-                overflowWrap: 'break-word',
-                hyphens: 'auto'
+                wordBreak: "break-word",
+                overflowWrap: "break-word",
+                hyphens: "auto",
               }}
             >
               <div className="flex-1 overflow-hidden text-sm sm:text-base">
diff --git a/src/components/Win.jsx b/src/components/Win.jsx
index 7fb22d7..08c41e8 100644
--- a/src/components/Win.jsx
+++ b/src/components/Win.jsx
@@ -1,9 +1,11 @@
 /* eslint-disable react/prop-types */
 import { useState, useEffect } from "react";
 import { Link } from "react-router";
+import { useStore } from "../store/store";
 
 export default function Win({ score, onRestart }) {
   const [visible, setVisible] = useState(false);
+  const { messages, resetGame } = useStore();
 
   useEffect(() => {
     setTimeout(() => setVisible(true), 500);
@@ -22,6 +24,13 @@ export default function Win({ score, onRestart }) {
         Your Score: <span className="font-bold text-green-300">{score}</span>
       </p>
 
+      <p className="text-2xl mt-4">
+        The last word is:
+        <span className="font-bold text-green-300">
+          {messages[messages.length - 1].content}
+        </span>
+      </p>
+
       <div className="mt-6 flex gap-4">
         <button
           className="bg-blue-500 hover:bg-blue-700 text-white px-6 py-3 rounded-xl text-lg"
@@ -33,6 +42,7 @@ export default function Win({ score, onRestart }) {
         <Link
           to="/"
           className="bg-gray-700 hover:bg-gray-500 text-white px-6 py-3 rounded-xl text-lg"
+          onClick={resetGame}
         >
           Exit
         </Link>
diff --git a/src/pages/ChatPage.jsx b/src/pages/ChatPage.jsx
index e8e42ed..89da2ef 100644
--- a/src/pages/ChatPage.jsx
+++ b/src/pages/ChatPage.jsx
@@ -1,7 +1,6 @@
 import { useStore } from "../store/store";
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
-import { Link } from "react-router";
+import { useParams, useNavigate, Link } from "react-router";
 import Messages from "../components/Messages";
 import GameOver from "../components/GameOver";
 import Win from "../components/Win";
@@ -15,6 +14,7 @@ export default function ChatPage() {
     score,
     fetchScenario,
     scoreHistory,
+    resetGame,
   } = useStore();
   const params = useParams();
   const currentId = parseInt(params.sid);
@@ -56,14 +56,15 @@ export default function ChatPage() {
   }
 
   function onRestart() {
+    resetGame();
     setIsWin(null);
     fetchScenario(currentId);
   }
 
   return (
-    <div className="flex-1 flex flex-col min-h-screen bg-gray-50">
+    <div className="flex flex-col h-dvh bg-gray-50">
       <Description />
-      <nav className="sticky top-0 bg-white shadow-sm py-4 px-6 w-full z-50">
+      <nav className="bg-white shadow-sm py-4 px-6 w-full z-50">
         <div className="max-w-4xl mx-auto flex items-center justify-between">
           <h1 className="text-xl font-bold text-gray-800">
             MTLove Score: <span className="text-blue-600">{score}</span>
@@ -77,18 +78,18 @@ export default function ChatPage() {
               Challenge Description
             </button>
 
-            <Link to="/" className="btn btn-neutral">
+            <Link to="/" className="btn btn-neutral" onClick={resetGame}>
               Home
             </Link>
           </div>
         </div>
       </nav>
 
-      <div className="flex-1 w-full max-w-4xl mx-auto px-4 overflow-y-auto">
+      <div className="flex-1 w-full max-w-4xl mx-auto pb-4 overflow-y-auto">
         <Messages />
       </div>
 
-      <div className="sticky bottom-0 bg-white border-t border-gray-200 py-4 z-10">
+      <div className="bg-white border-t border-gray-200 py-4 z-10">
         <div className="max-w-4xl mx-auto px-4 flex gap-3">
           <textarea
             placeholder="Type your message here..."
@@ -108,3 +109,4 @@ export default function ChatPage() {
     </div>
   );
 }
+// pt-28 md:p-0
diff --git a/src/store/store.js b/src/store/store.js
index 8927e8c..c1bf942 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,12 +1,20 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { fetchDb } from './fetch';
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { fetchDb } from "./fetch";
 
 const API_KEY = import.meta.env.VITE_API_KEY;
 
 export const useStore = create(
   persist(
     (set, get) => ({
+      resetGame: () =>
+        set({
+          score: 0,
+          scoreHistory: [0],
+          userInput: "",
+          messages: [],
+        }),
+
       // 获取当前的 scenario
       fetchScenario: async (sid) => {
         try {
@@ -16,22 +24,22 @@ export const useStore = create(
             score: 0,
             systemPrompt: scenarioData.system,
             messages: [
-              { role: 'system', content: scenarioData.system },
-              { role: 'assistant', content: scenarioData.start },
+              { role: "system", content: scenarioData.system },
+              { role: "assistant", content: scenarioData.start },
             ],
           });
         } catch (error) {
-          console.error('Failed to fetch scenario:', error);
+          console.error("Failed to fetch scenario:", error);
         }
       },
 
-      userInput: '',
+      userInput: "",
       setUserInput: (input) => set({ userInput: input }),
 
-      token: '',
+      token: "",
       setToken: (newToken) => set({ token: newToken }),
 
-      systemPrompt: '',
+      systemPrompt: "",
       setSystemPrompt: (prompt) => set({ systemPrompt: prompt }),
 
       messages: [],
@@ -59,31 +67,31 @@ export const useStore = create(
         } = get();
         if (!userInput) return;
 
-        addMessage({ role: 'user', content: userInput }); // 添加用户对话
-        setUserInput(''); // 清空输入框
+        addMessage({ role: "user", content: userInput }); // 添加用户对话
+        setUserInput(""); // 清空输入框
 
         // console.log(api);
 
         const requestBody = {
-          model: 'gemini-2.0-flash-exp',
-          messages: [...messages, { role: 'user', content: userInput }],
+          model: "gemini-2.0-flash-exp",
+          messages: [...messages, { role: "user", content: userInput }],
           response_format: {
-            type: 'json_schema',
+            type: "json_schema",
             json_schema: {
-              name: 'compliance_result',
+              name: "compliance_result",
               schema: {
-                type: 'object',
+                type: "object",
                 properties: {
                   text: {
-                    type: 'string',
-                    description: 'Response text.',
+                    type: "string",
+                    description: "Response text.",
                   },
                   score: {
-                    type: 'number',
-                    description: 'Score of the response.',
+                    type: "number",
+                    description: "Score of the response.",
                   },
                 },
-                required: ['text', 'score'],
+                required: ["text", "score"],
                 additionalProperties: false,
               },
               strict: true,
@@ -96,9 +104,9 @@ export const useStore = create(
         const response = await fetch(
           `https://generativelanguage.googleapis.com/v1beta/openai/chat/completions`,
           {
-            method: 'POST',
+            method: "POST",
             headers: {
-              'Content-Type': 'application/json',
+              "Content-Type": "application/json",
               Authorization: `Bearer ${API_KEY}`,
             },
             body: JSON.stringify(requestBody),
@@ -114,9 +122,9 @@ export const useStore = create(
         const curScore = jsonObj.score;
         setScore(curScore);
         setScoreHistory(curScore);
-        addMessage({ role: 'assistant', content: jsonObj.text });
+        addMessage({ role: "assistant", content: jsonObj.text });
       },
     }),
-    { name: 'mtlove' }
+    { name: "mtlove" }
   )
 );
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..858c0d2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,10 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  // server: {
+  //   host: true,
+  // },
+});