Files
Mobile/src/components/Seat.js

74 lines
2.0 KiB
JavaScript

import { StyleSheet, Text, View } from 'react-native';
import Card from './Card';
import { colors, fonts } from '../theme';
export default function Seat({ seat, highlight }) {
const isEmpty = !seat.username;
return (
<View style={[styles.seat, highlight && styles.highlight]}>
<Text style={styles.name}>{isEmpty ? 'Üres hely' : seat.username}</Text>
{!isEmpty && seat.bet > 0 && (
<Text style={styles.bet}>Tet: {seat.bet} Ft</Text>
)}
{!isEmpty && seat.hand?.length > 0 && (
<View style={styles.hand}>
{seat.hand.map((card, idx) => (
<Card key={`${card.rank}-${card.suit}-${idx}`} rank={card.rank} suit={card.suit} hidden={card.hidden} />
))}
</View>
)}
{!isEmpty && seat.result && (
<Text style={styles.result}>
{seat.result.outcome === 'win' && 'Nyereség'}
{seat.result.outcome === 'blackjack' && 'Blackjack!'}
{seat.result.outcome === 'push' && 'Döntetlen'}
{seat.result.outcome === 'bust' && 'Bukás'}
{seat.result.outcome === 'lose' && 'Vesztettél'}
{seat.result.outcome === 'left' && 'Kilépett'}
{seat.result.outcome === 'disconnect' && 'Eltűnt'}
{seat.result.outcome === 'moved' && 'Átült'}
</Text>
)}
</View>
);
}
const styles = StyleSheet.create({
seat: {
padding: 8,
borderRadius: 12,
backgroundColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)'
},
highlight: {
borderColor: colors.goldBright,
shadowColor: colors.goldBright,
shadowOpacity: 0.6,
shadowRadius: 8
},
name: {
color: colors.text,
fontSize: 12,
fontFamily: fonts.body,
fontWeight: '600'
},
bet: {
color: colors.goldBright,
fontSize: 11,
marginTop: 2,
fontFamily: fonts.mono
},
hand: {
flexDirection: 'row',
marginTop: 4
},
result: {
marginTop: 4,
color: colors.muted,
fontSize: 10,
fontFamily: fonts.body
}
});