Implemented Chip Distribution and Test code for this.

app/index.tsx

@@ -3,39 +3,43 @@ import { ScrollView, Text, Alert, Button } from "react-native";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
-
+import ChipDistributionSummary from "@/components/ChipDistributionSummary"; 
 const IndexScreen = () => {
   const [playerCount, setPlayerCount] = useState(2);
   const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
   const [numberOfChips, setNumberOfChips] = useState<number>(5);
   const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
-
   const handleSave = () => {
     if (buyInAmount === null) {
       Alert.alert("Error", "Please select a valid buy-in amount");
+    } else {
+      Alert.alert(
+        "Success",
+        `Buy-in amount set to ${buyInAmount} for ${playerCount} players`
+      );
     }
   };
-
   return (
     <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
       <Text style={{ fontSize: 24, marginBottom: 30, marginTop: 50 }}>
         Poker Chip Helper
       </Text>
-
       <PlayerSelector
         playerCount={playerCount}
         setPlayerCount={setPlayerCount}
       />
-
       <BuyInSelector setBuyInAmount={setBuyInAmount} />
-
       <ChipsSelector
         totalChipsCount={totalChipsCount}
         setTotalChipsCount={setTotalChipsCount}
         numberOfChips={numberOfChips}
         setNumberOfChips={setNumberOfChips}
       />
-
+      <ChipDistributionSummary
+        playerCount={playerCount}
+        buyInAmount={buyInAmount}
+        totalChipsCount={totalChipsCount}
+      />
       <Button
         title="Save"
         onPress={handleSave}
@@ -44,5 +48,4 @@ const IndexScreen = () => {
     </ScrollView>
   );
 };
-
 export default IndexScreen;

components/ChipDistributionSummary.tsx

@@ -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;

components/__tests__/ChipDistributionSummary.test.tsx

@@ -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();
+    });
+  });
+});
+

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react",
     "strict": true,
     "paths": {
       "@/*": [