Skip to content

Commit 3fb2923

Browse files
sleeptil3sleeptil3
committed
Added rules and settings with deck themes
1 parent 3eff1d9 commit 3fb2923

File tree

248 files changed

+537
-132
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

248 files changed

+537
-132
lines changed

‎Components/Card.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import React, { useState, useContext, useEffect, useRef } from "react"
22
import { Animated, PanResponder, StyleSheet } from "react-native";
33
import { DataContext } from "../GameContext"
44
import { cardImages, blankCard, sleep } from "../Data/data"
5-
import { logMode, debugMode, decidePace } from "../Data/data";
65

76
export default function Card({ card, scale, use, position }) {
8-
const { setPlayerChoice, upTrump } = useContext(DataContext)
7+
const { setPlayerChoice, upTrump, deckTheme } = useContext(DataContext)
98
const [isTrump, setIsTrump] = useState(false)
109
const cardCode = card === blankCard ? "blank" : "" + card.suit.code + card.faceValue.toLowerCase()
1110

@@ -98,7 +97,7 @@ export default function Card({ card, scale, use, position }) {
9897

9998
return (
10099
<Animated.Image
101-
source={cardImages[cardCode]}
100+
source={cardImages[deckTheme][cardCode]}
102101
style={selectedStyle}
103102
{...dragResponder.panHandlers}
104103
/>

‎Components/DeckTheme.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useContext } from 'react'
2+
import { Image, Pressable, StyleSheet, View } from 'react-native'
3+
import { Body, DefaultText, Subtitle } from '../CoreElements/fontStyles'
4+
import { DataContext } from "../GameContext"
5+
import { iconSVGs, colors, themeSamples } from '../CoreElements/theme'
6+
import { cardImages } from '../Data/data'
7+
import Svg, { Path } from 'react-native-svg'
8+
9+
export default function DeckTheme({ deck }) {
10+
const { deckTheme, setDeckTheme } = useContext(DataContext)
11+
12+
const handleThemeChange = () => {
13+
setDeckTheme(deck)
14+
}
15+
16+
17+
const styles = StyleSheet.create({
18+
container: {
19+
alignItems: "center",
20+
justifyContent: "center",
21+
borderWidth: 1,
22+
borderColor: colors.white,
23+
borderRadius: 14,
24+
padding: 10,
25+
marginVertical: 10,
26+
width: 250
27+
},
28+
})
29+
30+
return (
31+
<Pressable onPress={deckTheme !== deck ? handleThemeChange : null}>
32+
<View style={styles.container}>
33+
<Subtitle align="left" override={{ fontSize: 18 }}>{deck}</Subtitle>
34+
<Image source={themeSamples[deck]} />
35+
<View style={{ position: "absolute", top: 10, left: 10 }}>
36+
{deckTheme === deck ?
37+
<Svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
38+
<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} />
39+
</Svg>
40+
: <Svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
41+
<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 30Z" fill={colors.white} />
42+
</Svg>}
43+
</View>
44+
</View>
45+
</Pressable>
46+
)
47+
}

‎Components/DownHand.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { cardImages } from "../Data/data";
66

77
export default function DownHand({ position, handLength }) {
88
const [image, setImage] = useState(0);
9-
const { currentPlayer, turnCount, matchStage, matchTricks, goAlone, dealer } = useContext(DataContext)
9+
const { deckTheme, matchTricks, goAlone, dealer } = useContext(DataContext)
1010

11-
const imageURLS = [cardImages.down0, cardImages.down1, cardImages.down2, cardImages.down3, cardImages.down4, cardImages.down5]
11+
const imageURLS = [cardImages[deckTheme].down0, cardImages[deckTheme].down1, cardImages[deckTheme].down2, cardImages[deckTheme].down3, cardImages[deckTheme].down4, cardImages[deckTheme].down5]
1212

1313
const handStyles = [
1414
null,

‎Components/GameLayer.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import PlayField from './PlayField';
1313
import GameOverModal from '../Modals/GameOverModal';
1414
import TrumpIndicator from '../Components/TrumpIndicator';
1515
import MatchTricksCount from './MatchTricksCount';
16+
import SettingsModal from '../Modals/SettingsModal';
17+
import RulesModal from '../Modals/RulesModal';
1618
// import CallingTeamIndicator from './CalllingTeamIndicator';
1719
// import GameScore from './GameScore';
1820

@@ -34,6 +36,8 @@ export default function GameLayer() {
3436
return (
3537
<SafeAreaView style={styles.screen}>
3638
<StartModal />
39+
<SettingsModal />
40+
<RulesModal />
3741
<GameOverModal />
3842
<PromptModal />
3943
{showActionPrompt && <PromptAction />}

‎Components/TrumpCard.js‎

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,10 @@ import { DataContext } from "../GameContext"
55
import { cardImages, sleep } from "../Data/data"
66

77
export default function TrumpCard(props) {
8-
const { showTrumpCard, setShowTrumpCard, suits, matchStage, yourSeat, upTrump, currentPlayer } = useContext(DataContext)
8+
const { deckTheme, showTrumpCard, setShowTrumpCard, suits, matchStage, yourSeat, upTrump, currentPlayer } = useContext(DataContext)
99
const [cardCode, setCardCode] = useState("")
10-
const [enableSelection, setEnableSelection] = useState(false)
1110
const [scaleValue, setScaleValue] = useState(.6)
1211

13-
const handlePress = () => {
14-
setShowTrumpCard(false)
15-
debugMode && console.log(`You ordered up ${upTrump.faceValue} of ${upTrump.suit.name} as trump`)
16-
// suits[upTrump.suit.code].select()
17-
}
18-
19-
const handleLongPress = () => {
20-
setShowTrumpCard(false)
21-
debugMode && console.log(`You ordered up ${upTrump.faceValue} of ${upTrump.suit.name} as trump`)
22-
// suits[upTrump.suit.code].select()
23-
}
24-
2512
const fadeAnim = useRef(new Animated.Value(0)).current;
2613

2714
const fadeIn = () => {
@@ -57,35 +44,37 @@ export default function TrumpCard(props) {
5744
setCardCode("" + upTrump.suit.code + upTrump.faceValue.toLowerCase())
5845
}, [upTrump])
5946

60-
useEffect(() => {
61-
if (matchStage === "CALL") {
62-
currentPlayer === yourSeat ? setEnableSelection(true) : setEnableSelection(false)
63-
} else {
64-
setEnableSelection(false)
65-
}
66-
}, [currentPlayer])
67-
6847
return (
69-
<Pressable
70-
onPress={handlePress}
71-
onLongPress={handleLongPress}
72-
onPressIn={() => setScaleValue(.7)}
73-
onPressOut={() => setScaleValue(.6)}
74-
>
75-
<Animated.Image
76-
source={cardImages[cardCode]}
77-
style={
78-
{
79-
transform: [{ scale: scaleValue }],
80-
opacity: fadeAnim
81-
}
48+
<Animated.Image
49+
source={cardImages[deckTheme][cardCode]}
50+
style={
51+
{
52+
transform: [{ scale: scaleValue }],
53+
opacity: fadeAnim
8254
}
83-
/>
84-
</Pressable>
55+
}
56+
/>
8557
)
8658
}
8759

8860

89-
// <div onClick={handleClick} className={`${enableSelection} ${trumpCardPosition} transform transition-transform relative z-20 cursor-pointer w-24 delay-75 duration-500 hover:-translate-y-5`}>
90-
// <img className={`transition-opacity ${trumpCardOpacity} duration-1000 filter drop-shadow-2xl shadow-2xl`} src={`./cards/${cardCode}.png`} alt={`${upTrump.faceValue} of ${upTrump.suit.name}`} />
91-
// </div>
61+
// Older code for clicking upTrump card
62+
63+
// const handlePress = () => {
64+
// setShowTrumpCard(false)
65+
// debugMode && console.log(`You ordered up ${upTrump.faceValue} of ${upTrump.suit.name} as trump`)
66+
// // suits[upTrump.suit.code].select()
67+
// }
68+
69+
// const handleLongPress = () => {
70+
// setShowTrumpCard(false)
71+
// debugMode && console.log(`You ordered up ${upTrump.faceValue} of ${upTrump.suit.name} as trump`)
72+
// // suits[upTrump.suit.code].select()
73+
// }
74+
75+
// const [enableSelection, setEnableSelection] = useState(false)
76+
// <Pressable
77+
// onPress = { handlePress }
78+
// onLongPress = { handleLongPress }
79+
// onPressIn = {() => setScaleValue(.7)}
80+
// onPressOut = {() => setScaleValue(.6)}>

‎Components/TrumpStack.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React, { useContext } from "react"
2-
import { Image, View } from "react-native"
2+
import { Image } from "react-native"
33
import { DataContext } from "../GameContext"
44
import TrumpCard from "./TrumpCard"
55
import { Flex } from "../CoreElements/containerStyles"
66
import { cardImages } from "../Data/data"
77

88
export default function TrumpStack() {
9-
const { trump, upTrump, showTrumpStack } = useContext(DataContext)
9+
const { deckTheme, trump, upTrump, showTrumpStack } = useContext(DataContext)
1010

1111
if (!trump.suit) {
1212
return (
1313
<Flex align="center" justify="center" override={{ width: "100%", height: "100%" }}>
14-
{showTrumpStack && <Image source={cardImages.deck} style={{ position: "absolute" }} />}
14+
{showTrumpStack && <Image source={cardImages[deckTheme].deck} style={{ position: "absolute" }} />}
1515
{upTrump.faceValue !== undefined && <TrumpCard />}
1616
</Flex>
1717
)
1818
} else {
1919
return null
2020
}
21-
}
21+
}

‎CoreElements/buttonStyles.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Pressable, Button } from 'react-native';
2+
import { Pressable, Button, Text, Linking } from 'react-native';
33
import { Subtitle } from './fontStyles';
44
import { colors } from './theme';
55

@@ -76,4 +76,8 @@ export const ButtonSetValue = ({ overwrite = false, size, text, setState, state,
7676
/>
7777
)
7878
}
79-
}
79+
}
80+
81+
export const ButtonURLLink = ({ url, children }) => {
82+
return <Text style={{ textDecorationLine: "underline" }} onPress={() => Linking.openURL(url)}>{children}</Text>;
83+
};

‎CoreElements/fontStyles.js‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const customFonts = {
77
"SFPro-Light": require("../assets/fonts/SF-Pro-Text-Light.otf"),
88
"SFPro-Heavy": require("../assets/fonts/SF-Pro-Text-Heavy.otf"),
99
"SFPro-Bold": require("../assets/fonts/SF-Pro-Text-Bold.otf"),
10+
"SF-Pro-Display-ThinItalic": require("../assets/fonts/SF-Pro-Display-ThinItalic.otf"),
11+
"SFPro-Display-Bold": require("../assets/fonts/SF-Pro-Display-Bold.otf"),
1012
}
1113

1214
export const Heading = ({ children, align, override, color }) => {
@@ -16,6 +18,13 @@ export const Heading = ({ children, align, override, color }) => {
1618
return <ActivityIndicator style={{ margin: 20, marginTop: 30 }} animating={true} color={colors.white} size="small" />
1719
}
1820

21+
export const Italic = ({ children, align, override, color }) => {
22+
const [fontLoaded] = useFonts(customFonts)
23+
24+
if (fontLoaded) return <Text style={[fontStyles.italic, { textAlign: align || "left", color: color || fontStyles.heading.color }, override]}>{children}</Text>
25+
return <ActivityIndicator style={{ margin: 20, marginTop: 30 }} animating={true} color={colors.white} size="small" />
26+
}
27+
1928
export const Title = ({ children, align, override, color }) => {
2029
const [fontLoaded] = useFonts(customFonts)
2130

@@ -37,6 +46,13 @@ export const Body = ({ children, align, override, color }) => {
3746
else return <ActivityIndicator style={{ margin: 20, marginTop: 30 }} animating={true} color={colors.white} size="small" />
3847
}
3948

49+
export const List = ({ children, align, override, color }) => {
50+
const [fontLoaded] = useFonts(customFonts)
51+
52+
if (fontLoaded) return <Text style={[fontStyles.list, { textAlign: align || "left", color: color || fontStyles.body.color }, override]}>• {children}</Text>
53+
else return <ActivityIndicator style={{ margin: 20, marginTop: 30 }} animating={true} color={colors.white} size="small" />
54+
}
55+
4056
export const DefaultText = ({ children, align, override, color }) => {
4157
const [fontLoaded] = useFonts(customFonts)
4258

@@ -47,9 +63,14 @@ export const DefaultText = ({ children, align, override, color }) => {
4763

4864
export const fontStyles = StyleSheet.create({
4965
heading: {
66+
fontFamily: "SFPro-Display-Bold",
5067
color: colors.white,
51-
fontSize: 40,
52-
marginBottom: 12
68+
fontSize: 48,
69+
},
70+
italic: {
71+
fontFamily: "SF-Pro-Display-ThinItalic",
72+
color: colors.white,
73+
fontSize: 18,
5374
},
5475
title: {
5576
fontFamily: "SFPro-Heavy",
@@ -66,9 +87,15 @@ export const fontStyles = StyleSheet.create({
6687
body: {
6788
fontFamily: "SFPro-Light",
6889
color: colors.white,
69-
fontSize: 18,
90+
fontSize: 16,
91+
lineHeight: 24,
92+
marginBottom: 20,
93+
},
94+
list: {
95+
fontFamily: "SFPro-Light",
96+
color: colors.white,
97+
fontSize: 16,
7098
lineHeight: 24,
71-
marginBottom: 10,
7299
},
73100
default: {
74101
fontFamily: "SFPro-Light",

‎CoreElements/theme.js‎

Lines changed: 23 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)