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

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,48 +149,55 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
 
       <View style={styles.tableWrap}>
         <TableBackground style={styles.tableSurface}>
-          <TableMarkings />
-          <View style={styles.tableContent}>
-            <View style={styles.dealerArea}>
-              <DealerArea hand={table?.dealerHand || []} />
+          <View style={styles.tableInner}>
+            <TableMarkings />
+            <View style={styles.tableContent}>
+              <View style={styles.dealerArea}>
+                <DealerArea hand={table?.dealerHand || []} />
+              </View>
+              <View style={styles.seatLayer}>
+                {seats.map((seat) => (
+                  <View key={seat.index} style={[styles.seatSpot, seatPositions[seat.index]]}>
+                    <Seat seat={seat} highlight={table.currentSeatIndex === seat.index} />
+                  </View>
+                ))}
+              </View>
             </View>
-            <View style={styles.seatLayer}>
-              {seats.map((seat) => (
-                <View key={seat.index} style={[styles.seatSpot, seatPositions[seat.index]]}>
-                  <Seat seat={seat} highlight={table.currentSeatIndex === seat.index} />
+
+            <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}>
+                    <Pressable onPress={() => adjustBet(-10)} style={[styles.betAdjust, bettingLocked && styles.betAdjustDisabled]} disabled={bettingLocked}>
+                      <Text style={styles.betAdjustText}>-</Text>
+                    </Pressable>
+                    <Chip label={`${betAmount}`} color="red" />
+                    <Pressable onPress={() => adjustBet(10)} style={[styles.betAdjust, bettingLocked && styles.betAdjustDisabled]} disabled={bettingLocked}>
+                      <Text style={styles.betAdjustText}>+</Text>
+                    </Pressable>
+                  </View>
+                  <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}
+                <Animated.View style={[styles.actionRow, isMyTurn && pulseStyle]}>
+                  <CasinoButton label="Hit" onPress={() => send({ type: 'action', action: 'hit' })} variant="gold" disabled={!isMyTurn} />
+                  <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>
-
-      <View style={styles.controls}>
-        <View style={styles.betRow}>
-          <Text style={styles.sectionLabel}>Tét</Text>
-          <View style={styles.betControls}>
-            <Pressable onPress={() => adjustBet(-10)} style={[styles.betAdjust, bettingLocked && styles.betAdjustDisabled]} disabled={bettingLocked}>
-              <Text style={styles.betAdjustText}>-</Text>
-            </Pressable>
-            <Chip label={`${betAmount}`} color="red" />
-            <Pressable onPress={() => adjustBet(10)} style={[styles.betAdjust, bettingLocked && styles.betAdjustDisabled]} disabled={bettingLocked}>
-              <Text style={styles.betAdjustText}>+</Text>
-            </Pressable>
-          </View>
-          <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>
-
-        {isMyTurn && turnSeconds !== null ? (
-          <Text style={styles.timer}>Idő: {turnSeconds} mp</Text>
-        ) : null}
-        <Animated.View style={[styles.actionRow, isMyTurn && pulseStyle]}>
-          <CasinoButton label="Hit" onPress={() => send({ type: 'action', action: 'hit' })} variant="gold" disabled={!isMyTurn} />
-          <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>
-        {message ? <Text style={styles.message}>{message}</Text> : null}
-      </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,
-    maxHeight: 420
+    flex: 1,
+    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: {
-    paddingHorizontal: 20,
-    paddingBottom: 24
+  controlsOverlay: {
+    position: 'absolute',
+    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,
-    marginBottom: 12
+    gap: 8
   },
   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%' },
-  1: { left: '25%', top: '48%' },
-  2: { left: '38%', top: '42%' },
-  3: { left: '50%', top: '40%' },
-  4: { left: '62%', top: '42%' },
-  5: { left: '75%', top: '48%' },
-  6: { left: '88%', top: '55%' }
+  0: { left: '10%', top: '50%' },
+  1: { left: '24%', top: '44%' },
+  2: { left: '38%', top: '38%' },
+  3: { left: '50%', top: '36%' },
+  4: { left: '62%', top: '38%' },
+  5: { left: '76%', top: '44%' },
+  6: { left: '90%', top: '50%' }
 };