From 9e221fdb995d5a489fb34133d2ab98d7907219bd Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Wed, 10 Apr 2024 15:47:36 -0400
Subject: feat: starting flip

---
 src/client/views/nodes/trails/PresBox.scss     |  4 --
 src/client/views/nodes/trails/SlideEffect.scss | 18 +++++
 src/client/views/nodes/trails/SlideEffect.tsx  | 94 +++++++++++++++++++++-----
 3 files changed, 95 insertions(+), 21 deletions(-)
 create mode 100644 src/client/views/nodes/trails/SlideEffect.scss

(limited to 'src')

diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 43f9ec78e..c937730ab 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -8,13 +8,9 @@
 }
 
 .pres-chat {
-    // padding: 8px;
     display: flex;
     flex-direction: column;
     gap: 8px;
-    // display: flex;
-    // align-items: center;
-    // gap: 16px;
 }
 
 .presBox-icon-list {
diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss
new file mode 100644
index 000000000..7d2929225
--- /dev/null
+++ b/src/client/views/nodes/trails/SlideEffect.scss
@@ -0,0 +1,18 @@
+.flip-container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    justify-content: center;
+}
+
+.flip-side {
+    position: absolute;
+    // max-width: 500px;
+    // max-height: 500px;
+    // width: 350px;
+    // height: 200px;
+    will-change: transform, opacity;
+}
+
+.flip-back {
+}
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index e3423069b..eee52c3ec 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -12,7 +12,7 @@ interface Props {
 }
 
 // TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, presEffect, children }: Props) {
     const [springs, api] = useSpring(
         () => ({
             from: {
@@ -154,7 +154,36 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         ],
     };
 
-    const flipConfig = {};
+    // Flip
+    // const flipConfig = {
+    //     from: {
+    //         // opacity: 0,
+    //         transform: `perspective(600px) rotateX(0deg)`,
+    //     },
+    //     to: {
+    //         // opacity: 1,
+    //         transform: `perspective(600px) rotateX(180deg)`,
+    //         config: {
+    //             tension: tension,
+    //             friction: friction,
+    //             mass: mass,
+    //         },
+    //     },
+    // };
+
+    const flipConfig = {
+        from: {
+            x: 0,
+        },
+        to: {
+            x: 180,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
 
     const startAnimation = () => {
         if (presEffect === PresEffect.Bounce) {
@@ -168,7 +197,51 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }
     };
 
-    const flipRender = () => {};
+    // const flipRender = () => {
+    //     return (
+    //         <div className="flip-container">
+    //             <animated.div className={'flip-side flip-back'} style={{ opacity: opacity.to(o => 1 - o), transform }} />
+    //             <animated.div
+    //                 className={'flip-side flip-front'}
+    //                 style={{
+    //                     opacity,
+    //                     transform,
+    //                     rotateX: '180deg',
+    //                 }}>
+    //                 {children}
+    //             </animated.div>
+    //         </div>
+    //     );
+    // };
+
+    const flipRender = () => {
+        return (
+            <div className="flip-container">
+                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`) }} />
+                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}>
+                    {children}
+                </animated.div>
+            </div>
+        );
+    };
+
+    const getRenderDoc = () => {
+        switch (presEffect) {
+            case PresEffect.Rotate:
+                return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
+            case PresEffect.Flip:
+                return flipRender();
+            default:
+                return (
+                    <animated.div
+                        style={{
+                            ...springs,
+                        }}>
+                        {children}
+                    </animated.div>
+                );
+        }
+    };
 
     useEffect(() => {
         // TODO: Control start with slide visibility instead
@@ -177,18 +250,5 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }, 200);
     }, []);
 
-    return (
-        <div>
-            {presEffect !== PresEffect.Rotate ? (
-                <animated.div
-                    style={{
-                        ...springs,
-                    }}>
-                    {children}
-                </animated.div>
-            ) : (
-                <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>
-            )}
-        </div>
-    );
+    return <div>{getRenderDoc()}</div>;
 }
-- 
cgit v1.2.3-70-g09d2