game changes

App/Frontend/screens/FlipCardGameScreen.js

 import React, { useState, useEffect,useRef } from 'react';
 import { StyleSheet, View, TouchableOpacity, Image, Text, Modal, Button } from 'react-native';
 import { Audio } from 'expo-av';
-
-
+import { Asset } from 'expo-asset';
 
 const Card = ({ image, audio, onFlip, gameOver, correct, soundRef }) => {
   const [isFlipped, setIsFlipped] = useState(false);
@@ -48,12 +47,37 @@ const Card = ({ image, audio, onFlip, gameOver, correct, soundRef }) => {
   );
 };
 
-const MessageBox = ({ visible, onClose }) => {
+const MessageBox = ({ visible, onClose, onReset }) => {
+  const [messageBoxVisible, setMessageBoxVisible] = useState(visible);
+  const sound = React.useRef(new Audio.Sound());
+
+  useEffect(() => {
+    setMessageBoxVisible(visible);
+    if (visible) {
+      (async () => {
+        try {
+          await sound.current.unloadAsync();
+          const { sound: newSound } = await Audio.Sound.createAsync(
+            { uri: 'https://fyp-word-audio.s3.us-east-2.amazonaws.com/game_chime.m4a' }, // Replace with your audio file URL
+            { shouldPlay: true },
+          );
+          sound.current = newSound;
+        } catch (error) {
+          console.log('Error playing audio:', error);
+        }
+      })();
+      setTimeout(() => {
+        setMessageBoxVisible(false);
+        onReset();
+      }, 4000);
+    }
+  }, [visible]);
+
   return (
-    <Modal animationType="slide" transparent={true} visible={visible}>
+    <Modal animationType="slide" transparent={true} visible={messageBoxVisible}>
       <View style={styles.modalContainer}>
         <View style={styles.modalContent}>
-          <Text style={styles.modalText}>Game Over</Text>
+          <Text style={styles.modalText}>Awesome!!</Text>
           <Button title="Close" onPress={onClose} />
         </View>
       </View>
@@ -61,10 +85,11 @@ const MessageBox = ({ visible, onClose }) => {
   );
 };
 
-export default function FlipCardGame({ navigation }) {
+export default function FlipCardGame() {
   const [gameOver, setGameOver] = useState(false);
   const [imagesData, setImagesData] = useState([]);
   const soundRef = React.useRef(new Audio.Sound());
+  const mainImage = imagesData.find((img) => img.isMainImage);
    
   useEffect(() => {
     const unloadAudio = async () => {
@@ -76,12 +101,14 @@ export default function FlipCardGame({ navigation }) {
     };
   }, []);
 
-
   useEffect(() => {
     fetchImagesData();
   }, []);
 
-  const mainImage = imagesData.find((img) => img.isMainImage);
+  const resetGame = () => {
+    setGameOver(false);
+    fetchImagesData();
+  };
 
   const fetchImagesData = async () => {
     try {
@@ -107,7 +134,6 @@ export default function FlipCardGame({ navigation }) {
   const handleCardFlip = (flippedImage) => {
     if (flippedImage.uri === mainImage.image_link) {
       setGameOver(true);
-      navigation.navigate('ContentGeneration');
     }
   };
 
@@ -129,9 +155,16 @@ export default function FlipCardGame({ navigation }) {
             />
           ))}
       </View>
- 
+      <MessageBox style={styles.messagebox}
+        visible={gameOver}
+        onClose={() => {
+          setGameOver(false);
+        }}
+        onReset={resetGame}
+      />
     </View>
   );
+
 }
 
 const styles = StyleSheet.create({
@@ -143,7 +176,7 @@ const styles = StyleSheet.create({
   },
   mainImage: {
     width: '80%',
-    height: '40%',
+    height: '35%',
     resizeMode: 'cover',
   },
   cardsContainer: {
@@ -169,4 +202,17 @@ const styles = StyleSheet.create({
     borderColor: 'green',
     borderWidth: 5,
   },
+  modalContainer: {
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin:150,
+},
+modalContent: {
+  backgroundColor: '#fff',
+  padding: 20,
+  borderRadius: 10,
+  alignItems: 'center',
+  
+},
 });

App/Frontend/screens/WordGenerationScreen.js

-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useFocusEffect } from "react";
 import {
   View,
   Text,
@@ -9,6 +9,7 @@ import {
   Dimensions,
   ImageBackground ,
 } from "react-native";
+
 import { Audio } from "expo-av";
 import { MaterialIcons } from '@expo/vector-icons';
 import { Ionicons } from '@expo/vector-icons';
@@ -36,7 +37,7 @@ export default function ContentGenerationScreen({ navigation }) {
   const soundRef = useRef(new Audio.Sound());
   //console.log(cards);
 
-  useEffect(() => {
+   useEffect(() => {
     const loadCards = async () => {
       const fetchedCards = await fetchCards();
       setCards(fetchedCards);