new db + life count

spongycode · Mar 9, 2023 · 7fd8ce1 · 7fd8ce1
1 parent 4d42b63
commit 7fd8ce1
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 7 deletions.
diff --git a/components/HighScore.tsx b/components/HighScore.tsx
@@ -1,6 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native'
-import React, { useEffect, useState } from 'react'
-import { giveHighScore } from '../utils/storage_utils'
+import React from 'react'
 
 const HighScore = (props: any) => {
     return (

diff --git a/components/Life.tsx b/components/Life.tsx
@@ -0,0 +1,45 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const Life = (props: any) => {
+    return (
+        <View
+            style={{
+                backgroundColor: "#D7F2F5",
+                borderRadius: 10,
+                paddingHorizontal: 10,
+                paddingVertical: 2,
+                alignItems: "center",
+                position: 'absolute',
+                top: 15,
+                left: 15,
+                alignSelf: 'center',
+            }}>
+            <View style={{ flexDirection: "row", flex: 1, justifyContent: "space-evenly" }}>
+                {props.life == 3 ? <>
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                </> : props.life == 2 ? <>
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                </> : props.life == 1 ? <>
+                    <MaterialCommunityIcons name="heart" size={28} color="red" />
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                </> : <>
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                    <MaterialCommunityIcons name="heart" size={28} color="gray" />
+                </>}
+            </View>
+        </View >
+    )
+}
+
+export default Life
+
+const styles = StyleSheet.create({
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.11",
+    "@react-native-community/hooks": "^3.0.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@types/react-native": "^0.71.3",

diff --git a/screens/Game.tsx b/screens/Game.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { Alert, StyleSheet } from 'react-native';
 import {
     Animated,
     Dimensions,
@@ -12,8 +12,9 @@ import Score from '../components/Score';
 import HighScore from '../components/HighScore';
 import GameOverButton from '../components/GameOverButton';
 import { giveHighScore, updateHighScore } from '../utils/storage_utils';
-
-
+import { useBackHandler } from '@react-native-community/hooks';
+import { useNavigation } from "@react-navigation/core";
+import Life from '../components/Life';
 
 var database = require('../data/insta_db.json');
 const windowHeight = Dimensions.get('window').height;
@@ -23,6 +24,9 @@ const color2 = '#000';
 
 
 const Game = () => {
+
+    const navigation = useNavigation();
+
     const initialState = {
         username: 'joesmith',
         fullname: 'Joe Smith',
@@ -46,6 +50,7 @@ const Game = () => {
     const [score, setScore] = useState(0);
 
     const [highScore, setHighScore] = useState(0);
+    const [life, setLife] = useState(3);
 
 
     const [stateA, updateStateA] = useReducer(
@@ -64,7 +69,7 @@ const Game = () => {
     );
 
     const giveIdx = () => {
-        return Math.floor(Math.random() * (database.length - 1 - 0 + 1));
+        return Math.floor(Math.random() * (database.length));
     };
 
     const displayHighScore = () => {
@@ -94,10 +99,27 @@ const Game = () => {
         })
     };
 
+
+    const createTwoButtonAlert = (() => {
+        Alert.alert('Confirm Exit', 'Are you sure you want to exit? Any unsaved progress will be lost. 😱', [
+            {
+                text: 'Keep Playing 🎮',
+                onPress: () => console.log('Cancel Pressed'),
+                style: 'cancel',
+            },
+            { text: 'Exit Game 🚪', onPress: () => { console.log('OK Pressed'); navigation.goBack() } },
+        ])
+    });
+
     useEffect(() => {
         initGame();
     }, []);
 
+    useBackHandler(() => {
+        createTwoButtonAlert();
+        return true;
+    })
+
     const transferState = () => {
         setColorA(colorB);
         setColorB(colorC);
@@ -137,6 +159,19 @@ const Game = () => {
                 setHideFollowers(true);
                 animatedValue.setValue(0);
             });
+        } else if (life > 0) {
+            setLife(life - 1);
+            Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: false,
+            }).start(() => {
+                setIsAnimating(false);
+                transferState();
+                setBtn_hide(false);
+                setHideFollowers(true);
+                animatedValue.setValue(0);
+            });
         } else {
             setGameOver(true);
         }
@@ -224,6 +259,7 @@ const Game = () => {
             {gameOver && <GameOverButton />}
             <Score score={score} />
             <HighScore highScore={highScore} />
+            <Life life={life} />
 
 
 

diff --git a/screens/Home.tsx b/screens/Home.tsx
@@ -1,11 +1,33 @@
-import { SafeAreaView, Text, TouchableOpacity } from "react-native";
+import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
 import { useNavigation } from "@react-navigation/core";
+import { giveHighScore } from '../utils/storage_utils'
+import { useState } from "react";
 
 const Home = () => {
     const navigation = useNavigation();
 
+    const [highScore, setHighScore] = useState(0);
+
+    giveHighScore().then((val: any) => {
+        setHighScore(val);
+    })
+
     return (
         <SafeAreaView style={{ flex: 1, backgroundColor: "#FFB84C", alignItems: "center", justifyContent: "center" }}>
+            <View style={{ position: "absolute", top: "25%", alignItems: "center" }}>
+                <Text style={{
+                    fontSize: 30, fontWeight: "600",
+                    color: "#fff",
+                }}>
+                    HIGH SCORE
+                </Text>
+                <Text style={{
+                    fontSize: 50, fontWeight: "600",
+                    color: "#fff",
+                }}>
+                    {highScore}
+                </Text>
+            </View>
             <TouchableOpacity
                 onPress={() => navigation.navigate('Game')}
                 style={{