Upload 9 files

src/views/StudentView.js

@@ -157,23 +157,13 @@ export async function renderStudentView() {
         // If actual stage > potential stage, it means tasks were reset/rejected.
         // We must devolve.
         if (actualStage > potentialStage) {
-            // Devolve immediately (or show animation? Immediate for compliance)
-            // We need to call DB update. But we are in render function.
-            // Side-effect in render is bad, but necessary for self-correction.
-            // Let's debounce or check if we haven't already corrected.
-            // console.warn("Devolving from", actualStage, "to", potentialStage);
-            // Trigger update async
+            // Regression Logic
+            // Call DB update and then force reload to reflect changes
             updateUserMonster(userId, potentialStage, null).then(() => {
-                // Reload to reflect
-                // window.location.reload(); // Might cause loop if not careful?
-                // If update succeeds, the subscription will fire? 
-                // No, subscription listens to PROGRESS, not USER profile updates unless we subscribe to USER too.
-                // We currently verify profile on load. 
-                // Let's just force a reload once to correct it.
-                /* setTimeout(() => window.location.reload(), 500); */
+                setTimeout(() => window.location.reload(), 500);
             });
-            // For THIS render, show potential stage
-            // return renderMonsterSection(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage });
+            // Show potential stage temporarily to avoid glitch
+            return renderMonsterSection(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage });
         }
 
         // 3. Display Logic
@@ -203,7 +193,7 @@ export async function renderStudentView() {
         <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 -->
             <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center" 
-                 style="transform: scale(${currentScale}); animation: walk-float 6s ease-in-out infinite;">
+                 style="transform: scale(${currentScale}); animation: walk-patrol 15s linear infinite;">
                 
                 <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
                     ${generateMonsterSVG(monster)}
@@ -231,12 +221,10 @@ export async function renderStudentView() {
             ` : ''}
 
             <!-- Stats Tooltip -->
-            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 mt-6 text-left pointer-events-auto shadow-2xl min-w-[120px]">
+            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 mt-6 text-left pointer-events-auto shadow-2xl min-w-[100px]">
                 <div class="font-bold text-white text-sm mb-1 text-center border-b border-gray-700 pb-1">${monster.name}</div>
-                <div class="space-y-1 mt-1">
-                    <div class="flex justify-between"><span>💖 愛心:</span> <span class="text-pink-400 font-bold">${totalLikes}</span></div>
-                    <div class="flex justify-between"><span>🏫 人數:</span> <span class="text-cyan-400 font-bold">${classSize}</span></div>
-                    <div class="flex justify-between"><span>⚔️ 任務:</span> <span class="text-yellow-400 font-bold">${totalCompleted}</span></div>
+                <div class="space-y-1 mt-1 text-center">
+                    <div class=""><span>💖</span> <span class="text-pink-400 font-bold ml-1">${totalLikes}</span></div>
                 </div>
             </div>
         </div>
@@ -246,10 +234,12 @@ export async function renderStudentView() {
                 0%, 100% { transform: translateY(0); filter: brightness(1); }
                 50% { transform: translateY(-3px); filter: brightness(1.1); }
             }
-            @keyframes walk-float {
-                0%, 100% { transform: translateX(0) scale(${currentScale}); }
-                25% { transform: translateX(-10px) rotate(-2deg) scale(${currentScale}); }
-                75% { transform: translateX(10px) rotate(2deg) scale(${currentScale}); }
+            @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}); }
             }
         </style>
         `;
@@ -354,11 +344,12 @@ export async function renderStudentView() {
         </div>
         
         <!-- Peer Learning FAB -->
-        <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"
+        <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"
             title="查看同學作業">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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>
         `;