Modified requested changes

2025-02-28 19:33:46 -08:00 · 2025-02-28 19:33:46 -08:00 · 29abd384d8
commit 29abd384d8
parent 297b0fc026
3 changed files with 120 additions and 30 deletions
--- a/app/index.tsx
+++ b/app/index.tsx
@ -6,7 +6,9 @@ import {
  Button,
  View,
  StyleSheet,
+  TouchableOpacity,
 } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
@ -18,8 +20,6 @@ import {
  savePersistentState,
  loadPersistentState,
 } from "@/components/PersistentState";
-
-// Your existing states
 export enum COLORS {
  "white",
  "red",
@ -36,7 +36,6 @@ const IndexScreen: React.FC = () => {
  const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
  const [isSettingsVisible, setIsSettingsVisible] = useState(false);

-  // Load persistent data on startup
  useEffect(() => {
    const loadPersistentData = async () => {
      try {
@ -44,11 +43,11 @@ const IndexScreen: React.FC = () => {
        const savedState = await loadPersistentState();
        if (savedState) {
          console.log("Persistent state restored:", savedState);
-          setPlayerCount(savedState.playerCount || 2); // Use defaults if missing
-          setBuyInAmount(savedState.buyInAmount || 20); // Use defaults if missing
-          setNumberOfChips(savedState.numberOfChips || 5); // Use defaults if missing
-          setTotalChipsCount(savedState.totalChipsCount || []); // Use defaults if missing
-          setSelectedCurrency(savedState.selectedCurrency || "$"); // Restore the selected currency, defaulting to "$" if not available
+          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.");
        }
@ -106,16 +105,17 @@ const IndexScreen: React.FC = () => {
  return (
    <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Poker Chips Helper</Text>
-        <Button
-          title="Settings"
+        <TouchableOpacity
          onPress={() => setIsSettingsVisible(!isSettingsVisible)}
-        />
+        >
+          <Text>
+            <Icon name="cog" size={30} color="black" />
+          </Text>
+        </TouchableOpacity>
      </View>

      {isSettingsVisible && (
        <View style={styles.settingsContainer}>
-          <Text style={styles.settingTitle}>Currency Selector</Text>
          <CurrencySelector
            selectedCurrency={selectedCurrency}
            setSelectedCurrency={setSelectedCurrency}
@ -139,6 +139,7 @@ const IndexScreen: React.FC = () => {
          setTotalChipsCount(chipCountArray);
        }}
      />
+
      <ChipsSelector
        totalChipsCount={totalChipsCount}
        setTotalChipsCount={setTotalChipsCount}
@ -153,18 +154,20 @@ const IndexScreen: React.FC = () => {
        selectedCurrency={selectedCurrency}
      />

-      <Button
-        title="Save to Slot 1"
-        onPress={() => handleSave("SLOT1")}
-        disabled={buyInAmount === null}
-      />
-      <Button
-        title="Save to Slot 2"
-        onPress={() => handleSave("SLOT2")}
-        disabled={buyInAmount === null}
-      />
-      <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
-      <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
+      <View style={styles.buttonContainer}>
+        <Button
+          title="Save to Slot 1"
+          onPress={() => handleSave("SLOT1")}
+          disabled={buyInAmount === null}
+        />
+        <Button
+          title="Save to Slot 2"
+          onPress={() => handleSave("SLOT2")}
+          disabled={buyInAmount === null}
+        />
+        <Button title="Load from Slot 1" onPress={() => handleLoad("SLOT1")} />
+        <Button title="Load from Slot 2" onPress={() => handleLoad("SLOT2")} />
+      </View>
    </ScrollView>
  );
 };
@ -172,14 +175,10 @@ const IndexScreen: React.FC = () => {
 const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "flex-end",
    alignItems: "center",
    marginBottom: 20,
  },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: "bold",
-  },
  settingsContainer: {
    marginBottom: 20,
    padding: 10,
@ -191,6 +190,9 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
    marginBottom: 10,
  },
+  buttonContainer: {
+    marginTop: 20,
+  },
 });

 export default IndexScreen;
--- a/package-lock.json
+++ b/package-lock.json
@ -34,6 +34,7 @@
        "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"
      },
@ -14445,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",
--- a/package.json
+++ b/package.json
@ -44,6 +44,7 @@
    "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"
  },