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 a748cdff..b3bf7dae 100644 --- a/App.js +++ b/App.js @@ -3,17 +3,21 @@ 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"; 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(); export default function App() { + + + return ( {/* Pocket Pig is ready for development! :) */} @@ -21,12 +25,12 @@ 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/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/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/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/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/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 4000e449..0227eb1d 100644 --- a/components/Greetings.js +++ b/components/Greetings.js @@ -1,240 +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 Svg, { Circle, Path } from "react-native-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 -}) => -{ - React.useLayoutEffect(() => { - navigation.setOptions({headerShown: false}); - }, [navigation]); - - return( - -
- - - - - - - - Wow, great work! - + return ( + + +
+ + + + + + { + 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('CollectingCoins')}} + + {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"], + }, + }); + }} > - Got it! + 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, - - }, - 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/Home.js b/components/Home.js index dbec57b4..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,6 +13,101 @@ import CubeImg from "../assets/cube.svg"; const Home = ({navigation}) => { + // 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' + // }, + // ] + // } + + // ] + // } + // ]); + + // 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(); const totalCoins = "30,453"; @@ -72,19 +167,9 @@ const Home = ({navigation}) => { style={{ width: 50, height: 40 }} > - - - - {navigation.navigate('RenderLevelMap')}}> - + {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..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; @@ -175,11 +145,11 @@ export default class CollectingCoins extends PureComponent { }; 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); } @@ -187,246 +157,289 @@ export default class CollectingCoins extends PureComponent { return entities; }; } - - componentDidMount() { - 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) + componentDidMount() { + console.log("Mounted!!"); - 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.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); - }, - () => { - 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('Scenario') - }else{ - this.props.navigation.navigate('Greetings') - } - }}> - - {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 9ae46b29..f569feec 100644 --- a/components/LevelDefinition.js +++ b/components/LevelDefinition.js @@ -1,128 +1,236 @@ -import React 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 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"]); + }, []); + React.useLayoutEffect(() => { + navigation.setOptions({ headerShown: false }); + }, [navigation]); -export default function LevelDefinition ({ - chapterTitle, navigation -}) { + 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 ( - -
- - - - - - - - - What is - {chapterTitle} - ? + + { + 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 + - - - 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! - - Usually people put their savings in a bank account, to keep the money safe until they have enough to buy what they want. - - - Ready to move on? - - {navigation.navigate('Level1Questions')}} - > - Got it! - + + + + 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 3a906357..aa663caa 100644 --- a/components/LevelQuestions.js +++ b/components/LevelQuestions.js @@ -1,278 +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 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 PROP = [ + const [isAnswerCorrect, setisAnswerCorrect] = useState(false); + const [isAttended, setisAttended] = useState(false); + const [quesNo, setquesNo] = useState(0); + const [value, setValue] = useState(null); - { - 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 handleAnswers = (res, value) => { + setValue(value); + setisAttended(true); + setisAnswerCorrect(res.ans === "right"); + }; -]; - - - - -export default function LevelQuestions ({ - navigation -}) - -{ - 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 >= (PROP.length-1)){ - navigation.navigate('Greetings') + return ( + +
- -
- {/* */} - - - - - - - - Lets try to clarify with a few questions - - - - {/* {{alignItems: 'center', backgroundColor: '#E3E3E3', borderRadius : '30', width : wp('80%'), height : hp('20%')}} */} - - - {PROP[quesNo].question} - {/* saving? */} - - - - - - - - {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/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 f7763e10..50f3d9c3 100644 --- a/components/RenderLevelMap.js +++ b/components/RenderLevelMap.js @@ -1,54 +1,268 @@ -import React 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'; +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}) { +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", + 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: + "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!", + }, + mcq: [ + { + 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 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: "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('Level1')}}/> - {console.log('button2')}}/> - {console.log('button3')}}/> + + + 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"); + }} + /> {/*Pocket Pig is ready for development! :)*/} @@ -58,8 +272,8 @@ export default function RenderLevelMap({navigation}) { 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 new file mode 100644 index 00000000..9e360563 --- /dev/null +++ b/components/SavingsDashboard.js @@ -0,0 +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 Cafe from "../assets/cafe.svg"; +import Bond from "../assets/bond.svg"; + +const SavingsDashboard = ({ navigation, route }) => { + 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"], + }, + }); + }; + + useEffect(() => { + console.log(route.params["totalLand"]); + }, []); + + 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{" "} + + + + + {" "} + {route.params["coins"].toFixed(2)}{" "} + + + + + + Let's go to level Map! + + + + ); +}; + +const styles = StyleSheet.create({ + 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 edfa7c73..26abb156 100644 --- a/components/Scenario.js +++ b/components/Scenario.js @@ -1,101 +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, -}) => { - - 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 onPress = (p) => { - setLand(p) - modaldRef.current.onPress() - } + 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"]); - return( + const handleClaim = (val) => { + setIsCalimed(true); + navigation.navigate({ + name: "SavingsDashboard", + params: { + currentLevel: route.params["currentLevel"], + levelInformation: route.params["levelInformation"], + totalLand: totalLand, + coins: coins + levelCompleteBonus, + }, + }); + }; + + 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); + }; + + 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 4d5cbfa2..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,6 +19,10 @@ const LevelCompleteModal = forwardRef((props, ref) => { onPress: () => setModalVisible(true), })); + const onPress = () => { + 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. - - } + + )} - setModalVisible(!modalVisible)} - style={styles.goButton} - > + Claim! @@ -117,7 +128,7 @@ const styles = StyleSheet.create({ shadowOffset: { height: 3, width: 1 }, shadowRadius: 4, shadowOpacity: 0.3, - bottom: 205, + bottom: 180, }, });