feat: add custom deposit amount input in LobbyScreen

src/screens/LobbyScreen.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useStripe } from '@stripe/stripe-react-native';
 import { apiFetch } from '../api';
@@ -11,6 +11,7 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
   const [loading, setLoading] = useState(true);
   const [depositLoading, setDepositLoading] = useState(false);
   const [depositError, setDepositError] = useState('');
+  const [customAmount, setCustomAmount] = useState('');
   const { initPaymentSheet, presentPaymentSheet } = useStripe();
 
   const loadTables = async () => {
@@ -75,6 +76,9 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
     }
   };
 
+  const customValue = Number(customAmount);
+  const customValid = Number.isFinite(customValue) && customValue >= 50 && customValue <= 100;
+
   return (
     <LinearGradient colors={[colors.backgroundTop, colors.backgroundBottom]} style={styles.container}>
       <View style={styles.header}>
@@ -91,6 +95,29 @@ export default function LobbyScreen({ user, token, onLogout, onSelectTable, onRe
           <CasinoButton label="50 Ft" onPress={() => handleDeposit(50)} variant="gold" disabled={depositLoading} />
           <CasinoButton label="100 Ft" onPress={() => handleDeposit(100)} variant="gold" disabled={depositLoading} />
         </View>
+        <View style={styles.customRow}>
+          <View style={styles.customInputWrap}>
+            <Text style={styles.customLabel}>Egyedi összeg</Text>
+            <View style={styles.customInputRow}>
+              <TextInput
+                value={customAmount}
+                onChangeText={(value) => setCustomAmount(value.replace(/[^0-9]/g, ''))}
+                placeholder="pl. 75"
+                placeholderTextColor="rgba(255,255,255,0.35)"
+                keyboardType="number-pad"
+                style={styles.customInput}
+              />
+              <Text style={styles.customSuffix}>Ft</Text>
+            </View>
+            <Text style={styles.customHint}>Minimum 50 Ft, maximum 100 Ft.</Text>
+          </View>
+          <CasinoButton
+            label="Feltöltés"
+            onPress={() => handleDeposit(customValue)}
+            variant="gold"
+            disabled={depositLoading || !customValid}
+          />
+        </View>
         {depositError ? <Text style={styles.error}>{depositError}</Text> : null}
       </View>
 
@@ -163,6 +190,48 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 12
   },
+  customRow: {
+    marginTop: 12,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  customInputWrap: {
+    flex: 1
+  },
+  customLabel: {
+    color: colors.text,
+    fontFamily: fonts.body,
+    marginBottom: 6
+  },
+  customInputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)'
+  },
+  customInput: {
+    flex: 1,
+    color: colors.text,
+    fontFamily: fonts.mono,
+    fontSize: 16
+  },
+  customSuffix: {
+    color: colors.muted,
+    fontFamily: fonts.mono,
+    marginLeft: 8
+  },
+  customHint: {
+    color: colors.muted,
+    fontFamily: fonts.body,
+    fontSize: 11,
+    marginTop: 6
+  },
   tableList: {
     gap: 12
   },