ready to publish testflight

Author: sleeptil3

.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": 19000,
+  "expoServerPort": null,
   "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,

App.js

@@ -1,14 +1,59 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import GameContext from './GameContext';
 import { StatusBar } from 'expo-status-bar';
 import Game from './Screens/Game'
 import { Flex } from './CoreElements/containerStyles';
 import { colors } from './CoreElements/theme';
+import AsyncStorage from "@react-native-async-storage/async-storage"
 
 export default function App() {
-	return (
-		// Eventually will be a react-navigotor between Rules and Game, possibly a game win final screen
-		<GameContext>
+	const [appPreferences, setAppPreferences] = useState({})
+
+	const getStoredPreferences = async () => {
+		try {
+			const jsonValue = await AsyncStorage.getItem('preferences')
+			return jsonValue != null ? JSON.parse(jsonValue) : null;
+		} catch (e) {
+			console.error("getStoredPreferences error: ", e)
+		}
+	}
+
+	const storePreferences = async (preferenceObject) => {
+		try {
+			const jsonValue = JSON.stringify(preferenceObject)
+			await AsyncStorage.setItem('settings', jsonValue)
+		} catch (e) {
+			console.error("storePreferences error: ", e)
+		}
+	}
+
+	const handlePreferenceLoad = async () => {
+		const storedPreferences = await getStoredPreferences()
+		if (!storedPreferences) {
+			console.log("no stored prefs")
+			const newPreferencesObj = {
+				deckTheme: "Default",
+				sounds: false
+			}
+			storePreferences(newPreferencesObj)
+			setAppPreferences(newPreferencesObj)
+		} else setAppPreferences(storedPrefences)
+	}
+
+	useEffect(() => {
+		handlePreferenceLoad()
+	}, [])
+
+	useEffect(() => {
+		console.log("app preferences changed - saving now")
+		if (appPreferences !== {}) {
+			storePreferences(appPreferences)
+		}
+	}, [appPreferences])
+
+	if (appPreferences === {}) return null
+	else return (
+		<GameContext appPreferences={appPreferences} setAppPreferences={setAppPreferences}>
 			<Flex color={colors.background}>
 				<StatusBar style="light" hidden={true} />
 				<Game />

Components/DeckTheme.js Components/DeckThemeChoice.jsComponents/DeckTheme.js renamed to Components/DeckThemeChoice.js

@@ -3,14 +3,13 @@ import { Image, Pressable, StyleSheet, View } from 'react-native'
 import { Body, DefaultText, Subtitle } from '../CoreElements/fontStyles'
 import { DataContext } from "../GameContext"
 import { iconSVGs, colors, themeSamples } from '../CoreElements/theme'
-import { cardImages } from '../Data/data'
 import Svg, { Path } from 'react-native-svg'
 
-export default function DeckTheme({ deck }) {
-	const { deckTheme, setDeckTheme } = useContext(DataContext)
+export default function DeckThemeChoice({ deck }) {
+	const { appPreferences, setAppPreferences } = useContext(DataContext)
 
 	const handleThemeChange = () => {
-		setDeckTheme(deck)
+		setAppPreferences({ ...appPreferences, deckTheme: deck })
 	}
 
 
@@ -28,12 +27,12 @@ export default function DeckTheme({ deck }) {
 	})
 
 	return (
-		<Pressable onPress={deckTheme !== deck ? handleThemeChange : null}>
+		<Pressable onPress={appPreferences.deckTheme !== deck ? handleThemeChange : null}>
 			<View style={styles.container}>
 				<Subtitle align="left" override={{ fontSize: 18 }}>{deck}</Subtitle>
 				<Image source={themeSamples[deck]} />
 				<View style={{ position: "absolute", top: 10, left: 10 }}>
-					{deckTheme === deck ?
+					{appPreferences.deckTheme === deck ?
 						<Svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 							<Path d="M16.5 32.6562C25.2188 32.6562 32.4375 25.4219 32.4375 16.7188C32.4375 8 25.2031 0.78125 16.4844 0.78125C7.78125 0.78125 0.5625 8 0.5625 16.7188C0.5625 25.4219 7.79688 32.6562 16.5 32.6562ZM16.5 30C9.125 30 3.23438 24.0938 3.23438 16.7188C3.23438 9.34375 9.10938 3.4375 16.4844 3.4375C23.8594 3.4375 29.7656 9.34375 29.7812 16.7188C29.7969 24.0938 23.875 30 16.5 30ZM14.7812 24.1406C15.2969 24.1406 15.7344 23.8906 16.0469 23.4062L23.1875 12.1719C23.3594 11.8594 23.5625 11.5156 23.5625 11.1719C23.5625 10.4688 22.9375 10.0156 22.2812 10.0156C21.8906 10.0156 21.5 10.2656 21.2031 10.7188L14.7188 21.125L11.6406 17.1406C11.2656 16.6406 10.9219 16.5156 10.4844 16.5156C9.8125 16.5156 9.28125 17.0625 9.28125 17.75C9.28125 18.0938 9.42188 18.4219 9.64062 18.7188L13.4531 23.4062C13.8438 23.9219 14.2656 24.1406 14.7812 24.1406Z" fill={colors.green} />
 						</Svg>

GameContext.js

@@ -13,13 +13,11 @@ import { decidePace, debugMode, logMode } from "./Data/data"
 
 export const DataContext = createContext()
 
-export default function GameContext({ children }) {
+export default function GameContext({ appPreferences, setAppPreferences, children }) {
 	////////////////
 	// GAME STATE //
 	////////////////
-
-	// Theme State
-	const [deckTheme, setDeckTheme] = useState("Default")
+	console.log("App Preferences: ", appPreferences)
 
 	// Card State
 	const [playerHand, setPlayerHand] = useState([])
@@ -812,7 +810,7 @@ export default function GameContext({ children }) {
 	return (
 		<DataContext.Provider
 			value={{
-				deckTheme, setDeckTheme,
+				appPreferences, setAppPreferences,
 				showPromptModal, setShowPromptModal,
 				showRulesModal, setShowRulesModal,
 				showSettingsModal, setShowSettingsModal,

Modals/SettingsModal.js

@@ -1,14 +1,13 @@
 import React, { useContext } from 'react'
-import { View, Modal, StyleSheet, Pressable, Image, ScrollView } from 'react-native'
+import { View, Modal, StyleSheet, Pressable, ScrollView } from 'react-native'
 import { DataContext } from '../GameContext'
-import { Flex } from '../CoreElements/containerStyles'
-import { Subtitle, Italic, Body, DefaultText, Heading, Title } from '../CoreElements/fontStyles'
+import { Italic, DefaultText, Heading, Title } from '../CoreElements/fontStyles'
 import { colors, iconSVGs, styles } from '../CoreElements/theme'
 import Svg, { Path } from 'react-native-svg'
-import DeckTheme from '../Components/DeckTheme'
+import DeckThemeChoice from '../Components/DeckThemeChoice'
 
 export default function SettingsModal() {
-	const { setShowStartModal, setShowSettingsModal, showSettingsModal, setDeckTheme, deckTheme } = useContext(DataContext)
+	const { setShowStartModal, setShowSettingsModal, showSettingsModal } = useContext(DataContext)
 
 	const handleClose = () => {
 		setShowStartModal(true)
@@ -38,8 +37,8 @@ export default function SettingsModal() {
 							</View>
 							<View style={{ justifyContent: "center", alignItems: "center", marginVertical: 20 }}>
 								<Title override={{ fontSize: 24 }}>Deck Theme</Title>
-								<DeckTheme deck="Default" />
-								<DeckTheme deck="QueenG" />
+								<DeckThemeChoice deck="Default" />
+								<DeckThemeChoice deck="QueenG" />
 							</View>
 							<Pressable
 								accessibilityLabel={"Press to begin the game"}