From 72092ea3c24ef0184ee32be2c72e0e231f4a26ec Mon Sep 17 00:00:00 2001 From: b3ni15 Date: Sun, 21 Dec 2025 00:24:00 +0100 Subject: [PATCH] feat: update Seat and TableBackground components for improved styling and add TableMarkings component --- src/components/Seat.js | 23 +++++++--- src/components/TableBackground.js | 15 +++++-- src/components/TableMarkings.js | 71 +++++++++++++++++++++++++++++++ src/screens/TableScreen.js | 57 +++++++++++-------------- 4 files changed, 125 insertions(+), 41 deletions(-) create mode 100644 src/components/TableMarkings.js diff --git a/src/components/Seat.js b/src/components/Seat.js index 3e2dfa9..a53ce92 100644 --- a/src/components/Seat.js +++ b/src/components/Seat.js @@ -8,9 +8,9 @@ export default function Seat({ seat, highlight }) { return ( {isEmpty ? 'Üres hely' : seat.username} - {!isEmpty && seat.bet > 0 && ( - Tet: {seat.bet} Ft - )} + + {seat.bet > 0 ? `${seat.bet} Ft` : 'TÉT'} + {!isEmpty && seat.hand?.length > 0 && ( {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: { diff --git a/src/components/TableBackground.js b/src/components/TableBackground.js index 939793d..d9a16f2 100644 --- a/src/components/TableBackground.js +++ b/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 } }); diff --git a/src/components/TableMarkings.js b/src/components/TableMarkings.js new file mode 100644 index 0000000..d837ceb --- /dev/null +++ b/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 ( + + BLACKJACK 3:2 + Osztó 17-nél megáll + Biztosítás 2:1 + + + Párok + Azonos lapokra + + + Extra + 3+ lapos 21 + + + + ); +} + +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' + } +}); diff --git a/src/screens/TableScreen.js b/src/screens/TableScreen.js index 4ed2f22..ab60558 100644 --- a/src/screens/TableScreen.js +++ b/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 ( + - - - - {topRow.map((seat) => ( - - - - ))} - - - {bottomRow.map((seat) => ( - - - - ))} - + + {seats.map((seat) => ( + + + + ))} @@ -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%' } +};