From 28ca3e6285d35bbf472221f4dbda452d8f8d43c2 Mon Sep 17 00:00:00 2001
From: Ell1ott <85990359+Ell1ott@users.noreply.github.com>
Date: Mon, 23 Dec 2024 22:53:28 +1300
Subject: [PATCH] Make card content work

---
 app/components/swipe-card.tsx | 48 ++++++++++++++++------
 app/game.tsx                  | 76 ++++++++++++++++++-----------------
 2 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/app/components/swipe-card.tsx b/app/components/swipe-card.tsx
index c3548c8..41e4af6 100644
--- a/app/components/swipe-card.tsx
+++ b/app/components/swipe-card.tsx
@@ -10,21 +10,28 @@ import Animated, {
     runOnJS,
     interpolate,
 } from 'react-native-reanimated';
-import { memo, useEffect, useMemo, useRef } from 'react';
+import { memo, SetStateAction, useEffect, useMemo, useRef } from 'react';
+import { MutableRefObject } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+import { ClientScenario } from '../game';
+import { ChoiceOptions } from '~/src-old/app/game/components/ChoiceOptions';
 
 interface Card {
     title: string;
     description: string;
 }
 
-interface SwipeCardProps {
-    card: Card;
+type SwipeCardProps = {
+    card: { title: string; description: string };
     index: number;
     totalCards: number;
-    onDismiss: (direction: 'left' | 'right') => void;
-    // isAnimating: boolean;
-    setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;
-}
+    onDismiss: (direction: "optionA" | "optionB") => void;
+    choiseScenarios: MutableRefObject<{
+        optionA: ClientScenario | undefined;
+        optionB: ClientScenario | undefined;
+    }>;
+    setNextCard: (scenario: ClientScenario | undefined) => void;
+};
 
 const SWIPE_SPRING_CONFIG =
 {
@@ -35,9 +42,24 @@ const SWIPE_SPRING_CONFIG =
 
 export default memo(SwipeCard);
 
-function SwipeCard({ card, index, totalCards, onDismiss, setIsAnimating }: SwipeCardProps) {
+function SwipeCard({ card, index, totalCards, onDismiss, choiseScenarios, setNextCard }: SwipeCardProps) {
     const { width } = useWindowDimensions();
+
     const translateX = useSharedValue(0);
+
+    useEffect(() => {
+        if (index >= 0) {
+            translateX.addListener(1, (value) => {
+                if (!(choiseScenarios.current.optionA && choiseScenarios.current.optionB)) {
+                    console.log("whwhwh")
+                }                // console.log(nextScenario);
+
+            });
+        }
+        else {
+            translateX.removeListener(1);
+        }
+    }, [index]);
     const translateY = useSharedValue(index * 8);
     const isPressed = useSharedValue(false);
 
@@ -58,16 +80,18 @@ function SwipeCard({ card, index, totalCards, onDismiss, setIsAnimating }: Swipe
             translateX.value = event.translationX;
             translateY.value = event.translationY / (1 + Math.abs(event.translationY) / 200);
 
+            const nextScenario = event.translationX < 0 ? choiseScenarios.current.optionA : choiseScenarios.current.optionB;
 
+            setNextCard(nextScenario);
         })
         .onEnd((event) => {
             const predictedX = event.velocityX / 2 + event.translationX;
             const predictedY = event.velocityY / 2 + event.translationY;
+            const direction = predictedX > 0 ? 'optionA' : 'optionB';
             console.log(event.velocityX, event.velocityY, predictedX, predictedY);
-            if (Math.abs(event.velocityX) > VELOCITY_THRESHOLD && Math.abs(predictedX) > SWIPE_THRESHOLD) {
+            if (Math.abs(event.velocityX) > VELOCITY_THRESHOLD && Math.abs(predictedX) > SWIPE_THRESHOLD && choiseScenarios.current[direction]) {
                 const dis = Math.sqrt(predictedX ** 2 + predictedY ** 2) / 1000;
 
-                const direction = translateX.value > 0 ? 'right' : 'left';
 
                 runOnJS(onDismiss)(direction);
 
@@ -99,7 +123,7 @@ function SwipeCard({ card, index, totalCards, onDismiss, setIsAnimating }: Swipe
             { rotate: `${translateX.value / 10}deg` },
             {
                 scale: withTiming(
-                    1 - (index * 0.05) + (isPressed.value ? 0.1 : 0),
+                    1 - (index * 0.05) + (isPressed.value ? 0.05 : 0),
                 ),
             },
 
@@ -110,7 +134,7 @@ function SwipeCard({ card, index, totalCards, onDismiss, setIsAnimating }: Swipe
     return (
         <GestureDetector gesture={gesture}>
             <MotiView
-                className="absolute w-full bg-background rounded-lg shadow-lg p-6"
+                className="absolute h-full w-full bg-background rounded-lg shadow-lg p-6"
                 style={[
                     animatedStyle,
 
diff --git a/app/game.tsx b/app/game.tsx
index 5a86d89..063945a 100644
--- a/app/game.tsx
+++ b/app/game.tsx
@@ -5,9 +5,10 @@ import { router } from "expo-router";
 import SwipeCard from "./components/swipe-card";
 import { useEffect, useMemo, useState, useRef } from "react";
 import { supabase } from "~/lib/supabase/client";
+import { useSharedValue } from "react-native-reanimated";
 
 // Card data type
-type ClientScenario = {
+export type ClientScenario = {
   situation: string;
   optionA: { text: string; id: number };
   optionB: { text: string; id: number };
@@ -25,12 +26,15 @@ export default function GameScreen() {
   );
 
   const [isLoading, setIsLoading] = useState(false);
-  const [currentScenario, setCurrentScenario] = useState<ClientScenario | null>(
-    null
+  const [currentScenario, setCurrentScenario] = useState<ClientScenario | undefined>(
+    undefined
   );
-  const choiseScenarios = useRef({
-    optiosA: null,
-    optionB: null,
+  const choiseScenarios = useRef<{
+    optionA: ClientScenario | undefined;
+    optionB: ClientScenario | undefined;
+  }>({
+    optionA: undefined,
+    optionB: undefined,
   });
 
   useEffect(() => {
@@ -72,7 +76,7 @@ export default function GameScreen() {
     initializeScenario();
   }, []); // Empty dependency array means this runs once on mount
 
-  const handleDismiss = (direction: "left" | "right") => {
+  const handleDismiss = (direction: "optionA" | "optionB") => {
     setIsAnimating(true);
     console.log(`Card swiped ${direction}`);
     setTimeout(() => {
@@ -80,41 +84,39 @@ export default function GameScreen() {
       setIsAnimating(false);
       // Remove card which was swiped
       setCards((prevCards) => prevCards.slice(1));
+      setCurrentScenario(nextCard!);
     }, 400);
   };
-  const cardComponents = useMemo(
-    () => {
-      // Memoize the card components
-
-      return cards.map((card, index) => (
-        <SwipeCard
-          key={card}
-          card={{
-            title: `Card ${card}`,
-            description:
-              index === 0 ? MainCardContent : `Description for card ${card}`,
-          }}
-          index={index - (isAnimating ? 1 : 0)}
-          totalCards={cards.length}
-          onDismiss={handleDismiss}
-          setIsAnimating={setIsAnimating}
-        />
-      ));
-    },
-    [cards, isAnimating] // Add dependencies array
-  );
+  const [nextCard, setNextCard] = useState<ClientScenario | undefined>({ situation: "This is the next card", optionA: { text: "Option A", id: 1 }, optionB: { text: "Option B", id: 2 } });
+
+  useEffect(() => {
+    console.log(nextCard);
+  }, [nextCard]);
+  const cardComponents =
+
+    // Memoize the card components
+
+    cards.map((card, index) => (
+      <SwipeCard
+        key={card}
+        card={{
+          title: `Card ${card}`,
+          description:
+            index === 0 ? currentScenario?.situation ?? "." : nextCard?.situation ?? ".",
+        }}
+        index={index - (isAnimating ? 1 : 0)}
+        totalCards={cards.length}
+        onDismiss={handleDismiss}
+        choiseScenarios={choiseScenarios}
+        setNextCard={setNextCard}
+
+      />
+    ));
+
 
   return (
     <View className="flex-1 justify-center items-center p-6 bg-secondary/30">
-      <View className="w-full max-w-sm">{cardComponents}</View>
-      <Button
-        variant="outline"
-        className="shadow shadow-foreground/5 mt-40"
-        onPress={() => router.back()}
-      >
-        <Text>Go Back</Text>
-      </Button>
-      {/* <Text>Animating: {isAnimating ? 'Yes' : 'No'}</Text> */}
+      <View className="w-full max-w-sm h-[20rem]">{cardComponents}</View>
     </View>
   );
 }