add warning mechanism

components/ChipDistributionSummary.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Text } from "react-native";
+import { View, Text, Alert } from "react-native";
 import { ColorValue } from "react-native";
 import i18n from "@/i18n/i18n";
-import styles from "@/styles/styles";
+import styles, { COLORS } from "@/styles/styles";
+import { MaterialIcons } from "@expo/vector-icons";
 
 interface ChipDistributionSummaryProps {
   playerCount: number;
@@ -27,6 +28,10 @@ const ChipDistributionSummary = ({
   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
@@ -171,9 +176,19 @@ const ChipDistributionSummary = ({
         })}
       </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)}
+            {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")}
         </Text>

components/__tests__/ChipDistributionSummary.test.tsx

@@ -2,6 +2,13 @@ import React from "react";
 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;

i18n/en.json

@@ -36,6 +36,7 @@
     "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",
@@ -44,6 +45,7 @@
     "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"
+    "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"
   }
 }

i18n/es.json

@@ -37,6 +37,7 @@
     "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",
@@ -45,6 +46,7 @@
     "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"
+    "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."
   }
 }

styles/styles.ts

@@ -5,7 +5,7 @@ export const COLORS = {
   SECONDARY: "#6c757d",
   SUCCESS: "#28a745",
   DANGER: "#dc3545",
-  WARNING: "#ffc107",
+  WARNING: "#c79c28",
 };
 
 const lightStyles = StyleSheet.create({});