Skip to content

Commit

Permalink
Make card content work
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ell1ott
Ell1ott committed Dec 23, 2024
1 parent ede1740 commit 28ca3e6
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 49 deletions.
48 changes: 36 additions & 12 deletions app/components/swipe-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
{
Expand All @@ -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);

Expand All @@ -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);

Expand Down Expand Up @@ -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),
),
},

Expand All @@ -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,

Expand Down
76 changes: 39 additions & 37 deletions app/game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -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(() => {
Expand Down Expand Up @@ -72,49 +76,47 @@ 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(() => {
// The animation should be stopped after 400ms
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>
);
}

0 comments on commit 28ca3e6

Please sign in to comment.