david/poker-chips-helper
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed styles

Browse Source
This commit is contained in:
MantashaNoyela 2025-03-11 06:40:52 -07:00
parent da695be36d
commit 533356117a
9 changed files with 254 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
app/index.tsx
View File

@ -7,16 +7,17 @@ import ChipsSelector from "@/components/ChipsSelector";
import ChipDistributionSummary from "@/components/ChipDistributionSummary"; import ChipDistributionSummary from "@/components/ChipDistributionSummary";
import ChipDetection from "@/components/ChipDetection"; import ChipDetection from "@/components/ChipDetection";
import CurrencySelector from "@/components/CurrencySelector"; import CurrencySelector from "@/components/CurrencySelector";
import { saveState, loadState } from "@/components/CalculatorState"; import { saveState, loadState } from "@/util/CalculatorState";
import { import {
savePersistentState, savePersistentState,
loadPersistentState, loadPersistentState,
} from "@/components/PersistentState"; } from "@/util/PersistentState";
import styles from "@/styles/styles"; import styles from "@/styles/styles";
import Section from "@/containers/Section"; import Section from "@/containers/Section";
import AppContext from "@/util/context"; import AppContext from "@/util/context";
import { Picker } from "@react-native-picker/picker"; import { Picker } from "@react-native-picker/picker";
import i18n from "@/i18n/i18n"; import i18n from "@/i18n/i18n";
import PokerAppUi from "@/containers/PokerAppUi";
const IndexScreen: React.FC = () => { const IndexScreen: React.FC = () => {
const [playerCount, setPlayerCount] = useState(2); const [playerCount, setPlayerCount] = useState(2);
@ -25,23 +26,21 @@ const IndexScreen: React.FC = () => {
const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]); const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
const [selectedCurrency, setSelectedCurrency] = useState<string>("$"); const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
const [selectedLanguage, setSelectedLanguage] = useState<string>("en"); const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
const [lightGrayMode, setLightGrayMode] = useState<boolean>(false);
const context = useContext(AppContext); const context = useContext(AppContext);
const isSettingsVisible = useMemo(() => context.showSettings, [context]); const isSettingsVisible = useMemo(() => context.showSettings, [context]);
useEffect(() => { useEffect(() => {
const loadPersistentData = async () => { const loadPersistentData = async () => {
try { try {
console.log("Loading persistent game state...");
const savedState = await loadPersistentState(); const savedState = await loadPersistentState();
if (savedState) { if (savedState) {
console.log("Persistent state restored:", savedState);
setPlayerCount(savedState.playerCount || 2); setPlayerCount(savedState.playerCount || 2);
setBuyInAmount(savedState.buyInAmount || 20); setBuyInAmount(savedState.buyInAmount || 20);
setNumberOfChips(savedState.numberOfChips || 5); setNumberOfChips(savedState.numberOfChips || 5);
setTotalChipsCount(savedState.totalChipsCount || []); setTotalChipsCount(savedState.totalChipsCount || []);
setSelectedCurrency(savedState.selectedCurrency || "$"); setSelectedCurrency(savedState.selectedCurrency || "$");
} else {
console.log("No persistent state found, using defaults.");
} }
} catch (error) { } catch (error) {
console.error("Error loading persistent state:", error); console.error("Error loading persistent state:", error);
@ -62,35 +61,23 @@ const IndexScreen: React.FC = () => {
totalChipsCount, totalChipsCount,
selectedCurrency, selectedCurrency,
}; };
try { await saveState(slot, state);
await saveState(slot, state); await savePersistentState(state);
await savePersistentState(state); Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot }));
console.log(`Game state saved to ${slot}:`, state);
Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot })); // Fixed interpolation
} catch (error) {
console.error("Error saving state:", error);
Alert.alert(i18n.t("error"), i18n.t("failed_to_save_state"));
}
}; };
const handleLoad = async (slot: "SLOT1" | "SLOT2") => { const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
try { const loadedState = await loadState(slot);
const loadedState = await loadState(slot); if (loadedState) {
if (loadedState) { setPlayerCount(loadedState.playerCount);
setPlayerCount(loadedState.playerCount); setBuyInAmount(loadedState.buyInAmount ?? 20);
setBuyInAmount(loadedState.buyInAmount ?? 20); setNumberOfChips(loadedState.numberOfChips);
setNumberOfChips(loadedState.numberOfChips); setTotalChipsCount(loadedState.totalChipsCount);
setTotalChipsCount(loadedState.totalChipsCount); setSelectedCurrency(loadedState.selectedCurrency || "$");
setSelectedCurrency(loadedState.selectedCurrency || "$"); await savePersistentState(loadedState);
await savePersistentState(loadedState); Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot }));
console.log(`Game state loaded from ${slot}:`, loadedState); } else {
Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot })); // Fixed interpolation Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
} else {
Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
}
} catch (error) {
console.error("Error loading state:", error);
Alert.alert(i18n.t("error"), i18n.t("failed_to_load_state"));
} }
}; };
@ -100,107 +87,122 @@ const IndexScreen: React.FC = () => {
}; };
return ( return (
<ScrollView <PokerAppUi darkMode={lightGrayMode}>
style={styles.scrollView} <ScrollView
contentContainerStyle={styles.scrollViewContent} style={styles.scrollView}
> contentContainerStyle={styles.scrollViewContent}
{isSettingsVisible && ( >
<Section <Section
title={i18n.t("select_language")} title={i18n.t("appearance")}
iconName={"language"} iconName={"brightness-4"}
orientation="row" orientation="row"
> >
<Picker <Button
selectedValue={selectedLanguage} title={
onValueChange={handleLanguageChange} lightGrayMode
style={styles.picker} ? i18n.t("switch_to_light_mode")
> : i18n.t("switch_to_gray_mode")
<Picker.Item label={i18n.t("english")} value="en" /> }
<Picker.Item label={i18n.t("spanish")} value="es" /> onPress={() => setLightGrayMode(!lightGrayMode)}
</Picker>
</Section>
)}
{isSettingsVisible && (
<Section
title={i18n.t("select_currency")}
iconName={"attach-money"}
orientation="row"
>
<CurrencySelector
selectedCurrency={selectedCurrency}
setSelectedCurrency={setSelectedCurrency}
/> />
</Section> </Section>
)}
<Section {isSettingsVisible && (
title={i18n.t("select_number_of_players")} <Section
iconName={"people"} title={i18n.t("select_language")}
orientation="row" iconName={"language"}
contentStyle={{ justifyContent: "center", gap: 30 }} orientation="row"
> >
<PlayerSelector <Picker
playerCount={playerCount} selectedValue={selectedLanguage}
setPlayerCount={setPlayerCount} onValueChange={handleLanguageChange}
/> style={styles.picker}
</Section> >
<Picker.Item label={i18n.t("english")} value="en" />
<Picker.Item label={i18n.t("spanish")} value="es" />
</Picker>
</Section>
)}
<Section {isSettingsVisible && (
title={i18n.t("select_buyin_amount")} <Section
iconName={"monetization-on"} title={i18n.t("select_currency")}
> iconName={"attach-money"}
<BuyInSelector orientation="row"
selectedCurrency={selectedCurrency} >
setBuyInAmount={setBuyInAmount} <CurrencySelector
/> selectedCurrency={selectedCurrency}
</Section> setSelectedCurrency={setSelectedCurrency}
/>
</Section>
)}
<Section <Section
title={i18n.t("automatic_chip_detection")} title={i18n.t("select_number_of_players")}
iconName={"camera-alt"} iconName={"people"}
> orientation="row"
<ChipDetection contentStyle={{ justifyContent: "center", gap: 30 }}
updateChipCount={(chipData) => { >
const chipCountArray = Object.values(chipData); <PlayerSelector
setTotalChipsCount(chipCountArray); playerCount={playerCount}
setNumberOfChips(chipCountArray.length); setPlayerCount={setPlayerCount}
}} />
/> </Section>
</Section>
<Section <Section
title={i18n.t("manual_chip_adjustment")} title={i18n.t("select_buyin_amount")}
iconName={"account-balance"} iconName={"monetization-on"}
orientation="row" >
contentStyle={{ alignItems: "center" }} <BuyInSelector
> selectedCurrency={selectedCurrency}
<ChipsSelector setBuyInAmount={setBuyInAmount}
totalChipsCount={totalChipsCount} />
setTotalChipsCount={setTotalChipsCount} </Section>
numberOfChips={numberOfChips}
setNumberOfChips={setNumberOfChips}
/>
</Section>
<Section <Section
title={i18n.t("distribution_and_denomination")} title={i18n.t("automatic_chip_detection")}
iconName={"currency-exchange"} iconName={"camera-alt"}
> >
<ChipDistributionSummary <ChipDetection
playerCount={playerCount} updateChipCount={(chipData) => {
buyInAmount={buyInAmount} const chipCountArray = Object.values(chipData);
totalChipsCount={totalChipsCount} setTotalChipsCount(chipCountArray);
selectedCurrency={selectedCurrency} setNumberOfChips(chipCountArray.length);
/> }}
</Section> />
</Section>
<Section <Section
title={i18n.t("save_and_load")} title={i18n.t("manual_chip_adjustment")}
iconName={"save"} iconName={"account-balance"}
orientation="row" orientation="row"
> contentStyle={{ alignItems: "center" }}
<> >
<ChipsSelector
totalChipsCount={totalChipsCount}
setTotalChipsCount={setTotalChipsCount}
numberOfChips={numberOfChips}
setNumberOfChips={setNumberOfChips}
/>
</Section>
<Section
title={i18n.t("distribution_and_denomination")}
iconName={"currency-exchange"}
>
<ChipDistributionSummary
playerCount={playerCount}
buyInAmount={buyInAmount}
totalChipsCount={totalChipsCount}
selectedCurrency={selectedCurrency}
/>
</Section>
<Section
title={i18n.t("save_and_load")}
iconName={"save"}
orientation="row"
>
<Button <Button
title={i18n.t("save_slot_1")} title={i18n.t("save_slot_1")}
onPress={() => handleSave("SLOT1")} onPress={() => handleSave("SLOT1")}
@ -219,9 +221,9 @@ const IndexScreen: React.FC = () => {
title={i18n.t("load_slot_2")} title={i18n.t("load_slot_2")}
onPress={() => handleLoad("SLOT2")} onPress={() => handleLoad("SLOT2")}
/> />
</> </Section>
</Section> </ScrollView>
</ScrollView> </PokerAppUi>
); );
}; };

74
containers/Button.tsx
View File

@ -1,9 +1,69 @@
import { ButtonProps, Button } from "react-native"; import React from "react";
import { COLORS } from "@/styles/styles"; import { Text, TouchableOpacity, StyleSheet } from "react-native";
// More styling can be done, or swap this out with more flexible component like a TouchableOpacity if needed interface ButtonProps {
const AppButton = (props: ButtonProps) => ( title: string;
<Button color={COLORS.PRIMARY} {...props} /> onPress: () => void;
); disabled?: boolean;
darkMode: boolean;
}
export default AppButton; const Button: React.FC<ButtonProps> = ({
title,
onPress,
disabled,
darkMode,
}) => {
return (
<TouchableOpacity
onPress={onPress}
disabled={disabled}
style={[
styles.button,
darkMode ? styles.darkButton : styles.lightButton,
disabled && styles.disabled,
]}
>
<Text
style={[
styles.buttonText,
darkMode ? styles.darkText : styles.lightText,
]}
>
{title}
</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
marginHorizontal: 5,
marginVertical: 5,
},
darkButton: {
backgroundColor: "#333333",
},
lightButton: {
backgroundColor: "#DDDDDD",
},
buttonText: {
fontSize: 16,
fontWeight: "bold",
textAlign: "center",
},
darkText: {
color: "#FFFFFF",
},
lightText: {
color: "#000000",
},
disabled: {
opacity: 0.5,
},
});
export default Button;

52
containers/PokerAppUi.tsx Normal file
View File

@ -0,0 +1,52 @@
import React, { ReactNode } from "react";
import {
SafeAreaView,
StatusBar,
View,
StyleSheet,
Dimensions,
} from "react-native";
interface PokerAppUiProps {
children: ReactNode;
darkMode?: boolean;
}
const PokerAppUi: React.FC<PokerAppUiProps> = ({
children,
darkMode = false,
}) => {
const screenHeight = Dimensions.get("window").height;
return (
<SafeAreaView
style={[styles.safeArea, darkMode ? styles.lightGray : styles.light]}
>
<StatusBar barStyle={"dark-content"} />
<View style={[styles.container, { minHeight: screenHeight }]}>
{children}
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safeArea: {
flex: 1,
},
container: {
flex: 1,
width: "100%",
padding: 16,
justifyContent: "flex-start",
alignItems: "center",
},
light: {
backgroundColor: "#F5F5F5",
},
lightGray: {
backgroundColor: "#D3D3D3",
},
});
export default PokerAppUi;

2
package-lock.json generated
View File

@ -13,7 +13,7 @@
"@react-native-picker/picker": "^2.11.0", "@react-native-picker/picker": "^2.11.0",
"@react-navigation/bottom-tabs": "7.2.0", "@react-navigation/bottom-tabs": "7.2.0",
"@react-navigation/native": "7.0.14", "@react-navigation/native": "7.0.14",
"expo": "52.0.37", "expo": "^52.0.37",
"expo-blur": "14.0.3", "expo-blur": "14.0.3",
"expo-constants": "17.0.7", "expo-constants": "17.0.7",
"expo-file-system": "18.0.11", "expo-file-system": "18.0.11",

6
package.json
View File

@ -23,7 +23,7 @@
"@react-native-picker/picker": "^2.11.0", "@react-native-picker/picker": "^2.11.0",
"@react-navigation/bottom-tabs": "7.2.0", "@react-navigation/bottom-tabs": "7.2.0",
"@react-navigation/native": "7.0.14", "@react-navigation/native": "7.0.14",
"expo": "52.0.37", "expo": "^52.0.37",
"expo-blur": "14.0.3", "expo-blur": "14.0.3",
"expo-constants": "17.0.7", "expo-constants": "17.0.7",
"expo-file-system": "18.0.11", "expo-file-system": "18.0.11",
@ -31,6 +31,7 @@
"expo-haptics": "14.0.1", "expo-haptics": "14.0.1",
"expo-image-picker": "16.0.6", "expo-image-picker": "16.0.6",
"expo-linking": "7.0.5", "expo-linking": "7.0.5",
"expo-localization": "~16.0.1",
"expo-router": "4.0.17", "expo-router": "4.0.17",
"expo-splash-screen": "0.29.22", "expo-splash-screen": "0.29.22",
"expo-status-bar": "2.0.1", "expo-status-bar": "2.0.1",
@ -47,8 +48,7 @@
"react-native-safe-area-context": "4.12.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "4.4.0", "react-native-screens": "4.4.0",
"react-native-web": "0.19.13", "react-native-web": "0.19.13",
"react-native-webview": "13.12.5", "react-native-webview": "13.12.5"
"expo-localization": "~16.0.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.26.9", "@babel/core": "7.26.9",

0
components/CalculatorState.tsx → util/CalculatorState.ts
View File

0
components/PersistentState.tsx → util/PersistentState.ts
View File

4
components/__tests__/CalculatorState.test.tsx → util/tests/CalculatorState.test.ts
View File

@ -1,12 +1,12 @@
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { saveState, loadState, PokerState } from "../CalculatorState"; import { saveState, loadState, PokerState } from "@/util/CalculatorState";
// Mock AsyncStorage // Mock AsyncStorage
jest.mock("@react-native-async-storage/async-storage", () => jest.mock("@react-native-async-storage/async-storage", () =>
require("@react-native-async-storage/async-storage/jest/async-storage-mock") require("@react-native-async-storage/async-storage/jest/async-storage-mock")
); );
describe("CalculatorState.tsx", () => { describe("CalculatorState.ts", () => {
const mockState: PokerState = { const mockState: PokerState = {
playerCount: 4, playerCount: 4,
buyInAmount: 50, buyInAmount: 50,

4
components/__tests__/PersistentState.test.tsx → util/tests/PersistentState.test.ts
View File

@ -3,14 +3,14 @@ import {
savePersistentState, savePersistentState,
loadPersistentState, loadPersistentState,
PokerState, PokerState,
} from "../PersistentState"; } from "@/util/PersistentState";
jest.mock("@react-native-async-storage/async-storage", () => ({ jest.mock("@react-native-async-storage/async-storage", () => ({
setItem: jest.fn(), setItem: jest.fn(),
getItem: jest.fn(), getItem: jest.fn(),
})); }));
describe("PersistentState.tsx", () => { describe("PersistentState.ts", () => {
const mockState: PokerState = { const mockState: PokerState = {
playerCount: 4, playerCount: 4,
buyInAmount: 50, buyInAmount: 50,