Build 0.9.3-beta release (#1)

* animations done starting sound build0.9.1 release

* Build 0.9.3 release

Author: sleeptil3

App.js

@@ -30,28 +30,36 @@ export default function App() {
 	const handlePreferenceLoad = async () => {
 		const storedPreferences = await getStoredPreferences()
 		if (!storedPreferences) {
-			console.log("no stored prefs")
 			const newPreferencesObj = {
 				deckTheme: "Default",
-				sounds: false
+				sounds: true,
+				tableTheme: "table-green"
 			}
 			setAppPreferences(newPreferencesObj)
 			storePreferences(newPreferencesObj)
-		} else setAppPreferences(storedPreferences)
+		} else {
+			if (storedPreferences.deckTheme === undefined || storedPreferences.sounds === undefined || storedPreferences.tableTheme === undefined) {
+				if (storedPreferences.deckTheme === undefined) storedPreferences.deckTheme = "Default"
+				if (storedPreferences.sounds === undefined) storedPreferences.sounds = true
+				if (storedPreferences.tableTheme === undefined) storedPreferences.tableTheme = "table-green"
+				storePreferences(storedPreferences)
+			}
+			setAppPreferences(storedPreferences)
+		}
 	}
 
 	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}>

Components/Card.js

@@ -1,21 +1,27 @@
 import React, { useState, useContext, useEffect, useRef } from "react"
 import { Animated, PanResponder, StyleSheet } from "react-native";
 import { DataContext } from "../GameContext"
-import { cardImages, blankCard, sleep } from "../Data/data"
+import { cardImages, blankCard, sleep, sounds } from "../Data/data"
+import { Audio } from "expo-av";
 
-export default function Card({ card, scale, use, position }) {
-	const { setPlayerChoice, upTrump, appPreferences } = useContext(DataContext)
+export default function Card({ card, scale, use, position, order }) {
+	const { setPlayerChoice, upTrump, appPreferences, matchStage, enableSound } = useContext(DataContext)
 	const [isTrump, setIsTrump] = useState(false)
 	const cardCode = card === blankCard ? "blank" : "" + card.suit.code + card.faceValue.toLowerCase()
-	const [imageURL, setImageURL] = useState(cardImages[appPreferences.deckTheme][cardCode])
+	const [imageURL, setImageURL] = useState(cardImages[appPreferences.deckTheme][card === blankCard ? "blank" : "" + card.suit.code + card.faceValue.toLowerCase()])
 
-	useEffect(() => {
-		setImageURL(cardImages[appPreferences.deckTheme][cardCode])
-	}, [appPreferences.deckTheme, cardCode])
+	async function playCardSound() {
+		const { sound } = await Audio.Sound.createAsync(
+			sounds.play,
+			{ isMuted: !enableSound, volume: .2 }
+		)
+		await sound.playAsync()
+	}
 
-	const moveAnim = useRef(new Animated.ValueXY()).current;
+	const moveAnim = useRef(new Animated.ValueXY()).current
 	const fadeAnim = useRef(new Animated.Value(1)).current
 	const scaleAnim = useRef(new Animated.Value(1)).current
+	const dealAnim = useRef(new Animated.Value(250)).current
 
 	const dragResponder = useRef(
 		PanResponder.create({
@@ -30,6 +36,7 @@ export default function Card({ card, scale, use, position }) {
 			onPanResponderRelease: () => {
 				if (moveAnim.y._value < -150.0) {
 					// PASSED THRESHOLD FOR ACTION
+					playCardSound()
 					if (!isTrump) {
 						Animated.spring(moveAnim, { toValue: { x: moveAnim.x, y: -350 }, useNativeDriver: true }).start();
 						Animated.timing(fadeAnim, { toValue: 0, duration: 500, useNativeDriver: true }).start();
@@ -44,19 +51,32 @@ export default function Card({ card, scale, use, position }) {
 		})
 	).current;
 
+	const moveUp = () => {
+		Animated.timing(
+			dealAnim,
+			{
+				toValue: 0,
+				delay: (1 + order) * 100,
+				duration: 250,
+				useNativeDriver: true
+			}
+		).start();
+	};
+
+
 	let transform
 
 	switch (position) {
 		case 0: {
-			transform = [{ rotate: "-3deg" },]
+			transform = [{ rotate: "-2deg" }, { translateX: -206 }, { translateY: -40 }]
 			break
 		}
 		case 1: {
 			transform = [{ rotate: "-8deg" }, { translateX: 34 }, { translateY: -30 }]
 			break
 		}
 		case 2: {
-			transform = [{ rotate: "3deg" }, { translateY: -100 }]
+			transform = [{ rotate: "4deg" }, { translateY: -100 }]
 			break
 		}
 		case 3: {
@@ -68,13 +88,11 @@ export default function Card({ card, scale, use, position }) {
 
 	const styles = StyleSheet.create({
 		hand: {
-			borderRadius: 20,
 			marginLeft: -81,
-			marginRight: -81
+			marginRight: -81,
 		},
 		field: {
 			transform: transform,
-			borderRadius: 10,
 			width: 194 * scale,
 			height: 268 * scale,
 		}
@@ -92,19 +110,29 @@ export default function Card({ card, scale, use, position }) {
 
 	const selectedStyle = use === "HAND" ? [styles.hand, animStyles.hand] : [styles.field, animStyles.field]
 	if (position === 0) {
-		selectedStyle.push({ position: "absolute", bottom: 50 })
+		selectedStyle.push({ position: "absolute" })
 	}
 
 	useEffect(() => {
 		if (card === upTrump) setIsTrump(true)
 		else setIsTrump(false)
 	}, [upTrump])
 
+	useEffect(() => {
+		moveUp()
+	}, [])
+
+	useEffect(() => {
+		setImageURL(cardImages[appPreferences.deckTheme][cardCode])
+	}, [appPreferences.deckTheme, cardCode])
+
 	return (
-		<Animated.Image
-			source={imageURL}
-			style={selectedStyle}
-			{...dragResponder.panHandlers}
-		/>
+		<Animated.View style={{ transform: [{ translateY: matchStage === "DEAL" ? dealAnim : 0 }] }}>
+			<Animated.Image
+				source={imageURL}
+				style={selectedStyle}
+				{...dragResponder.panHandlers}
+			/>
+		</Animated.View>
 	)
 }

Components/ControlPanel.js

@@ -40,17 +40,4 @@ const localStyles = StyleSheet.create({
 		paddingHorizontal: 14,
 		opacity: .67
 	}
-})
-
-// style = {({ pressed }) => {
-// 	return (
-// 		{
-// 			accessibilityLabel: altText,
-// 			backgroundColor: pressed ? pressColor : color,
-// 			paddingVertical: 10,
-// 			paddingHorizontal: 20,
-// 			borderRadius: 30,
-// 			margin: 10
-// 		}
-// 	)
-// }}
+})

Components/DeckThemeChoice.js

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { Image, Pressable, StyleSheet, View } from 'react-native'
-import { Body, DefaultText, Subtitle } from '../CoreElements/fontStyles'
+import { Body, Subtitle } from '../CoreElements/fontStyles'
 import { DataContext } from "../GameContext"
 import { iconSVGs, colors, themeSamples } from '../CoreElements/theme'
-import Svg, { Path } from 'react-native-svg'
+import { ButtonURLLink } from '../CoreElements/buttonStyles'
 
 export default function DeckThemeChoice({ deck }) {
 	const { appPreferences, setAppPreferences } = useContext(DataContext)
@@ -12,7 +12,6 @@ export default function DeckThemeChoice({ deck }) {
 	const handleThemeChange = () => {
 		setAppPreferences({ ...appPreferences, deckTheme: deck })
 	}
-
 	useEffect(() => {
 		if (appPreferences.deckTheme === deck) setChosen(true)
 		else setChosen(false)
@@ -27,18 +26,24 @@ export default function DeckThemeChoice({ deck }) {
 			borderRadius: 14,
 			padding: 10,
 			marginVertical: 10,
-			width: 250
+			width: 250,
+			opacity: deck === "Year2099" ? .6 : 1
 		},
 	})
 
 	return (
-		<Pressable onPress={appPreferences.deckTheme !== deck ? handleThemeChange : null}>
+		<Pressable onPress={appPreferences.deckTheme !== deck && deck !== 'Year2099' ? handleThemeChange : null}>
 			<View style={styles.container}>
-				<Subtitle align="left" override={{ fontSize: 18 }}>{deck}</Subtitle>
+				<Subtitle align="left" override={{ fontSize: 18, top: 5, marginBottom: deck === "Year2099" ? 30 : null }}>{deck}</Subtitle>
 				<Image source={themeSamples[deck]} />
-				<View style={{ position: "absolute", top: 10, left: 10 }}>
+				<View style={{ opacity: deck !== "Year2099" ? 1 : .4, position: "absolute", top: 10, left: 10 }}>
 					{appPreferences.deckTheme === deck ? iconSVGs.toggleOn : iconSVGs.toggleOff}
 				</View>
+				{deck === "QueenG" && <View>
+					<Body override={{ fontSize: 13, lineHeight: 18 }}>QueenG was created by Maayan Segal at 16 years old as the first ever, multi-ethnic deck of cards where men and women are equal. In this deck, the Jack, Queen, and King are represented as Prince/Princess, Duke/Duchess, and Monarch, respectively.</Body>
+					<Body override={{ fontSize: 13, lineHeight: 18 }}>This is a beautiful set of cards and I highly recommend you pick up a set. You can learn more about Maayan and pick up a QueenG card deck of your own on her <ButtonURLLink url={"https://www.indiegogo.com/projects/queeng-playing-cards-2nd-edition#/"}>Indiegogo</ButtonURLLink> page.</Body>
+				</View>}
+				{deck === "Year2099" && <Subtitle override={{ fontSize: 18, paddingVertical: 20, paddingBottom: 8 }}>Coming Soon...</Subtitle>}
 			</View>
 		</Pressable>
 	)