feat: integrate BlurView for enhanced UI in TableScreen and adjust padding in TableBackground

package.json

@@ -13,6 +13,7 @@
     "@babel/runtime": "^7.25.6",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@stripe/stripe-react-native": "0.38.3",
+    "expo-blur": "~13.0.2",
     "expo": "~51.0.0",
     "expo-auth-session": "~5.0.2",
     "expo-linear-gradient": "~12.7.2",

src/components/TableBackground.js

@@ -28,7 +28,7 @@ export default function TableBackground({ children, style }) {
 const styles = StyleSheet.create({
   wrapper: {
     width: '100%',
-    padding: 12
+    padding: 0
   },
   edge: {
     flex: 1,
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 60,
     borderBottomLeftRadius: 280,
     borderBottomRightRadius: 280,
-    padding: 10
+    padding: 6
   },
   felt: {
     flex: 1,
@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 48,
     borderBottomLeftRadius: 260,
     borderBottomRightRadius: 260,
-    padding: 20,
+    padding: 14,
     overflow: 'hidden'
   },
   innerRing: {

src/screens/TableScreen.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { WS_URL } from '../api';
 import { colors, fonts } from '../theme';
@@ -134,7 +135,7 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
         styles.container,
         {
           paddingTop: insets.top + 12,
-          paddingBottom: insets.bottom + 16
+          paddingBottom: insets.bottom + 12
         }
       ]}
     >
@@ -148,6 +149,7 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
 
       <View style={styles.tableWrap}>
         <TableBackground style={styles.tableSurface}>
+          <View style={styles.tableInner}>
             <TableMarkings />
             <View style={styles.tableContent}>
               <View style={styles.dealerArea}>
@@ -161,10 +163,9 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
                 ))}
               </View>
             </View>
-        </TableBackground>
-      </View>
 
-      <View style={styles.controls}>
+            <View style={styles.controlsOverlay}>
+              <BlurView intensity={28} tint="dark" style={styles.blurPanel}>
                 <View style={styles.betRow}>
                   <Text style={styles.sectionLabel}>Tét</Text>
                   <View style={styles.betControls}>
@@ -179,7 +180,9 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
                   <CasinoButton label="Tét" onPress={() => send({ type: 'bet', amount: betAmount })} variant="gold" disabled={bettingLocked} />
                   <CasinoButton label="Kész" onPress={() => send({ type: 'ready' })} variant="green" disabled={bettingLocked} />
                 </View>
+              </BlurView>
 
+              <BlurView intensity={28} tint="dark" style={styles.blurPanel}>
                 {isMyTurn && turnSeconds !== null ? (
                   <Text style={styles.timer}>Idő: {turnSeconds} mp</Text>
                 ) : null}
@@ -188,8 +191,13 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
                   <CasinoButton label="Stand" onPress={() => send({ type: 'action', action: 'stand' })} variant="gold" disabled={!isMyTurn} />
                   <CasinoButton label="Double" onPress={() => send({ type: 'action', action: 'double' })} variant="gold" disabled={!isMyTurn} />
                 </Animated.View>
+              </BlurView>
+            </View>
+
             {message ? <Text style={styles.message}>{message}</Text> : null}
           </View>
+        </TableBackground>
+      </View>
     </LinearGradient>
   );
 }
@@ -197,10 +205,10 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 20
+    paddingHorizontal: 12
   },
   topBar: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 6,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center'
@@ -219,11 +227,19 @@ const styles = StyleSheet.create({
   tableWrap: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginTop: 8,
+    marginBottom: 8,
+    width: '100%'
   },
   tableSurface: {
-    aspectRatio: 1.8,
+    flex: 1,
-    maxHeight: 420
+    width: '100%',
+    padding: 0
+  },
+  tableInner: {
+    flex: 1,
+    position: 'relative'
   },
   dealerArea: {
     alignItems: 'center',
@@ -243,16 +259,27 @@ const styles = StyleSheet.create({
     width: 110,
     transform: [{ translateX: -55 }]
   },
-  controls: {
+  controlsOverlay: {
-    paddingHorizontal: 20,
+    position: 'absolute',
-    paddingBottom: 24
+    left: 12,
+    right: 12,
+    bottom: 14,
+    gap: 10
+  },
+  blurPanel: {
+    borderRadius: 18,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: 'rgba(10, 18, 14, 0.45)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)',
+    overflow: 'hidden'
   },
   betRow: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    gap: 8,
+    gap: 8
-    marginBottom: 12
   },
   betControls: {
     flexDirection: 'row',
@@ -288,23 +315,23 @@ const styles = StyleSheet.create({
   message: {
     color: colors.goldBright,
     textAlign: 'center',
-    marginTop: 10,
+    marginTop: 8,
     fontFamily: fonts.body
   },
   timer: {
     color: colors.goldBright,
     textAlign: 'center',
-    marginBottom: 8,
+    marginBottom: 6,
     fontFamily: fonts.mono
   }
 });
 
 const seatPositions = {
-  0: { left: '12%', top: '55%' },
+  0: { left: '10%', top: '50%' },
-  1: { left: '25%', top: '48%' },
+  1: { left: '24%', top: '44%' },
-  2: { left: '38%', top: '42%' },
+  2: { left: '38%', top: '38%' },
-  3: { left: '50%', top: '40%' },
+  3: { left: '50%', top: '36%' },
-  4: { left: '62%', top: '42%' },
+  4: { left: '62%', top: '38%' },
-  5: { left: '75%', top: '48%' },
+  5: { left: '76%', top: '44%' },
-  6: { left: '88%', top: '55%' }
+  6: { left: '90%', top: '50%' }
 };