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

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.playersArea}>
-              <View style={styles.seatRow}>
-                {topRow.map((seat) => (
-                  <View key={seat.index} style={styles.seatCell}>
-                    <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 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>
         </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: {
-    paddingHorizontal: 10,
-    paddingBottom: 8
-  },
-  seatRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 10
-  },
-  seatCell: {
+  seatLayer: {
     flex: 1,
-    marginHorizontal: 4,
-    minWidth: 82
+    position: 'relative'
+  },
+  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%' }
+};