From 7fd8ce1db94dd9548515cd5736de65cf2aa5b841 Mon Sep 17 00:00:00 2001 From: "hkbettiah@gmail.com" Date: Fri, 10 Mar 2023 03:26:17 +0530 Subject: [PATCH] new db + life count --- components/HighScore.tsx | 3 +-- components/Life.tsx | 45 ++++++++++++++++++++++++++++++++++++++++ package-lock.json | 5 +++++ package.json | 1 + screens/Game.tsx | 44 +++++++++++++++++++++++++++++++++++---- screens/Home.tsx | 24 ++++++++++++++++++++- 6 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 components/Life.tsx diff --git a/components/HighScore.tsx b/components/HighScore.tsx index c6c7aa0..e3be5ab 100644 --- 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 new file mode 100644 index 0000000..6c718b9 --- /dev/null +++ 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 ( + + + {props.life == 3 ? <> + + + + : props.life == 2 ? <> + + + + : props.life == 1 ? <> + + + + : <> + + + + } + + + ) +} + +export default Life + +const styles = StyleSheet.create({ +}) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index af1833f..2692abe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2355,6 +2355,11 @@ "integrity": "sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==", "dev": true }, + "@react-native-community/hooks": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-3.0.0.tgz", + "integrity": "sha512-g2OyxXHfwIytXUJitBR6Z/ISoOfp0WKx5FOv+NqJ/CrWjRDcTw6zXE5I1C9axfuh30kJqzWchVfCDrkzZYTxqg==" + }, "@react-native/assets": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz", diff --git a/package.json b/package.json index df6f4fe..a52dcac 100644 --- 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 index 63df656..b63ed6f 100644 --- 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 && } + diff --git a/screens/Home.tsx b/screens/Home.tsx index 86bd560..da052ca 100644 --- 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 ( + + + HIGH SCORE + + + {highScore} + + navigation.navigate('Game')} style={{