card game images, audio from urls

App/Frontend/screens/FlipCardGameScreen.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect,useRef } from 'react';
 import { StyleSheet, View, TouchableOpacity, Image, Text, Modal, Button } from 'react-native';
 import { Audio } from 'expo-av';
 
-const Card = ({ image, audio, onFlip, gameOver, correct }) => {
+
+
+const Card = ({ image, audio, onFlip, gameOver, correct, soundRef }) => {
   const [isFlipped, setIsFlipped] = useState(false);
+  const [loadingAudio, setLoadingAudio] = useState(false);
 
   useEffect(() => {
     if (gameOver) {
       setIsFlipped(true);
     }
   }, [gameOver]);
-
+  
   const handleFlip = async () => {
-    if (!isFlipped && !gameOver) {
+    if (!isFlipped && !gameOver && !loadingAudio) {
       setIsFlipped(true);
-      await Audio.Sound.createAsync(audio, { shouldPlay: true });
-      onFlip(image);
-
+      if (audio && audio.uri) {
+        setLoadingAudio(true);
+        try {
+          await soundRef.current.unloadAsync();
+          await soundRef.current.loadAsync({ uri: audio.uri }, { shouldPlay: true });
+        } catch (error) {
+          console.log('Error loading audio:', error);
+        } finally {
+          setLoadingAudio(false);
+        }
+      } else {
+        console.log('audio.uri not set');
+      }
+      onFlip(image); // Pass the entire image object, not just the uri
+  
       setTimeout(() => {
-        setIsFlipped(true);
+        setIsFlipped(false); // Set isFlipped to false, not true
       }, 800);
     }
   };
+  
   return (
     <TouchableOpacity
       style={[styles.card, correct && gameOver ? styles.correctCard : null]}
@@ -45,53 +61,79 @@ const MessageBox = ({ visible, onClose }) => {
   );
 };
 
-export default function FlipCardGame({ route }) {
+export default function FlipCardGame({ navigation }) {
   const [gameOver, setGameOver] = useState(false);
   const [imagesData, setImagesData] = useState([]);
-  //const { cards } = route.params;
-  //console.log(route.params);
+  const soundRef = React.useRef(new Audio.Sound());
+   
+  useEffect(() => {
+    const unloadAudio = async () => {
+      await soundRef.current.unloadAsync();
+    };
+
+    return () => {
+      soundRef.current.unloadAsync();
+    };
+  }, []);
+
+
+  useEffect(() => {
+    fetchImagesData();
+  }, []);
+
+  const mainImage = imagesData.find((img) => img.isMainImage);
 
   const fetchImagesData = async () => {
     try {
       const response = await fetch('http://192.168.137.111:5000/api/images_data');
       const data = await response.json();
-      setImagesData(data);
+      //console.log(data);
+  
+      const formattedData = [
+        { ...data.main_word, isMainImage: true, uri: data.main_word.audio_link },
+        { ...data.card_word1, isMainImage: false, uri: data.card_word1.audio_link },
+        { ...data.card_word2, isMainImage: false, uri: data.card_word2.audio_link },
+        { ...data.card_word3, isMainImage: false, uri: data.card_word3.audio_link },
+      ];
+
+      //console.log(formattedData);
+  
+      setImagesData(formattedData);
     } catch (error) {
       console.error('Error fetching images data:', error);
     }
   };
 
-  useEffect(() => {
-    fetchImagesData();
-  }, []);
-
-  const mainImage = imagesData.find((img) => img.isMainImage);
-
-  const handleCardFlip = (image) => {
-    if (image === mainImage) {
+  const handleCardFlip = (flippedImage) => {
+    if (flippedImage.uri === mainImage.image_link) {
       setGameOver(true);
+      navigation.navigate('ContentGeneration');
     }
   };
 
   return (
     <View style={styles.container}>
-      {mainImage && <Image source={{ uri: mainImage.image }} style={styles.mainImage} />}
+      {mainImage && <Image source={{ uri: mainImage.image_link }} style={styles.mainImage} />}
       <View style={styles.cardsContainer}>
-        {imagesData.map((img, index) => (
-          <Card
-            key={index}
-            image={{ uri: img.image }}
-            audio={{ uri: img.audio }}
-            onFlip={handleCardFlip}
-            gameOver={gameOver}
-            correct={img.isMainImage}
-          />
-        ))}
+        {imagesData
+          .filter((img) => !img.isMainImage) // Filter out the main image
+          .map((img, index) => (
+            <Card
+              key={index}
+              image={{ uri: img.image_link }}
+              audio={{ uri: img.audio_link }}
+              onFlip={handleCardFlip}
+              gameOver={gameOver}
+              correct={img.isMainImage}
+              soundRef={soundRef}
+            />
+          ))}
       </View>
-      <MessageBox visible={gameOver} onClose={() => setGameOver(false)} />
+ 
     </View>
   );
 }
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -100,13 +142,14 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
   mainImage: {
-    width: '100%',
+    width: '80%',
     height: '40%',
-    resizeMode: 'contain',
+    resizeMode: 'cover',
   },
   cardsContainer: {
     flexDirection: 'row',
     justifyContent: 'space-around',
+    alignItems: 'center', // Add this line
     width: '100%',
     paddingTop: 20,
   },

App/Frontend/screens/WordGenerationScreen.js

@@ -19,9 +19,9 @@ const screenHeight = Dimensions.get("window").height;
 
 const fetchCards = async () => {
   try {
-    const response = await fetch('http://192.168.137.111:5000/api/similar-words?word=school');
+    const response = await fetch('http://192.168.137.111:5000/api/similar-words?word=tomato');
     const data = await response.json();
-    console.log(data)
+    //console.log(data)
     return data.similar_words;
   } catch (error) {
     console.error('Error fetching cards:', error);
@@ -34,7 +34,7 @@ export default function ContentGenerationScreen({ navigation }) {
   const [cards, setCards] = useState([]);
   const scrollViewRef = useRef(null);
   const soundRef = useRef(new Audio.Sound());
-  console.log(cards);
+  //console.log(cards);
 
   useEffect(() => {
     const loadCards = async () => {