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

Fixed issues

Browse Source
This commit is contained in:
MantashaNoyela 2025-03-16 16:08:07 -07:00
parent 533356117a
commit 28addf53a5
12 changed files with 107 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/index.tsx
View File

@ -104,6 +104,7 @@ const IndexScreen: React.FC = () => {
: i18n.t("switch_to_gray_mode")
}
onPress={() => setLightGrayMode(!lightGrayMode)}
darkMode={lightGrayMode}
/>
</Section>
@ -146,6 +147,7 @@ const IndexScreen: React.FC = () => {
<PlayerSelector
playerCount={playerCount}
setPlayerCount={setPlayerCount}
darkMode={lightGrayMode}
/>
</Section>
@ -156,6 +158,7 @@ const IndexScreen: React.FC = () => {
<BuyInSelector
selectedCurrency={selectedCurrency}
setBuyInAmount={setBuyInAmount}
darkMode={lightGrayMode}
/>
</Section>
@ -169,6 +172,7 @@ const IndexScreen: React.FC = () => {
setTotalChipsCount(chipCountArray);
setNumberOfChips(chipCountArray.length);
}}
darkMode={lightGrayMode}
/>
</Section>
@ -183,6 +187,7 @@ const IndexScreen: React.FC = () => {
setTotalChipsCount={setTotalChipsCount}
numberOfChips={numberOfChips}
setNumberOfChips={setNumberOfChips}
darkMode={lightGrayMode}
/>
</Section>
@ -203,24 +208,30 @@ const IndexScreen: React.FC = () => {
iconName={"save"}
orientation="row"
>
<Button
title={i18n.t("save_slot_1")}
onPress={() => handleSave("SLOT1")}
disabled={buyInAmount === null}
/>
<Button
title={i18n.t("save_slot_2")}
onPress={() => handleSave("SLOT2")}
disabled={buyInAmount === null}
/>
<Button
title={i18n.t("load_slot_1")}
onPress={() => handleLoad("SLOT1")}
/>
<Button
title={i18n.t("load_slot_2")}
onPress={() => handleLoad("SLOT2")}
/>
<>
<Button
title={i18n.t("save_slot_1")}
onPress={() => handleSave("SLOT1")}
disabled={buyInAmount === null}
darkMode={lightGrayMode}
/>
<Button
title={i18n.t("save_slot_2")}
onPress={() => handleSave("SLOT2")}
disabled={buyInAmount === null}
darkMode={lightGrayMode}
/>
<Button
title={i18n.t("load_slot_1")}
onPress={() => handleLoad("SLOT1")}
darkMode={lightGrayMode}
/>
<Button
title={i18n.t("load_slot_2")}
onPress={() => handleLoad("SLOT2")}
darkMode={lightGrayMode}
/>
</>
</Section>
</ScrollView>
</PokerAppUi>

4
components/BuyInSelector.tsx
View File

@ -7,6 +7,7 @@ import i18n from "@/i18n/i18n";
interface BuyInSelectorProps {
setBuyInAmount: React.Dispatch<React.SetStateAction<number>>;
selectedCurrency: string;
darkMode: boolean;
}
const defaultBuyInOptions = [10, 25, 50];
@ -22,6 +23,7 @@ const parseRoundClamp = (num: string): number => {
const BuyInSelector: React.FC<BuyInSelectorProps> = ({
setBuyInAmount,
selectedCurrency,
darkMode,
}) => {
const [customAmount, setCustomAmount] = useState("");
const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
@ -51,9 +53,9 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({
{defaultBuyInOptions.map((amount) => (
<Button
key={amount}
color={buyInAmount === amount ? COLORS.PRIMARY : COLORS.SECONDARY}
onPress={() => handleBuyInSelection(amount)}
title={`${selectedCurrency} ${amount}`}
darkMode={darkMode}
/>
))}
</View>

16
components/ChipDetection.tsx
View File

@ -6,8 +6,10 @@ import i18n from "@/i18n/i18n";
const ChipDetection = ({
updateChipCount,
darkMode,
}: {
updateChipCount: (chipData: Record<string, number>) => void;
darkMode: boolean;
}) => {
const [imageUri, setImageUri] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
@ -94,7 +96,7 @@ const ChipDetection = ({
const result = await response.json();
if (!response.ok || !result.choices || !result.choices[0].message) {
throw new Error(i18n.t("invalid_response")); // Translate invalid response error
throw new Error(i18n.t("invalid_response"));
}
const rawContent = result.choices[0].message.content.trim();
@ -133,8 +135,16 @@ const ChipDetection = ({
marginBottom: 10,
}}
>
<Button title={i18n.t("pick_an_image")} onPress={pickImage} />
<Button title={i18n.t("take_a_photo")} onPress={takePhoto} />
<Button
title={i18n.t("pick_an_image")}
onPress={pickImage}
darkMode={darkMode}
/>
<Button
title={i18n.t("take_a_photo")}
onPress={takePhoto}
darkMode={darkMode}
/>
</View>
{imageUri && (

48
components/ChipsSelector.tsx
View File

@ -21,18 +21,19 @@ const ChipInputModal = ({
setShowModal,
totalChipsCount,
update,
darkMode,
}: {
showModal: [boolean, ColorValue];
setShowModal: React.Dispatch<React.SetStateAction<[boolean, ColorValue]>>;
totalChipsCount: number[];
update: Function;
darkMode: boolean;
}) => {
const color: ColorValue = useMemo(() => showModal[1], [showModal]);
const colorIdx = useMemo(() => colors.indexOf(color), [color]);
const [value, setValue] = useState<number | undefined>();
// Reset the color value when the specific color this modal is for changes
useEffect(() => {
setValue(totalChipsCount[colorIdx]);
}, [colorIdx, totalChipsCount]);
@ -76,6 +77,7 @@ const ChipInputModal = ({
update(showModal[1], Number.isNaN(value) ? 0 : value);
setShowModal([false, color]);
}}
darkMode={darkMode}
/>
</Modal>
);
@ -117,11 +119,13 @@ const ChipsSelector = ({
totalChipsCount,
setTotalChipsCount,
setNumberOfChips,
darkMode,
}: {
numberOfChips: number;
totalChipsCount: number[];
setTotalChipsCount: React.Dispatch<React.SetStateAction<number[]>>;
setNumberOfChips: React.Dispatch<React.SetStateAction<number>>;
darkMode: boolean;
}) => {
const [showModal, setShowModal] = useState<[boolean, ColorValue]>([
false,
@ -129,11 +133,10 @@ const ChipsSelector = ({
]);
const colorsUsed = useMemo(
() => colors.slice(0, numberOfChips), // Only show as many colors as the `numberOfChips`
() => colors.slice(0, numberOfChips),
[numberOfChips]
);
// Callback for ChipInputModal to update the chips in the parent's state.
const update = useCallback(
(color: ColorValue, count: number) => {
const newTotalChipsCount = totalChipsCount.slice();
@ -144,7 +147,6 @@ const ChipsSelector = ({
[totalChipsCount, setTotalChipsCount]
);
// Handling number of chips to make sure the array updates accordingly
useEffect(() => {
if (numberOfChips !== totalChipsCount.length) {
let newTotalChipsCount = totalChipsCount.slice();
@ -169,7 +171,8 @@ const ChipsSelector = ({
onPress={() => {
setNumberOfChips(Math.max(1, numberOfChips - 1));
}}
disabled={numberOfChips == 1}
disabled={numberOfChips === 1}
darkMode={darkMode}
/>
<View style={[styles.container, { flexDirection: "row" }]}>
{colorsUsed.map((color) => {
@ -189,7 +192,8 @@ const ChipsSelector = ({
onPress={() => {
setNumberOfChips(Math.min(5, numberOfChips + 1));
}}
disabled={numberOfChips == 5}
disabled={numberOfChips === 5}
darkMode={darkMode}
/>
<ChipInputModal
@ -197,40 +201,10 @@ const ChipsSelector = ({
setShowModal={setShowModal}
totalChipsCount={totalChipsCount}
update={update}
darkMode={darkMode}
/>
</>
);
};
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;

10
components/PlayerSelector.tsx
View File

@ -6,12 +6,16 @@ import styles from "@/styles/styles";
interface PlayerSelectorProps {
playerCount: number;
setPlayerCount: React.Dispatch<React.SetStateAction<number>>;
darkMode: boolean;
}
const MIN = 2;
const MAX = 8;
const PlayerSelector: React.FC<PlayerSelectorProps> = ({
playerCount,
setPlayerCount,
darkMode,
}) => {
const increasePlayers = () => {
if (playerCount < MAX) setPlayerCount(playerCount + 1);
@ -22,19 +26,21 @@ const PlayerSelector: React.FC<PlayerSelectorProps> = ({
};
return (
<>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Button
title="-"
onPress={decreasePlayers}
disabled={playerCount <= MIN}
darkMode={darkMode}
/>
<Text style={styles.h1}>{playerCount}</Text>
<Button
title="+"
onPress={increasePlayers}
disabled={playerCount >= MAX}
darkMode={darkMode}
/>
</>
</View>
);
};

1
components/__tests__/BuyInSelector.test.tsx
View File

@ -19,6 +19,7 @@ describe("BuyInSelector Component", () => {
<BuyInSelector
setBuyInAmount={setBuyInAmount}
selectedCurrency={selectedCurrency}
darkMode={false}
/>
);
return {

12
components/__tests__/ChipDetection.test.tsx
View File

@ -45,7 +45,7 @@ describe("ChipDetection", () => {
it("renders correctly", () => {
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
expect(getByText(/pick an image/i)).toBeTruthy();
@ -59,7 +59,7 @@ describe("ChipDetection", () => {
});
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
fireEvent.press(getByText(/pick an image/i));
@ -78,7 +78,7 @@ describe("ChipDetection", () => {
});
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
fireEvent.press(getByText(/take a photo/i));
@ -99,7 +99,7 @@ describe("ChipDetection", () => {
});
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
fireEvent.press(getByText(/take a photo/i));
@ -126,7 +126,7 @@ describe("ChipDetection", () => {
);
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
fireEvent.press(getByText(/pick an image/i));
@ -159,7 +159,7 @@ describe("ChipDetection", () => {
);
const { getByText } = render(
<ChipDetection updateChipCount={mockUpdateChipCount} />
<ChipDetection updateChipCount={mockUpdateChipCount} darkMode={false} />
);
fireEvent.press(getByText(/pick an image/i));

2
components/__tests__/ChipsSelector.test.tsx
View File

@ -28,6 +28,7 @@ const rend = () =>
totalChipsCount={TOTAL_CHIPS_COUNT}
setTotalChipsCount={mocktTotalChipsCount}
setNumberOfChips={mockSetNumberOfChips}
darkMode={false}
/>
);
@ -82,6 +83,7 @@ describe("tests for ChipsSelector", () => {
TOTAL_CHIPS_COUNT[4],
]);
});
// 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();

30
components/__tests__/PlayerSelector.test.tsx
View File

@ -6,7 +6,11 @@ describe("PlayerSelector Component", () => {
it("renders the initial player count and buttons correctly", () => {
const setPlayerCount = jest.fn();
const { getByText, getByRole } = render(
<PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
<PlayerSelector
playerCount={4}
setPlayerCount={setPlayerCount}
darkMode={false}
/>
);
expect(getByText("4")).toBeTruthy();
@ -17,7 +21,11 @@ describe("PlayerSelector Component", () => {
it('increases player count when "+" button is pressed', () => {
const setPlayerCount = jest.fn();
const { getByRole } = render(
<PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
<PlayerSelector
playerCount={4}
setPlayerCount={setPlayerCount}
darkMode={false}
/>
);
fireEvent.press(getByRole("button", { name: "+" }));
@ -27,7 +35,11 @@ describe("PlayerSelector Component", () => {
it('decreases player count when "-" button is pressed', () => {
const setPlayerCount = jest.fn();
const { getByRole } = render(
<PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
<PlayerSelector
playerCount={4}
setPlayerCount={setPlayerCount}
darkMode={false}
/>
);
fireEvent.press(getByRole("button", { name: "-" }));
@ -37,7 +49,11 @@ describe("PlayerSelector Component", () => {
it("does not increase player count beyond 8", () => {
const setPlayerCount = jest.fn();
const { getByRole } = render(
<PlayerSelector playerCount={8} setPlayerCount={setPlayerCount} />
<PlayerSelector
playerCount={8}
setPlayerCount={setPlayerCount}
darkMode={false}
/>
);
fireEvent.press(getByRole("button", { name: "+" }));
@ -47,7 +63,11 @@ describe("PlayerSelector Component", () => {
it("does not decrease player count below 2", () => {
const setPlayerCount = jest.fn();
const { getByRole } = render(
<PlayerSelector playerCount={2} setPlayerCount={setPlayerCount} />
<PlayerSelector
playerCount={2}
setPlayerCount={setPlayerCount}
darkMode={false}
/>
);
fireEvent.press(getByRole("button", { name: "-" }));

1
containers/Button.tsx
View File

@ -18,6 +18,7 @@ const Button: React.FC<ButtonProps> = ({
<TouchableOpacity
onPress={onPress}
disabled={disabled}
accessibilityRole="button"
style={[
styles.button,
darkMode ? styles.darkButton : styles.lightButton,

5
i18n/en.json
View File

@ -46,6 +46,9 @@
"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"
"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_gray_mode": "Switch to Gray Mode",
"switch_to_light_mode": "Switch to Light Mode"
}
}

5
i18n/es.json
View File

@ -47,6 +47,9 @@
"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."
"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_gray_mode": "Cambiar a Modo Gris",
"switch_to_light_mode": "Cambiar a Modo Claro"
}
}