From ac87a2fc800ee436bfb7bf50c5f1c605b89740f3 Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Tue, 25 Mar 2025 09:34:27 +0300
Subject: [PATCH] Refactor LessonDetail component to enhance student attendance
 display with 3D flip animation. Removed sorting to prevent reordering
 animation and added conditional rendering for present and not present states
 using Flex and Box components.

---
 src/pages/lesson-details.tsx | 85 ++++++++++++++++++++++++++++--------
 1 file changed, 67 insertions(+), 18 deletions(-)

diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx
index 703c896..37700ab 100644
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@@ -11,6 +11,7 @@ import {
   Heading,
   Stack,
   useColorMode,
+  Flex,
 } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 
@@ -202,7 +203,8 @@ const LessonDetail = () => {
       }
     }
 
-    return allStudents.sort((a, b) => (a.present ? -1 : 1))
+    // Removing the sorting to prevent reordering animation
+    return allStudents
   }, [accessCode?.body, AllStudents.data, prevPresentStudentsRef.current])
 
   // Функция для определения цвета на основе посещаемости
@@ -298,35 +300,82 @@ const LessonDetail = () => {
                   {studentsArr.map((student) => (
                     <motion.li
                       key={student.sub}
-                      layout
-                      initial={{ opacity: 0, scale: 0.8 }}
                       animate={{ 
-                        opacity: 1, 
-                        scale: 1,
-                        // Добавляем подсветку для недавно отметившихся студентов
+                        rotateY: student.present ? 0 : 180,
                         boxShadow: student.recentlyPresent 
                           ? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)'] 
                           : '0 0 0 0 rgba(0, 0, 0, 0)'
                       }}
-                      exit={{ opacity: 0, scale: 0.8 }}
                       transition={{ 
-                        type: "spring", 
-                        stiffness: 300, 
-                        damping: 30,
-                        layout: { duration: 0.4 },
+                        rotateY: { type: "spring", stiffness: 300, damping: 20 },
                         boxShadow: {
                           repeat: student.recentlyPresent ? 3 : 0,
                           duration: 1.5
                         }
                       }}
+                      style={{ 
+                        transformStyle: "preserve-3d",
+                        perspective: "1000px"
+                      }}
                     >
-                      <UserCard
-                        wrapperAS="div"
-                        student={student}
-                        present={student.present}
-                        recentlyPresent={student.recentlyPresent}
-                        onAddUser={(user: User) => manualAdd({ lessonId, user })}
-                      />
+                      {/* Front side - visible when present */}
+                      <Box 
+                        position="relative" 
+                        width="100%" 
+                        height="100%"
+                        style={{
+                          transformStyle: "preserve-3d"
+                        }}
+                      >
+                        <Box
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(0deg)",
+                            zIndex: student.present ? 1 : 0
+                          }}
+                        >
+                          <UserCard
+                            wrapperAS="div"
+                            student={student}
+                            present={student.present}
+                            recentlyPresent={student.recentlyPresent}
+                            onAddUser={(user: User) => manualAdd({ lessonId, user })}
+                          />
+                        </Box>
+                        
+                        {/* Back side - visible when not present */}
+                        <Flex
+                          position="absolute"
+                          top="0"
+                          left="0"
+                          width="100%"
+                          height="100%"
+                          bg={colorMode === "light" ? "gray.100" : "gray.600"}
+                          borderRadius="md"
+                          align="center"
+                          justify="center"
+                          p={4}
+                          style={{
+                            backfaceVisibility: "hidden",
+                            transform: "rotateY(180deg)",
+                            zIndex: student.present ? 0 : 1
+                          }}
+                        >
+                          <Box textAlign="center">
+                            <Box fontSize="sm" fontWeight="medium">
+                              {student.name || student.lastName}
+                            </Box>
+                            <Box fontSize="xs" opacity={0.8}>
+                              {t('journal.pl.lesson.notMarked')}
+                            </Box>
+                          </Box>
+                        </Flex>
+                      </Box>
                     </motion.li>
                   ))}
                 </AnimatePresence>