Compare commits
No commits in common. "main" and "djwesty/39" have entirely different histories.
main
...
djwesty/39
6
app.json
6
app.json
@ -9,8 +9,7 @@
|
||||
"userInterfaceStyle": "automatic",
|
||||
"newArchEnabled": true,
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.anonymous.pokerchipshelper"
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
@ -34,8 +33,7 @@
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
],
|
||||
"expo-localization"
|
||||
]
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
import i18n from "@/i18n/i18n";
|
||||
import { COLORS } from "@/styles/styles";
|
||||
import AppContext, { IAppContext } from "@/util/context";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import { Stack } from "expo-router";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { I18nextProvider, useTranslation } from "react-i18next";
|
||||
import { useColorScheme } from "react-native";
|
||||
|
||||
const RootLayout: React.FC = () => {
|
||||
const [showSettings, setShowSettings] = useState<boolean>(false);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const ctx = useMemo<IAppContext>(
|
||||
() => ({
|
||||
showSettings,
|
||||
@ -19,39 +13,21 @@ const RootLayout: React.FC = () => {
|
||||
[showSettings]
|
||||
);
|
||||
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
return (
|
||||
<AppContext.Provider value={ctx}>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Stack
|
||||
screenOptions={{
|
||||
contentStyle: {
|
||||
backgroundColor: colors.BACKGROUND,
|
||||
},
|
||||
headerShown: true,
|
||||
title: t("poker_chips_helper"),
|
||||
navigationBarColor: colors.PRIMARY,
|
||||
headerRight: () => (
|
||||
<MaterialIcons
|
||||
name="settings"
|
||||
onPress={() => setShowSettings(!showSettings)}
|
||||
size={30}
|
||||
color={colors.TEXT}
|
||||
/>
|
||||
),
|
||||
headerStyle: {
|
||||
backgroundColor: colors.PRIMARY,
|
||||
},
|
||||
headerTintColor: colors.TEXT,
|
||||
statusBarBackgroundColor: "grey",
|
||||
}}
|
||||
/>
|
||||
</I18nextProvider>
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
title: "Poker Chips Helper",
|
||||
headerRight: () => (
|
||||
<MaterialIcons
|
||||
name="settings"
|
||||
onPress={() => setShowSettings(!showSettings)}
|
||||
size={30}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</AppContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
167
app/index.tsx
167
app/index.tsx
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useContext, useMemo } from "react";
|
||||
import { ScrollView, Alert, useColorScheme, Appearance } from "react-native";
|
||||
import { ScrollView, Alert } from "react-native";
|
||||
import Button from "@/containers/Button";
|
||||
import PlayerSelector from "@/components/PlayerSelector";
|
||||
import BuyInSelector from "@/components/BuyInSelector";
|
||||
@ -7,17 +7,14 @@ import ChipsSelector from "@/components/ChipsSelector";
|
||||
import ChipDistributionSummary from "@/components/ChipDistributionSummary";
|
||||
import ChipDetection from "@/components/ChipDetection";
|
||||
import CurrencySelector from "@/components/CurrencySelector";
|
||||
import { saveState, loadState } from "@/util/CalculatorState";
|
||||
import { saveState, loadState } from "@/components/CalculatorState";
|
||||
import {
|
||||
savePersistentState,
|
||||
loadPersistentState,
|
||||
} from "@/util/PersistentState";
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
} from "@/components/PersistentState";
|
||||
import styles from "@/styles/styles";
|
||||
import Section from "@/containers/Section";
|
||||
import AppContext from "@/util/context";
|
||||
import i18n from "@/i18n/i18n";
|
||||
import { Picker, PickerItem } from "@/containers/Picker";
|
||||
import { ItemValue } from "@react-native-picker/picker/typings/Picker";
|
||||
|
||||
const IndexScreen: React.FC = () => {
|
||||
const [playerCount, setPlayerCount] = useState(2);
|
||||
@ -25,26 +22,23 @@ const IndexScreen: React.FC = () => {
|
||||
const [numberOfChips, setNumberOfChips] = useState<number>(5);
|
||||
const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
|
||||
const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
|
||||
const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
const context = useContext(AppContext);
|
||||
const isSettingsVisible = useMemo(() => context.showSettings, [context]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadPersistentData = async () => {
|
||||
try {
|
||||
console.log("Loading persistent game state...");
|
||||
const savedState = await loadPersistentState();
|
||||
if (savedState) {
|
||||
console.log("Persistent state restored:", savedState);
|
||||
setPlayerCount(savedState.playerCount || 2);
|
||||
setBuyInAmount(savedState.buyInAmount || 20);
|
||||
setNumberOfChips(savedState.numberOfChips || 5);
|
||||
setTotalChipsCount(savedState.totalChipsCount || []);
|
||||
setSelectedCurrency(savedState.selectedCurrency || "$");
|
||||
} else {
|
||||
console.log("No persistent state found, using defaults.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading persistent state:", error);
|
||||
@ -55,7 +49,7 @@ const IndexScreen: React.FC = () => {
|
||||
|
||||
const handleSave = async (slot: "SLOT1" | "SLOT2") => {
|
||||
if (buyInAmount === null) {
|
||||
Alert.alert(i18n.t("error"), i18n.t("please_select_valid_buyin"));
|
||||
Alert.alert("Error", "Please select a valid buy-in amount");
|
||||
return;
|
||||
}
|
||||
const state = {
|
||||
@ -65,29 +59,36 @@ const IndexScreen: React.FC = () => {
|
||||
totalChipsCount,
|
||||
selectedCurrency,
|
||||
};
|
||||
await saveState(slot, state);
|
||||
await savePersistentState(state);
|
||||
Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot }));
|
||||
};
|
||||
|
||||
const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
|
||||
const loadedState = await loadState(slot);
|
||||
if (loadedState) {
|
||||
setPlayerCount(loadedState.playerCount);
|
||||
setBuyInAmount(loadedState.buyInAmount ?? 20);
|
||||
setNumberOfChips(loadedState.numberOfChips);
|
||||
setTotalChipsCount(loadedState.totalChipsCount);
|
||||
setSelectedCurrency(loadedState.selectedCurrency || "$");
|
||||
await savePersistentState(loadedState);
|
||||
Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot }));
|
||||
} else {
|
||||
Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
|
||||
try {
|
||||
await saveState(slot, state);
|
||||
await savePersistentState(state);
|
||||
console.log(`Game state saved to ${slot}:`, state);
|
||||
Alert.alert("Success", `State saved to ${slot}`);
|
||||
} catch (error) {
|
||||
console.error("Error saving state:", error);
|
||||
Alert.alert("Error", "Failed to save state.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleLanguageChange = (language: ItemValue, _: any) => {
|
||||
setSelectedLanguage(language.toString());
|
||||
i18n.changeLanguage(language.toString());
|
||||
const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
|
||||
try {
|
||||
const loadedState = await loadState(slot);
|
||||
if (loadedState) {
|
||||
setPlayerCount(loadedState.playerCount);
|
||||
setBuyInAmount(loadedState.buyInAmount);
|
||||
setNumberOfChips(loadedState.numberOfChips);
|
||||
setTotalChipsCount(loadedState.totalChipsCount);
|
||||
setSelectedCurrency(loadedState.selectedCurrency || "$");
|
||||
await savePersistentState(loadedState);
|
||||
console.log(`Game state loaded from ${slot}:`, loadedState);
|
||||
Alert.alert("Success", `State loaded from ${slot}`);
|
||||
} else {
|
||||
Alert.alert("Info", "No saved state found.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading state:", error);
|
||||
Alert.alert("Error", "Failed to load state.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -96,56 +97,18 @@ const IndexScreen: React.FC = () => {
|
||||
contentContainerStyle={styles.scrollViewContent}
|
||||
>
|
||||
{isSettingsVisible && (
|
||||
<>
|
||||
<Section
|
||||
title={i18n.t("appearance")}
|
||||
iconName={"brightness-4"}
|
||||
orientation="row"
|
||||
>
|
||||
<Button
|
||||
title={
|
||||
darkMode
|
||||
? i18n.t("switch_to_light_mode")
|
||||
: i18n.t("switch_to_dark_mode")
|
||||
}
|
||||
onPress={() =>
|
||||
Appearance.setColorScheme(darkMode ? "light" : "dark")
|
||||
}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("select_language")}
|
||||
iconName={"language"}
|
||||
orientation="row"
|
||||
>
|
||||
<Picker
|
||||
selectedValue={selectedLanguage}
|
||||
onValueChange={handleLanguageChange}
|
||||
>
|
||||
<PickerItem label={i18n.t("english")} value="en" />
|
||||
<PickerItem label={i18n.t("spanish")} value="es" />
|
||||
</Picker>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("select_currency")}
|
||||
iconName={"attach-money"}
|
||||
orientation="row"
|
||||
>
|
||||
<CurrencySelector
|
||||
selectedCurrency={selectedCurrency}
|
||||
setSelectedCurrency={setSelectedCurrency}
|
||||
/>
|
||||
</Section>
|
||||
</>
|
||||
<Section title={"Select Currency"} iconName={"attach-money"}>
|
||||
<CurrencySelector
|
||||
selectedCurrency={selectedCurrency}
|
||||
setSelectedCurrency={setSelectedCurrency}
|
||||
/>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Section
|
||||
title={i18n.t("select_number_of_players")}
|
||||
title={"Select the number of players"}
|
||||
iconName={"people"}
|
||||
orientation="row"
|
||||
contentStyle={{ justifyContent: "center", gap: 30 }}
|
||||
>
|
||||
<PlayerSelector
|
||||
playerCount={playerCount}
|
||||
@ -153,35 +116,23 @@ const IndexScreen: React.FC = () => {
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("select_buyin_amount")}
|
||||
iconName={"monetization-on"}
|
||||
>
|
||||
<Section title={"Select buy-in amount"} iconName={"monetization-on"}>
|
||||
<BuyInSelector
|
||||
selectedCurrency={selectedCurrency}
|
||||
setBuyInAmount={setBuyInAmount}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("automatic_chip_detection")}
|
||||
iconName={"camera-alt"}
|
||||
>
|
||||
<Section title={"Automatic Chip Detection"} iconName={"camera-alt"}>
|
||||
<ChipDetection
|
||||
updateChipCount={(chipData) => {
|
||||
const chipCountArray = Object.values(chipData);
|
||||
setTotalChipsCount(chipCountArray);
|
||||
setNumberOfChips(chipCountArray.length);
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("manual_chip_adjustment")}
|
||||
iconName={"account-balance"}
|
||||
orientation="row"
|
||||
contentStyle={{ alignItems: "center" }}
|
||||
>
|
||||
<Section title={"Manual Chip Adjustment"} iconName={"account-balance"}>
|
||||
<ChipsSelector
|
||||
totalChipsCount={totalChipsCount}
|
||||
setTotalChipsCount={setTotalChipsCount}
|
||||
@ -191,7 +142,7 @@ const IndexScreen: React.FC = () => {
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("distribution_and_denomination")}
|
||||
title={"Distribution & Denomination"}
|
||||
iconName={"currency-exchange"}
|
||||
>
|
||||
<ChipDistributionSummary
|
||||
@ -202,34 +153,20 @@ const IndexScreen: React.FC = () => {
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title={i18n.t("save_and_load")}
|
||||
iconName={"save"}
|
||||
orientation="row"
|
||||
>
|
||||
<Section title={"Save + Load"} iconName={"save"} orientation="row">
|
||||
<>
|
||||
<Button
|
||||
title={i18n.t("save_slot_1")}
|
||||
title={"Save\nSlot 1"}
|
||||
onPress={() => handleSave("SLOT1")}
|
||||
disabled={buyInAmount === null}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("save_slot_2")}
|
||||
title={"Save\nSlot 2"}
|
||||
onPress={() => handleSave("SLOT2")}
|
||||
disabled={buyInAmount === null}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("load_slot_1")}
|
||||
onPress={() => handleLoad("SLOT1")}
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
title={i18n.t("load_slot_2")}
|
||||
onPress={() => handleLoad("SLOT2")}
|
||||
size="small"
|
||||
/>
|
||||
<Button title={"Load\nSlot 1"} onPress={() => handleLoad("SLOT1")} />
|
||||
<Button title={"Load\nSlot 2"} onPress={() => handleLoad("SLOT2")} />
|
||||
</>
|
||||
</Section>
|
||||
</ScrollView>
|
||||
|
||||
@ -1,23 +1,14 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { View, Text, TextInput, useColorScheme } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, TextInput } from "react-native";
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import Button from "@/containers/Button";
|
||||
import i18n from "@/i18n/i18n";
|
||||
|
||||
interface BuyInSelectorProps {
|
||||
setBuyInAmount: React.Dispatch<React.SetStateAction<number>>;
|
||||
selectedCurrency: string;
|
||||
selectedCurrency: string; // Accept selectedCurrency as a prop
|
||||
}
|
||||
|
||||
const defaultBuyInOptions = [10, 25, 50];
|
||||
const MIN = 1;
|
||||
const MAX = 200;
|
||||
|
||||
const parseRoundClamp = (num: string): number => {
|
||||
const parsed = parseFloat(num);
|
||||
const rounded = Math.round(parsed);
|
||||
return Math.min(Math.max(rounded, MIN), MAX);
|
||||
};
|
||||
|
||||
const BuyInSelector: React.FC<BuyInSelectorProps> = ({
|
||||
setBuyInAmount,
|
||||
@ -25,17 +16,11 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({
|
||||
}) => {
|
||||
const [customAmount, setCustomAmount] = useState("");
|
||||
const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
const handleCustomAmountChange = (value: string) => {
|
||||
const numericValue = parseRoundClamp(value);
|
||||
const numericValue = parseFloat(value);
|
||||
if (!isNaN(numericValue) && numericValue >= 0) {
|
||||
setCustomAmount(numericValue.toString());
|
||||
setCustomAmount(value);
|
||||
setBuyInAmountState(numericValue);
|
||||
setBuyInAmount(numericValue);
|
||||
} else {
|
||||
@ -57,27 +42,25 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({
|
||||
{defaultBuyInOptions.map((amount) => (
|
||||
<Button
|
||||
key={amount}
|
||||
color={buyInAmount === amount ? COLORS.PRIMARY : COLORS.SECONDARY}
|
||||
onPress={() => handleBuyInSelection(amount)}
|
||||
title={`${selectedCurrency} ${amount}`}
|
||||
/>
|
||||
></Button>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Text style={styles.p}>Or enter a custom amount:</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.TEXT }]}
|
||||
placeholderTextColor={colors.TEXT}
|
||||
style={styles.input}
|
||||
value={customAmount}
|
||||
maxLength={3}
|
||||
onChangeText={handleCustomAmountChange}
|
||||
placeholder={`${i18n.t("custom_buy_in")} ${MIN} - ${MAX}`}
|
||||
placeholder="Enter custom buy-in"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<Text style={[styles.h2, { color: colors.TEXT }]}>
|
||||
{`${i18n.t("selected_buy_in")} `}
|
||||
{buyInAmount !== null
|
||||
? `${selectedCurrency} ${buyInAmount}`
|
||||
: i18n.t("none")}
|
||||
<Text style={styles.h2}>
|
||||
Selected Buy-in:{" "}
|
||||
{buyInAmount !== null ? `${selectedCurrency} ${buyInAmount}` : "None"}
|
||||
</Text>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
import React, { useState } from "react";
|
||||
import { Image, ActivityIndicator, Text, View } from "react-native";
|
||||
import Button from "@/containers/Button";
|
||||
|
||||
import * as ImagePicker from "expo-image-picker";
|
||||
import i18n from "@/i18n/i18n";
|
||||
|
||||
const ChipDetection = ({
|
||||
updateChipCount,
|
||||
}: {
|
||||
updateChipCount: (chipData: Record<string, number>) => void;
|
||||
updateChipCount: () => void;
|
||||
}) => {
|
||||
const [imageUri, setImageUri] = useState<string | null>(null);
|
||||
const [imageUri, setImageUri] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lastDetectedChips, setLastDetectedChips] = useState<
|
||||
Record<string, number>
|
||||
>({});
|
||||
|
||||
const chipColors = ["white", "red", "green", "blue", "black"];
|
||||
const [error, setError] = useState(null);
|
||||
const [lastDetectedChips, setLastDetectedChips] = useState({});
|
||||
|
||||
const requestCameraPermissions = async () => {
|
||||
const cameraPermission = await ImagePicker.requestCameraPermissionsAsync();
|
||||
@ -30,16 +26,16 @@ const ChipDetection = ({
|
||||
quality: 1,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets && result.assets.length > 0) {
|
||||
if (!result.canceled) {
|
||||
setImageUri(result.assets[0].uri);
|
||||
await processImage(result.assets[0].base64 as string);
|
||||
await processImage(result.assets[0].base64);
|
||||
}
|
||||
};
|
||||
|
||||
const takePhoto = async () => {
|
||||
const hasPermission = await requestCameraPermissions();
|
||||
if (!hasPermission) {
|
||||
setError(i18n.t("camera_permission_required"));
|
||||
setError("Camera permission is required to take a photo.");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -48,25 +44,25 @@ const ChipDetection = ({
|
||||
quality: 1,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets && result.assets.length > 0) {
|
||||
if (!result.canceled) {
|
||||
setImageUri(result.assets[0].uri);
|
||||
await processImage(result.assets[0].base64 as string);
|
||||
await processImage(result.assets[0].base64);
|
||||
}
|
||||
};
|
||||
|
||||
const processImage = async (base64Image: string) => {
|
||||
const processImage = async (base64Image) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const response = await fetch(process.env.EXPO_PUBLIC_API_URL as string, {
|
||||
const response = await fetch(process.env.EXPO_PUBLIC_API_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.EXPO_PUBLIC_API_KEY}`,
|
||||
Authorization: `Bearer ${process.env.EXPO_PUBLIC_API_KEY}`, // Use environment variable for API key
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: process.env.EXPO_PUBLIC_MODEL_NAME,
|
||||
model: process.env.EXPO_PUBLIC_MODEL_NAME, // Use environment variable for model name
|
||||
messages: [
|
||||
{
|
||||
role: "system",
|
||||
@ -94,60 +90,42 @@ const ChipDetection = ({
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok || !result.choices || !result.choices[0].message) {
|
||||
throw new Error(i18n.t("invalid_response"));
|
||||
throw new Error("Invalid response from API.");
|
||||
}
|
||||
|
||||
const rawContent = result.choices[0].message.content.trim();
|
||||
const cleanJSON = rawContent.replace(/```json|```/g, "").trim();
|
||||
const parsedData: Record<string, number> = JSON.parse(cleanJSON);
|
||||
|
||||
const filteredData = Object.entries(parsedData)
|
||||
.filter(([color]) => chipColors.includes(color))
|
||||
.sort(
|
||||
([colorA], [colorB]) =>
|
||||
chipColors.indexOf(colorA) - chipColors.indexOf(colorB)
|
||||
)
|
||||
.reduce(
|
||||
(acc, [color, count]) => {
|
||||
acc[color] = count;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, number>
|
||||
);
|
||||
const parsedData = JSON.parse(cleanJSON);
|
||||
|
||||
const filteredData = Object.fromEntries(
|
||||
Object.entries(parsedData).filter(([_, count]) => count > 0)
|
||||
);
|
||||
|
||||
setLastDetectedChips(filteredData);
|
||||
updateChipCount(filteredData);
|
||||
} catch (error) {
|
||||
setError(i18n.t("failed_to_analyze_image"));
|
||||
setError("Failed to analyze the image.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Button title={i18n.t("pick_an_image")} onPress={pickImage} />
|
||||
<Button title={i18n.t("take_a_photo")} onPress={takePhoto} />
|
||||
<>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
|
||||
<Button title="Pick an Image" onPress={pickImage} />
|
||||
<Button title="Take a Photo" onPress={takePhoto} />
|
||||
</View>
|
||||
|
||||
{imageUri && (
|
||||
<Image
|
||||
source={{ uri: imageUri }}
|
||||
style={{ width: 300, height: 300, marginTop: 10 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{loading && <ActivityIndicator size="large" color="blue" />}
|
||||
|
||||
{error && <Text style={{ color: "red", marginTop: 10 }}>{error}</Text>}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { View, Text, Alert } from "react-native";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import { ColorValue } from "react-native";
|
||||
import i18n from "@/i18n/i18n";
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import styles from "@/styles/styles";
|
||||
|
||||
interface ChipDistributionSummaryProps {
|
||||
playerCount: number;
|
||||
buyInAmount: number;
|
||||
totalChipsCount: number[];
|
||||
colors?: ColorValue[];
|
||||
selectedCurrency: string;
|
||||
selectedCurrency: string; // Add the selectedCurrency as a prop here
|
||||
}
|
||||
|
||||
const reverseFib: number[] = [8, 5, 3, 2, 1];
|
||||
|
||||
const ChipDistributionSummary = ({
|
||||
playerCount,
|
||||
buyInAmount,
|
||||
@ -23,15 +19,11 @@ const ChipDistributionSummary = ({
|
||||
selectedCurrency = "$",
|
||||
}: ChipDistributionSummaryProps) => {
|
||||
const validDenominations: validDenomination[] = [
|
||||
0.05, 0.1, 0.25, 1, 5, 10, 20, 50, 100,
|
||||
0.05, 0.1, 0.25, 0.5, 1, 2, 2.5, 5, 10, 20, 50, 100,
|
||||
];
|
||||
const [denominations, setDenominations] = useState<validDenomination[]>([]);
|
||||
const [distributions, setDistributions] = useState<number[]>([]);
|
||||
|
||||
const showAlert = () => {
|
||||
Alert.alert(i18n.t("warning"), i18n.t("chip_value_warn"));
|
||||
};
|
||||
|
||||
type validDenomination =
|
||||
| 0.05
|
||||
| 0.1
|
||||
@ -43,112 +35,120 @@ const ChipDistributionSummary = ({
|
||||
| 5
|
||||
| 10
|
||||
| 20
|
||||
| 25
|
||||
| 50
|
||||
| 100;
|
||||
|
||||
const findFloorDenomination = (target: number): validDenomination => {
|
||||
let current: validDenomination = validDenominations[0];
|
||||
validDenominations.forEach((value, _) => {
|
||||
validDenominations.forEach((value, index) => {
|
||||
if (value < target) current = value;
|
||||
});
|
||||
return current;
|
||||
};
|
||||
|
||||
const round = useCallback((num: number) => Math.round(num * 100) / 100, []);
|
||||
|
||||
// Bound for the value of the highest chip
|
||||
// This is somewhat arbitray and imperfect, but 1/3 to 1/5 is reasonable depending on the number of colors.
|
||||
// Could be possibly improved based on value of buy in amount
|
||||
const maxDenomination: validDenomination = useMemo(() => {
|
||||
let max: validDenomination;
|
||||
switch (totalChipsCount.length) {
|
||||
case 5:
|
||||
case 4:
|
||||
max = findFloorDenomination(buyInAmount / 3);
|
||||
break;
|
||||
case 3:
|
||||
max = findFloorDenomination(buyInAmount / 4);
|
||||
break;
|
||||
case 2:
|
||||
case 1:
|
||||
default:
|
||||
max = findFloorDenomination(buyInAmount / 5);
|
||||
break;
|
||||
const maxDenomination = useMemo(() => {
|
||||
if (totalChipsCount.length > 3) {
|
||||
return findFloorDenomination(buyInAmount / 3);
|
||||
} else {
|
||||
return findFloorDenomination(buyInAmount / 4);
|
||||
}
|
||||
return max;
|
||||
}, [totalChipsCount, buyInAmount]);
|
||||
}, [totalChipsCount]);
|
||||
|
||||
const potValue = useMemo(
|
||||
() => buyInAmount * playerCount,
|
||||
[buyInAmount, playerCount]
|
||||
);
|
||||
|
||||
// The total value of all chips distributed to a single player. Ideally should be equal to buyInAmount
|
||||
const totalValue = useMemo(() => {
|
||||
let value = 0;
|
||||
for (let i = 0; i < distributions.length; i++) {
|
||||
for (let i = 0; i < totalChipsCount.length; i++) {
|
||||
value += distributions[i] * denominations[i];
|
||||
}
|
||||
return value;
|
||||
}, [distributions, denominations]);
|
||||
|
||||
// Maximum quantity of each chip color which may be distributed to a single player before running out
|
||||
const maxPossibleDistribution = useMemo(
|
||||
() => totalChipsCount.map((v) => Math.floor(v / playerCount)),
|
||||
[totalChipsCount, playerCount]
|
||||
);
|
||||
|
||||
// Dynamically set denominations and distributions from changing inputs
|
||||
const redenominate = useCallback(
|
||||
(
|
||||
invalidDenomination: validDenomination[],
|
||||
shuffleIndex: number
|
||||
): validDenomination[] => {
|
||||
let moved = false;
|
||||
const newDenomination: validDenomination[] = [];
|
||||
for (let i = invalidDenomination.length - 1; i >= 0; i--) {
|
||||
if (i > shuffleIndex) {
|
||||
newDenomination.push(invalidDenomination[i]);
|
||||
} else if (i == shuffleIndex) {
|
||||
newDenomination.push(invalidDenomination[i]);
|
||||
} else if (i < shuffleIndex && !moved) {
|
||||
const nextLowestDenominationIndex = Math.max(
|
||||
validDenominations.indexOf(invalidDenomination[i]) - 1,
|
||||
0
|
||||
);
|
||||
newDenomination.push(validDenominations[nextLowestDenominationIndex]);
|
||||
moved = true;
|
||||
} else {
|
||||
newDenomination.push(invalidDenomination[i]);
|
||||
}
|
||||
}
|
||||
newDenomination.reverse();
|
||||
return newDenomination;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let testDenomination: validDenomination[] = [];
|
||||
const totalNumColors = totalChipsCount.length;
|
||||
|
||||
// Start with max denominations, then push on the next adjacent lower denomination
|
||||
testDenomination.push(maxDenomination);
|
||||
let currentDenominationIndex: number =
|
||||
validDenominations.indexOf(maxDenomination);
|
||||
for (
|
||||
let i = totalNumColors - 2;
|
||||
i >= 0 && currentDenominationIndex > 0;
|
||||
i = i - 1
|
||||
) {
|
||||
currentDenominationIndex -= 1;
|
||||
const currentDemoniation = validDenominations[currentDenominationIndex];
|
||||
testDenomination.push(currentDemoniation);
|
||||
}
|
||||
testDenomination.reverse();
|
||||
let numColors = testDenomination.length;
|
||||
|
||||
const numColors = totalChipsCount.length;
|
||||
const testDistribution: number[] = [];
|
||||
for (let i = 0; i < numColors; ++i) {
|
||||
testDistribution.push(0);
|
||||
}
|
||||
|
||||
// Distribute the chips using the test denomination with a reverse fibbonaci preference
|
||||
// Not optimal, nor correct under all inputs but works for most inputs
|
||||
// Algorithm could be improved with more complexity and optimization (re-tries, redenominating, etc.)
|
||||
testDenomination.push(maxDenomination);
|
||||
let currentDenominationIndex: number =
|
||||
validDenominations.indexOf(maxDenomination);
|
||||
for (let i = numColors - 2; i >= 0; i = i - 1) {
|
||||
currentDenominationIndex -= 1;
|
||||
const currentDemoniation = validDenominations[currentDenominationIndex];
|
||||
testDenomination.push(currentDemoniation);
|
||||
}
|
||||
testDenomination.reverse();
|
||||
|
||||
let remainingValue = buyInAmount;
|
||||
let stop = false;
|
||||
while (remainingValue > 0 && !stop) {
|
||||
let distributed = false;
|
||||
for (let i = numColors - 1; i >= 0; i = i - 1) {
|
||||
for (
|
||||
let j = reverseFib[i];
|
||||
j > 0 &&
|
||||
remainingValue >= testDenomination[i] &&
|
||||
testDistribution[i] < maxPossibleDistribution[i];
|
||||
j = j - 1
|
||||
) {
|
||||
testDistribution[i] = testDistribution[i] + 1;
|
||||
remainingValue = round(remainingValue - testDenomination[i]);
|
||||
distributed = true;
|
||||
let fail = true;
|
||||
let failCount = 0;
|
||||
while (fail && failCount < 1) {
|
||||
let stop = false;
|
||||
while (remainingValue > 0 && !stop) {
|
||||
let distributed = false;
|
||||
for (let i = numColors - 1; i >= 0; i = i - 1) {
|
||||
if (testDistribution[i] < maxPossibleDistribution[i]) {
|
||||
if (remainingValue >= testDenomination[i]) {
|
||||
testDistribution[i] = testDistribution[i] + 1;
|
||||
remainingValue = remainingValue - testDenomination[i];
|
||||
distributed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (distributed == false) {
|
||||
stop = true;
|
||||
}
|
||||
}
|
||||
if (distributed == false) {
|
||||
stop = true;
|
||||
if (remainingValue !== 0) {
|
||||
const redenominateIndex = failCount % numColors;
|
||||
testDenomination = redenominate(testDenomination, redenominateIndex);
|
||||
failCount += 1;
|
||||
fail = true;
|
||||
} else {
|
||||
fail = false;
|
||||
}
|
||||
}
|
||||
|
||||
setDenominations(testDenomination);
|
||||
setDistributions(testDistribution);
|
||||
}, [totalChipsCount, maxDenomination, buyInAmount, playerCount]);
|
||||
@ -156,41 +156,26 @@ const ChipDistributionSummary = ({
|
||||
return (
|
||||
<>
|
||||
<View style={styles.container}>
|
||||
{distributions.map((distribution, index) => {
|
||||
return (
|
||||
distribution > 0 && (
|
||||
<View style={{ flexDirection: "row" }} key={index}>
|
||||
<Text
|
||||
style={{
|
||||
...styles.h2,
|
||||
fontWeight: "bold",
|
||||
color: colors[index],
|
||||
...(colors[index] === "white" && styles.shadow),
|
||||
}}
|
||||
>
|
||||
{`${distribution} ${i18n.t("chips")}: ${selectedCurrency}${denominations[index]} ${i18n.t("each")}`}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
})}
|
||||
{totalChipsCount.map((_, index) => (
|
||||
<View style={{ flexDirection: "row" }} key={index}>
|
||||
<Text
|
||||
style={{
|
||||
...styles.h2,
|
||||
color: colors[index],
|
||||
...(colors[index] === "white" && styles.shadow),
|
||||
}}
|
||||
>
|
||||
{`${distributions[index]} chips: ${selectedCurrency}${denominations[index]} each`}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
|
||||
<View style={[styles.container, { flexDirection: "row", gap: 1 }]}>
|
||||
<Text style={styles.p}>
|
||||
{i18n.t("total_value")}: {selectedCurrency} {round(totalValue)}{" "}
|
||||
</Text>
|
||||
{round(totalValue) !== buyInAmount && (
|
||||
<MaterialIcons
|
||||
name="warning"
|
||||
size={20}
|
||||
color={COLORS.WARNING}
|
||||
onPress={showAlert}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.p}>
|
||||
{selectedCurrency} {potValue} {i18n.t("pot")}
|
||||
Total Value: {selectedCurrency} {totalValue}
|
||||
</Text>
|
||||
<Text style={styles.p}>
|
||||
{selectedCurrency} {potValue} Pot
|
||||
</Text>
|
||||
</View>
|
||||
</>
|
||||
|
||||
@ -11,10 +11,8 @@ import {
|
||||
import Button from "@/containers/Button";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import styles from "@/styles/styles";
|
||||
import i18n from "@/i18n/i18n";
|
||||
|
||||
const colors: ColorValue[] = ["white", "red", "green", "blue", "black"];
|
||||
const defaults = [100, 50, 50, 50, 50];
|
||||
|
||||
const ChipInputModal = ({
|
||||
showModal,
|
||||
@ -30,11 +28,12 @@ const ChipInputModal = ({
|
||||
const color: ColorValue = useMemo(() => showModal[1], [showModal]);
|
||||
const colorIdx = useMemo(() => colors.indexOf(color), [color]);
|
||||
|
||||
const [value, setValue] = useState<number | undefined>();
|
||||
const [value, setValue] = useState<number | undefined>(); // value may be undefined initially
|
||||
|
||||
// Reset the color value when the specific color this modal is for, changes. The same modal is shared/reused in all cases.
|
||||
useEffect(() => {
|
||||
setValue(totalChipsCount[colorIdx]);
|
||||
}, [colorIdx, totalChipsCount]);
|
||||
}, [colorIdx]);
|
||||
|
||||
const shadow = useMemo(() => color === "white", [color]);
|
||||
|
||||
@ -49,9 +48,7 @@ const ChipInputModal = ({
|
||||
{value !== undefined && (
|
||||
<>
|
||||
<Text style={styles.h2}>
|
||||
{i18n.t("number_of_chips", {
|
||||
color: showModal[1]?.toString(),
|
||||
})}{" "}
|
||||
Number of {showModal[1]?.toString()} chips
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{
|
||||
@ -70,7 +67,7 @@ const ChipInputModal = ({
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
title={i18n.t("accept")}
|
||||
title="Accept"
|
||||
onPress={() => {
|
||||
update(showModal[1], Number.isNaN(value) ? 0 : value);
|
||||
setShowModal([false, color]);
|
||||
@ -126,12 +123,12 @@ const ChipsSelector = ({
|
||||
false,
|
||||
colors[0],
|
||||
]);
|
||||
|
||||
const colorsUsed = useMemo(
|
||||
() => colors.slice(0, numberOfChips),
|
||||
() => colors.filter((v, i) => i < numberOfChips),
|
||||
[numberOfChips]
|
||||
);
|
||||
|
||||
// Callback for ChipInputModal to update the chips in the parents state.
|
||||
const update = useCallback(
|
||||
(color: ColorValue, count: number) => {
|
||||
const newTotalChipsCount = totalChipsCount.slice();
|
||||
@ -139,18 +136,20 @@ const ChipsSelector = ({
|
||||
newTotalChipsCount[colorIndex] = count;
|
||||
setTotalChipsCount(newTotalChipsCount);
|
||||
},
|
||||
[totalChipsCount, setTotalChipsCount]
|
||||
[numberOfChips, totalChipsCount, setTotalChipsCount]
|
||||
);
|
||||
|
||||
// When the number of chips changes (dec or inc), update the array being careful to add in sensible default values where they belong
|
||||
useEffect(() => {
|
||||
if (numberOfChips !== totalChipsCount.length) {
|
||||
let newTotalChipsCount = totalChipsCount.slice();
|
||||
|
||||
if (numberOfChips < totalChipsCount.length) {
|
||||
newTotalChipsCount = newTotalChipsCount.slice(0, numberOfChips);
|
||||
} else if (numberOfChips > totalChipsCount.length) {
|
||||
for (let colorIndex = 0; colorIndex < numberOfChips; ++colorIndex) {
|
||||
if (colorIndex >= newTotalChipsCount.length) {
|
||||
const defaultTotal = defaults[colorIndex];
|
||||
const defaultTotal = 100 - colorIndex * 20;
|
||||
newTotalChipsCount.push(defaultTotal);
|
||||
}
|
||||
}
|
||||
@ -161,33 +160,32 @@ const ChipsSelector = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
title="-"
|
||||
onPress={() => {
|
||||
setNumberOfChips(Math.max(1, numberOfChips - 1));
|
||||
}}
|
||||
disabled={numberOfChips === 1}
|
||||
/>
|
||||
<View style={[styles.container, { flexDirection: "row" }]}>
|
||||
{colorsUsed.map((color) => {
|
||||
const chipCount = totalChipsCount[colors.indexOf(color)] ?? 0;
|
||||
return (
|
||||
<Chip
|
||||
key={color.toString()}
|
||||
color={color}
|
||||
count={chipCount}
|
||||
setShowModal={setShowModal}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{colorsUsed.map((color) => (
|
||||
<Chip
|
||||
key={color.toString()}
|
||||
color={color}
|
||||
count={totalChipsCount[colors.indexOf(color)] ?? 0}
|
||||
setShowModal={setShowModal}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={[styles.container, { flexDirection: "row" }]}>
|
||||
<Button
|
||||
title="-"
|
||||
onPress={() => {
|
||||
setNumberOfChips(Math.max(1, numberOfChips - 1));
|
||||
}}
|
||||
disabled={numberOfChips == 1}
|
||||
/>
|
||||
<Button
|
||||
title="+"
|
||||
onPress={() => {
|
||||
setNumberOfChips(Math.min(5, numberOfChips + 1));
|
||||
}}
|
||||
disabled={numberOfChips == 5}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
title="+"
|
||||
onPress={() => {
|
||||
setNumberOfChips(Math.min(5, numberOfChips + 1));
|
||||
}}
|
||||
disabled={numberOfChips === 5}
|
||||
/>
|
||||
|
||||
<ChipInputModal
|
||||
showModal={showModal}
|
||||
@ -199,4 +197,34 @@ const ChipsSelector = ({
|
||||
);
|
||||
};
|
||||
|
||||
const styles1 = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 20,
|
||||
gap: 10,
|
||||
},
|
||||
title: {
|
||||
fontWeight: "bold",
|
||||
margin: "auto",
|
||||
fontSize: 18,
|
||||
},
|
||||
chipContainer: {
|
||||
padding: 20,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-evenly",
|
||||
backgroundColor: "#bbb",
|
||||
},
|
||||
chip: {
|
||||
textAlign: "center",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
buttonContainer: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-evenly",
|
||||
},
|
||||
button: {},
|
||||
});
|
||||
export default ChipsSelector;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import i18n from "@/i18n/i18n";
|
||||
import { Picker, PickerItem } from "@/containers/Picker";
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
import styles from "@/styles/styles";
|
||||
|
||||
interface CurrencySelectorProps {
|
||||
selectedCurrency: string;
|
||||
@ -15,13 +15,14 @@ const CurrencySelector: React.FC<CurrencySelectorProps> = ({
|
||||
<>
|
||||
<Picker
|
||||
selectedValue={selectedCurrency}
|
||||
onValueChange={(itemValue) => setSelectedCurrency(itemValue.toString())}
|
||||
onValueChange={(itemValue) => setSelectedCurrency(itemValue)}
|
||||
style={styles.picker}
|
||||
testID="currency-picker" // ✅ Add testID here
|
||||
>
|
||||
<PickerItem label={i18n.t("usd")} value="$" />
|
||||
<PickerItem label={i18n.t("euro")} value="€" />
|
||||
<PickerItem label={i18n.t("pound")} value="£" />
|
||||
<PickerItem label={i18n.t("inr")} value="₹" />
|
||||
<Picker.Item label="USD ($)" value="$" />
|
||||
<Picker.Item label="Euro (€)" value="€" />
|
||||
<Picker.Item label="Pound (£)" value="£" />
|
||||
<Picker.Item label="INR (₹)" value="₹" />
|
||||
</Picker>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { View, Text, useColorScheme } from "react-native";
|
||||
import React from "react";
|
||||
import { View, Text } from "react-native";
|
||||
import Button from "@/containers/Button";
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import styles from "@/styles/styles";
|
||||
|
||||
interface PlayerSelectorProps {
|
||||
playerCount: number;
|
||||
setPlayerCount: React.Dispatch<React.SetStateAction<number>>;
|
||||
}
|
||||
|
||||
const MIN = 2;
|
||||
const MAX = 8;
|
||||
|
||||
const PlayerSelector: React.FC<PlayerSelectorProps> = ({
|
||||
playerCount,
|
||||
setPlayerCount,
|
||||
@ -22,27 +20,23 @@ const PlayerSelector: React.FC<PlayerSelectorProps> = ({
|
||||
const decreasePlayers = () => {
|
||||
if (playerCount > MIN) setPlayerCount(playerCount - 1);
|
||||
};
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
|
||||
<Button
|
||||
title="-"
|
||||
onPress={decreasePlayers}
|
||||
disabled={playerCount <= MIN}
|
||||
/>
|
||||
<Text style={[styles.h1, { color: colors.TEXT }]}>{playerCount}</Text>
|
||||
<Button
|
||||
title="+"
|
||||
onPress={increasePlayers}
|
||||
disabled={playerCount >= MAX}
|
||||
/>
|
||||
</View>
|
||||
<>
|
||||
<Text style={styles.h1}>{playerCount}</Text>
|
||||
<View style={{ flexDirection: "row", gap: 10 }}>
|
||||
<Button
|
||||
title="-"
|
||||
onPress={decreasePlayers}
|
||||
disabled={playerCount <= MIN}
|
||||
/>
|
||||
<Button
|
||||
title="+"
|
||||
onPress={increasePlayers}
|
||||
disabled={playerCount >= MAX}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@ import React from "react";
|
||||
import { fireEvent, render } from "@testing-library/react-native";
|
||||
import BuyInSelector from "@/components/BuyInSelector";
|
||||
|
||||
// Mocking vector icons to prevent errors
|
||||
jest.mock("@expo/vector-icons", () => {
|
||||
const { Text } = require("react-native");
|
||||
return {
|
||||
@ -11,144 +10,95 @@ jest.mock("@expo/vector-icons", () => {
|
||||
});
|
||||
|
||||
describe("BuyInSelector Component", () => {
|
||||
let setBuyInAmount: jest.Mock;
|
||||
let setBuyInAmount;
|
||||
let getByText;
|
||||
let getByPlaceholderText;
|
||||
|
||||
// Render the component and return query methods
|
||||
// Render the component with the necessary props
|
||||
const renderComponent = (selectedCurrency = "$") => {
|
||||
const utils = render(
|
||||
const result = render(
|
||||
<BuyInSelector
|
||||
setBuyInAmount={setBuyInAmount}
|
||||
selectedCurrency={selectedCurrency}
|
||||
/>
|
||||
);
|
||||
return {
|
||||
...utils,
|
||||
getByText: utils.getByText,
|
||||
getByPlaceholderText: utils.getByPlaceholderText,
|
||||
queryByText: utils.queryByText,
|
||||
};
|
||||
getByText = result.getByText;
|
||||
getByPlaceholderText = result.getByPlaceholderText;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
setBuyInAmount = jest.fn();
|
||||
renderComponent(); // Render with default currency
|
||||
});
|
||||
|
||||
it("renders the buy-in options and input correctly", () => {
|
||||
const { getByText, getByPlaceholderText, queryByText } = renderComponent();
|
||||
|
||||
expect(getByText("$ 10")).toBeTruthy();
|
||||
expect(getByText("$ 25")).toBeTruthy();
|
||||
expect(getByText("$ 50")).toBeTruthy();
|
||||
expect(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200")
|
||||
).toBeTruthy();
|
||||
expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
|
||||
expect(getByPlaceholderText("Enter custom buy-in")).toBeTruthy();
|
||||
expect(getByText("Selected Buy-in: None")).toBeTruthy(); // Check default selection
|
||||
});
|
||||
|
||||
it("sets a predefined buy-in amount correctly", () => {
|
||||
const { getByText } = renderComponent();
|
||||
|
||||
fireEvent.press(getByText("$ 25"));
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25);
|
||||
});
|
||||
|
||||
it("sets a custom buy-in amount correctly", () => {
|
||||
const { getByPlaceholderText } = renderComponent();
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"100"
|
||||
);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(100);
|
||||
});
|
||||
|
||||
it("bound and validate custom amount if invalid input is entered", () => {
|
||||
const { getByPlaceholderText } = renderComponent();
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"-10"
|
||||
);
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(1); // Min value
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"abc"
|
||||
);
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(1);
|
||||
it("resets custom amount if invalid input is entered", () => {
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-10");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25); // Assuming 25 is the default
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25); // Reset to default
|
||||
});
|
||||
|
||||
it("clears the custom amount when selecting a predefined option", () => {
|
||||
const { getByPlaceholderText, getByText } = renderComponent();
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"100"
|
||||
);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
|
||||
fireEvent.press(getByText("$ 50"));
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(50);
|
||||
});
|
||||
|
||||
it("handles valid and invalid input for custom amount correctly", () => {
|
||||
const { getByPlaceholderText } = renderComponent();
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"75"
|
||||
);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "75");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(75);
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"-5"
|
||||
);
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(1);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-5");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25);
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"abc"
|
||||
);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25);
|
||||
});
|
||||
|
||||
it("triggers state update every time a buy-in option is clicked, even if it's the same", () => {
|
||||
const { getByText } = renderComponent();
|
||||
|
||||
fireEvent.press(getByText("$ 25"));
|
||||
fireEvent.press(getByText("$ 25"));
|
||||
expect(setBuyInAmount).toHaveBeenCalledTimes(2);
|
||||
fireEvent.press(getByText("$ 25")); // First click
|
||||
fireEvent.press(getByText("$ 25")); // Clicking the same option again
|
||||
expect(setBuyInAmount).toHaveBeenCalledTimes(2); // Expect it to be called twice
|
||||
});
|
||||
|
||||
it("resets to default buy-in when custom input is cleared", () => {
|
||||
const { getByPlaceholderText } = renderComponent();
|
||||
const input = getByPlaceholderText("Or, enter a custom amount: 1 - 200");
|
||||
|
||||
const input = getByPlaceholderText("Enter custom buy-in");
|
||||
fireEvent.changeText(input, "75");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(75);
|
||||
|
||||
fireEvent.changeText(input, "");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25);
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(25); // Assuming 25 is the default
|
||||
});
|
||||
|
||||
it("updates state correctly when selecting predefined buy-in after entering a custom amount", () => {
|
||||
const { getByPlaceholderText, getByText } = renderComponent();
|
||||
|
||||
fireEvent.changeText(
|
||||
getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
|
||||
"200"
|
||||
);
|
||||
fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "200");
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(200);
|
||||
|
||||
fireEvent.press(getByText("$ 10"));
|
||||
expect(setBuyInAmount).toHaveBeenCalledWith(10);
|
||||
});
|
||||
|
||||
it("displays selected currency correctly", () => {
|
||||
const { getByText, queryByText } = renderComponent("€");
|
||||
|
||||
renderComponent("€"); // Test with a different currency
|
||||
expect(getByText("€ 10")).toBeTruthy();
|
||||
expect(getByText("€ 25")).toBeTruthy();
|
||||
expect(getByText("€ 50")).toBeTruthy();
|
||||
expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
|
||||
expect(getByText("Selected Buy-in: None")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { saveState, loadState, PokerState } from "@/util/CalculatorState";
|
||||
import { saveState, loadState, PokerState } from "../CalculatorState";
|
||||
|
||||
// Mock AsyncStorage
|
||||
jest.mock("@react-native-async-storage/async-storage", () =>
|
||||
require("@react-native-async-storage/async-storage/jest/async-storage-mock")
|
||||
);
|
||||
|
||||
describe("CalculatorState.ts", () => {
|
||||
describe("CalculatorState.tsx", () => {
|
||||
const mockState: PokerState = {
|
||||
playerCount: 4,
|
||||
buyInAmount: 50,
|
||||
@ -17,10 +17,11 @@ jest.mock("expo-image-picker", () => ({
|
||||
describe("ChipDetection", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.spyOn(global, "fetch").mockImplementation(() =>
|
||||
Promise.resolve(
|
||||
new Response(
|
||||
JSON.stringify({
|
||||
global.fetch = jest.fn(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
choices: [
|
||||
{
|
||||
message: {
|
||||
@ -33,27 +34,20 @@ describe("ChipDetection", () => {
|
||||
},
|
||||
],
|
||||
}),
|
||||
{ status: 200, headers: { "Content-Type": "application/json" } }
|
||||
)
|
||||
)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
|
||||
expect(getByText(/pick an image/i)).toBeTruthy();
|
||||
expect(getByText(/take a photo/i)).toBeTruthy();
|
||||
expect(getByText("Pick an Image")).toBeTruthy();
|
||||
expect(getByText("Take a Photo")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("picks an image from the library", async () => {
|
||||
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
|
||||
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
|
||||
canceled: false,
|
||||
assets: [{ uri: "test-uri", base64: "test-base64" }],
|
||||
});
|
||||
@ -61,18 +55,16 @@ describe("ChipDetection", () => {
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
fireEvent.press(getByText(/pick an image/i));
|
||||
fireEvent.press(getByText("Pick an Image"));
|
||||
|
||||
await waitFor(() => expect(mockUpdateChipCount).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it("takes a photo with the camera", async () => {
|
||||
(
|
||||
ImagePicker.requestCameraPermissionsAsync as jest.Mock
|
||||
).mockResolvedValueOnce({
|
||||
ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
|
||||
granted: true,
|
||||
});
|
||||
(ImagePicker.launchCameraAsync as jest.Mock).mockResolvedValueOnce({
|
||||
ImagePicker.launchCameraAsync.mockResolvedValueOnce({
|
||||
canceled: false,
|
||||
assets: [{ uri: "test-camera-uri", base64: "test-camera-base64" }],
|
||||
});
|
||||
@ -80,94 +72,84 @@ describe("ChipDetection", () => {
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
fireEvent.press(getByText(/take a photo/i));
|
||||
fireEvent.press(getByText("Take a Photo"));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockUpdateChipCount).toHaveBeenCalledWith({
|
||||
red: 5,
|
||||
green: 3,
|
||||
blue: 0,
|
||||
})
|
||||
expect(mockUpdateChipCount).toHaveBeenCalledWith({ red: 5, green: 3 })
|
||||
);
|
||||
});
|
||||
|
||||
it("handles camera permission denied", async () => {
|
||||
(
|
||||
ImagePicker.requestCameraPermissionsAsync as jest.Mock
|
||||
).mockResolvedValueOnce({
|
||||
ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
|
||||
granted: false,
|
||||
});
|
||||
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
fireEvent.press(getByText(/take a photo/i));
|
||||
fireEvent.press(getByText("Take a Photo"));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
getByText(/camera permission is required to take a photo/i)
|
||||
getByText("Camera permission is required to take a photo.")
|
||||
).toBeTruthy()
|
||||
);
|
||||
});
|
||||
|
||||
it("displays error message on image processing failure", async () => {
|
||||
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
|
||||
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
|
||||
canceled: false,
|
||||
assets: [{ uri: "test-uri", base64: "test-base64" }],
|
||||
});
|
||||
|
||||
jest.spyOn(global, "fetch").mockImplementationOnce(() =>
|
||||
Promise.resolve(
|
||||
new Response(JSON.stringify({ choices: [] }), {
|
||||
status: 400,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
)
|
||||
global.fetch.mockImplementationOnce(() =>
|
||||
Promise.resolve({
|
||||
ok: false,
|
||||
json: () => Promise.resolve({ choices: [] }),
|
||||
})
|
||||
);
|
||||
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
fireEvent.press(getByText(/pick an image/i));
|
||||
fireEvent.press(getByText("Pick an Image"));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(getByText(/failed to analyze the image/i)).toBeTruthy()
|
||||
expect(getByText("Failed to analyze the image.")).toBeTruthy()
|
||||
);
|
||||
});
|
||||
|
||||
it("handles valid API response correctly", async () => {
|
||||
(ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
|
||||
ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
|
||||
canceled: false,
|
||||
assets: [{ uri: "test-uri", base64: "test-base64" }],
|
||||
});
|
||||
|
||||
jest.spyOn(global, "fetch").mockImplementationOnce(() =>
|
||||
Promise.resolve(
|
||||
new Response(
|
||||
JSON.stringify({
|
||||
global.fetch.mockImplementationOnce(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
choices: [
|
||||
{
|
||||
message: {
|
||||
content: JSON.stringify({ red: 5, green: 3, blue: 0 }),
|
||||
content: JSON.stringify({ red: 5, green: 3 }),
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
{ status: 200, headers: { "Content-Type": "application/json" } }
|
||||
)
|
||||
)
|
||||
})
|
||||
);
|
||||
|
||||
const { getByText } = render(
|
||||
<ChipDetection updateChipCount={mockUpdateChipCount} />
|
||||
);
|
||||
fireEvent.press(getByText(/pick an image/i));
|
||||
fireEvent.press(getByText("Pick an Image"));
|
||||
|
||||
await waitFor(() =>
|
||||
expect(mockUpdateChipCount).toHaveBeenCalledWith({
|
||||
red: 5,
|
||||
green: 3,
|
||||
blue: 0,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,23 +1,16 @@
|
||||
import React from "react";
|
||||
import { Alert } from "react-native";
|
||||
|
||||
import { fireEvent, render } from "@testing-library/react-native";
|
||||
import { render } from "@testing-library/react-native";
|
||||
import ChipDistributionSummary from "../ChipDistributionSummary";
|
||||
|
||||
jest.mock("@expo/vector-icons", () => {
|
||||
const { Text } = require("react-native");
|
||||
return {
|
||||
MaterialIcons: () => <Text>TestIcon</Text>,
|
||||
};
|
||||
});
|
||||
|
||||
describe("ChipDistributionSummary Component", () => {
|
||||
test("renders correctly with valid data", () => {
|
||||
const playerCount = 4;
|
||||
const totalChipsCount = [100, 80, 60, 40, 20];
|
||||
const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
|
||||
const buyInAmount = 20;
|
||||
const expectedDistribution = [16, 12, 8, 6, 2];
|
||||
const expectedDenominations = [0.05, 0.1, 0.25, 1, 5];
|
||||
|
||||
const expectedDistribution = [2, 2, 1, 2, 2];
|
||||
const expectedDenominations = [0.5, 1, 2, 2.5, 5];
|
||||
|
||||
const { getByText } = render(
|
||||
<ChipDistributionSummary
|
||||
@ -30,30 +23,52 @@ describe("ChipDistributionSummary Component", () => {
|
||||
|
||||
expectedDistribution.forEach((count, index) => {
|
||||
const regex = new RegExp(
|
||||
`^${count}\\s+chips:\\s+\\$${expectedDenominations[index]}\\s+Each$`,
|
||||
"i"
|
||||
`^${count}\\s+chips:\\s+\\$${expectedDenominations[index]}\\s+each$`
|
||||
);
|
||||
expect(getByText(regex)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test("renders warning message when needed", async () => {
|
||||
test.skip("renders fallback message when no valid distribution", () => {
|
||||
const { getByText } = render(
|
||||
<ChipDistributionSummary
|
||||
playerCount={6}
|
||||
buyInAmount={25}
|
||||
playerCount={0}
|
||||
buyInAmount={20}
|
||||
selectedCurrency={"$"}
|
||||
totalChipsCount={[100, 50]}
|
||||
totalChipsCount={[]}
|
||||
/>
|
||||
);
|
||||
const warning = getByText("TestIcon");
|
||||
expect(warning).toBeTruthy();
|
||||
expect(getByText("No valid distribution calculated yet.")).toBeTruthy();
|
||||
});
|
||||
|
||||
jest.spyOn(Alert, "alert");
|
||||
fireEvent.press(warning);
|
||||
expect(Alert.alert).toHaveBeenCalledWith(
|
||||
"Warning",
|
||||
`Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players`
|
||||
test.skip("scales down chips if exceeding MAX_CHIPS", () => {
|
||||
const playerCount = 2;
|
||||
let totalChipsCount = [300, 400, 500, 600, 700];
|
||||
const MAX_CHIPS = 500;
|
||||
const totalChips = totalChipsCount.reduce((sum, count) => sum + count, 0);
|
||||
|
||||
if (totalChips > MAX_CHIPS) {
|
||||
const scaleFactor = MAX_CHIPS / totalChips;
|
||||
totalChipsCount = totalChipsCount.map((count) =>
|
||||
Math.round(count * scaleFactor)
|
||||
);
|
||||
}
|
||||
|
||||
const expectedDistribution = [30, 40, 50, 60, 70]; // Adjust as per actual component calculations
|
||||
|
||||
const { getByText } = render(
|
||||
<ChipDistributionSummary
|
||||
playerCount={playerCount}
|
||||
buyInAmount={100}
|
||||
totalChipsCount={totalChipsCount}
|
||||
selectedCurrency={"$"}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(getByText("Distribution & Denomination")).toBeTruthy();
|
||||
|
||||
expectedDistribution.forEach((count, index) => {
|
||||
expect(getByText(new RegExp(`^${count}\\s+chips:`, "i"))).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
userEvent,
|
||||
render,
|
||||
screen,
|
||||
waitForElementToBeRemoved,
|
||||
fireEvent,
|
||||
} from "@testing-library/react-native";
|
||||
import ChipsSelector from "@/components/ChipsSelector";
|
||||
@ -54,8 +55,7 @@ describe("tests for ChipsSelector", () => {
|
||||
const green = screen.getByText("60");
|
||||
expect(green).toHaveStyle({ color: "green" });
|
||||
|
||||
fireEvent.press(green);
|
||||
|
||||
userEvent.press(green);
|
||||
const modalLabel = await screen.findByText(/number of green chips/i);
|
||||
expect(modalLabel).toBeDefined();
|
||||
|
||||
@ -80,16 +80,27 @@ describe("tests for ChipsSelector", () => {
|
||||
TOTAL_CHIPS_COUNT[4],
|
||||
]);
|
||||
});
|
||||
|
||||
it("test dec/inc buttons", async () => {
|
||||
// skip: There is a jest/DOM issue with the button interaction, despite working correctly in-app. Documented to resolve.
|
||||
it.skip("test dec/inc buttons", async () => {
|
||||
rend();
|
||||
|
||||
const blue = screen.getByText(TOTAL_CHIPS_COUNT[3].toString());
|
||||
const black = screen.getByText(TOTAL_CHIPS_COUNT[4].toString());
|
||||
const decrement = screen.getByRole("button", { name: /-/i });
|
||||
const increment = screen.getByRole("button", { name: /\+/i });
|
||||
|
||||
fireEvent.press(decrement);
|
||||
expect(mockSetNumberOfChips).toHaveBeenCalledWith(4);
|
||||
fireEvent.press(decrement);
|
||||
|
||||
// Test that elements are removed after fireEvent
|
||||
await waitForElementToBeRemoved(() => blue);
|
||||
await waitForElementToBeRemoved(() => black);
|
||||
|
||||
fireEvent.press(increment);
|
||||
expect(mockSetNumberOfChips).toHaveBeenCalledWith(4);
|
||||
fireEvent.press(increment);
|
||||
|
||||
// Test that new elements re-appear, correctly
|
||||
const blue1 = screen.getByText(TOTAL_CHIPS_COUNT[3].toString());
|
||||
const black1 = screen.getByText(TOTAL_CHIPS_COUNT[4].toString());
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,14 +3,14 @@ import {
|
||||
savePersistentState,
|
||||
loadPersistentState,
|
||||
PokerState,
|
||||
} from "@/util/PersistentState";
|
||||
} from "../PersistentState";
|
||||
|
||||
jest.mock("@react-native-async-storage/async-storage", () => ({
|
||||
setItem: jest.fn(),
|
||||
getItem: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("PersistentState.ts", () => {
|
||||
describe("PersistentState.tsx", () => {
|
||||
const mockState: PokerState = {
|
||||
playerCount: 4,
|
||||
buyInAmount: 50,
|
||||
@ -1,82 +1,9 @@
|
||||
import { ButtonProps, Button } from "react-native";
|
||||
import { COLORS } from "@/styles/styles";
|
||||
import React, { useMemo } from "react";
|
||||
import {
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
useColorScheme,
|
||||
} from "react-native";
|
||||
|
||||
interface ButtonProps {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
disabled?: boolean;
|
||||
size?: "normal" | "small";
|
||||
}
|
||||
// More styling can be done, or swap this out with more flexible component like a TouchableOpacity if needed
|
||||
const AppButton = (props: ButtonProps) => (
|
||||
<Button color={COLORS.PRIMARY} {...props} />
|
||||
);
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
title,
|
||||
onPress,
|
||||
disabled,
|
||||
size = "normal",
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
disabled={disabled}
|
||||
accessibilityRole="button"
|
||||
style={[
|
||||
size == "normal" ? styles.button : styles.buttonSmall,
|
||||
{ backgroundColor: colors.PRIMARY },
|
||||
disabled && styles.disabled,
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
size == "normal" ? styles.buttonText : styles.buttonTextSmall,
|
||||
{ color: colors.TEXT },
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 8,
|
||||
marginHorizontal: 5,
|
||||
marginVertical: 5,
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
buttonSmall: {
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 8,
|
||||
marginHorizontal: 2,
|
||||
marginVertical: 2,
|
||||
},
|
||||
buttonTextSmall: {
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
disabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
export default Button;
|
||||
export default AppButton;
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
import styles, { COLORS } from "@/styles/styles";
|
||||
import { PickerItemProps, PickerProps } from "@react-native-picker/picker";
|
||||
import { useMemo } from "react";
|
||||
import { useColorScheme, View } from "react-native";
|
||||
import { Picker as RNPicker } from "@react-native-picker/picker";
|
||||
|
||||
export const PickerItem: React.FC<PickerItemProps> = (props) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<RNPicker.Item
|
||||
style={[
|
||||
styles.pickerItem,
|
||||
{ color: colors.TEXT, backgroundColor: colors.PRIMARY },
|
||||
]}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Picker: React.FC<PickerProps> = (props) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.pickerWrapper}>
|
||||
<RNPicker
|
||||
style={[
|
||||
styles.picker,
|
||||
{
|
||||
color: colors.TEXT,
|
||||
backgroundColor: colors.PRIMARY,
|
||||
},
|
||||
]}
|
||||
dropdownIconColor={colors.TEXT}
|
||||
{...props}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@ -1,7 +1,7 @@
|
||||
import { View, Text, StyleSheet, useColorScheme } from "react-native";
|
||||
import React, { useMemo } from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import React from "react";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import globalStyles, { COLORS } from "@/styles/styles";
|
||||
import globalStyles from "@/styles/styles";
|
||||
|
||||
const titleCase = (input: string) =>
|
||||
input
|
||||
@ -9,26 +9,18 @@ const titleCase = (input: string) =>
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
|
||||
.join(" ");
|
||||
|
||||
// Wrapper container for styling purposes
|
||||
//Higher Order Component (HOC) for styling purposes
|
||||
const Section = ({
|
||||
title,
|
||||
iconName,
|
||||
children,
|
||||
orientation = "column",
|
||||
contentStyle = {},
|
||||
}: {
|
||||
title: string;
|
||||
iconName: string | any;
|
||||
children: React.JSX.Element;
|
||||
orientation?: "row" | "column";
|
||||
contentStyle?: object;
|
||||
}) => {
|
||||
const colorScheme = useColorScheme();
|
||||
const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
|
||||
const colors = useMemo(
|
||||
() => (darkMode ? COLORS.DARK : COLORS.LIGHT),
|
||||
[darkMode]
|
||||
);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
@ -36,19 +28,11 @@ const Section = ({
|
||||
style={styles.icon}
|
||||
name={iconName}
|
||||
size={30}
|
||||
color={colors.TEXT}
|
||||
color={"black"}
|
||||
/>
|
||||
<Text style={[styles.title, { color: colors.TEXT }]}>
|
||||
{titleCase(title)}
|
||||
</Text>
|
||||
<Text style={styles.title}>{titleCase(title)}</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...styles.content,
|
||||
...contentStyle,
|
||||
flexDirection: orientation,
|
||||
}}
|
||||
>
|
||||
<View style={{ ...styles.content, flexDirection: orientation }}>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
54
i18n/en.json
54
i18n/en.json
@ -1,54 +0,0 @@
|
||||
{
|
||||
"translation": {
|
||||
"poker_chips_helper": "Poker Chips Helper",
|
||||
"select_currency": "Select Currency",
|
||||
"usd": "USD ($)",
|
||||
"euro": "Euro (€)",
|
||||
"pound": "Pound (£)",
|
||||
"inr": "INR (₹)",
|
||||
"select_number_of_players": "Select the Number of Players:",
|
||||
"select_buyin_amount": "Select Buy-in Amount:",
|
||||
"custom_buy_in": "Or, enter a custom amount:",
|
||||
"selected_buy_in": "Selected Buy-in:",
|
||||
"none": "None",
|
||||
"pick_an_image": "Pick an image",
|
||||
"take_a_photo": "Take a photo",
|
||||
"chips": "chips",
|
||||
"number_of_chips": "Number of {{color}} chips",
|
||||
"accept": "Accept",
|
||||
"distribution_and_denomination": "Distribution & Denomination",
|
||||
"pot": "Pot",
|
||||
"total_value": "Total Value",
|
||||
"each": "Each",
|
||||
"select_language": "Select Language",
|
||||
"english": "English",
|
||||
"spanish": "Spanish",
|
||||
"settings": "Settings",
|
||||
"camera_permission_required": "Camera permission is required to take a photo.",
|
||||
"how_many_chips_by_color": "How many poker chips are there for each color? Return structured JSON.",
|
||||
"invalid_response": "Invalid response from API.",
|
||||
"failed_to_analyze_image": "Failed to analyze the image.",
|
||||
"state_saved_successfully": "State saved successfully",
|
||||
"state_saved": "State saved to {{slot}}",
|
||||
"state_save_failed": "Failed to save state",
|
||||
"success": "Success",
|
||||
"error": "Error",
|
||||
"failed_to_save_state": "Failed to save state.",
|
||||
"state_loaded_from": "State loaded from",
|
||||
"info": "Info",
|
||||
"warning": "Warning",
|
||||
"no_saved_state_found": "No saved state found.",
|
||||
"automatic_chip_detection": "Automatic Chip Detection",
|
||||
"manual_chip_adjustment": "Manual Chip Adjustment",
|
||||
"save_and_load": "Save & Load",
|
||||
"save_slot_1": "Save\nSlot 1",
|
||||
"save_slot_2": "Save\nSlot 2",
|
||||
"load_slot_1": "Load\nSlot 1",
|
||||
"load_slot_2": "Load\nSlot 2",
|
||||
"please_select_valid_buyin": "Please select a valid buy-in amount",
|
||||
"chip_value_warn": "Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players",
|
||||
"appearance": "Appearance",
|
||||
"switch_to_dark_mode": "Switch to Dark Mode",
|
||||
"switch_to_light_mode": "Switch to Light Mode"
|
||||
}
|
||||
}
|
||||
55
i18n/es.json
55
i18n/es.json
@ -1,55 +0,0 @@
|
||||
{
|
||||
"translation": {
|
||||
"poker_chips_helper": "Ayudante de Fichas de Póker",
|
||||
"select_currency": "Seleccionar moneda",
|
||||
"usd": "USD ($)",
|
||||
"euro": "Euro (€)",
|
||||
"pound": "Libra (£)",
|
||||
"inr": "INR (₹)",
|
||||
"select_number_of_players": "Seleccionar número de jugadores:",
|
||||
"select_buyin_amount": "Seleccionar cantidad de buy-in:",
|
||||
"custom_buy_in": "O, ingresa una cantidad personalizada:",
|
||||
"selected_buy_in": "Buy-in seleccionado:",
|
||||
"none": "Ninguno",
|
||||
"pick_an_image": "Elige una imagen",
|
||||
"take_a_photo": "Tomar una foto",
|
||||
"chips": "fichas",
|
||||
"number_of_chips": "Número de {{color}} fichas",
|
||||
"accept": "Aceptar",
|
||||
"distribution_and_denomination": "Distribución y Denominación",
|
||||
"pot": "Olla",
|
||||
"total_value": "Valor total",
|
||||
"each": "Cada",
|
||||
"select_language": "Seleccionar idioma",
|
||||
"english": "Inglés",
|
||||
"spanish": "Español",
|
||||
"settings": "Configuraciones",
|
||||
"camera_permission_required": "Se requiere permiso de cámara para tomar una foto.",
|
||||
"how_many_chips_by_color": "¿Cuántas fichas de póker hay de cada color? Devuelve JSON estructurado.",
|
||||
"invalid_response": "Respuesta no válida de la API.",
|
||||
"failed_to_analyze_image": "No se pudo analizar la imagen",
|
||||
"state_saved_successfully": "Estado guardado con éxito",
|
||||
"state_saved": "Estado guardado en {{slot}}",
|
||||
"state_save_failed": "Error al guardar el estado",
|
||||
"success": "Éxito",
|
||||
"state_saved_to": "Estado guardado en",
|
||||
"error": "Error",
|
||||
"failed_to_save_state": "No se pudo guardar el estado.",
|
||||
"state_loaded_from": "Estado cargado desde",
|
||||
"info": "Información",
|
||||
"warning": "Advertencia",
|
||||
"no_saved_state_found": "No se encontró estado guardado.",
|
||||
"automatic_chip_detection": "Detección automática de fichas",
|
||||
"manual_chip_adjustment": "Ajuste manual de fichas",
|
||||
"save_and_load": "Guardar & Cargar",
|
||||
"save_slot_1": "Guardar\nSlot 1",
|
||||
"save_slot_2": "Guardar\nSlot 2",
|
||||
"load_slot_1": "Cargar\nSlot 1",
|
||||
"load_slot_2": "Cargar\nSlot 2",
|
||||
"please_select_valid_buyin": "Por favor seleccione una cantidad de buy-in válida",
|
||||
"chip_value_warn": "Tenga en cuenta que el valor de las fichas distribuidas no es igual al buy-in para estas entradas.\n\nSin embargo, los resultados que se muestran son justos para todos los jugadores.",
|
||||
"appearance": "Apariencia",
|
||||
"switch_to_dark_mode": "Cambiar a Modo Oscuro",
|
||||
"switch_to_light_mode": "Cambiar a Modo Claro"
|
||||
}
|
||||
}
|
||||
22
i18n/i18n.ts
22
i18n/i18n.ts
@ -1,22 +0,0 @@
|
||||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import * as Localization from "expo-localization";
|
||||
import en from "./en.json";
|
||||
import es from "./es.json";
|
||||
const resources = {
|
||||
en,
|
||||
es,
|
||||
};
|
||||
|
||||
const detectedLanguage = Localization.locale.split("-")[0] || "en";
|
||||
|
||||
i18n.use(initReactI18next).init({
|
||||
resources,
|
||||
lng: detectedLanguage,
|
||||
fallbackLng: "en",
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
182
package-lock.json
generated
182
package-lock.json
generated
@ -13,7 +13,7 @@
|
||||
"@react-native-picker/picker": "^2.11.0",
|
||||
"@react-navigation/bottom-tabs": "7.2.0",
|
||||
"@react-navigation/native": "7.0.14",
|
||||
"expo": "^52.0.37",
|
||||
"expo": "52.0.37",
|
||||
"expo-blur": "14.0.3",
|
||||
"expo-constants": "17.0.7",
|
||||
"expo-file-system": "18.0.11",
|
||||
@ -21,22 +21,20 @@
|
||||
"expo-haptics": "14.0.1",
|
||||
"expo-image-picker": "16.0.6",
|
||||
"expo-linking": "7.0.5",
|
||||
"expo-localization": "~16.0.1",
|
||||
"expo-router": "4.0.17",
|
||||
"expo-splash-screen": "0.29.22",
|
||||
"expo-status-bar": "2.0.1",
|
||||
"expo-symbols": "0.2.2",
|
||||
"expo-system-ui": "4.0.8",
|
||||
"expo-web-browser": "14.0.2",
|
||||
"i18next": "^24.2.2",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-i18next": "^15.4.1",
|
||||
"react-native": "0.76.7",
|
||||
"react-native-gesture-handler": "2.20.2",
|
||||
"react-native-reanimated": "3.16.7",
|
||||
"react-native-safe-area-context": "4.12.0",
|
||||
"react-native-screens": "4.4.0",
|
||||
"react-native-vector-icons": "^10.2.0",
|
||||
"react-native-web": "0.19.13",
|
||||
"react-native-webview": "13.12.5"
|
||||
},
|
||||
@ -8240,19 +8238,6 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-localization": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-16.0.1.tgz",
|
||||
"integrity": "sha512-kUrXiV/Pq9r7cG+TMt+Qa49IUQ9Y/czVwen4hmiboTclTopcWdIeCzYZv6JGtufoPpjEO9vVx1QJrXYl9V2u0Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"rtl-detect": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-modules-autolinking": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.8.tgz",
|
||||
@ -9352,15 +9337,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"void-elements": "3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
|
||||
@ -9430,37 +9406,6 @@
|
||||
"integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "24.2.2",
|
||||
"resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
|
||||
"integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com/i18next.html"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
@ -14346,28 +14291,6 @@
|
||||
"react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "15.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.1.tgz",
|
||||
"integrity": "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.0",
|
||||
"html-parse-stringify": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 23.2.3",
|
||||
"react": ">= 16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
@ -14523,6 +14446,92 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons": {
|
||||
"version": "10.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.2.0.tgz",
|
||||
"integrity": "sha512-n5HGcxUuVaTf9QJPs/W22xQpC2Z9u0nb0KgLPnVltP8vdUvOp6+R26gF55kilP/fV4eL4vsAHUqUjewppJMBOQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"yargs": "^16.1.1"
|
||||
},
|
||||
"bin": {
|
||||
"fa-upgrade.sh": "bin/fa-upgrade.sh",
|
||||
"fa5-upgrade": "bin/fa5-upgrade.sh",
|
||||
"fa6-upgrade": "bin/fa6-upgrade.sh",
|
||||
"generate-icon": "bin/generate-icon.js"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/cliui": {
|
||||
"version": "7.0.4",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
|
||||
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"wrap-ansi": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/strip-ansi": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/yargs": {
|
||||
"version": "16.2.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
|
||||
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cliui": "^7.0.2",
|
||||
"escalade": "^3.1.1",
|
||||
"get-caller-file": "^2.0.5",
|
||||
"require-directory": "^2.1.1",
|
||||
"string-width": "^4.2.0",
|
||||
"y18n": "^5.0.5",
|
||||
"yargs-parser": "^20.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-vector-icons/node_modules/yargs-parser": {
|
||||
"version": "20.2.9",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
|
||||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-web": {
|
||||
"version": "0.19.13",
|
||||
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.13.tgz",
|
||||
@ -15082,12 +15091,6 @@
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/rtl-detect": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz",
|
||||
"integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/run-parallel": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
|
||||
@ -17217,15 +17220,6 @@
|
||||
"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
|
||||
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"@react-native-picker/picker": "^2.11.0",
|
||||
"@react-navigation/bottom-tabs": "7.2.0",
|
||||
"@react-navigation/native": "7.0.14",
|
||||
"expo": "^52.0.37",
|
||||
"expo": "52.0.37",
|
||||
"expo-blur": "14.0.3",
|
||||
"expo-constants": "17.0.7",
|
||||
"expo-file-system": "18.0.11",
|
||||
@ -31,17 +31,14 @@
|
||||
"expo-haptics": "14.0.1",
|
||||
"expo-image-picker": "16.0.6",
|
||||
"expo-linking": "7.0.5",
|
||||
"expo-localization": "~16.0.1",
|
||||
"expo-router": "4.0.17",
|
||||
"expo-splash-screen": "0.29.22",
|
||||
"expo-status-bar": "2.0.1",
|
||||
"expo-symbols": "0.2.2",
|
||||
"expo-system-ui": "4.0.8",
|
||||
"expo-web-browser": "14.0.2",
|
||||
"i18next": "^24.2.2",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-i18next": "^15.4.1",
|
||||
"react-native": "0.76.7",
|
||||
"react-native-gesture-handler": "2.20.2",
|
||||
"react-native-reanimated": "3.16.7",
|
||||
|
||||
@ -1,23 +1,16 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const COLORS = {
|
||||
WARNING: "#c79c28",
|
||||
LIGHT: {
|
||||
TEXT: "black",
|
||||
PRIMARY: "lightgrey",
|
||||
SECONDARY: "azure",
|
||||
BACKGROUND: "ghostwhite",
|
||||
DISABLED: "gray",
|
||||
},
|
||||
DARK: {
|
||||
TEXT: "white",
|
||||
PRIMARY: "black",
|
||||
SECONDARY: "teal",
|
||||
BACKGROUND: "dimgrey",
|
||||
DISABLED: "gray",
|
||||
},
|
||||
PRIMARY: "#007bff",
|
||||
SECONDARY: "#6c757d",
|
||||
SUCCESS: "#28a745",
|
||||
DANGER: "#dc3545",
|
||||
WARNING: "#ffc107",
|
||||
};
|
||||
|
||||
const lightStyles = StyleSheet.create({});
|
||||
const darkStyles = StyleSheet.create({});
|
||||
|
||||
const GlobalStyles = StyleSheet.create({
|
||||
scrollView: {},
|
||||
scrollViewContent: {
|
||||
@ -32,7 +25,7 @@ const GlobalStyles = StyleSheet.create({
|
||||
gap: 10,
|
||||
},
|
||||
|
||||
h1: { fontSize: 19, fontWeight: "bold" },
|
||||
h1: { fontSize: 20, fontWeight: "bold" },
|
||||
h2: { fontSize: 18, fontWeight: "normal" },
|
||||
p: {
|
||||
fontSize: 16,
|
||||
@ -58,15 +51,9 @@ const GlobalStyles = StyleSheet.create({
|
||||
textShadowRadius: 10,
|
||||
},
|
||||
picker: {
|
||||
borderRadius: 10,
|
||||
height: 55,
|
||||
height: 50,
|
||||
width: 150,
|
||||
},
|
||||
pickerItem: {},
|
||||
pickerWrapper: {
|
||||
borderRadius: 10,
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
export default GlobalStyles;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user