Upload 9 files

src/views/StudentView.js

@@ -192,14 +192,16 @@ export async function renderStudentView() {
         return `
         <div id="monster-container-fixed" class="fixed top-32 left-8 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-32 h-32">
             <!-- Walking Container -->
+            <!-- Walking Container (Handles Movement Only) -->
             <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center" 
-                 style="transform: scale(${currentScale}); animation: walk-patrol 15s linear infinite;">
+                 style="transform: scale(${currentScale}); animation: patrol-move 15s linear infinite;">
                 
-                <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
+                <!-- Monster Sprite (Handles Flip & Breathe) -->
+                <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out, patrol-flip 15s linear infinite;">
                     ${generateMonsterSVG(monster)}
                 </div>
                 
-                <!-- Level Indicator -->
+                <!-- Level Indicator (No Flip) -->
                 <div class="absolute -bottom-2 -right-2 bg-gray-900/90 text-xs text-yellow-400 px-2 py-0.5 rounded-full border border-yellow-500/50 font-mono font-bold transform scale-75 origin-top-left whitespace-nowrap">
                     Lv.${1 + totalCompleted}
                 </div>
@@ -234,12 +236,19 @@ export async function renderStudentView() {
                 0%, 100% { transform: translateY(0); filter: brightness(1); }
                 50% { transform: translateY(-3px); filter: brightness(1.1); }
             }
-            @keyframes walk-patrol {
-                0% { transform: translateX(0) scaleX(1) scale(${currentScale}); }
-                45% { transform: translateX(120px) scaleX(1) scale(${currentScale}); }
-                50% { transform: translateX(120px) scaleX(-1) scale(${currentScale}); }
-                95% { transform: translateX(0) scaleX(-1) scale(${currentScale}); }
-                100% { transform: translateX(0) scaleX(1) scale(${currentScale}); }
+            @keyframes patrol-move {
+                0% { transform: translateX(0); }
+                45% { transform: translateX(120px); }
+                55% { transform: translateX(120px); }
+                95% { transform: translateX(0); }
+                100% { transform: translateX(0); }
+            }
+            @keyframes patrol-flip {
+                0% { transform: scaleX(1); }
+                49% { transform: scaleX(1); }
+                50% { transform: scaleX(-1); }
+                99% { transform: scaleX(-1); }
+                100% { transform: scaleX(1); }
             }
         </style>
         `;
@@ -281,17 +290,20 @@ export async function renderStudentView() {
     return `
     <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
         <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
-            <div class="flex flex-col items-end">
-                <div class="flex items-center space-x-2">
-                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                    <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
+            <div class="flex items-center space-x-4">
+                <div class="flex flex-col items-end">
+                    <div class="flex items-center space-x-2">
+                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                        <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
                 </div>
-                <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
+                <button onclick="window.logout()" class="text-gray-500 hover:text-red-400 transition-colors p-2" title="登出">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                    </svg>
+                </button>
             </div>
-            <!-- Logo removed/minimized since we have Monster -->
-            <!-- <div>
-                <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>
-            </div> -->
         </header>
 
         <div class="space-y-4">
@@ -344,12 +356,11 @@ export async function renderStudentView() {
         </div>
         
         <!-- Peer Learning FAB -->
-        <button onclick="window.openPeerModal()" class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-5 shadow-[0_0_20px_rgba(147,51,234,0.6)] transition-transform hover:scale-110 active:scale-90 z-40 flex items-center space-x-2"
+        <button onclick="window.openPeerModal()" class="fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90 z-40"
             title="查看同學作業">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
             </svg>
-            <span class="font-bold text-lg hidden sm:inline">查看同學提示詞</span>
         </button>
     </div>
         `;
@@ -489,6 +500,14 @@ function participantDataCheck(roomCode, userId) {
     return true;
 }
 
+window.logout = () => {
+    if (!confirm("確定要登出嗎？")) return;
+    localStorage.removeItem('vibecoding_user_id');
+    localStorage.removeItem('vibecoding_room_code');
+    localStorage.removeItem('vibecoding_nickname');
+    window.location.reload();
+};
+
 // Peer Learning Modal Logic
 function renderPeerModal() {
     // We need to re-fetch challenges for the dropdown?