feat: update Seat and TableBackground components for improved styling and add TableMarkings component

src/components/Seat.js

@@ -8,9 +8,9 @@ export default function Seat({ seat, highlight }) {
   return (
     <View style={[styles.seat, highlight && styles.highlight]}>
       <Text style={styles.name}>{isEmpty ? 'Üres hely' : seat.username}</Text>
-      {!isEmpty && seat.bet > 0 && (
+      <View style={styles.betBox}>
-        <Text style={styles.bet}>Tet: {seat.bet} Ft</Text>
+        <Text style={styles.betLabel}>{seat.bet > 0 ? `${seat.bet} Ft` : 'TÉT'}</Text>
-      )}
+      </View>
       {!isEmpty && seat.hand?.length > 0 && (
         <View style={styles.hand}>
           {seat.hand.map((card, idx) => (
@@ -38,9 +38,9 @@ const styles = StyleSheet.create({
   seat: {
     padding: 8,
     borderRadius: 12,
-    backgroundColor: 'rgba(0,0,0,0.3)',
+    backgroundColor: 'rgba(0,0,0,0.2)',
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.1)'
+    borderColor: 'rgba(255,255,255,0.08)'
   },
   highlight: {
     borderColor: colors.goldBright,
@@ -54,10 +54,19 @@ const styles = StyleSheet.create({
     fontFamily: fonts.body,
     fontWeight: '600'
   },
-  bet: {
+  betBox: {
+    marginTop: 6,
+    alignSelf: 'flex-start',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: colors.gold,
+    backgroundColor: 'rgba(0,0,0,0.15)'
+  },
+  betLabel: {
     color: colors.goldBright,
     fontSize: 11,
-    marginTop: 2,
     fontFamily: fonts.mono
   },
   hand: {

src/components/TableBackground.js

@@ -32,12 +32,18 @@ const styles = StyleSheet.create({
   },
   edge: {
     flex: 1,
-    borderRadius: 220,
+    borderTopLeftRadius: 60,
+    borderTopRightRadius: 60,
+    borderBottomLeftRadius: 280,
+    borderBottomRightRadius: 280,
     padding: 10
   },
   felt: {
     flex: 1,
-    borderRadius: 200,
+    borderTopLeftRadius: 48,
+    borderTopRightRadius: 48,
+    borderBottomLeftRadius: 260,
+    borderBottomRightRadius: 260,
     padding: 20,
     overflow: 'hidden'
   },
@@ -49,6 +55,9 @@ const styles = StyleSheet.create({
     right: 16,
     borderWidth: 2,
     borderColor: 'rgba(255,255,255,0.15)',
-    borderRadius: 180
+    borderTopLeftRadius: 40,
+    borderTopRightRadius: 40,
+    borderBottomLeftRadius: 240,
+    borderBottomRightRadius: 240
   }
 });

src/components/TableMarkings.js

@@ -0,0 +1,71 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { colors, fonts } from '../theme';
+
+export default function TableMarkings() {
+  return (
+    <View pointerEvents="none" style={styles.container}>
+      <Text style={styles.title}>BLACKJACK 3:2</Text>
+      <Text style={styles.subtitle}>Osztó 17-nél megáll</Text>
+      <Text style={styles.subtitle}>Biztosítás 2:1</Text>
+      <View style={styles.sideNotes}>
+        <View style={styles.sideNoteBox}>
+          <Text style={styles.sideNoteTitle}>Párok</Text>
+          <Text style={styles.sideNoteText}>Azonos lapokra</Text>
+        </View>
+        <View style={styles.sideNoteBox}>
+          <Text style={styles.sideNoteTitle}>Extra</Text>
+          <Text style={styles.sideNoteText}>3+ lapos 21</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 58,
+    left: 0,
+    right: 0,
+    alignItems: 'center'
+  },
+  title: {
+    color: colors.goldBright,
+    fontFamily: fonts.display,
+    fontSize: 14,
+    letterSpacing: 2
+  },
+  subtitle: {
+    color: colors.muted,
+    fontFamily: fonts.body,
+    fontSize: 11,
+    marginTop: 2
+  },
+  sideNotes: {
+    position: 'absolute',
+    top: 0,
+    left: 16,
+    right: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  sideNoteBox: {
+    width: 72,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+    padding: 4,
+    borderRadius: 6
+  },
+  sideNoteTitle: {
+    color: colors.goldBright,
+    fontFamily: fonts.body,
+    fontSize: 9,
+    textAlign: 'center'
+  },
+  sideNoteText: {
+    color: colors.muted,
+    fontFamily: fonts.body,
+    fontSize: 8,
+    textAlign: 'center'
+  }
+});

src/screens/TableScreen.js

@@ -9,6 +9,7 @@ import Chip from '../components/Chip';
 import DealerArea from '../components/DealerArea';
 import Seat from '../components/Seat';
 import TableBackground from '../components/TableBackground';
+import TableMarkings from '../components/TableMarkings';
 
 export default function TableScreen({ token, tableId, user, onLeave }) {
   const [table, setTable] = useState(null);
@@ -125,8 +126,6 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
   };
 
   const seats = table?.seats || [];
-  const topRow = seats.slice(0, 3);
-  const bottomRow = seats.slice(3);
 
   return (
     <LinearGradient
@@ -149,26 +148,17 @@ 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>
-
+            <View style={styles.seatLayer}>
-            <View style={styles.playersArea}>
+              {seats.map((seat) => (
-              <View style={styles.seatRow}>
+                <View key={seat.index} style={[styles.seatSpot, seatPositions[seat.index]]}>
-                {topRow.map((seat) => (
+                  <Seat seat={seat} highlight={table.currentSeatIndex === seat.index} />
-                  <View key={seat.index} style={styles.seatCell}>
+                </View>
-                    <Seat seat={seat} highlight={table.currentSeatIndex === seat.index} />
+              ))}
-                  </View>
-                ))}
-              </View>
-              <View style={styles.seatRow}>
-                {bottomRow.map((seat) => (
-                  <View key={seat.index} style={styles.seatCell}>
-                    <Seat seat={seat} highlight={table.currentSeatIndex === seat.index} />
-                  </View>
-                ))}
-              </View>
             </View>
           </View>
         </TableBackground>
@@ -232,7 +222,7 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   tableSurface: {
-    aspectRatio: 1.35,
+    aspectRatio: 1.8,
     maxHeight: 420
   },
   dealerArea: {
@@ -244,19 +234,14 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingBottom: 8
   },
-  playersArea: {
+  seatLayer: {
-    paddingHorizontal: 10,
-    paddingBottom: 8
-  },
-  seatRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 10
-  },
-  seatCell: {
     flex: 1,
-    marginHorizontal: 4,
+    position: 'relative'
-    minWidth: 82
+  },
+  seatSpot: {
+    position: 'absolute',
+    width: 110,
+    transform: [{ translateX: -55 }]
   },
   controls: {
     paddingHorizontal: 20,
@@ -313,3 +298,13 @@ const styles = StyleSheet.create({
     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%' }
+};