@dubsdotapp/expo 0.5.16 → 0.5.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dubsdotapp/expo",
-  "version": "0.5.16",
+  "version": "0.5.17",
   "description": "React Native SDK for the Dubs betting platform",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/ui/game/JoinGameSheet.tsx

@@ -288,11 +288,14 @@ export function JoinGameSheet({
 
             {/* Team Selection — hidden in pool mode and custom games */}
             {!isCustomGame && !isPoolModeEnabled && !alreadyJoined && (
-              <View style={styles.section}>
-                <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
-                <View style={styles.teamsRow}>
-                  <TeamButton
+              hasDrawOption ? (
+                /* ── 3-way layout: Home / VS / Away / OR / Draw ── */
+                <View style={styles.section}>
+                  <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Who will win?</Text>
+
+                  <PickRow
                     name={homeName}
+                    subtitle="Home Team"
                     imageUrl={opponents[0]?.imageUrl}
                     odds={homeOdds}
                     bets={homeBets}
@@ -302,8 +305,16 @@ export function JoinGameSheet({
                     ImageComponent={ImageComponent}
                     t={t}
                   />
-                  <TeamButton
+
+                  <View style={styles.dividerRow}>
+                    <View style={[styles.dividerLine, { backgroundColor: t.border }]} />
+                    <Text style={[styles.dividerText, { color: t.textMuted }]}>VS</Text>
+                    <View style={[styles.dividerLine, { backgroundColor: t.border }]} />
+                  </View>
+
+                  <PickRow
                     name={awayName}
+                    subtitle="Away Team"
                     imageUrl={opponents[1]?.imageUrl}
                     odds={awayOdds}
                     bets={awayBets}
@@ -313,21 +324,54 @@ export function JoinGameSheet({
                     ImageComponent={ImageComponent}
                     t={t}
                   />
+
+                  <View style={styles.dividerRow}>
+                    <View style={[styles.dividerLine, { backgroundColor: t.border }]} />
+                    <Text style={[styles.dividerText, { color: t.textMuted }]}>OR</Text>
+                    <View style={[styles.dividerLine, { backgroundColor: t.border }]} />
+                  </View>
+
+                  <PickRow
+                    name="Draw"
+                    subtitle="Match ends in a tie"
+                    odds={drawOdds}
+                    bets={drawBets}
+                    color={drawColor}
+                    selected={selectedTeam === 'draw'}
+                    onPress={() => { setSelectedTeam('draw' as any); onTeamSelect?.('draw' as any); }}
+                    t={t}
+                  />
                 </View>
-                {hasDrawOption && (
-                  <View style={styles.drawRow}>
+              ) : (
+                /* ── 2-way layout: side by side ── */
+                <View style={styles.section}>
+                  <Text style={[styles.sectionLabel, { color: t.textSecondary }]}>Pick Your Side</Text>
+                  <View style={styles.teamsRow}>
                     <TeamButton
-                      name="Draw"
-                      odds={drawOdds}
-                      bets={drawBets}
-                      color={drawColor}
-                      selected={selectedTeam === 'draw'}
-                      onPress={() => { setSelectedTeam('draw' as any); onTeamSelect?.('draw' as any); }}
+                      name={homeName}
+                      imageUrl={opponents[0]?.imageUrl}
+                      odds={homeOdds}
+                      bets={homeBets}
+                      color={homeColor}
+                      selected={selectedTeam === 'home'}
+                      onPress={() => { setSelectedTeam('home'); onTeamSelect?.('home'); }}
+                      ImageComponent={ImageComponent}
+                      t={t}
+                    />
+                    <TeamButton
+                      name={awayName}
+                      imageUrl={opponents[1]?.imageUrl}
+                      odds={awayOdds}
+                      bets={awayBets}
+                      color={awayColor}
+                      selected={selectedTeam === 'away'}
+                      onPress={() => { setSelectedTeam('away'); onTeamSelect?.('away'); }}
+                      ImageComponent={ImageComponent}
                       t={t}
                     />
                   </View>
-                )}
-              </View>
+                </View>
+              )
             )}
 
             {/* Already joined — show which side */}
@@ -443,6 +487,105 @@ export function JoinGameSheet({
 }
 
 
+// ── PickRow (vertical 3-way layout for draw-supported leagues) ──
+
+function PickRow({
+  name, subtitle, imageUrl, odds, bets, color, selected, onPress, ImageComponent, t,
+}: {
+  name: string; subtitle?: string; imageUrl?: string | null; odds: string; bets: number;
+  color: string; selected: boolean; onPress: () => void;
+  ImageComponent?: React.ComponentType<any>; t: any;
+}) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const Img = ImageComponent || require('react-native').Image;
+  const showImage = imageUrl && !imgFailed;
+
+  return (
+    <TouchableOpacity
+      style={[pickStyles.row, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + '12' : t.background }]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      {showImage ? (
+        <Img source={{ uri: imageUrl }} style={pickStyles.logo} resizeMode="contain" onError={() => setImgFailed(true)} />
+      ) : (
+        <View style={[pickStyles.logoPlaceholder, { backgroundColor: color + '20' }]}>
+          <Text style={[pickStyles.logoEmoji, { color }]}>{name === 'Draw' ? '🤝' : name.charAt(0)}</Text>
+        </View>
+      )}
+      <View style={pickStyles.info}>
+        <Text style={[pickStyles.name, { color: t.text }]}>{name}</Text>
+        {subtitle && <Text style={[pickStyles.subtitle, { color: t.textMuted }]}>{subtitle}</Text>}
+      </View>
+      {odds !== '—' && <Text style={[pickStyles.odds, { color }]}>{odds}x</Text>}
+      {bets > 0 && <Text style={[pickStyles.bets, { color: t.textMuted }]}>{bets}</Text>}
+      {selected && (
+        <View style={[pickStyles.check, { backgroundColor: color }]}>
+          <Text style={pickStyles.checkText}>✓</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const pickStyles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderRadius: 14,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    gap: 12,
+  },
+  logo: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  logoPlaceholder: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoEmoji: {
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  info: {
+    flex: 1,
+  },
+  name: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  subtitle: {
+    fontSize: 12,
+    marginTop: 1,
+  },
+  odds: {
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  bets: {
+    fontSize: 12,
+  },
+  check: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkText: {
+    color: '#FFF',
+    fontSize: 13,
+    fontWeight: '800',
+  },
+});
+
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
@@ -568,6 +711,20 @@ const styles = StyleSheet.create({
   drawRow: {
     marginTop: 8,
   },
+  dividerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginVertical: 6,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+  },
+  dividerText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
   summaryCard: {
     marginTop: 20,
     borderRadius: 16,