From bc6b587f06ec371b8d0b803067cd88763cd0e0a0 Mon Sep 17 00:00:00 2001 From: Jay Date: Tue, 19 Apr 2022 16:06:15 -0700 Subject: [PATCH 1/4] Added state for Level information --- App.js | 8 +- assets/nextQue.svg | 45 ++++++++++++ assets/oneNo.svg | 4 + assets/pig.svg | 31 ++++++++ assets/threeNo.svg | 4 + assets/twoNo.svg | 4 + components/Greetings.js | 134 ++++------------------------------ components/Home.js | 86 +++++++++++++++++++++- components/LevelDefinition.js | 46 +++++------- components/LevelQuestions.js | 75 +++++-------------- components/RenderLevelMap.js | 12 ++- 11 files changed, 236 insertions(+), 213 deletions(-) create mode 100644 assets/nextQue.svg create mode 100644 assets/oneNo.svg create mode 100644 assets/pig.svg create mode 100644 assets/threeNo.svg create mode 100644 assets/twoNo.svg diff --git a/App.js b/App.js index 7b52778d..89f03b01 100644 --- a/App.js +++ b/App.js @@ -9,10 +9,14 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LevelQuestions from "./components/LevelQuestions"; import Greetings from "./components/Greetings"; import Scenario from "./components/Scenario"; +import LevelDefinition from "./components/LevelDefinition"; const Stack = createNativeStackNavigator(); export default function App() { + + + return ( {/* Pocket Pig is ready for development! :) */} @@ -20,8 +24,8 @@ export default function App() { - - + + diff --git a/assets/nextQue.svg b/assets/nextQue.svg new file mode 100644 index 00000000..ada406e3 --- /dev/null +++ b/assets/nextQue.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/oneNo.svg b/assets/oneNo.svg new file mode 100644 index 00000000..ab5fab98 --- /dev/null +++ b/assets/oneNo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/pig.svg b/assets/pig.svg new file mode 100644 index 00000000..4cc13c97 --- /dev/null +++ b/assets/pig.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/threeNo.svg b/assets/threeNo.svg new file mode 100644 index 00000000..c2bd7864 --- /dev/null +++ b/assets/threeNo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/twoNo.svg b/assets/twoNo.svg new file mode 100644 index 00000000..b2decf0c --- /dev/null +++ b/assets/twoNo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/Greetings.js b/components/Greetings.js index 8a756433..da9c50d4 100644 --- a/components/Greetings.js +++ b/components/Greetings.js @@ -4,10 +4,11 @@ import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-nativ import { NeuButton } from 'react-native-neu-element' import Header from './Header'; import Svg, { Circle, Path } from "react-native-svg" - +import Pig from '../assets/pig.svg' +import Three from '../assets/threeNo.svg' const Greetings = ({ - navigation + navigation, route }) => { React.useLayoutEffect(() => { @@ -16,134 +17,24 @@ const Greetings = ({ return( -
+
- - - - + - Wow, great work! + {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingHeader"]} - You are really getting the hang of this. - - - - - - - - - - - - - - - - - - - - - - - - - + {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingPara1"]} + - You have unlocked a mini game - , go ahead and try it out to earn some rewards! + {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingPara2"]} + {/* , go ahead and try it out to earn some rewards! */} + {navigation.navigate('Scenario')}} > - Got it! + Let's go! @@ -206,6 +97,7 @@ const styles = StyleSheet.create({ fontWeight: '700', fontSize: 22, lineHeight: 33, + color: '#3B3C3C' }, styleTitle: { diff --git a/components/Home.js b/components/Home.js index 17fce783..0b3d4032 100644 --- a/components/Home.js +++ b/components/Home.js @@ -10,6 +10,90 @@ import StatsImg from "../assets/stats.svg"; import CubeImg from "../assets/cube.svg"; const Home = ({navigation}) => { + + const [currentLevel, setCurrentLevel] = useState(1); + const [levelInformation, setLevelInformation] = useState([ + { + level: "Level 1", + chapterLine:"To save or not to save", + title: 'savings', + definitionQuestion: "What is saving ?", + definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", + definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + buttonText: "Got it!", + isReady: "Ready to move on?", + greetings: { + greetingHeader: "Wow, great work!", + greetingPara1: "You are really getting the hag of this.", + greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + }, + mcq: [ + + { + question: 'So, What is saving?', + answerOptions: [ + { + key: 'key1', + text: 'Using your money to buy goods and services', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Putting your money away so you can spend it later', + ans: 'right' + }, + { + key: 'key3', + text: 'Finding a $5 bill while going to school', + ans: 'wrong' + }, + ] + }, + { + question: 'Why is savings important?', + answerOptions: [ + { + key: 'key1', + text: "I don't want to save as it is not important to save", + ans: 'wrong' + }, + { + key: 'key2', + text: 'So you can have money for future purchases or emergencies', + ans: 'right' + }, + { + key: 'key3', + text: 'So you can have more money in your bank account', + ans: 'wrong' + }, + ] + }, + { + question: 'What is correct example of saving?', + answerOptions: [ + { + key: 'key1', + text: 'Spending all your allowance right away', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Putting aside some of your allowance over time', + ans: 'wrong' + }, + { + key: 'key3', + text: 'Giving some of your allowance to your friends', + ans: 'right' + }, + ] + } + + ] + } + ]); + const today = new Date().toLocaleDateString(); const modaldRef = useRef(); const totalCoins = "30,453"; @@ -64,7 +148,7 @@ const Home = ({navigation}) => { - {navigation.navigate('RenderLevelMap')}}> + {navigation.navigate({name: 'RenderLevelMap', params: {currentLevel: currentLevel, levelInformation: levelInformation}})}}> ); diff --git a/components/LevelDefinition.js b/components/LevelDefinition.js index 9ae46b29..ca672b5b 100644 --- a/components/LevelDefinition.js +++ b/components/LevelDefinition.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Svg, { Circle, Path } from "react-native-svg" import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; @@ -7,61 +7,49 @@ import SvgPiggy from './SvgPiggy'; import Header from './Header' import SvgRenderTop from './SvgRenderTop'; import SvgRenderBottom from './SvgRenderBottom'; - +import One from '../assets/oneNo.svg' export default function LevelDefinition ({ - chapterTitle, navigation + navigation, route }) { + useEffect(() => { + console.log(route.params["currentLevel"]); + }, []) + React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); - }, [navigation]); + }, [navigation]); return ( -
+
- - - - + - What is - {chapterTitle} - ? + {route.params["levelInformation"][route.params["currentLevel"]-1]["definitionQuestion"]} + - Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later! + {route.params["levelInformation"][route.params["currentLevel"]-1]["definition1"]} - Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want. + {route.params["levelInformation"][route.params["currentLevel"]-1]["definition2"]} - Ready to move on? + {route.params["levelInformation"][route.params["currentLevel"]-1]["isReady"]} {navigation.navigate('Level1Questions')}} + onPress = {() => {navigation.navigate({ name: 'LevelQuestions', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}})}} > - Got it! + {route.params["levelInformation"][route.params["currentLevel"]-1]["buttonText"]} diff --git a/components/LevelQuestions.js b/components/LevelQuestions.js index 3a906357..69f85682 100644 --- a/components/LevelQuestions.js +++ b/components/LevelQuestions.js @@ -1,11 +1,12 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Header from './Header'; import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; import Svg, { Circle, Path, G, Rect, Defs } from "react-native-svg" import RadioButton from './RadioButton'; import { NeuButton } from 'react-native-neu-element' - +import Two from '../assets/twoNo.svg' +import NextQue from '../assets/nextQue.svg' const PROP = [ @@ -76,7 +77,7 @@ const PROP = [ export default function LevelQuestions ({ - navigation + navigation, route }) { @@ -88,6 +89,10 @@ export default function LevelQuestions ({ const [isAttended, setisAttended] = useState(false) const [quesNo, setquesNo] = useState(0) const [value, setValue] = useState(null) + + useEffect(() => { + console.log(route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"][0]) + }, []) const handleAnswers = (res, value) => { setValue(value) @@ -96,8 +101,8 @@ export default function LevelQuestions ({ } const handleSubmit = () => { - if(quesNo >= (PROP.length-1)){ - navigation.navigate('Greetings') + if(quesNo >= (route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"].length-1)){ + navigation.navigate({ name: 'Greetings', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}}) } else{ setValue(null) @@ -112,26 +117,10 @@ export default function LevelQuestions ({ return ( -
- {/* */} +
- - - - + Lets try to clarify with a few questions @@ -140,11 +129,11 @@ export default function LevelQuestions ({ {/* {{alignItems: 'center', backgroundColor: '#E3E3E3', borderRadius : '30', width : wp('80%'), height : hp('20%')}} */} - {PROP[quesNo].question} - {/* saving? */} + {route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"][quesNo]["question"]} + - + @@ -158,37 +147,9 @@ export default function LevelQuestions ({ } {isAnswerCorrect && - - - - - - - - - - - } + + + } ); diff --git a/components/RenderLevelMap.js b/components/RenderLevelMap.js index f7763e10..ee6e761e 100644 --- a/components/RenderLevelMap.js +++ b/components/RenderLevelMap.js @@ -1,10 +1,15 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import LevelMap from './../assets/LevelMap.svg' import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -export default function RenderLevelMap({navigation}) { +export default function RenderLevelMap({navigation, route}) { + + useEffect(() => { + console.log(route.params["levelInformation"][route.params["currentLevel"]-1]["level"]) + + }, []) React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); @@ -28,7 +33,8 @@ export default function RenderLevelMap({navigation}) { right: 0, bottom: 0, }} - onPress={() => {navigation.navigate('Level1')}}/> + onPress={() => {navigation.navigate({ name: 'LevelDefinition', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}} )}} + /> Date: Tue, 19 Apr 2022 16:27:00 -0700 Subject: [PATCH 2/4] Removed console logs --- components/LevelDefinition.js | 3 --- components/RenderLevelMap.js | 5 ----- 2 files changed, 8 deletions(-) diff --git a/components/LevelDefinition.js b/components/LevelDefinition.js index ca672b5b..6752a718 100644 --- a/components/LevelDefinition.js +++ b/components/LevelDefinition.js @@ -14,9 +14,6 @@ export default function LevelDefinition ({ navigation, route }) { - useEffect(() => { - console.log(route.params["currentLevel"]); - }, []) React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); diff --git a/components/RenderLevelMap.js b/components/RenderLevelMap.js index ee6e761e..c169fc63 100644 --- a/components/RenderLevelMap.js +++ b/components/RenderLevelMap.js @@ -6,11 +6,6 @@ import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-nativ export default function RenderLevelMap({navigation, route}) { - useEffect(() => { - console.log(route.params["levelInformation"][route.params["currentLevel"]-1]["level"]) - - }, []) - React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); }, [navigation]); From c03f282816a822f1e626ca0a377a6eb81154bc8e Mon Sep 17 00:00:00 2001 From: Jay Date: Tue, 26 Apr 2022 12:45:28 -0700 Subject: [PATCH 3/4] Level 2 pages linked --- .expo/packager-info.json | 2 +- App.js | 4 +- assets/LevelMap.svg | 35 ++++- components/Greetings.js | 3 +- components/Home.js | 185 ++++++++++++----------- components/Level1.js | 21 --- components/Level1Game/CollectingCoins.js | 10 +- components/LevelDefinition.js | 4 + components/LevelQuestions.js | 70 +-------- components/RadioButton.js | 5 +- components/RenderLevelMap.js | 175 ++++++++++++++++++++- components/SavingsDashboard.js | 69 +++++++++ components/Scenario.js | 18 ++- components/modals/LevelCompleteModal.js | 9 +- 14 files changed, 410 insertions(+), 200 deletions(-) delete mode 100644 components/Level1.js create mode 100644 components/SavingsDashboard.js diff --git a/.expo/packager-info.json b/.expo/packager-info.json index f46dc509..a2bd5172 100644 --- a/.expo/packager-info.json +++ b/.expo/packager-info.json @@ -1,7 +1,7 @@ { "devToolsPort": 19002, "expoServerPort": null, - "packagerPort": null, + "packagerPort": 19000, "packagerPid": null, "expoServerNgrokUrl": null, "packagerNgrokUrl": null, diff --git a/App.js b/App.js index f2d83ae1..b3bf7dae 100644 --- a/App.js +++ b/App.js @@ -3,7 +3,6 @@ import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import RenderLevelMap from "./components/RenderLevelMap"; -import Level1 from "./components/Level1"; import Home from "./components/Home"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import CollectingCoins from "./components/Level1Game/CollectingCoins"; @@ -11,6 +10,7 @@ import LevelQuestions from "./components/LevelQuestions"; import Greetings from "./components/Greetings"; import Scenario from "./components/Scenario"; import LevelDefinition from "./components/LevelDefinition"; +import SavingsDashboard from "./components/SavingsDashboard"; const Stack = createNativeStackNavigator(); @@ -30,7 +30,7 @@ export default function App() { - + diff --git a/assets/LevelMap.svg b/assets/LevelMap.svg index 527310ba..75f90795 100644 --- a/assets/LevelMap.svg +++ b/assets/LevelMap.svg @@ -1,4 +1,4 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/Greetings.js b/components/Greetings.js index 4583c7a0..7ad5a458 100644 --- a/components/Greetings.js +++ b/components/Greetings.js @@ -3,7 +3,6 @@ import { StyleSheet, Text, View } from 'react-native'; import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; import { NeuButton } from 'react-native-neu-element' import Header from './Header'; -import Svg, { Circle, Path } from "react-native-svg" import Pig from '../assets/pig.svg' import Three from '../assets/threeNo.svg' @@ -43,7 +42,7 @@ const Greetings = ({ width={wp("65%")} height={hp("8%")} borderRadius={30} - onPress = {()=> {navigation.navigate('CollectingCoins')}} + onPress = {()=> {navigation.navigate( { name: 'CollectingCoins', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}} )}} > Let's go! diff --git a/components/Home.js b/components/Home.js index e8b6ed0a..9cd52d0a 100644 --- a/components/Home.js +++ b/components/Home.js @@ -1,7 +1,7 @@ import { NavigationContainer } from "@react-navigation/native"; import { StyleSheet, Text, View, Image, ImageBackground, TouchableOpacity, Pressable} from "react-native"; import { AVATAR } from "../assets"; -import React, { useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import CongratsModal from "./modals/CongratsModal"; import AvatarImg from "../assets/avatar.svg"; import SettingImg from "../assets/setting.svg"; @@ -13,88 +13,100 @@ import CubeImg from "../assets/cube.svg"; const Home = ({navigation}) => { - const [currentLevel, setCurrentLevel] = useState(1); - const [levelInformation, setLevelInformation] = useState([ - { - level: "Level 1", - chapterLine:"To save or not to save", - title: 'savings', - definitionQuestion: "What is saving ?", - definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", - definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", - buttonText: "Got it!", - isReady: "Ready to move on?", - greetings: { - greetingHeader: "Wow, great work!", - greetingPara1: "You are really getting the hag of this.", - greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" - }, - mcq: [ + // const [currentLevel, setCurrentLevel] = useState(1); + // const [levelInformation, setLevelInformation] = useState([ + // { + // levelNo: 1, + // level: "Level 1", + // chapterLine:"To save or not to save", + // title: 'savings', + // definitionQuestion: "What is saving ?", + // definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", + // definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + // buttonText: "Got it!", + // isReady: "Ready to move on?", + // greetings: { + // greetingHeader: "Wow, great work!", + // greetingPara1: "You are really getting the hag of this.", + // greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + // }, + // mcq: [ - { - question: 'So, What is saving?', - answerOptions: [ - { - key: 'key1', - text: 'Using your money to buy goods and services', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting your money away so you can spend it later', - ans: 'right' - }, - { - key: 'key3', - text: 'Finding a $5 bill while going to school', - ans: 'wrong' - }, - ] - }, - { - question: 'Why is savings important?', - answerOptions: [ - { - key: 'key1', - text: "I don't want to save as it is not important to save", - ans: 'wrong' - }, - { - key: 'key2', - text: 'So you can have money for future purchases or emergencies', - ans: 'right' - }, - { - key: 'key3', - text: 'So you can have more money in your bank account', - ans: 'wrong' - }, - ] - }, - { - question: 'What is correct example of saving?', - answerOptions: [ - { - key: 'key1', - text: 'Spending all your allowance right away', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting aside some of your allowance over time', - ans: 'wrong' - }, - { - key: 'key3', - text: 'Giving some of your allowance to your friends', - ans: 'right' - }, - ] - } + // { + // question: 'So, What is saving?', + // answerOptions: [ + // { + // key: 'key1', + // text: 'Using your money to buy goods and services', + // ans: 'wrong' + // }, + // { + // key: 'key2', + // text: 'Putting your money away so you can spend it later', + // ans: 'right' + // }, + // { + // key: 'key3', + // text: 'Finding a $5 bill while going to school', + // ans: 'wrong' + // }, + // ] + // }, + // { + // question: 'Why is savings important?', + // answerOptions: [ + // { + // key: 'key1', + // text: "I don't want to save as it is not important to save", + // ans: 'wrong' + // }, + // { + // key: 'key2', + // text: 'So you can have money for future purchases or emergencies', + // ans: 'right' + // }, + // { + // key: 'key3', + // text: 'So you can have more money in your bank account', + // ans: 'wrong' + // }, + // ] + // }, + // { + // question: 'What is correct example of saving?', + // answerOptions: [ + // { + // key: 'key1', + // text: 'Spending all your allowance right away', + // ans: 'wrong' + // }, + // { + // key: 'key2', + // text: 'Putting aside some of your allowance over time', + // ans: 'wrong' + // }, + // { + // key: 'key3', + // text: 'Giving some of your allowance to your friends', + // ans: 'right' + // }, + // ] + // } - ] - } - ]); + // ] + // } + // ]); + + // const handleCurrentLevel = () => { + // console.log("Inside handleCurrentLevel"); + // setCurrentLevel((x) => x+1); + + // } + + // useEffect(() => { + // console.log(currentLevel); + // console.log("home re-rendered"); + // }, [currentLevel]) const today = new Date().toLocaleDateString(); const modaldRef = useRef(); @@ -155,18 +167,9 @@ const Home = ({navigation}) => { style={{ width: 50, height: 40 }} > - - - - {navigation.navigate({name: 'RenderLevelMap', params: {currentLevel: currentLevel, levelInformation: levelInformation}})}}> + {navigation.navigate({name: 'RenderLevelMap'})}}> ); diff --git a/components/Level1.js b/components/Level1.js deleted file mode 100644 index 801ea0e4..00000000 --- a/components/Level1.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useState } from 'react'; -import { Text, View, StyleSheet } from 'react-native'; -import LevelDefinition from './LevelDefinition'; - -const Level1 = ({navigation}) => { - - - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); - - - return( - - - {/* { isSubmitted && } */} - - ) -} - -export default Level1 \ No newline at end of file diff --git a/components/Level1Game/CollectingCoins.js b/components/Level1Game/CollectingCoins.js index cf7d13ac..da39a1e2 100644 --- a/components/Level1Game/CollectingCoins.js +++ b/components/Level1Game/CollectingCoins.js @@ -174,6 +174,7 @@ export default class CollectingCoins extends PureComponent { return entities; }; + this.movePig = (entities, { touches }) => { let move = touches.find(y => y.type === "move"); if (move) { @@ -189,6 +190,11 @@ export default class CollectingCoins extends PureComponent { } componentDidMount() { + + console.log("Mounted!!"); + + + Matter.Sleeping.set(coin1, true); Matter.Sleeping.set(coin2, true); Matter.Sleeping.set(coin3, true); @@ -411,9 +417,9 @@ export default class CollectingCoins extends PureComponent { { if(this.state.myScore > 0.5){ - this.props.navigation.navigate('Scenario') + this.props.navigation.navigate({name: 'Scenario', params: {currentLevel: this.props.route.params["currentLevel"], levelInformation: this.props.route.params["levelInformation"]}}) }else{ - this.props.navigation.navigate('Greetings') + this.props.navigation.navigate({ name: 'Greetings', params: {currentLevel: this.props.route.params["currentLevel"], levelInformation: this.props.route.params["levelInformation"]}}) } }}> diff --git a/components/LevelDefinition.js b/components/LevelDefinition.js index 6752a718..84fc3aa9 100644 --- a/components/LevelDefinition.js +++ b/components/LevelDefinition.js @@ -14,6 +14,10 @@ export default function LevelDefinition ({ navigation, route }) { + useEffect(() => { + console.log(route.params['currentLevel']); + }, []) + React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); diff --git a/components/LevelQuestions.js b/components/LevelQuestions.js index 69f85682..db50a6b1 100644 --- a/components/LevelQuestions.js +++ b/components/LevelQuestions.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Header from './Header'; import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; @@ -8,70 +8,6 @@ import { NeuButton } from 'react-native-neu-element' import Two from '../assets/twoNo.svg' import NextQue from '../assets/nextQue.svg' -const PROP = [ - - { - question: 'So, What is saving?', - answerOptions: [ - { - key: 'key1', - text: 'Using your money to buy goods and services', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting your money away so you can spend it later', - ans: 'right' - }, - { - key: 'key3', - text: 'Finding a $5 bill while going to school', - ans: 'wrong' - }, - ] - }, - { - question: 'Why is savings important?', - answerOptions: [ - { - key: 'key1', - text: "I don't want to save as it is not important to save", - ans: 'wrong' - }, - { - key: 'key2', - text: 'So you can have money for future purchases or emergencies', - ans: 'right' - }, - { - key: 'key3', - text: 'So you can have more money in your bank account', - ans: 'wrong' - }, - ] - }, - { - question: 'What is correct example of saving?', - answerOptions: [ - { - key: 'key1', - text: 'Spending all your allowance right away', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting aside some of your allowance over time', - ans: 'wrong' - }, - { - key: 'key3', - text: 'Giving some of your allowance to your friends', - ans: 'right' - }, - ] - } - -]; @@ -90,9 +26,7 @@ export default function LevelQuestions ({ const [quesNo, setquesNo] = useState(0) const [value, setValue] = useState(null) - useEffect(() => { - console.log(route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"][0]) - }, []) + const handleAnswers = (res, value) => { setValue(value) diff --git a/components/RadioButton.js b/components/RadioButton.js index 68284d76..73e90caf 100644 --- a/components/RadioButton.js +++ b/components/RadioButton.js @@ -11,8 +11,6 @@ export default class RadioButton extends Component { // }; render() { const {value, PROP, handleAnswers, isAnswerCorrect } = this.props; - // const { value } = this.state; - return ( {PROP.map(res => { @@ -51,12 +49,13 @@ export default class RadioButton extends Component { const styles = StyleSheet.create({ container: { + display: 'flex', marginBottom: 35, // alignItems: 'center', flexDirection: 'row', - justifyContent: 'space-between', }, radioText: { + textAlign: 'left', marginLeft: wp('3%'), marginRight: wp('13%'), fontSize: 18, diff --git a/components/RenderLevelMap.js b/components/RenderLevelMap.js index c169fc63..c441a3a5 100644 --- a/components/RenderLevelMap.js +++ b/components/RenderLevelMap.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, TouchableOpacity} from 'react-native'; import LevelMap from './../assets/LevelMap.svg' @@ -6,10 +6,178 @@ import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-nativ export default function RenderLevelMap({navigation, route}) { + const [currentLevel, setCurrentLevel] = useState(1); + const [levelInformation, setLevelInformation] = useState([ + { + levelNo: 1, + level: "Level 1", + chapterLine:"To save or not to save", + title: 'savings', + definitionQuestion: "What is saving ?", + definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", + definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + buttonText: "Got it!", + isReady: "Ready to move on?", + greetings: { + greetingHeader: "Wow, great work!", + greetingPara1: "You are really getting the hag of this.", + greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + }, + mcq: [ + + { + question: 'So, What is saving?', + answerOptions: [ + { + key: 'key1', + text: 'Using your money to buy goods and services', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Putting your money away so you can spend it later', + ans: 'right' + }, + { + key: 'key3', + text: 'Finding a $5 bill while going to school', + ans: 'wrong' + }, + ] + }, + { + question: 'Why is savings important?', + answerOptions: [ + { + key: 'key1', + text: "I don't want to save as it is not important to save", + ans: 'wrong' + }, + { + key: 'key2', + text: 'So you can have money for future purchases or emergencies', + ans: 'right' + }, + { + key: 'key3', + text: 'So you can have more money in your bank account', + ans: 'wrong' + }, + ] + }, + { + question: 'What is correct example of saving?', + answerOptions: [ + { + key: 'key1', + text: 'Spending all your allowance right away', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Putting aside some of your allowance over time', + ans: 'wrong' + }, + { + key: 'key3', + text: 'Giving some of your allowance to your friends', + ans: 'right' + }, + ] + } + + ] + }, + { + + levelNo: 2, + level: "Level 2", + chapterLine:"To invest or to save", + title: 'Investing', + definitionQuestion: "What is investing ?", + definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", + definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + buttonText: "Got it!", + isReady: "Ready to move on?", + greetings: { + greetingHeader: "Wow, great work!", + greetingPara1: "You are really getting the hag of this.", + greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + }, + mcq: [ + + { + question: 'So, What is investing?', + answerOptions: [ + { + key: 'key1', + text: 'Option 1', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Option 2', + ans: 'right' + }, + { + key: 'key3', + text: 'Option 3', + ans: 'wrong' + }, + ] + }, + { + question: 'Why is investing important?', + answerOptions: [ + { + key: 'key1', + text: "Option 1", + ans: 'wrong' + }, + { + key: 'key2', + text: 'Option 2', + ans: 'right' + }, + { + key: 'key3', + text: 'Option 3', + ans: 'wrong' + }, + ] + }, + { + question: 'What is correct example of Investing?', + answerOptions: [ + { + key: 'key1', + text: 'Option 1', + ans: 'wrong' + }, + { + key: 'key2', + text: 'Option 2', + ans: 'wrong' + }, + { + key: 'key3', + text: 'Option 3', + ans: 'right' + }, + ] + } + ] + } + ]); + + + + React.useLayoutEffect(() => { navigation.setOptions({headerShown: false}); }, [navigation]); + return ( {navigation.navigate({ name: 'LevelDefinition', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}} )}} + onPress={() => navigation.navigate({ name: 'LevelDefinition', params: {currentLevel: 1, levelInformation: levelInformation}} )} /> + {/* {route.params["currentLevel"] == 1 && You are here!} */} {console.log('button2')}}/> + onPress={() => navigation.navigate({ name: 'LevelDefinition', params: {currentLevel:2, levelInformation: levelInformation}} )}/> { + + React.useLayoutEffect(() => { + navigation.setOptions({headerShown: false}); + }, [navigation]); + + const onPress = () => { + console.log("Pressable clicked"); + navigation.navigate({ name: 'RenderLevelMap', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}}) + } + + return( + +
+ + Lands Owned + { + route.params["land"] == "Plant" && + } + { + route.params["land"] == "Pond" && + } + + + Total Coins Earned + + + 1504 + + + + + Let's go to level Map! + + + + ) +}; + +const styles = StyleSheet.create({ + goButton: { + top: 120, + alignSelf: 'center', + alignItems: 'center', + justifyContent: "center", + backgroundColor: "#EBEDEC", + width: 268, + height: 58, + borderRadius: 30, + position: "relative", + shadowOffset: { height: 3, width: 1 }, + shadowRadius: 4, + shadowOpacity: 0.3, + }, +}); + +export default SavingsDashboard; diff --git a/components/Scenario.js b/components/Scenario.js index edfa7c73..79f2e1d6 100644 --- a/components/Scenario.js +++ b/components/Scenario.js @@ -7,7 +7,7 @@ import ChooseLand from './ChooseLand'; import LevelCompleteModal from './modals/LevelCompleteModal'; const Scenario = ({ - navigation, + navigation, route }) => { const modaldRef = useRef(); @@ -17,7 +17,17 @@ const Scenario = ({ }, [navigation]); const [land, setLand] = useState("") - + const [isClaimed, setIsCalimed] = useState(false) + + // useEffect(() => { + // console.log(route.params["currentLevel"]); + // }, []) + + const handleClaim = (val) => { + setIsCalimed(true) + navigation.navigate({name: 'SavingsDashboard', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"], land: land }}) + } + const onPress = (p) => { setLand(p) modaldRef.current.onPress() @@ -26,9 +36,9 @@ const Scenario = ({ return( - + -
+
{ })); + const onPress = () => { + setModalVisible(!modalVisible) + props.handleClaim(true) + } + return ( { setModalVisible(!modalVisible)} + onPress={onPress} style={styles.goButton} > Claim! @@ -117,7 +122,7 @@ const styles = StyleSheet.create({ shadowOffset: { height: 3, width: 1 }, shadowRadius: 4, shadowOpacity: 0.3, - bottom: 205, + bottom: 180, }, }); From aa279905822cc392f5d3106425470e1ab72f09a6 Mon Sep 17 00:00:00 2001 From: Jay Date: Wed, 18 May 2022 14:14:59 -0700 Subject: [PATCH 4/4] Updated Savings Dashboar --- assets/bond.svg | 9 + assets/cafe.svg | 98 ++++ assets/longterm.svg | 14 + assets/risk.svg | 4 + assets/safe.svg | 7 + assets/shortterm.svg | 14 + components/ChooseLand.js | 145 +++-- components/Greetings.js | 308 ++++++---- components/Level1Game/CollectingCoins.js | 679 ++++++++++++----------- components/LevelDefinition.js | 331 +++++++---- components/LevelQuestions.js | 380 +++++++------ components/RenderLevelMap.js | 410 ++++++++------ components/SavingsDashboard.js | 194 +++++-- components/Scenario.js | 260 +++++---- components/SvgRenderBottom.js | 97 ++-- components/modals/LevelCompleteModal.js | 62 ++- 16 files changed, 1840 insertions(+), 1172 deletions(-) create mode 100644 assets/bond.svg create mode 100644 assets/cafe.svg create mode 100644 assets/longterm.svg create mode 100644 assets/risk.svg create mode 100644 assets/safe.svg create mode 100644 assets/shortterm.svg diff --git a/assets/bond.svg b/assets/bond.svg new file mode 100644 index 00000000..024e3055 --- /dev/null +++ b/assets/bond.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/cafe.svg b/assets/cafe.svg new file mode 100644 index 00000000..9b0321bb --- /dev/null +++ b/assets/cafe.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/longterm.svg b/assets/longterm.svg new file mode 100644 index 00000000..6d07b349 --- /dev/null +++ b/assets/longterm.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/risk.svg b/assets/risk.svg new file mode 100644 index 00000000..e38cfd87 --- /dev/null +++ b/assets/risk.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/safe.svg b/assets/safe.svg new file mode 100644 index 00000000..349d9e3f --- /dev/null +++ b/assets/safe.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/shortterm.svg b/assets/shortterm.svg new file mode 100644 index 00000000..d536fc26 --- /dev/null +++ b/assets/shortterm.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/components/ChooseLand.js b/components/ChooseLand.js index 43a66a25..0b37c0f9 100644 --- a/components/ChooseLand.js +++ b/components/ChooseLand.js @@ -1,45 +1,118 @@ -import React from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; -import Svg, { Defs, G, Image, Path, Pattern, Rect, Use } from 'react-native-svg'; -import Plant from '../assets/plant.svg' -import Pond from '../assets/pond.svg' +import React from "react"; +import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; +import Svg, { + Defs, + G, + Image, + Path, + Pattern, + Rect, + Use, +} from "react-native-svg"; +import Plant from "../assets/plant.svg"; +import Pond from "../assets/pond.svg"; +import Cafe from "../assets/cafe.svg"; +import Bond from "../assets/bond.svg"; -const ChooseLand = ({ - onPress, -}) => ( - - onPress('Plant')}> - +const ChooseLand = ({ onPress, currentLevel }) => ( + + {currentLevel == "1" && ( + + onPress("Plant")} + > + - OR - onPress('Pond')}> - + OR + onPress("Pond")} + > + - + + )} + {currentLevel == "2" && ( + + onPress("Cafe")} + > + + + + Spend 100 coins now for a Starbucks Stock. Get this cafe and earn + money change over a long period of time! + + + + OR + onPress("Bond")} + > + + + + Spend 100 coins now for a Starbucks Stock. Get this cafe and earn + money change over a long period of time! + + + + + )} + ); const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - top: 70, - left: 20, - }, - styleText: { - marginRight: 35, - left: 16, - fontWeight: '700', - fontSize: 18, - lineHeight: 27, - top: 40, - }, - stylePlant: { - position: 'relative', - width: 128, - height: 118, - borderRadius: 16, - backgroundColor: '#FFFFFF', - } - + container2: { + flexDirection: "column", + top: 70, + left: 20, + }, + styleBond: { + position: "relative", + width: 320, + height: 118, + borderRadius: 16, + backgroundColor: "#FFFFFF", + }, + styleCafe: { + position: "relative", + width: 320, + height: 118, + borderRadius: 16, + backgroundColor: "#FFFFFF", + }, + container: { + flexDirection: "row", + top: 70, + left: 20, + }, + styleText: { + marginRight: 35, + left: 16, + fontWeight: "700", + fontSize: 18, + lineHeight: 27, + top: 40, + }, + stylePlant: { + position: "relative", + width: 128, + height: 118, + borderRadius: 16, + backgroundColor: "#FFFFFF", + }, }); export default ChooseLand; diff --git a/components/Greetings.js b/components/Greetings.js index 7ad5a458..0227eb1d 100644 --- a/components/Greetings.js +++ b/components/Greetings.js @@ -1,131 +1,207 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -import { NeuButton } from 'react-native-neu-element' -import Header from './Header'; -import Pig from '../assets/pig.svg' -import Three from '../assets/threeNo.svg' +import React from "react"; +import { StyleSheet, Text, View, ScrollView } from "react-native"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +import { NeuButton } from "react-native-neu-element"; +import Header from "./Header"; +import Pig from "../assets/pig.svg"; +import Three from "../assets/threeNo.svg"; -const Greetings = ({ - navigation, route -}) => -{ - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); +const Greetings = ({ navigation, route }) => { + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); - return( - -
- - - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingHeader"]} - + return ( + + +
+ + + + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["greetings"]["greetingHeader"] + } + + - - {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingPara1"]} - + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["greetings"]["greetingPara1"] + } + + - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["greetings"]["greetingPara2"]} - {/* , go ahead and try it out to earn some rewards! */} + + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["greetings"]["greetingPara2"] + } + {/* , go ahead and try it out to earn some rewards! */} + - - {navigation.navigate( { name: 'CollectingCoins', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}} )}} + + {route.params["currentLevel"] == "1" && ( + { + navigation.navigate({ + name: "CollectingCoins", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + landOwned: route.params["landOwned"], + coins: route.params["coins"], + }, + }); + }} > - Let's go! + Let's go! + )} + {route.params["currentLevel"] == "2" && ( + { + navigation.navigate({ + name: "Scenario", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + landOwned: route.params["landOwned"], + coins: route.params["coins"], + }, + }); + }} + > + Let's go! + + )} - - ) + + + ); }; const styles = StyleSheet.create({ - styleText1: { - fontSize: 24, - lineHeight: 36, - color: "#3C885E", - // flexWrap: 'wrap', - // flexShrink:1, - }, - styleText2: { - fontSize: 24, - lineHeight: 36, - }, - styleSvg: { - marginRight: wp('10%') - }, - heading: { - fontSize: 24, - lineHeight: 36, - flexWrap: 'wrap', - flexShrink:1, - marginTop: hp('2%'), - marginLeft: wp('20%'), - }, - centered: { - backgroundColor: '#E3E3E3', - borderRadius : 30, - marginLeft: wp('7.5%'), - marginTop: hp('4%'), - width : wp('85%'), - height : hp('35%'), - }, - styleQuestions: { - // marginTop: hp('1%'), - marginTop: hp('2%'), - marginLeft: wp('5%'), - }, - container: { - marginTop: hp('2%'), - marginLeft: wp('5%'), - // marginTop: 30, - }, - buttonText: { - fontWeight: '700', - fontSize: 22, - lineHeight: 33, - color: '#3B3C3C' - - }, - styleTitle: { - // marginTop: hp('1.5%'), - marginLeft: wp("7%"), - lineHeight: 36, - flexDirection: 'row' - }, - styleHeading: { - color: '#3C885E', - fontWeight: '400', - fontSize: 24, - lineHeight: 36, - flexWrap: 'wrap', - marginTop: hp('1%'), - marginLeft: -wp('2%'), - marginRight: wp('23%') - }, - chapterTitle: { - color: '#3C885E', - fontSize: 24 - }, - inRow: { - fontSize: 18, - marginTop: hp('2.5%'), - fontWeight: "700", - lineHeight: 27, - flexDirection: 'row' - }, -}) + styleText1: { + fontSize: 24, + lineHeight: 36, + color: "#3C885E", + // flexWrap: 'wrap', + // flexShrink:1, + }, + styleText2: { + fontSize: 24, + lineHeight: 36, + }, + styleSvg: { + marginRight: wp("10%"), + }, + heading: { + fontSize: 24, + lineHeight: 36, + flexWrap: "wrap", + flexShrink: 1, + marginTop: hp("2%"), + marginLeft: wp("20%"), + }, + centered: { + backgroundColor: "#E3E3E3", + borderRadius: 30, + marginLeft: wp("7.5%"), + marginTop: hp("4%"), + width: wp("85%"), + height: hp("35%"), + }, + styleQuestions: { + // marginTop: hp('1%'), + marginTop: hp("2%"), + marginLeft: wp("5%"), + }, + container: { + marginTop: hp("2%"), + marginLeft: wp("5%"), + // marginTop: 30, + }, + buttonText: { + fontWeight: "700", + fontSize: 22, + lineHeight: 33, + color: "#3B3C3C", + }, + styleTitle: { + // marginTop: hp('1.5%'), + marginLeft: wp("7%"), + lineHeight: 36, + flexDirection: "row", + }, + styleHeading: { + color: "#3C885E", + fontWeight: "400", + fontSize: 24, + lineHeight: 36, + flexWrap: "wrap", + marginTop: hp("1%"), + marginLeft: -wp("2%"), + marginRight: wp("23%"), + }, + chapterTitle: { + color: "#3C885E", + fontSize: 24, + }, + inRow: { + fontSize: 18, + marginTop: hp("2.5%"), + fontWeight: "700", + lineHeight: 27, + flexDirection: "row", + }, +}); export default Greetings; diff --git a/components/Level1Game/CollectingCoins.js b/components/Level1Game/CollectingCoins.js index da39a1e2..9ae9f2cb 100644 --- a/components/Level1Game/CollectingCoins.js +++ b/components/Level1Game/CollectingCoins.js @@ -1,134 +1,105 @@ -import React, { useState, useEffect, PureComponent} from 'react'; +import React, { useState, useEffect, PureComponent } from "react"; import { NavigationContainer } from "@react-navigation/native"; -import { StyleSheet, Text, View, Image, ImageBackground, TouchableOpacity} from "react-native"; -import Draggable from 'react-native-draggable'; -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -import GameMap from './../../assets/GameMap.svg'; -import PigContainer from './../../assets/PigContainer.svg'; +import { + StyleSheet, + Text, + View, + Image, + ImageBackground, + TouchableOpacity, +} from "react-native"; +import Draggable from "react-native-draggable"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +import GameMap from "./../../assets/GameMap.svg"; +import PigContainer from "./../../assets/PigContainer.svg"; import { GameEngine } from "react-native-game-engine"; -import Platform from './Platform'; -import Pig from './Pig'; -import Coin from './Coin'; +import Platform from "./Platform"; +import Pig from "./Pig"; +import Coin from "./Coin"; import Matter from "matter-js"; -import FiftyCoin from './FiftyCoin'; -import NegativeFiftyCoin from './NegativeFiftyCoin'; -import TwentyFiveCoin from './TwentyFiveCoin'; -import FiveCoin from './FIveCoin'; -import { createNavigationContainerRef } from '@react-navigation/native'; -export const navigation = createNavigationContainerRef() +import FiftyCoin from "./FiftyCoin"; +import NegativeFiftyCoin from "./NegativeFiftyCoin"; +import TwentyFiveCoin from "./TwentyFiveCoin"; +import FiveCoin from "./FIveCoin"; +import { createNavigationContainerRef } from "@react-navigation/native"; +export const navigation = createNavigationContainerRef(); const BALL_SIZE = 40; const PLANK_HEIGHT = 10; const PLANK_WIDTH = 50; const pigSettings = { - isStatic: true + isStatic: true, }; const coinSettings = { inertia: 6, friction: 0, frictionStatic: 0, frictionAir: 0, - restitution: 1 + restitution: 1, }; const wallSettings = { - isStatic: true + isStatic: true, }; -const coin1 = Matter.Bodies.circle( - wp('70%'), - hp('50%'), - 40, - { - ...coinSettings, - label: "coin1" - } -); -const coin2 = Matter.Bodies.circle( - wp('28%'), - hp('40%'), - BALL_SIZE, - { - ...coinSettings, - label: "coin2" - } -); -const coin3 = Matter.Bodies.circle( - wp('30%'), - hp('10%'), - BALL_SIZE, - { - ...coinSettings, - label: "coin3" - } -); -const coin4 = Matter.Bodies.circle( - wp('75%'), - hp('20%'), - BALL_SIZE, - { - ...coinSettings, - label: "coin4" - } -); -const coin5 = Matter.Bodies.circle( - wp('30%'), - hp('50%'), - 20, - { - ...coinSettings, - label: "coin5" - } -); -const coin6 = Matter.Bodies.circle( - wp('60%'), - hp('30%'), - 20, - { - ...coinSettings, - label: "coin6" - } -); +const coin1 = Matter.Bodies.circle(wp("70%"), hp("50%"), 40, { + ...coinSettings, + label: "coin1", +}); +const coin2 = Matter.Bodies.circle(wp("28%"), hp("40%"), BALL_SIZE, { + ...coinSettings, + label: "coin2", +}); +const coin3 = Matter.Bodies.circle(wp("30%"), hp("10%"), BALL_SIZE, { + ...coinSettings, + label: "coin3", +}); +const coin4 = Matter.Bodies.circle(wp("75%"), hp("20%"), BALL_SIZE, { + ...coinSettings, + label: "coin4", +}); +const coin5 = Matter.Bodies.circle(wp("30%"), hp("50%"), 20, { + ...coinSettings, + label: "coin5", +}); +const coin6 = Matter.Bodies.circle(wp("60%"), hp("30%"), 20, { + ...coinSettings, + label: "coin6", +}); const pig = Matter.Bodies.rectangle( - wp('50'), - hp('75%'), + wp("50"), + hp("75%"), PLANK_WIDTH, PLANK_HEIGHT, { ...pigSettings, - label: "pig" + label: "pig", } ); -const topWall = Matter.Bodies.rectangle( - wp('30%'), - hp('20%'), - 100, - 1, - { ...wallSettings, label: "topWall" } -); -const bottomWall = Matter.Bodies.rectangle( - wp('65%'), - hp('30%'), - 100, - 1, - { ...wallSettings, label: "bottomWall" } -); +const topWall = Matter.Bodies.rectangle(wp("30%"), hp("20%"), 100, 1, { + ...wallSettings, + label: "topWall", +}); +const bottomWall = Matter.Bodies.rectangle(wp("65%"), hp("30%"), 100, 1, { + ...wallSettings, + label: "bottomWall", +}); -const leftWall = Matter.Bodies.rectangle(wp('30%'), hp('45%'), 100, 10, { +const leftWall = Matter.Bodies.rectangle(wp("30%"), hp("45%"), 100, 10, { ...wallSettings, - label: "leftWall" + label: "leftWall", }); -const rightWall = Matter.Bodies.rectangle( - wp('72%'), - hp('60%'), - 100, - 1, - { ...wallSettings, label: "rightWall" } -); +const rightWall = Matter.Bodies.rectangle(wp("72%"), hp("60%"), 100, 1, { + ...wallSettings, + label: "rightWall", +}); const WINNING_SCORE = 5; @@ -146,26 +117,25 @@ Matter.World.add(world, [ topWall, bottomWall, leftWall, - rightWall + rightWall, ]); export default class CollectingCoins extends PureComponent { - state = { myScore: 0, - firstHistory : 0, - secondHistory : 0, - thirdHistory : 0 + firstHistory: 0, + secondHistory: 0, + thirdHistory: 0, }; constructor(props) { super(props); - this.myPig = pig - this.wall1 = topWall - this.wall2 = bottomWall - this.wall3 = rightWall - this.wall4 = leftWall + this.myPig = pig; + this.wall1 = topWall; + this.wall2 = bottomWall; + this.wall3 = rightWall; + this.wall4 = leftWall; this.physics = (entities, { time }) => { let engine = entities["physics"].engine; @@ -174,13 +144,12 @@ export default class CollectingCoins extends PureComponent { return entities; }; - this.movePig = (entities, { touches }) => { - let move = touches.find(y => y.type === "move"); + let move = touches.find((y) => y.type === "move"); if (move) { const newPosition = { x: this.myPig.position.x + move.delta.pageX, - y: this.myPig.position.y + y: this.myPig.position.y, }; Matter.Body.setPosition(this.myPig, newPosition); } @@ -188,251 +157,289 @@ export default class CollectingCoins extends PureComponent { return entities; }; } - - componentDidMount() { + componentDidMount() { console.log("Mounted!!"); - - - Matter.Sleeping.set(coin1, true); - Matter.Sleeping.set(coin2, true); - Matter.Sleeping.set(coin3, true); - Matter.Sleeping.set(coin4, true); - Matter.Sleeping.set(coin5, true); - Matter.Sleeping.set(coin6, true); + Matter.Sleeping.set(coin1, true); + Matter.Sleeping.set(coin2, true); + Matter.Sleeping.set(coin3, true); + Matter.Sleeping.set(coin4, true); + Matter.Sleeping.set(coin5, true); + Matter.Sleeping.set(coin6, true); - setTimeout(() => {Matter.Sleeping.set(coin1, false);}, 1000) - setTimeout(() => {Matter.Sleeping.set(coin2, false);}, 2000) - setTimeout(() => {Matter.Sleeping.set(coin3, false);}, 3000) - setTimeout(() => {Matter.Sleeping.set(coin4, false);}, 4000) - setTimeout(() => {Matter.Sleeping.set(coin5, false);}, 4000) - setTimeout(() => {Matter.Sleeping.set(coin6, false);}, 4000) + setTimeout(() => { + Matter.Sleeping.set(coin1, false); + }, 1000); + setTimeout(() => { + Matter.Sleeping.set(coin2, false); + }, 2000); + setTimeout(() => { + Matter.Sleeping.set(coin3, false); + }, 3000); + setTimeout(() => { + Matter.Sleeping.set(coin4, false); + }, 4000); + setTimeout(() => { + Matter.Sleeping.set(coin5, false); + }, 4000); + setTimeout(() => { + Matter.Sleeping.set(coin6, false); + }, 4000); - - Matter.Events.on(engine, "collisionStart", event => { - var pairs = event.pairs; - var objA = pairs[0].bodyA.label; - var objB = pairs[0].bodyB.label; - if (objB == 'pig' && objA == 'coin1') { - this.setState( - { - myScore: this.state.myScore + 0.5, - firstHistory: 0.5, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - - - }, - () => { - Matter.Body.setVelocity(coin1, { x: 10, y: -3 }); - } - ); - }else if (objB == 'pig' && objA == 'coin2') { - this.setState( - { - myScore: this.state.myScore + 0.25, - firstHistory: 0.25, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - }, - () => { - Matter.Body.setVelocity(coin2, { x: 10, y: -3 }); - } - ); - }else if (objB == 'pig' && objA == 'coin3') { - this.setState( - { - myScore: this.state.myScore + 0.05, - firstHistory: 0.05, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - }, - () => { - Matter.Body.setVelocity(coin3, { x: 10, y: -3 }); - } - ); - }else if (objB == 'pig' && objA == 'coin4') { - this.setState( - { - myScore: this.state.myScore + 0.05, - firstHistory: 0.05, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - }, - () => { - Matter.Body.setVelocity(coin4, { x: 10, y: -3 }); - } - ); - }else if (objB == 'pig' && objA == 'coin5') { - this.setState( - { - myScore: this.state.myScore - 0.5, - firstHistory: -0.5, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - }, - () => { - Matter.Body.setVelocity(coin5, { x: 10, y: -3 }); - } - ); - }else if (objB == 'pig' && objA == 'coin6') { - this.setState( - { - myScore: this.state.myScore - 0.5, - firstHistory: - 0.5, - secondHistory: this.state.firstHistory, - thirdHistory: this.state.secondHistory - }, - () => { - Matter.Body.setVelocity(coin6, { x: 10, y: -3 }); - } - ); - }else if (objB == 'rightWall' || objB == 'bottomWall') { - - if(objA == 'coin1'){ - Matter.Body.setVelocity(coin1, { x: -1, y: 0 }); - } - else if(objA == 'coin2'){ - Matter.Body.setVelocity(coin2, { x: -1, y: 0 }); - } - else if(objA == 'coin3'){ - Matter.Body.setVelocity(coin3, { x: -1, y: 0 }); - } - else if(objA == 'coin4'){ - Matter.Body.setVelocity(coin4, { x: -1, y: 0 }); - } - else if(objA == 'coin5'){ - Matter.Body.setVelocity(coin5, { x: -1, y: 0 }); - } - else if(objA == 'coin6'){ - Matter.Body.setVelocity(coin6, { x: -1, y: 0 }); - } - }else if (objB == 'leftWall' || objB == 'topWall') { - - if(objA == 'coin1'){ - Matter.Body.setVelocity(coin1, { x: 1, y: 0 }); + Matter.Events.on(engine, "collisionStart", (event) => { + var pairs = event.pairs; + var objA = pairs[0].bodyA.label; + var objB = pairs[0].bodyB.label; + if (objB == "pig" && objA == "coin1") { + this.setState( + { + myScore: this.state.myScore + 0.5, + firstHistory: 0.5, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin1, { x: 10, y: -3 }); } - else if(objA == 'coin2'){ - Matter.Body.setVelocity(coin2, { x: 1, y: 0 }); + ); + } else if (objB == "pig" && objA == "coin2") { + this.setState( + { + myScore: this.state.myScore + 0.25, + firstHistory: 0.25, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin2, { x: 10, y: -3 }); } - else if(objA == 'coin3'){ - Matter.Body.setVelocity(coin3, { x: 1, y: 0 }); + ); + } else if (objB == "pig" && objA == "coin3") { + this.setState( + { + myScore: this.state.myScore + 0.05, + firstHistory: 0.05, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin3, { x: 10, y: -3 }); } - else if(objA == 'coin4'){ - Matter.Body.setVelocity(coin4, { x: 1, y: 0 }); + ); + } else if (objB == "pig" && objA == "coin4") { + this.setState( + { + myScore: this.state.myScore + 0.05, + firstHistory: 0.05, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin4, { x: 10, y: -3 }); } - else if(objA == 'coin5'){ - Matter.Body.setVelocity(coin5, { x: 1, y: 0 }); + ); + } else if (objB == "pig" && objA == "coin5") { + this.setState( + { + myScore: this.state.myScore - 0.5, + firstHistory: -0.5, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin5, { x: 10, y: -3 }); } - else if(objA == 'coin6'){ - Matter.Body.setVelocity(coin6, { x: 1, y: 0 }); + ); + } else if (objB == "pig" && objA == "coin6") { + this.setState( + { + myScore: this.state.myScore - 0.5, + firstHistory: -0.5, + secondHistory: this.state.firstHistory, + thirdHistory: this.state.secondHistory, + }, + () => { + Matter.Body.setVelocity(coin6, { x: 10, y: -3 }); } + ); + } else if (objB == "rightWall" || objB == "bottomWall") { + if (objA == "coin1") { + Matter.Body.setVelocity(coin1, { x: -1, y: 0 }); + } else if (objA == "coin2") { + Matter.Body.setVelocity(coin2, { x: -1, y: 0 }); + } else if (objA == "coin3") { + Matter.Body.setVelocity(coin3, { x: -1, y: 0 }); + } else if (objA == "coin4") { + Matter.Body.setVelocity(coin4, { x: -1, y: 0 }); + } else if (objA == "coin5") { + Matter.Body.setVelocity(coin5, { x: -1, y: 0 }); + } else if (objA == "coin6") { + Matter.Body.setVelocity(coin6, { x: -1, y: 0 }); + } + } else if (objB == "leftWall" || objB == "topWall") { + if (objA == "coin1") { + Matter.Body.setVelocity(coin1, { x: 1, y: 0 }); + } else if (objA == "coin2") { + Matter.Body.setVelocity(coin2, { x: 1, y: 0 }); + } else if (objA == "coin3") { + Matter.Body.setVelocity(coin3, { x: 1, y: 0 }); + } else if (objA == "coin4") { + Matter.Body.setVelocity(coin4, { x: 1, y: 0 }); + } else if (objA == "coin5") { + Matter.Body.setVelocity(coin5, { x: 1, y: 0 }); + } else if (objA == "coin6") { + Matter.Body.setVelocity(coin6, { x: 1, y: 0 }); + } } - }); - + }); } render() { return ( <> - - + - - - - - - ${this.state.myScore.toFixed(2)} - - =0 ? {color: '#3C885E'} : {color: '#FC8476'}]}> - {this.state.firstHistory == 0 ? null : '$'+this.state.firstHistory.toFixed(2)} - - =0 ? {color: '#3C885E'} : {color: '#FC8476'}]}> - {this.state.secondHistory == 0 ? null : '$'+this.state.secondHistory.toFixed(2)} - - =0 ? {color: '#3C885E'} : {color: '#FC8476'}]}> - {this.state.thirdHistory == 0 ? null : '$'+this.state.thirdHistory.toFixed(2)} - - { - if(this.state.myScore > 0.5){ - this.props.navigation.navigate({name: 'Scenario', params: {currentLevel: this.props.route.params["currentLevel"], levelInformation: this.props.route.params["levelInformation"]}}) - }else{ - this.props.navigation.navigate({ name: 'Greetings', params: {currentLevel: this.props.route.params["currentLevel"], levelInformation: this.props.route.params["levelInformation"]}}) - } - }}> - - {this.state.myScore > 0.5 ? 'continue': 'go back'} - - - + theCeiling: { + body: topWall, + renderer: Platform, + }, + theFloor: { + body: bottomWall, + renderer: Platform, + }, + theLeftWall: { + body: leftWall, + renderer: Platform, + }, + theRightWall: { + body: rightWall, + renderer: Platform, + }, + }} + > + + + + ${this.state.myScore.toFixed(2)} + + = 0 + ? { color: "#3C885E" } + : { color: "#FC8476" }, + ]} + > + {this.state.firstHistory == 0 + ? null + : "$" + this.state.firstHistory.toFixed(2)} + + = 0 + ? { color: "#3C885E" } + : { color: "#FC8476" }, + ]} + > + {this.state.secondHistory == 0 + ? null + : "$" + this.state.secondHistory.toFixed(2)} + + = 0 + ? { color: "#3C885E" } + : { color: "#FC8476" }, + ]} + > + {this.state.thirdHistory == 0 + ? null + : "$" + this.state.thirdHistory.toFixed(2)} + + { + if (this.state.myScore > 0.5) { + this.props.navigation.navigate({ + name: "Scenario", + params: { + currentLevel: this.props.route.params["currentLevel"], + levelInformation: + this.props.route.params["levelInformation"], + coins: this.state.myScore, + landOwned: this.props.route.params["landOwned"], + }, + }); + } else { + this.props.navigation.navigate({ + name: "Greetings", + params: { + currentLevel: this.props.route.params["currentLevel"], + levelInformation: + this.props.route.params["levelInformation"], + landOwned: this.props.route.params["landOwned"], + }, + }); + } + }} + > + + {this.state.myScore > 0.5 ? "continue" : "go back"} + + + ); } } -const styles = StyleSheet.create({ - -}); - +const styles = StyleSheet.create({}); diff --git a/components/LevelDefinition.js b/components/LevelDefinition.js index 84fc3aa9..f569feec 100644 --- a/components/LevelDefinition.js +++ b/components/LevelDefinition.js @@ -1,117 +1,236 @@ -import React, { useEffect } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import Svg, { Circle, Path } from "react-native-svg" -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -import { NeuButton } from 'react-native-neu-element' -import SvgPiggy from './SvgPiggy'; -import Header from './Header' -import SvgRenderTop from './SvgRenderTop'; -import SvgRenderBottom from './SvgRenderBottom'; -import One from '../assets/oneNo.svg' +import React, { useEffect } from "react"; +import { StyleSheet, Text, View, ScrollView } from "react-native"; +import Svg, { Circle, Path } from "react-native-svg"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +import { NeuButton } from "react-native-neu-element"; +import SvgPiggy from "./SvgPiggy"; +import Header from "./Header"; +import SvgRenderTop from "./SvgRenderTop"; +import SvgRenderBottom from "./SvgRenderBottom"; +import One from "../assets/oneNo.svg"; +import Risk from "../assets/risk.svg"; +import Safe from "../assets/safe.svg"; +import LongTerm from "../assets/longterm.svg"; +import ShortTerm from "../assets/shortterm.svg"; +export default function LevelDefinition({ navigation, route }) { + useEffect(() => { + console.log(route.params["currentLevel"]); + }, []); -export default function LevelDefinition ({ - navigation, route -}) { + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); - useEffect(() => { - console.log(route.params['currentLevel']); - }, []) + return ( + + +
+ + + + + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["definitionQuestion"] + } + + + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["definition1"] + } + - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); - -return ( - -
- - - - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["definitionQuestion"]} - + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["definition2"] + } + + {route.params["currentLevel"] == "2" && ( + + + Stocks versus{" "} + Bonds + + + + + + higher risk, but higher potential return on your money used + to invest + - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["definition1"]} - - {route.params["levelInformation"][route.params["currentLevel"]-1]["definition2"]} - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["isReady"]} - - {navigation.navigate({ name: 'LevelQuestions', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}})}} - > - {route.params["levelInformation"][route.params["currentLevel"]-1]["buttonText"]} - + + + + lower risk, but lower potential return on your money used to + invest + + + + + + + + long-term growth, meaning your money grows over longer + periods of time + + + + + + short-term growth, meaning your money grows over shorter + periods of time and is more stable + + + )} + {/* */} + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["isReady"] + } + + + + + { + navigation.navigate({ + name: "LevelQuestions", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + landOwned: route.params["landOwned"], + coins: route.params["coins"], + }, + }); + }} + > + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["buttonText"] + } + + + + - - -)}; + + + ); +} const styles = StyleSheet.create({ - container: { - marginTop: hp('2%'), - marginLeft: wp('5%'), - // marginTop: 30, - }, - footerStyle: { - marginTop: hp("1%") - }, - buttonText: { - fontWeight: '700', - fontSize: 22, - lineHeight: 33, - - }, - definitionColor: { - color: '#3C885E' - }, - nextStep: { - color: '#BDBDBD', - fontWeight: '400', - fontSize: 14, - lineHeight: 21, - marginTop: hp("5%"), - marginLeft: wp("17%"), - }, - styleTitle: { - marginTop: hp('1.5%'), - marginLeft: wp("7%"), - lineHeight: 36, - flexDirection: 'row' - }, - styleLearning: { - fontWeight: '400', - fontSize: 24 - }, - chapterTitle: { - color: '#3C885E', - fontSize: 24 - }, - inRow: { - fontSize: 18, - fontWeight: "700", - lineHeight: 27, - flexDirection: 'row' - }, - definition: { - marginTop: hp("2%"), - marginLeft: wp("17%"), - marginRight: 35, - fontSize: 18, - fontWeight: '400', - lineHeight: 27 - } -}) - + container: { + marginTop: hp("2%"), + marginLeft: wp("5%"), + // marginTop: 30, + }, + footerStyle: { + marginTop: hp("1%"), + }, + buttonText: { + fontWeight: "700", + fontSize: 22, + lineHeight: 33, + }, + definitionColor: { + color: "#3C885E", + }, + nextStep: { + color: "#BDBDBD", + fontWeight: "400", + fontSize: 14, + lineHeight: 21, + marginTop: hp("5%"), + marginLeft: wp("17%"), + }, + styleTitle: { + marginTop: hp("1.5%"), + marginLeft: wp("7%"), + lineHeight: 36, + flexDirection: "row", + }, + styleLearning: { + fontWeight: "400", + fontSize: 24, + }, + chapterTitle: { + color: "#3C885E", + fontSize: 24, + }, + inRow: { + fontSize: 18, + fontWeight: "700", + lineHeight: 27, + flexDirection: "row", + }, + definition: { + marginTop: hp("2%"), + marginLeft: wp("17%"), + marginRight: 35, + fontSize: 18, + fontWeight: "400", + lineHeight: 27, + }, +}); diff --git a/components/LevelQuestions.js b/components/LevelQuestions.js index db50a6b1..aa663caa 100644 --- a/components/LevelQuestions.js +++ b/components/LevelQuestions.js @@ -1,173 +1,227 @@ -import React, { useState } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import Header from './Header'; -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -import Svg, { Circle, Path, G, Rect, Defs } from "react-native-svg" -import RadioButton from './RadioButton'; -import { NeuButton } from 'react-native-neu-element' -import Two from '../assets/twoNo.svg' -import NextQue from '../assets/nextQue.svg' +import React, { useState } from "react"; +import { StyleSheet, Text, View } from "react-native"; +import Header from "./Header"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +import Svg, { Circle, Path, G, Rect, Defs } from "react-native-svg"; +import RadioButton from "./RadioButton"; +import { NeuButton } from "react-native-neu-element"; +import Two from "../assets/twoNo.svg"; +import NextQue from "../assets/nextQue.svg"; +export default function LevelQuestions({ navigation, route }) { + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); + const [isAnswerCorrect, setisAnswerCorrect] = useState(false); + const [isAttended, setisAttended] = useState(false); + const [quesNo, setquesNo] = useState(0); + const [value, setValue] = useState(null); + const handleAnswers = (res, value) => { + setValue(value); + setisAttended(true); + setisAnswerCorrect(res.ans === "right"); + }; - -export default function LevelQuestions ({ - navigation, route -}) - -{ - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); - - const [isAnswerCorrect, setisAnswerCorrect] = useState(false) - const [isAttended, setisAttended] = useState(false) - const [quesNo, setquesNo] = useState(0) - const [value, setValue] = useState(null) - - - - const handleAnswers = (res, value) => { - setValue(value) - setisAttended(true) - setisAnswerCorrect(res.ans === 'right') + const handleSubmit = () => { + if ( + quesNo >= + route.params["levelInformation"][route.params["currentLevel"] - 1]["mcq"] + .length - + 1 + ) { + navigation.navigate({ + name: "Greetings", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + landOwned: route.params["landOwned"], + coins: route.params["coins"], + }, + }); + } else { + setValue(null); + setquesNo(quesNo + 1); + setisAnswerCorrect(false); + setisAttended(false); } + }; - const handleSubmit = () => { - if(quesNo >= (route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"].length-1)){ - navigation.navigate({ name: 'Greetings', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}}) + return ( + +
- -
- - - - - Lets try to clarify with a few questions - - - - {/* {{alignItems: 'center', backgroundColor: '#E3E3E3', borderRadius : '30', width : wp('80%'), height : hp('20%')}} */} - - - {route.params["levelInformation"][route.params["currentLevel"]-1]["mcq"][quesNo]["question"]} - - - - - - - - - {isAnswerCorrect && - That's correct! Great Job! - Let's move on to the next step - } - {!isAnswerCorrect && isAttended && - Oops! That's not quite right - - } - {isAnswerCorrect && - - - } - - - ); -} - const styles = StyleSheet.create({ - centered: { - backgroundColor: '#E3E3E3', - borderRadius : 30, - marginLeft: wp('7.5%'), - marginTop: hp('4%'), - width : wp('85%'), - height : hp('35%'), - }, - styleQuestions: { - // marginTop: hp('1%'), - marginTop: hp('2%'), - marginLeft: wp('5%'), - }, - styleQueHeading: { - marginTop: hp('2%'), - marginLeft: wp('5%'), - flexDirection: 'row' - }, - styleLearning: { - fontWeight: '400', - fontSize: 24 - }, - container: { - marginTop: hp('2%'), - marginLeft: wp('5%'), - // marginTop: 30, - }, - footerStyle: { - marginTop: hp("1%") - }, - buttonText: { - fontWeight: '700', - fontSize: 22, - lineHeight: 33, - - }, - definitionColor: { - color: '#3C885E' - }, - nextStep: { - color: '#BDBDBD', - fontWeight: '400', - fontSize: 14, - lineHeight: 21, - marginTop: hp("5%"), - marginLeft: wp("17%"), - }, - styleTitle: { - // marginTop: hp('1.5%'), - marginLeft: wp("7%"), - lineHeight: 36, - flexDirection: 'row' - }, - styleHeading: { - fontWeight: '400', - fontSize: 24, - lineHeight: 36, - flexWrap: 'wrap', - marginLeft: -wp('2%'), - marginRight: wp('23%') - }, - chapterTitle: { - color: '#3C885E', - fontSize: 24 - }, - inRow: { - fontSize: 18, - marginTop: hp('1.5%'), - fontWeight: "700", - lineHeight: 27, - flexDirection: 'row' - }, - definition: { - marginTop: hp("2%"), - marginLeft: wp("17%"), - marginRight: 35, - fontSize: 18, - fontWeight: '400', - lineHeight: 27 + chapterLine={ + route.params["levelInformation"][route.params["currentLevel"] - 1][ + "chapterLine" + ] } - }) + /> + + + + + + Lets try to clarify with a few questions + + + + + {/* {{alignItems: 'center', backgroundColor: '#E3E3E3', borderRadius : '30', width : wp('80%'), height : hp('20%')}} */} + + + + { + route.params["levelInformation"][ + route.params["currentLevel"] - 1 + ]["mcq"][quesNo]["question"] + } + + + + + + + + {isAnswerCorrect && ( + + + That's correct! Great Job! + + Let's move on to the next step + + )} + {!isAnswerCorrect && isAttended && ( + + + Oops! That's not quite right + + + )} + {isAnswerCorrect && ( + + + + )} + + + ); +} +const styles = StyleSheet.create({ + centered: { + backgroundColor: "#E3E3E3", + borderRadius: 30, + marginLeft: wp("7.5%"), + marginTop: hp("4%"), + width: wp("85%"), + height: hp("35%"), + }, + styleQuestions: { + // marginTop: hp('1%'), + marginTop: hp("2%"), + marginLeft: wp("5%"), + }, + styleQueHeading: { + marginTop: hp("2%"), + marginLeft: wp("5%"), + flexDirection: "row", + }, + styleLearning: { + fontWeight: "400", + fontSize: 24, + }, + container: { + marginTop: hp("2%"), + marginLeft: wp("5%"), + // marginTop: 30, + }, + footerStyle: { + marginTop: hp("1%"), + }, + buttonText: { + fontWeight: "700", + fontSize: 22, + lineHeight: 33, + }, + definitionColor: { + color: "#3C885E", + }, + nextStep: { + color: "#BDBDBD", + fontWeight: "400", + fontSize: 14, + lineHeight: 21, + marginTop: hp("5%"), + marginLeft: wp("17%"), + }, + styleTitle: { + // marginTop: hp('1.5%'), + marginLeft: wp("7%"), + lineHeight: 36, + flexDirection: "row", + }, + styleHeading: { + fontWeight: "400", + fontSize: 24, + lineHeight: 36, + flexWrap: "wrap", + marginLeft: -wp("2%"), + marginRight: wp("23%"), + }, + chapterTitle: { + color: "#3C885E", + fontSize: 24, + }, + inRow: { + fontSize: 18, + marginTop: hp("1.5%"), + fontWeight: "700", + lineHeight: 27, + flexDirection: "row", + }, + definition: { + marginTop: hp("2%"), + marginLeft: wp("17%"), + marginRight: 35, + fontSize: 18, + fontWeight: "400", + lineHeight: 27, + }, +}); diff --git a/components/RenderLevelMap.js b/components/RenderLevelMap.js index c441a3a5..50f3d9c3 100644 --- a/components/RenderLevelMap.js +++ b/components/RenderLevelMap.js @@ -1,224 +1,268 @@ -import React, { useEffect, useState } from 'react'; -import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View, TouchableOpacity} from 'react-native'; -import LevelMap from './../assets/LevelMap.svg' -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; - -export default function RenderLevelMap({navigation, route}) { +import React, { useEffect, useState } from "react"; +import { StatusBar } from "expo-status-bar"; +import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; +import LevelMap from "./../assets/LevelMap.svg"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +export default function RenderLevelMap({ navigation, route }) { const [currentLevel, setCurrentLevel] = useState(1); + const [landOwned, setLandOwned] = useState([]); + const [coins, setCoins] = useState(0); const [levelInformation, setLevelInformation] = useState([ { levelNo: 1, level: "Level 1", - chapterLine:"To save or not to save", - title: 'savings', + chapterLine: "To save or not to save", + title: "savings", definitionQuestion: "What is saving ?", - definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", - definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + definition1: + "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", + definition2: + "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", buttonText: "Got it!", isReady: "Ready to move on?", greetings: { - greetingHeader: "Wow, great work!", - greetingPara1: "You are really getting the hag of this.", - greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + greetingHeader: "Wow, great work!", + greetingPara1: "You are really getting the hag of this.", + greetingPara2: + "You have unlocked a mini game, go ahead and try it out to earn some rewards!", }, mcq: [ - { - question: 'So, What is saving?', - answerOptions: [ - { - key: 'key1', - text: 'Using your money to buy goods and services', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting your money away so you can spend it later', - ans: 'right' - }, - { - key: 'key3', - text: 'Finding a $5 bill while going to school', - ans: 'wrong' - }, - ] + question: "So, What is saving?", + answerOptions: [ + { + key: "key1", + text: "Using your money to buy goods and services", + ans: "wrong", + }, + { + key: "key2", + text: "Putting your money away so you can spend it later", + ans: "right", + }, + { + key: "key3", + text: "Finding a $5 bill while going to school", + ans: "wrong", + }, + ], }, { - question: 'Why is savings important?', - answerOptions: [ - { - key: 'key1', - text: "I don't want to save as it is not important to save", - ans: 'wrong' - }, - { - key: 'key2', - text: 'So you can have money for future purchases or emergencies', - ans: 'right' - }, - { - key: 'key3', - text: 'So you can have more money in your bank account', - ans: 'wrong' - }, - ] + question: "Why is savings important?", + answerOptions: [ + { + key: "key1", + text: "I don't want to save as it is not important to save", + ans: "wrong", + }, + { + key: "key2", + text: "So you can have money for future purchases or emergencies", + ans: "right", + }, + { + key: "key3", + text: "So you can have more money in your bank account", + ans: "wrong", + }, + ], }, { - question: 'What is correct example of saving?', - answerOptions: [ - { - key: 'key1', - text: 'Spending all your allowance right away', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Putting aside some of your allowance over time', - ans: 'wrong' - }, - { - key: 'key3', - text: 'Giving some of your allowance to your friends', - ans: 'right' - }, - ] - } - - ] + question: "What is correct example of saving?", + answerOptions: [ + { + key: "key1", + text: "Spending all your allowance right away", + ans: "wrong", + }, + { + key: "key2", + text: "Putting aside some of your allowance over time", + ans: "wrong", + }, + { + key: "key3", + text: "Giving some of your allowance to your friends", + ans: "right", + }, + ], + }, + ], }, { - levelNo: 2, level: "Level 2", - chapterLine:"To invest or to save", - title: 'Investing', + chapterLine: "To invest or to save", + title: "Investing", definitionQuestion: "What is investing ?", - definition1: "Saving is when you do not spend your money straight away, and instead save it so you can spend it on something even better later!", - definition2: "Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want.", + definition1: + "Investing is an action you take with your money to make it grow! You can invest your money in many things, such as stocks and bonds.", + definition2: + "You can put some money into a Stock, which is a small part of a company. As the company grows, so does your Stock and the money you used to invest in it! ", buttonText: "Got it!", isReady: "Ready to move on?", greetings: { - greetingHeader: "Wow, great work!", - greetingPara1: "You are really getting the hag of this.", - greetingPara2: "You have unlocked a mini game, go ahead and try it out to earn some rewards!" + greetingHeader: "Wow, great work!", + greetingPara1: "You are really getting the hag of this.", + greetingPara2: + "You have unlocked a mini game, go ahead and try it out to earn some rewards!", }, mcq: [ - { - question: 'So, What is investing?', - answerOptions: [ - { - key: 'key1', - text: 'Option 1', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Option 2', - ans: 'right' - }, - { - key: 'key3', - text: 'Option 3', - ans: 'wrong' - }, - ] + question: "Which of these is a correct example of investing?", + answerOptions: [ + { + key: "key1", + text: "Putting some of your money into a Stock of a company of your choosing", + ans: "wrong", + }, + { + key: "key2", + text: "Putting some of your money into a bond ", + ans: "wrong", + }, + { + key: "key3", + text: "All of the above", + ans: "right", + }, + ], }, { - question: 'Why is investing important?', - answerOptions: [ - { - key: 'key1', - text: "Option 1", - ans: 'wrong' - }, - { - key: 'key2', - text: 'Option 2', - ans: 'right' - }, - { - key: 'key3', - text: 'Option 3', - ans: 'wrong' - }, - ] + question: "Why is investing in stocks and/or bonds important?", + answerOptions: [ + { + key: "key1", + text: "It allows you to sacrifice a little of your money in order to grow more over time", + ans: "right", + }, + { + key: "key2", + text: "It is not important", + ans: "wrong", + }, + { + key: "key3", + text: "It gets you more money right away", + ans: "wrong", + }, + ], }, { - question: 'What is correct example of Investing?', - answerOptions: [ - { - key: 'key1', - text: 'Option 1', - ans: 'wrong' - }, - { - key: 'key2', - text: 'Option 2', - ans: 'wrong' - }, - { - key: 'key3', - text: 'Option 3', - ans: 'right' - }, - ] - } - ] - } + question: "What is correct example of Investing?", + answerOptions: [ + { + key: "key1", + text: "Putting your money into a savings account", + ans: "wrong", + }, + { + key: "key2", + text: "Saving your money to spend on toys", + ans: "wrong", + }, + { + key: "key3", + text: "Using some money to buy a Stock in a company", + ans: "right", + }, + ], + }, + ], + }, ]); - - - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); + navigation.setOptions({ headerShown: false }); }, [navigation]); + useEffect(() => { + if (route.params) { + if (route.params["land"]) { + let localLand = landOwned; + localLand.push(route.params["land"]); + setLandOwned(localLand); + } + if (route.params["coins"]) setCoins(route.params["coins"]); + // setLandOwned((landOwned) => [. ..landOwned, route.params["land"]]); + } + // setLandOwned + }); return ( - - navigation.navigate({ name: 'LevelDefinition', params: {currentLevel: 1, levelInformation: levelInformation}} )} + + + navigation.navigate({ + name: "LevelDefinition", + params: { + currentLevel: 1, + levelInformation: levelInformation, + landOwned: landOwned, + coins: coins, + }, + }) + } + /> + {/* {route.params["currentLevel"] == 1 && You are here!} */} + + navigation.navigate({ + name: "LevelDefinition", + params: { + currentLevel: 2, + levelInformation: levelInformation, + landOwned: landOwned, + coins: coins, + }, + }) + } + /> + { + console.log("button3"); + }} /> - {/* {route.params["currentLevel"] == 1 && You are here!} */} - navigation.navigate({ name: 'LevelDefinition', params: {currentLevel:2, levelInformation: levelInformation}} )}/> - {console.log('button3')}}/> {/*Pocket Pig is ready for development! :)*/} @@ -228,8 +272,8 @@ export default function RenderLevelMap({navigation, route}) { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', + backgroundColor: "#fff", + alignItems: "center", + justifyContent: "center", }, }); diff --git a/components/SavingsDashboard.js b/components/SavingsDashboard.js index 100db469..9e360563 100644 --- a/components/SavingsDashboard.js +++ b/components/SavingsDashboard.js @@ -1,69 +1,149 @@ -import React, { useEffect } from 'react'; -import { Pressable, StyleSheet, Text, View } from 'react-native'; -import Header from './Header' -import PlantSVG from '../assets/plant.svg' -import PondSVG from '../assets/pond.svg' -import CoinSVG from '../assets/coin.svg' +import React, { useEffect } from "react"; +import { Pressable, StyleSheet, Text, View } from "react-native"; +import Header from "./Header"; +import PlantSVG from "../assets/plant.svg"; +import PondSVG from "../assets/pond.svg"; +import CoinSVG from "../assets/coin.svg"; +import Cafe from "../assets/cafe.svg"; +import Bond from "../assets/bond.svg"; -const SavingsDashboard = ({ - navigation, route, -}) => { +const SavingsDashboard = ({ navigation, route }) => { + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); + const onPress = () => { + console.log("Pressable clicked"); + navigation.navigate({ + name: "RenderLevelMap", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + land: route.params["land"], + coins: route.params["coins"], + }, + }); + }; - const onPress = () => { - console.log("Pressable clicked"); - navigation.navigate({ name: 'RenderLevelMap', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"]}}) - } + useEffect(() => { + console.log(route.params["totalLand"]); + }, []); - return( - -
- - Lands Owned - { - route.params["land"] == "Plant" && - } - { - route.params["land"] == "Pond" && + return ( + +
+ + + Lands Owned + + + {route.params["totalLand"].map((land, index) => { + if (land == "Plant") { + return ( + + ); + } else if (land == "Pond") { + return ( + + ); + } else if (land == "Cafe") { + return ( + + ); + } else if (land == "Bond") { + return ( + + ); } - - - Total Coins Earned - - - 1504 - - - - - Let's go to level Map! - - + })} - ) + + + + {" "} + Total Coins Earned{" "} + + + + + {" "} + {route.params["coins"].toFixed(2)}{" "} + + + + + + Let's go to level Map! + + + + ); }; const styles = StyleSheet.create({ - goButton: { - top: 120, - alignSelf: 'center', - alignItems: 'center', - justifyContent: "center", - backgroundColor: "#EBEDEC", - width: 268, - height: 58, - borderRadius: 30, - position: "relative", - shadowOffset: { height: 3, width: 1 }, - shadowRadius: 4, - shadowOpacity: 0.3, - }, + styleLand: { + position: "relative", + width: 20, + height: 118, + borderRadius: 16, + backgroundColor: "#FFFFFF", + }, + goButton: { + top: 120, + alignSelf: "center", + alignItems: "center", + justifyContent: "center", + backgroundColor: "#EBEDEC", + width: 268, + height: 58, + borderRadius: 30, + position: "relative", + shadowOffset: { height: 3, width: 1 }, + shadowRadius: 4, + shadowOpacity: 0.3, + }, }); export default SavingsDashboard; diff --git a/components/Scenario.js b/components/Scenario.js index 79f2e1d6..26abb156 100644 --- a/components/Scenario.js +++ b/components/Scenario.js @@ -1,111 +1,175 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import Svg, { Circle, Path } from 'react-native-svg'; -import Header from './Header'; -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; -import ChooseLand from './ChooseLand'; -import LevelCompleteModal from './modals/LevelCompleteModal'; +import React, { useEffect, useRef, useState } from "react"; +import { StyleSheet, Text, View, ScrollView } from "react-native"; +import Svg, { Circle, Path } from "react-native-svg"; +import Header from "./Header"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; +import ChooseLand from "./ChooseLand"; +import LevelCompleteModal from "./modals/LevelCompleteModal"; -const Scenario = ({ - navigation, route -}) => { - - const modaldRef = useRef(); +const Scenario = ({ navigation, route }) => { + const modaldRef = useRef(); - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); - const [land, setLand] = useState("") - const [isClaimed, setIsCalimed] = useState(false) + const [land, setLand] = useState(""); + const [isClaimed, setIsCalimed] = useState(false); + const [totalLand, setTotalLand] = useState([]); + const [levelCompleteBonus, setlevelCompleteBonus] = useState(100); + const [landCost, setLandCost] = useState(100); + const [coins, setCoins] = useState(route.params["coins"]); - // useEffect(() => { - // console.log(route.params["currentLevel"]); - // }, []) + const handleClaim = (val) => { + setIsCalimed(true); + navigation.navigate({ + name: "SavingsDashboard", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + totalLand: totalLand, + coins: coins + levelCompleteBonus, + }, + }); + }; - const handleClaim = (val) => { - setIsCalimed(true) - navigation.navigate({name: 'SavingsDashboard', params: {currentLevel: route.params["currentLevel"], levelInformation: route.params["levelInformation"], land: land }}) - } + const onPress = (p) => { + setLand(p); + modaldRef.current.onPress(); + let localLand = route.params["landOwned"]; + localLand.push(p); + setTotalLand(localLand); + if (route.params["currentLevel"] == "2") + setCoins((coins) => coins - landCost); + }; - const onPress = (p) => { - setLand(p) - modaldRef.current.onPress() - } - - return( + return ( + + - - - -
- - - - - - - - - Congrats! You are now a saving expert! - - - Would you like to spend your rewards now to earn the plant for your land or save to get a bigger reward like the pond next level? - - - - + + +
+ + + + + + + + {route.params["currentLevel"] != "2" && ( + + + Congrats! You are now a saving expert! + + + )} + {route.params["currentLevel"] == "2" && ( + + + Congrats! You’re on your way to becoming an investing star. + Time to put your new knowledge to the test and watch your + money grow over time! + + + )} + + {route.params["currentLevel"] != "2" && ( + + Would you like to spend your rewards now to earn the plant for + your land or save to get a bigger reward like the pond next level? + + )} + {route.params["currentLevel"] == "2" && ( + + Use your earned rewards to invest in either a Stock or a Bond. + Pick your choice and watch your investment grow on your land over + time! + + )} + + + - ) + + + ); }; export default Scenario; const styles = StyleSheet.create({ - container: { - top: 50, - marginLeft: wp('5%'), - // marginTop: 30, - }, - stylePara: { - position: 'relative', - width: 272, - top: 40, - left: 65, - height: 171, - fontWeight: '400', - fontSize: 24, - lineHeight: 36, - }, - styleLearning: { - position: 'absolute', - width: 272, - height: 72, - marginLeft: 12, - // fontFamily: 'Poppins', - fontWeight: '400', - fontSize: 24, - lineHeight: 36, - }, - inRow: { - fontSize: 18, - fontWeight: "700", - lineHeight: 27, - flexDirection: 'row' - }, -}) \ No newline at end of file + container: { + top: 50, + marginLeft: wp("5%"), + // marginTop: 30, + }, + styleTitle: {}, + stylePara: { + position: "relative", + width: 272, + top: 40, + left: 65, + height: 171, + fontWeight: "400", + fontSize: 24, + lineHeight: 36, + }, + styleLearning: { + position: "relative", + width: 272, + height: 172, + marginLeft: 12, + fontWeight: "400", + fontSize: 24, + lineHeight: 36, + }, + inRow: { + fontSize: 18, + fontWeight: "700", + lineHeight: 27, + flexDirection: "row", + }, +}); diff --git a/components/SvgRenderBottom.js b/components/SvgRenderBottom.js index fe328d43..4edd2163 100644 --- a/components/SvgRenderBottom.js +++ b/components/SvgRenderBottom.js @@ -1,57 +1,56 @@ -import React from 'react'; -import { Text, View, StyleSheet } from 'react-native'; -import Svg, { Path, Ellipse } from "react-native-svg" -import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'; +import React from "react"; +import { Text, View, StyleSheet } from "react-native"; +import Svg, { Path, Ellipse } from "react-native-svg"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; - - -const SvgRender = ({ - params, -}) => ( - - - - - - - - - - - +const SvgRender = ({ params }) => ( + + + + + + + + + + + ); const styles = StyleSheet.create({ - alignmentCross: { - marginLeft: wp("86%"), - marginTop: -hp("15.9%") - }, - alignmentEllipse: { - marginLeft: wp("82%"), - marginTop: -hp("12.0%") - } + alignmentCross: { + marginLeft: wp("86%"), + // marginTop: -hp("15.9%") + }, + alignmentEllipse: { + marginLeft: wp("82%"), + // marginTop: -hp("12.0%"), + }, }); export default SvgRender; diff --git a/components/modals/LevelCompleteModal.js b/components/modals/LevelCompleteModal.js index 84889ef5..55f6209b 100644 --- a/components/modals/LevelCompleteModal.js +++ b/components/modals/LevelCompleteModal.js @@ -1,7 +1,14 @@ -import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react"; +import React, { + forwardRef, + useEffect, + useImperativeHandle, + useState, +} from "react"; import { StyleSheet, Text, View, Pressable, Modal, Button } from "react-native"; -import PlantSVG from '../../assets/plant.svg' -import PondSVG from '../../assets/pond.svg' +import PlantSVG from "../../assets/plant.svg"; +import PondSVG from "../../assets/pond.svg"; +import CafeSVG from "../../assets/cafe.svg"; +import BondSVG from "../../assets/bond.svg"; import ModalThreeCoin from "../../assets/modal-three-coin.svg"; const LevelCompleteModal = forwardRef((props, ref) => { @@ -12,11 +19,10 @@ const LevelCompleteModal = forwardRef((props, ref) => { onPress: () => setModalVisible(true), })); - const onPress = () => { - setModalVisible(!modalVisible) - props.handleClaim(true) - } + setModalVisible(!modalVisible); + props.handleClaim(true); + }; return ( { > - { - props.land === "Plant" && - } - { - props.land === "Pond" && - } + {props.land === "Plant" && } + {props.land === "Pond" && } + {props.land === "Cafe" && } + {props.land === "Bond" && } {/* x{lan} */} - You have completed Level 1! + + You have completed Level {props.level}! + - {props.land === 'Plant' && + {props.land === "Plant" && ( + - You have earned the Plant from the mini game. + You have earned the Plant from the mini game. - Next time, put your savings knowledge to the test and save up your coins to earn a bigger reward! + Next time, put your savings knowledge to the test and save up + your coins to earn a bigger reward! - } - { - props.land === "Pond" && + + )} + {props.land === "Pond" && ( + - Great choice, now next level you will unlock the park! + Great choice, now next level you will unlock the park! - Now you're ready for level 2. + Now you're ready for level 2. - - } + + )} - + Claim!