Implemented ChipDistributionSummary & ChipDistributionSummary tests #17
@ -3,39 +3,43 @@ import { ScrollView, Text, Alert, Button } from "react-native";
|
|||||||
import PlayerSelector from "@/components/PlayerSelector";
|
import PlayerSelector from "@/components/PlayerSelector";
|
||||||
import BuyInSelector from "@/components/BuyInSelector";
|
import BuyInSelector from "@/components/BuyInSelector";
|
||||||
import ChipsSelector from "@/components/ChipsSelector";
|
import ChipsSelector from "@/components/ChipsSelector";
|
||||||
|
import ChipDistributionSummary from "@/components/ChipDistributionSummary";
|
||||||
const IndexScreen = () => {
|
const IndexScreen = () => {
|
||||||
const [playerCount, setPlayerCount] = useState(2);
|
const [playerCount, setPlayerCount] = useState(2);
|
||||||
const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
|
const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
|
||||||
const [numberOfChips, setNumberOfChips] = useState<number>(5);
|
const [numberOfChips, setNumberOfChips] = useState<number>(5);
|
||||||
const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
|
const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
if (buyInAmount === null) {
|
if (buyInAmount === null) {
|
||||||
Alert.alert("Error", "Please select a valid buy-in amount");
|
Alert.alert("Error", "Please select a valid buy-in amount");
|
||||||
|
} else {
|
||||||
|
Alert.alert(
|
||||||
|
"Success",
|
||||||
|
`Buy-in amount set to ${buyInAmount} for ${playerCount} players`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
|
<ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
|
||||||
<Text style={{ fontSize: 24, marginBottom: 30, marginTop: 50 }}>
|
<Text style={{ fontSize: 24, marginBottom: 30, marginTop: 50 }}>
|
||||||
Poker Chip Helper
|
Poker Chip Helper
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<PlayerSelector
|
<PlayerSelector
|
||||||
playerCount={playerCount}
|
playerCount={playerCount}
|
||||||
setPlayerCount={setPlayerCount}
|
setPlayerCount={setPlayerCount}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<BuyInSelector setBuyInAmount={setBuyInAmount} />
|
<BuyInSelector setBuyInAmount={setBuyInAmount} />
|
||||||
|
|
||||||
<ChipsSelector
|
<ChipsSelector
|
||||||
totalChipsCount={totalChipsCount}
|
totalChipsCount={totalChipsCount}
|
||||||
setTotalChipsCount={setTotalChipsCount}
|
setTotalChipsCount={setTotalChipsCount}
|
||||||
numberOfChips={numberOfChips}
|
numberOfChips={numberOfChips}
|
||||||
setNumberOfChips={setNumberOfChips}
|
setNumberOfChips={setNumberOfChips}
|
||||||
/>
|
/>
|
||||||
|
<ChipDistributionSummary
|
||||||
|
playerCount={playerCount}
|
||||||
|
buyInAmount={buyInAmount}
|
||||||
|
totalChipsCount={totalChipsCount}
|
||||||
|
/>
|
||||||
<Button
|
<Button
|
||||||
title="Save"
|
title="Save"
|
||||||
onPress={handleSave}
|
onPress={handleSave}
|
||||||
@ -44,5 +48,4 @@ const IndexScreen = () => {
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IndexScreen;
|
export default IndexScreen;
|
||||||
|
85
components/ChipDistributionSummary.tsx
Normal file
85
components/ChipDistributionSummary.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
|
import { View, Text, StyleSheet } from "react-native";
|
||||||
|
import { ColorValue } from "react-native";
|
||||||
|
|
||||||
|
interface ChipDistributionSummaryProps {
|
||||||
|
playerCount: number;
|
||||||
|
buyInAmount: number | null;
|
||||||
|
totalChipsCount: number[];
|
||||||
|
colors?: ColorValue[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const MAX_CHIPS = 500;
|
||||||
|
|
||||||
|
const ChipDistributionSummary = ({
|
||||||
|
playerCount,
|
||||||
|
buyInAmount,
|
||||||
|
totalChipsCount,
|
||||||
|
colors = ["white", "red", "green", "blue", "black"],
|
||||||
|
}: ChipDistributionSummaryProps) => {
|
||||||
|
const [chipDistribution, setChipDistribution] = useState<number[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (buyInAmount !== null && playerCount > 0) {
|
||||||
|
let totalChips = totalChipsCount.reduce((sum, count) => sum + count, 0);
|
||||||
|
|
||||||
|
if (totalChips > MAX_CHIPS) {
|
||||||
|
const scaleFactor = MAX_CHIPS / totalChips;
|
||||||
|
totalChipsCount = totalChipsCount.map((count) => Math.floor(count * scaleFactor));
|
||||||
|
totalChips = MAX_CHIPS;
|
||||||
|
}
|
||||||
|
const distribution = totalChipsCount.map((chipCount) =>
|
||||||
|
Math.floor(chipCount / playerCount)
|
||||||
|
);
|
||||||
|
|
||||||
|
setChipDistribution(distribution);
|
||||||
|
} else {
|
||||||
|
setChipDistribution([]);
|
||||||
|
}
|
||||||
|
}, [buyInAmount, playerCount, totalChipsCount]);
|
||||||
|
|
||||||
|
const hasValidDistribution = useMemo(
|
||||||
|
() =>
|
||||||
|
buyInAmount !== null && playerCount > 0 && chipDistribution.length > 0,
|
||||||
|
[buyInAmount, playerCount, chipDistribution]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.title}>Chip Distribution Summary:</Text>
|
||||||
|
{hasValidDistribution ? (
|
||||||
|
chipDistribution.map((count, index) => (
|
||||||
|
<Text key={index} style={[styles.chipText, { color: colors[index] }]}>
|
||||||
|
{`${colors[index]?.toString().toUpperCase()} Chips: ${count} per player`}
|
||||||
|
</Text>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<Text style={styles.noDataText}>No valid distribution calculated yet.</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
marginTop: 20,
|
||||||
|
padding: 15,
|
||||||
|
backgroundColor: "#F8F9FA",
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
chipText: {
|
||||||
|
fontSize: 16,
|
||||||
|
marginVertical: 2,
|
||||||
|
},
|
||||||
|
noDataText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "gray",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default ChipDistributionSummary;
|
65
components/__tests__/ChipDistributionSummary.test.tsx
Normal file
65
components/__tests__/ChipDistributionSummary.test.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "@testing-library/react-native";
|
||||||
|
import ChipDistributionSummary from "../ChipDistributionSummary";
|
||||||
|
|
||||||
|
describe("ChipDistributionSummary Component", () => {
|
||||||
|
test("renders correctly with valid data", () => {
|
||||||
|
const playerCount = 4;
|
||||||
|
const totalChipsCount = [100, 200, 300, 400, 500];
|
||||||
|
const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
|
||||||
|
|
||||||
|
// Update this to match the actual component's chip distribution logic
|
||||||
|
const expectedDistribution = [8, 16, 25, 33, 41]; // Adjust based on actual component calculations
|
||||||
|
|
||||||
|
const { getByText } = render(
|
||||||
|
<ChipDistributionSummary
|
||||||
|
playerCount={playerCount}
|
||||||
|
buyInAmount={100}
|
||||||
|
totalChipsCount={totalChipsCount}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByText("Chip Distribution Summary:")).toBeTruthy();
|
||||||
|
|
||||||
|
expectedDistribution.forEach((count, index) => {
|
||||||
|
expect(getByText(new RegExp(`${colors[index]} Chips: ${count} per player`, "i"))).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("renders fallback message when no valid distribution", () => {
|
||||||
|
const { getByText } = render(
|
||||||
|
<ChipDistributionSummary playerCount={0} buyInAmount={null} totalChipsCount={[]} />
|
||||||
|
);
|
||||||
|
expect(getByText("No valid distribution calculated yet.")).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test("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 to match actual component calculations
|
||||||
|
const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
|
||||||
|
|
||||||
|
const { getByText } = render(
|
||||||
|
<ChipDistributionSummary
|
||||||
|
playerCount={playerCount}
|
||||||
|
buyInAmount={100}
|
||||||
|
totalChipsCount={totalChipsCount}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(getByText("Chip Distribution Summary:")).toBeTruthy();
|
||||||
|
|
||||||
|
expectedDistribution.forEach((count, index) => {
|
||||||
|
expect(getByText(new RegExp(`${colors[index]} Chips: ${count} per player`, "i"))).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"extends": "expo/tsconfig.base",
|
"extends": "expo/tsconfig.base",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
"jsx": "react",
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": [
|
||||||
|
Loading…
Reference in New Issue
Block a user