game design

src/constants/colors.js

@@ -9,4 +9,14 @@ export default {
   gray: '#666666',
   grayLight: '#ccc',
   black: '#0a0a0a',
+  navyBlue: '#000080',
+  purple: '#DFCCFB',
+  light_purple: '#D9ACF5',
+  dark_purple: '#BEADFA',
+  pink: '#EF9595',
+  normal_purple: '#80558C',
+  rose: '#FFACC7',
+  pastalBlue: '#D2E9E9',
+  purple_new: '#AC87C5',
+  pink_new: '#FF8080',
 };

src/screens/home/game/GameLevelPage.js

+import React from 'react';
+import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+
+const GameLevelPage = ({route, navigation}) => {
+  const {predictedGameLevel} = route.params;
+
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[
+        '#D9EDBF',
+        '#FFD3B5',
+        COLORS.white,
+        '#E8D3FF',
+        '#DAF1F9',
+        '#F6DFEB',
+      ]}
+      start={{x: 0.0, y: 0.0}}
+      end={{x: 1.0, y: 1.0}}>
+      <View style={styles.container}>
+        <View style={styles.mainContainer}>
+          <Text style={styles.mainText}>Your Gaming Level</Text>
+        </View>
+        <View style={styles.diamondContainer}>
+          <View style={styles.innerCircle}>
+            <Text style={styles.scoreText}>{predictedGameLevel}</Text>
+          </View>
+        </View>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            navigation.navigate(ROUTES.CHOOSE_GAME, {predictedGameLevel})
+          }>
+          <Text style={styles.buttonText}>Choose a Game</Text>
+        </TouchableOpacity>
+      </View>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientBackground: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  diamondContainer: {
+    width: 250,
+    height: 250,
+    transform: [{rotate: '45deg'}],
+    backgroundColor: '#e76f51',
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    borderRadius: 20,
+  },
+  innerCircle: {
+    width: 180,
+    height: 180,
+    borderRadius: 90,
+    backgroundColor: '#f4a261',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{rotate: '-45deg'}],
+    elevation: 50,
+  },
+  scoreText: {
+    color: '#ffffff',
+    fontSize: 100,
+    fontWeight: 'bold',
+  },
+  mainText: {
+    color: 'white',
+    fontSize: 25,
+    fontWeight: 'bold',
+    position: 'absolute',
+  },
+  button: {
+    backgroundColor: '#f4a261',
+    top: 150,
+    borderRadius: 10,
+    elevation: 5,
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    height: 50,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  mainContainer: {
+    elevation: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    backgroundColor: '#f4a261',
+    height: 50,
+    width: '100%',
+    bottom: 200,
+  },
+});
+
+export default GameLevelPage;

src/screens/home/game/QuizOptions.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  ScrollView,
+  ImageBackground,
+  Text,
+  Image,
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+
+const QuizOptionsPage = ({navigation}) => {
+  return (
+    <>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Image
+          source={{
+            uri: 'https://www.cdc.gov/reproductivehealth/features/maternal-depression/images/feature-maternal-health-depression-2021.png?_=20351',
+          }}
+          style={{width: 450, height: 400}}
+          resizeMode="contain"
+        />
+      </View>
+      <View style={styles.bottomView}>
+        <View style={{padding: 25}}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              display: 'flex',
+            }}>
+            <Text
+              style={{
+                display: 'flex',
+                color: '#DC143C',
+                fontSize: 20,
+                fontWeight: 'bold',
+                marginBottom: 25,
+              }}>
+              The Edinburgh Postnatal Depression
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              Scale (EDPS)
+            </Text>
+          </View>
+          <View
+            style={{
+              justifyContent: 'center',
+              padding: 10,
+            }}>
+            <Text
+              style={{
+                color: 'black',
+                fontSize: 14,
+                fontWeight: 'bold',
+                textAlign: 'justify',
+              }}>
+              The questionnaire below is called the Edinburgh Postnatal
+              Depression Scale (EDPS) The EDPS was developed to identify women
+              who may have postpartum depression. Each answer is given a score
+              of 0 to 3 . The maximum score is 30.
+            </Text>
+          </View>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <Text
+              style={{
+                color: 'black',
+                fontSize: 18,
+                fontWeight: 'bold',
+                marginTop: 40,
+                textAlign: 'justify',
+              }}>
+              Select Your Prefered Option to Answer
+            </Text>
+          </View>
+
+          <View style={{marginTop: 40}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: COLORS.pink_new,
+                height: 50,
+                marginBottom: 20,
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 14,
+                width: '100%',
+                elevation: 10,
+              }}
+              onPress={() => navigation.navigate(ROUTES.GAME_MAIN_DETAILS)}>
+              <Text
+                medium
+                center
+                style={{color: 'white', fontSize: 20, fontWeight: 'bold'}}>
+                English
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={{marginTop: 7}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: COLORS.pink_new,
+                height: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 14,
+                width: '100%',
+                elevation: 10,
+              }}
+              onPress={() =>
+                navigation.navigate(ROUTES.MainDetailsFormInSinhala)
+              }>
+              <Text
+                medium
+                center
+                style={{color: 'white', fontSize: 20, fontWeight: 'bold'}}>
+                සිංහල
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  brandViewText: {
+    color: '#F7A4A4',
+    fontSize: 40,
+    fontWeight: 'bold',
+  },
+  bottomView: {
+    flex: 2,
+    backgroundColor: '#FFE6EB',
+  },
+});
+
+export default QuizOptionsPage;

src/screens/home/game/QuizScore.js

+import React, {useState, useEffect} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ImageBackground,
+  Text,
+  ActivityIndicator,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+import axios from 'axios';
+import {gameLevelPredict} from '../../../services/games';
+
+const QuizScoreDisplayPage = ({route, navigation}) => {
+  //   const {score} = route.params;
+  const {formData} = route.params || {
+    formData: {},
+  };
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate a loading process, e.g., fetching data
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2000); // 2000 milliseconds = 2 seconds
+
+    return () => clearTimeout(timer); // Clean up the timer
+  }, []);
+
+  const handleChooseGamePress = async () => {
+    let musicFields = {
+      music_name_a: 0,
+      music_name_b: 0,
+      music_name_c: 0,
+      music_name_d: 0,
+      music_name_e: 0,
+      music_name_f: 0,
+    };
+
+    // Generate a random index to set one music name field to 1
+    const musicKeys = Object.keys(musicFields);
+    const randomIndex = Math.floor(Math.random() * musicKeys.length);
+    musicFields[musicKeys[randomIndex]] = 1;
+    console.log(musicFields, 'musicFields');
+    try {
+      const response = await gameLevelPredict(
+        formData.age, // Assuming formData contains 'age'
+        formData.depression_level, // Passed from previous screen
+        formData.previous_child_birth_experiences, // Assuming formData contains 'previous_child_birth_experiences'
+        formData.marital_status_divorced, // Assuming formData contains boolean values for these fields
+        formData.marital_status_married,
+        formData.marital_status_single,
+        formData.family_background_bad,
+        formData.family_background_good,
+        formData.family_background_normal,
+        musicFields.music_name_a,
+        musicFields.music_name_b,
+        musicFields.music_name_c,
+        musicFields.music_name_d,
+        musicFields.music_name_e,
+        musicFields.music_name_f,
+      );
+      console.log(formData.age, 'age');
+      console.log(formData.depression_level, 'depression_level');
+      console.log(
+        formData.previous_child_birth_experiences,
+        'previous_child_birth_experiences',
+      );
+      console.log(formData.marital_status_divorced, 'marital_status_divorced');
+      console.log(formData.marital_status_married, 'marital_status_married');
+      console.log(formData.marital_status_single, 'marital_status_single');
+      console.log(formData.family_background_bad, 'family_background_bad');
+      console.log(formData.family_background_good, 'family_background_good');
+      console.log(
+        formData.family_background_normal,
+        'family_background_normal',
+      );
+      console.log(musicFields.music_name_a, 'a');
+      console.log(musicFields.music_name_b, 'b');
+      console.log(musicFields.music_name_c, 'c');
+      console.log(musicFields.music_name_d, 'd');
+      console.log(musicFields.music_name_e, 'e');
+      console.log(musicFields.music_name_f, 'f');
+      if (response && response.data && response.data.prediction) {
+        console.log('API call successful with response:', response.data);
+        const predictedGameLevel = parseInt(
+          response.data.prediction.match(/\d+/)[0],
+          10,
+        );
+        navigation.navigate(ROUTES.GameLevelPage, {predictedGameLevel});
+      } else {
+        console.error('API call failed with response:', response.data);
+      }
+    } catch (error) {
+      console.error('API call encountered an error:', error);
+    }
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <View style={styles.loaderContainer}>
+          <ActivityIndicator size={150} color={COLORS.dark_purple} />
+        </View>
+      ) : (
+        <ImageBackground
+          source={IMGS.game_img_5}
+          style={styles.backgroundImage}
+          resizeMode="cover">
+          <View style={styles.container}>
+            <Text style={styles.mainText}>Your Depression Level</Text>
+            <View style={styles.mainCircle}>
+              <View style={styles.circle}>
+                <Text style={styles.scoreText}>
+                  {formData.depression_level}/30
+                </Text>
+              </View>
+            </View>
+            <View style={styles.bottomContainer}>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={handleChooseGamePress}>
+                {/* onPress={() => navigation.navigate(ROUTES.Level01Instructions)}> */}
+                <Text bold medium center style={styles.buttonText}>
+                  Check Your Gaming Level
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ImageBackground>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 50,
+  },
+  backgroundImage: {
+    flex: 1,
+    width: '79%',
+    height: '80%',
+  },
+  circle: {
+    width: 180,
+    height: 180,
+    borderRadius: 100,
+    backgroundColor: '#FF9494',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 3,
+  },
+  mainCircle: {
+    width: 210,
+    height: 210,
+    borderRadius: 125,
+    backgroundColor: '#FFD1D1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#DE3163',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 5,
+    marginTop: 330,
+    marginLeft: 210,
+  },
+  scoreText: {
+    color: '#fff',
+    fontSize: 40,
+  },
+  mainText: {
+    color: '#000',
+    fontSize: 22,
+    marginBottom: 30,
+    fontWeight: 'bold',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    marginTop: 22,
+  },
+  button: {
+    backgroundColor: '#1572A1',
+    height: 50,
+    marginBottom: 90,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 160,
+    borderRadius: 14,
+    width: 350,
+    marginLeft: 250,
+    elevation: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 17,
+  },
+  bottomContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: '#9AD0EC',
+    borderTopLeftRadius: 65,
+    borderTopRightRadius: 165,
+    width: 500,
+  },
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default QuizScoreDisplayPage;

src/screens/home/game/WelcomeGame.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {Image, TouchableOpacity, Text, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import Button from '../../../components/Button';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+
+const WelcomePageGame = ({navigation}) => {
+  return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[COLORS.purple, COLORS.white]}>
+      <View>
+        <View>
+          <Image
+            source={IMGS.game_img_1}
+            style={{
+              height: 400,
+              width: 210,
+              borderRadius: 20,
+              position: 'absolute',
+              top: 2,
+              left: 2,
+              transform: [
+                {translateX: 50},
+                {translateY: 50},
+                {rotate: '-15deg'},
+              ],
+            }}
+          />
+        </View>
+
+        <View
+          style={{
+            paddingHorizontal: 22,
+            position: 'absolute',
+            top: 450,
+            width: '100%',
+          }}>
+          <Text
+            style={{
+              fontSize: 48,
+              color: COLORS.black,
+              fontWeight: 'bold',
+            }}>
+            Let's Get
+          </Text>
+          <Text
+            style={{
+              fontSize: 48,
+              color: COLORS.black,
+              fontWeight: 'bold',
+            }}>
+            Started...
+          </Text>
+
+          <View style={{marginVertical: 20}}>
+            <Text
+              style={{
+                fontSize: 16,
+                color: COLORS.black,
+                fontWeight: 'bold',
+                marginVertical: 20,
+              }}>
+              Enjoy every single moment.
+            </Text>
+            <Text
+              style={{
+                fontSize: 16,
+                color: COLORS.black,
+                fontWeight: 'bold',
+              }}>
+              Bad moments don't make bad mamas.
+            </Text>
+          </View>
+          <View style={{marginTop: 1}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: COLORS.purple_new,
+                borderColor: COLORS.purple_new,
+                height: 50,
+                marginBottom: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 14,
+                width: '100%',
+                zIndex: 3,
+                elevation: 10,
+              }}
+              onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+              <Text
+                medium
+                center
+                style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
+                Start
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+export default WelcomePageGame;

src/screens/home/game/game01/GameLevel0.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Button,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const BoardSize = 3;
+const CandyTypes = ['🤰', '🍼', '👶'];
+
+const GameLevel0 = ({navigation}) => {
+  const [board, setBoard] = useState(createBoard());
+  const [score, setScore] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(20);
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_a.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  const resetGame = () => {
+    setBoard(createBoard());
+    // setScore(0);
+    // setTimeLeft(60); // Reset time to 60 seconds
+    setSelectedCandy(null);
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0 && score >= 25) {
+      Alert.alert(
+        'Congratulations  🥳🥳',
+        `Time is up! You win!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.Level03);
+            },
+          },
+        ],
+      );
+    } else if (timeLeft === 0 && score < 25) {
+      Alert.alert(
+        'Game Over',
+        `Time is up! You lose!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+            },
+          },
+        ],
+      );
+    }
+  }, [timeLeft, score, navigation]);
+
+  function createBoard() {
+    const newBoard = [];
+    for (let row = 0; row < BoardSize; row++) {
+      const newRow = [];
+      for (let col = 0; col < BoardSize; col++) {
+        newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+      }
+      newBoard.push(newRow);
+    }
+    return newBoard;
+  }
+
+  function handlePress(row, col) {
+    if (selectedCandy) {
+      const [selectedRow, selectedCol] = selectedCandy;
+      const dx = Math.abs(selectedRow - row);
+      const dy = Math.abs(selectedCol - col);
+      if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
+        // Adjacent candy selected
+        const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
+        [newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
+          newBoard[row][col],
+          newBoard[selectedRow][selectedCol],
+        ];
+        if (checkForMatch(newBoard)) {
+          setBoard(newBoard);
+        }
+      }
+      setSelectedCandy(null);
+    } else {
+      setSelectedCandy([row, col]);
+    }
+  }
+
+  function isBoardClear() {
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize; col++) {
+        if (board[row][col] !== null) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  function checkForMatch(board) {
+    const toClear = [];
+    // Check for horizontal matches
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize - 2; col++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row][col + 1] &&
+          candy === board[row][col + 2]
+        ) {
+          toClear.push([row, col], [row, col + 1], [row, col + 2]);
+        }
+      }
+    }
+
+    // Check for vertical matches
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize - 2; row++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row + 1][col] &&
+          candy === board[row + 2][col]
+        ) {
+          toClear.push([row, col], [row + 1, col], [row + 2, col]);
+        }
+      }
+    }
+
+    if (toClear.length === 0) return false; // No matches found
+
+    // Clear matched candies
+    let points = 0;
+    toClear.forEach(([row, col]) => {
+      if (board[row][col] !== null) {
+        points += 5; // Assuming each candy gives 5 points
+        board[row][col] = null;
+      }
+    });
+    setScore(prevScore => prevScore + points);
+
+    // Make candies fall down
+    for (let col = 0; col < BoardSize; col++) {
+      let shift = 0;
+      for (let row = BoardSize - 1; row >= 0; row--) {
+        if (board[row][col] === null) {
+          shift++;
+        } else if (shift > 0) {
+          board[row + shift][col] = board[row][col];
+          board[row][col] = null;
+        }
+      }
+    }
+
+    // Refill the board
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize; row++) {
+        if (board[row][col] === null) {
+          board[row][col] =
+            CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
+        }
+      }
+    }
+
+    return true; // Matches were found and cleared
+  }
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_6}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 40,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 12,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Button
+        title="Refresh"
+        onPress={resetGame}
+        color="#097969"
+        style={{marginBottom: 10}}
+      />
+      <Text style={styles.text}>Winning Score: 25</Text>
+      <Text style={styles.text}>Score: {score}</Text>
+      <Text style={styles.text}>Time Left: {timeLeft}s</Text>
+      <View style={styles.board}>
+        {board.map((row, rowIndex) => (
+          <View key={rowIndex} style={styles.row}>
+            {row.map((candy, colIndex) => (
+              <TouchableOpacity
+                key={colIndex}
+                style={styles.candy}
+                onPress={() => handlePress(rowIndex, colIndex)}>
+                <Text style={styles.candyText}>{candy}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+      <View style={{marginTop: 90}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: '#804674',
+            height: 50,
+            marginBottom: 60,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // marginHorizontal: 25,
+            borderRadius: 16,
+            width: 320,
+          }}
+          onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+          <Text
+            bold
+            medium
+            center
+            style={{
+              color: 'white',
+              fontSize: 22,
+              fontWeight: 'bold',
+            }}>
+            Exit
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  board: {
+    width: 250,
+    height: 250,
+    backgroundColor: '#CCCCFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    // borderRadius: 25,
+  },
+
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  candy: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderWidth: 1,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 2,
+  },
+  candyText: {
+    fontSize: 30,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    includeFontPadding: false,
+    flex: 1,
+  },
+  text: {
+    color: 'black',
+    marginBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default GameLevel0;

src/screens/home/game/game01/GameLevel3.js

+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  Button,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, ROUTES, COLORS} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const BoardSize = 8;
+const CandyTypes = ['🤰', '🥦', '🐶', '🍧', '🍉', '🍄', '🍬', '👶', '🚫'];
+const WinningScore = 75;
+const InitialTime = 60;
+
+const CandyCrushGameLevel03 = ({navigation}) => {
+  const [board, setBoard] = useState(createBoard());
+  const [score, setScore] = useState(0);
+  const [timeLeft, setTimeLeft] = useState(60);
+  const [selectedCandy, setSelectedCandy] = useState(null);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_d.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0 && score >= 75) {
+      Alert.alert(
+        'Congratulations  🥳🥳',
+        `Time is up! You win!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              // Navigate to different screens based on the score
+              // if (score >= 50) {
+              navigation.navigate(ROUTES.Level04);
+              // } else {
+              // 	navigation.navigate("Candy Crush");
+              // }
+            },
+          },
+        ],
+      );
+    } else if (timeLeft === 0 && score < 75) {
+      Alert.alert(
+        'Game Over',
+        `Time is up! You lose!
+				`,
+        [
+          {
+            text: 'OK',
+            onPress: () => {
+              // Navigate to different screens based on the score
+              // if (score >= 50) {
+              // 	navigation.navigate("GameLevel03");
+              // } else {
+              navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS);
+              // }
+            },
+          },
+        ],
+      );
+    }
+  }, [timeLeft, score, navigation]);
+
+  function createBoard() {
+    const newBoard = [];
+    for (let row = 0; row < BoardSize; row++) {
+      const newRow = [];
+      for (let col = 0; col < BoardSize; col++) {
+        newRow.push(CandyTypes[Math.floor(Math.random() * CandyTypes.length)]);
+      }
+      newBoard.push(newRow);
+    }
+    return newBoard;
+  }
+
+  const resetGame = () => {
+    setBoard(createBoard());
+    // setScore(0);
+    // setTimeLeft(InitialTime);
+    setSelectedCandy(null);
+  };
+
+  const handlePress = (row, col) => {
+    if (board[row][col] === '🚫') return; // Prevent pressing the "🚫" emoji
+
+    if (selectedCandy) {
+      const [selectedRow, selectedCol] = selectedCandy;
+      const dx = Math.abs(selectedRow - row);
+      const dy = Math.abs(selectedCol - col);
+      if ((dx === 1 && dy === 0) || (dx === 0 && dy === 1)) {
+        // Adjacent candy selected
+        const newBoard = JSON.parse(JSON.stringify(board)); // Deep clone the board
+        [newBoard[selectedRow][selectedCol], newBoard[row][col]] = [
+          newBoard[row][col],
+          newBoard[selectedRow][selectedCol],
+        ];
+        if (checkForMatch(newBoard)) {
+          setBoard(newBoard);
+        }
+      }
+      setSelectedCandy(null);
+    } else {
+      setSelectedCandy([row, col]);
+    }
+  };
+
+  function checkForMatch(board) {
+    const toClear = [];
+    // Check for horizontal matches
+    for (let row = 0; row < BoardSize; row++) {
+      for (let col = 0; col < BoardSize - 2; col++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row][col + 1] &&
+          candy === board[row][col + 2]
+        ) {
+          toClear.push([row, col], [row, col + 1], [row, col + 2]);
+        }
+      }
+    }
+
+    // Check for vertical matches
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize - 2; row++) {
+        const candy = board[row][col];
+        if (
+          candy &&
+          candy === board[row + 1][col] &&
+          candy === board[row + 2][col]
+        ) {
+          toClear.push([row, col], [row + 1, col], [row + 2, col]);
+        }
+      }
+    }
+
+    if (toClear.length === 0) return false; // No matches found
+
+    // Clear matched candies
+    let points = 0;
+    toClear.forEach(([row, col]) => {
+      if (board[row][col] !== null) {
+        points += 5; // Assuming each candy gives 5 points
+        board[row][col] = null;
+      }
+    });
+    setScore(prevScore => prevScore + points);
+
+    // Make candies fall down
+    for (let col = 0; col < BoardSize; col++) {
+      let shift = 0;
+      for (let row = BoardSize - 1; row >= 0; row--) {
+        if (board[row][col] === null) {
+          shift++;
+        } else if (shift > 0) {
+          board[row + shift][col] = board[row][col];
+          board[row][col] = null;
+        }
+      }
+    }
+
+    // Refill the board
+    for (let col = 0; col < BoardSize; col++) {
+      for (let row = 0; row < BoardSize; row++) {
+        if (board[row][col] === null) {
+          board[row][col] =
+            CandyTypes[Math.floor(Math.random() * CandyTypes.length)];
+        }
+      }
+    }
+
+    return true; // Matches were found and cleared
+  }
+  return (
+    <ImageBackground
+      source={IMGS.game_img_8}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 1}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 40,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            marginTop: 12,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Button title="Refresh" onPress={resetGame} color="#702963" />
+      <Text style={styles.text}>Winning Score: 75</Text>
+      <Text style={styles.text}>Score: {score}</Text>
+      <Text style={styles.text}>Time Left: {timeLeft}s</Text>
+      <View style={styles.board}>
+        {board.map((row, rowIndex) => (
+          <View key={rowIndex} style={styles.row}>
+            {row.map((candy, colIndex) => (
+              <TouchableOpacity
+                key={colIndex}
+                style={styles.candy}
+                onPress={() => handlePress(rowIndex, colIndex)}>
+                <Text style={styles.candyText}>{candy}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </View>
+      <View style={{marginTop: 60}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: '#702963',
+            height: 50,
+            marginBottom: 60,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // marginHorizontal: 25,
+            borderRadius: 16,
+            width: 320,
+          }}
+          onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}>
+          <Text
+            bold
+            medium
+            center
+            style={{
+              color: 'white',
+              fontSize: 22,
+              fontWeight: 'bold',
+            }}>
+            Exit
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: 'black',
+    marginBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  board: {
+    width: 380,
+    height: 400,
+    backgroundColor: '#191970',
+    borderColor: 'white',
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  candy: {
+    flex: 1,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'white',
+    borderWidth: 1,
+    borderRadius: 4,
+  },
+  candyText: {
+    fontSize: 30,
+  },
+});
+
+export default CandyCrushGameLevel03;

src/screens/home/game/game01/GameLevel5.js

+/* eslint-disable react-native/no-inline-styles */
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Alert,
+  ImageBackground,
+} from 'react-native';
+import {IMGS, COLORS, ROUTES} from '../../../../constants';
+import Sound from 'react-native-sound';
+
+const rockImage = IMGS.game_img_10;
+const paperImage = IMGS.game_img_11;
+const scissorsImage = IMGS.game_img_12;
+
+const choices = {
+  rock: rockImage,
+  paper: paperImage,
+  scissors: scissorsImage,
+};
+
+const getChoiceImage = choice => {
+  return choices[choice];
+};
+
+const GameLevel5 = ({navigation}) => {
+  const [playerChoice, setPlayerChoice] = useState(null);
+  const [computerChoice, setComputerChoice] = useState(null);
+  const [result, setResult] = useState('');
+  const [points, setPoints] = useState(0);
+  const backgroundMusic = useRef(null);
+
+  const [isMuted, setIsMuted] = useState(false);
+
+  useEffect(() => {
+    backgroundMusic.current = new Sound(
+      require('../../../../assets/audios/music_name_f.mp3'),
+      error => {
+        if (error) {
+          console.log('Failed to load the sound', error);
+          return;
+        }
+        // Play the music as soon as the component mounts and loop indefinitely
+        backgroundMusic.current.play();
+        backgroundMusic.current.setNumberOfLoops(-1);
+      },
+    );
+
+    return () => backgroundMusic.current.release(); // Release the audio player resource when the component unmounts
+  }, []);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    // Make sure backgroundMusic.current is not null
+    if (backgroundMusic.current) {
+      if (isMuted) {
+        backgroundMusic.current.setVolume(1.0);
+      } else {
+        backgroundMusic.current.setVolume(0.0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (points >= 200) {
+      Alert.alert('Congratulations 🥳🥳', 'You have won the game!', [
+        {
+          text: 'OK',
+          onPress: () => {
+            navigation.navigate(ROUTES.Level06);
+          },
+        },
+      ]);
+      setPoints(0);
+    }
+  }, [points]);
+
+  const play = choice => {
+    const computer = getRandomChoice();
+    const result = getWinner(choice, computer);
+
+    setPlayerChoice(choice);
+    setComputerChoice(computer);
+    setResult(result);
+
+    if (result === 'You Win!') {
+      setPoints(currentPoints => {
+        const updatedPoints = currentPoints + 10;
+        return updatedPoints;
+      });
+    }
+  };
+
+  useEffect(() => {
+    console.log(`Points updated: ${points}`);
+  }, [points]);
+
+  const getRandomChoice = () => {
+    const keys = Object.keys(choices);
+    const randomIndex = Math.floor(Math.random() * keys.length);
+    return keys[randomIndex];
+  };
+
+  const getWinner = (player, computer) => {
+    if (player === computer) return 'Draw';
+    if (
+      (player === 'rock' && computer === 'scissors') ||
+      (player === 'paper' && computer === 'rock') ||
+      (player === 'scissors' && computer === 'paper')
+    ) {
+      return 'You Win!';
+    } else {
+      return 'Computer Wins!';
+    }
+  };
+
+  return (
+    <ImageBackground
+      source={IMGS.game_img_9}
+      style={styles.backgroundImage}
+      resizeMode="cover">
+      <View style={{marginTop: 10}}>
+        <TouchableOpacity
+          style={{
+            backgroundColor: COLORS.white,
+            borderColor: COLORS.white,
+            height: 60,
+            marginBottom: 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 14,
+            width: 50,
+            // marginTop: 4,
+          }}
+          onPress={toggleMute}>
+          <Text
+            medium
+            center
+            style={{color: 'black', fontSize: 30, fontWeight: 'bold'}}>
+            {isMuted ? '🔇' : '🔊'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <Text style={styles.headerText}>Rock Paper Scissors</Text>
+      <View style={styles.new}>
+        <Text style={styles.resultText}>Result: {result ? result : '-'}</Text>
+        <Text style={styles.pointsText}>Points: {points}</Text>
+      </View>
+
+      <View colors={['#9D50BB', '#6E48AA']} style={styles.gradient}>
+        <View style={styles.resultContainer}>
+          <View style={styles.circle}>
+            <Text style={styles.playerText}>Computer</Text>
+            {computerChoice && (
+              <Image
+                source={getChoiceImage(computerChoice)}
+                style={styles.choiceImage}
+              />
+            )}
+          </View>
+          <Text style={styles.resultText}>VS</Text>
+
+          <View style={styles.circle}>
+            <Text style={styles.playerText}>You</Text>
+            {playerChoice && (
+              <Image
+                source={getChoiceImage(playerChoice)}
+                style={styles.choiceImage}
+              />
+            )}
+          </View>
+        </View>
+        <View style={styles.choicesContainer}>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('rock')}
+              style={styles.choiceButton}>
+              <Image source={rockImage} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('paper')}
+              style={styles.choiceButton}>
+              <Image source={paperImage} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.square}>
+            <TouchableOpacity
+              onPress={() => play('scissors')}
+              style={styles.choiceButton}>
+              <Image source={scissorsImage} style={styles.choiceImage} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  gradient: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    padding: 30,
+    // backgroundColor: 'black',
+  },
+  headerText: {
+    fontSize: 30,
+    color: '#9400D3',
+    fontWeight: 'bold',
+    // marginTop: 3,
+    marginBottom: 20,
+  },
+  choicesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  choiceButton: {
+    margin: 10,
+    padding: 10,
+  },
+  choiceImage: {
+    width: 100,
+    height: 100,
+  },
+  resultContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  resultText: {
+    fontSize: 24,
+    color: 'black',
+    fontWeight: 'bold',
+    marginTop: 1,
+  },
+  playerText: {
+    fontSize: 16,
+    color: 'white',
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginBottom: 15,
+  },
+  pointsText: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black', // Make sure this color is visible on your background
+    // add other styles to position your points text if necessary
+  },
+  circle: {
+    width: 160,
+    height: 160,
+    borderRadius: 105,
+    backgroundColor: '#553C8B',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#6F2DA8',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 5,
+  },
+  square: {
+    width: 100,
+    height: 100,
+    borderRadius: 20,
+    backgroundColor: '#CCC1FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#CCCCFF',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 2,
+    elevation: 5,
+    marginRight: 10,
+    marginBottom: 42,
+    marginTop: 22,
+  },
+  mainsquare: {
+    width: 200,
+    height: 250,
+    borderRadius: 20,
+    backgroundColor: '#E8ADAA',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#CCCCFF',
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 2,
+    elevation: 5,
+  },
+  new: {
+    backgroundColor: '#F6A7BA',
+    width: '80%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 100,
+    borderRadius: 30,
+  },
+});
+
+export default GameLevel5;