@dubsdotapp/expo 0.5.16 → 0.5.17

package/dist/index.mjs

@@ -5846,13 +5846,15 @@ function JoinGameSheet({
                   ] }) })
                 ] })
               ] }),
-              !isCustomGame && !isPoolModeEnabled && !alreadyJoined && /* @__PURE__ */ jsxs15(View16, { style: styles15.section, children: [
-                /* @__PURE__ */ jsx18(Text16, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
-                /* @__PURE__ */ jsxs15(View16, { style: styles15.teamsRow, children: [
+              !isCustomGame && !isPoolModeEnabled && !alreadyJoined && (hasDrawOption ? (
+                /* ── 3-way layout: Home / VS / Away / OR / Draw ── */
+                /* @__PURE__ */ jsxs15(View16, { style: styles15.section, children: [
+                  /* @__PURE__ */ jsx18(Text16, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Who will win?" }),
                   /* @__PURE__ */ jsx18(
-                    TeamButton,
+                    PickRow,
                     {
                       name: homeName,
+                      subtitle: "Home Team",
                       imageUrl: opponents[0]?.imageUrl,
                       odds: homeOdds,
                       bets: homeBets,
@@ -5866,10 +5868,16 @@ function JoinGameSheet({
                       t
                     }
                   ),
+                  /* @__PURE__ */ jsxs15(View16, { style: styles15.dividerRow, children: [
+                    /* @__PURE__ */ jsx18(View16, { style: [styles15.dividerLine, { backgroundColor: t.border }] }),
+                    /* @__PURE__ */ jsx18(Text16, { style: [styles15.dividerText, { color: t.textMuted }], children: "VS" }),
+                    /* @__PURE__ */ jsx18(View16, { style: [styles15.dividerLine, { backgroundColor: t.border }] })
+                  ] }),
                   /* @__PURE__ */ jsx18(
-                    TeamButton,
+                    PickRow,
                     {
                       name: awayName,
+                      subtitle: "Away Team",
                       imageUrl: opponents[1]?.imageUrl,
                       odds: awayOdds,
                       bets: awayBets,
@@ -5882,24 +5890,71 @@ function JoinGameSheet({
                       ImageComponent,
                       t
                     }
+                  ),
+                  /* @__PURE__ */ jsxs15(View16, { style: styles15.dividerRow, children: [
+                    /* @__PURE__ */ jsx18(View16, { style: [styles15.dividerLine, { backgroundColor: t.border }] }),
+                    /* @__PURE__ */ jsx18(Text16, { style: [styles15.dividerText, { color: t.textMuted }], children: "OR" }),
+                    /* @__PURE__ */ jsx18(View16, { style: [styles15.dividerLine, { backgroundColor: t.border }] })
+                  ] }),
+                  /* @__PURE__ */ jsx18(
+                    PickRow,
+                    {
+                      name: "Draw",
+                      subtitle: "Match ends in a tie",
+                      odds: drawOdds,
+                      bets: drawBets,
+                      color: drawColor,
+                      selected: selectedTeam === "draw",
+                      onPress: () => {
+                        setSelectedTeam("draw");
+                        onTeamSelect?.("draw");
+                      },
+                      t
+                    }
                   )
-                ] }),
-                hasDrawOption && /* @__PURE__ */ jsx18(View16, { style: styles15.drawRow, children: /* @__PURE__ */ jsx18(
-                  TeamButton,
-                  {
-                    name: "Draw",
-                    odds: drawOdds,
-                    bets: drawBets,
-                    color: drawColor,
-                    selected: selectedTeam === "draw",
-                    onPress: () => {
-                      setSelectedTeam("draw");
-                      onTeamSelect?.("draw");
-                    },
-                    t
-                  }
-                ) })
-              ] }),
+                ] })
+              ) : (
+                /* ── 2-way layout: side by side ── */
+                /* @__PURE__ */ jsxs15(View16, { style: styles15.section, children: [
+                  /* @__PURE__ */ jsx18(Text16, { style: [styles15.sectionLabel, { color: t.textSecondary }], children: "Pick Your Side" }),
+                  /* @__PURE__ */ jsxs15(View16, { style: styles15.teamsRow, children: [
+                    /* @__PURE__ */ jsx18(
+                      TeamButton,
+                      {
+                        name: homeName,
+                        imageUrl: opponents[0]?.imageUrl,
+                        odds: homeOdds,
+                        bets: homeBets,
+                        color: homeColor,
+                        selected: selectedTeam === "home",
+                        onPress: () => {
+                          setSelectedTeam("home");
+                          onTeamSelect?.("home");
+                        },
+                        ImageComponent,
+                        t
+                      }
+                    ),
+                    /* @__PURE__ */ jsx18(
+                      TeamButton,
+                      {
+                        name: awayName,
+                        imageUrl: opponents[1]?.imageUrl,
+                        odds: awayOdds,
+                        bets: awayBets,
+                        color: awayColor,
+                        selected: selectedTeam === "away",
+                        onPress: () => {
+                          setSelectedTeam("away");
+                          onTeamSelect?.("away");
+                        },
+                        ImageComponent,
+                        t
+                      }
+                    )
+                  ] })
+                ] })
+              )),
               alreadyJoined && myBet && /* @__PURE__ */ jsxs15(View16, { style: [styles15.myBetCard, { backgroundColor: (myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor) + "15", borderColor: myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor }], children: [
                 /* @__PURE__ */ jsx18(Text16, { style: [styles15.myBetLabel, { color: myBet.team === "home" ? homeColor : myBet.team === "away" ? awayColor : drawColor }], children: "YOUR BET" }),
                 /* @__PURE__ */ jsx18(Text16, { style: [styles15.myBetTeam, { color: t.text }], children: myBet.team === "home" ? homeName : myBet.team === "away" ? awayName : "Draw" }),
@@ -5982,6 +6037,100 @@ function JoinGameSheet({
     }
   );
 }
+function PickRow({
+  name,
+  subtitle,
+  imageUrl,
+  odds,
+  bets,
+  color,
+  selected,
+  onPress,
+  ImageComponent,
+  t
+}) {
+  const [imgFailed, setImgFailed] = useState31(false);
+  const Img = ImageComponent || __require("react-native").Image;
+  const showImage = imageUrl && !imgFailed;
+  return /* @__PURE__ */ jsxs15(
+    TouchableOpacity11,
+    {
+      style: [pickStyles.row, { borderColor: selected ? color : t.border, backgroundColor: selected ? color + "12" : t.background }],
+      onPress,
+      activeOpacity: 0.7,
+      children: [
+        showImage ? /* @__PURE__ */ jsx18(Img, { source: { uri: imageUrl }, style: pickStyles.logo, resizeMode: "contain", onError: () => setImgFailed(true) }) : /* @__PURE__ */ jsx18(View16, { style: [pickStyles.logoPlaceholder, { backgroundColor: color + "20" }], children: /* @__PURE__ */ jsx18(Text16, { style: [pickStyles.logoEmoji, { color }], children: name === "Draw" ? "\u{1F91D}" : name.charAt(0) }) }),
+        /* @__PURE__ */ jsxs15(View16, { style: pickStyles.info, children: [
+          /* @__PURE__ */ jsx18(Text16, { style: [pickStyles.name, { color: t.text }], children: name }),
+          subtitle && /* @__PURE__ */ jsx18(Text16, { style: [pickStyles.subtitle, { color: t.textMuted }], children: subtitle })
+        ] }),
+        odds !== "\u2014" && /* @__PURE__ */ jsxs15(Text16, { style: [pickStyles.odds, { color }], children: [
+          odds,
+          "x"
+        ] }),
+        bets > 0 && /* @__PURE__ */ jsx18(Text16, { style: [pickStyles.bets, { color: t.textMuted }], children: bets }),
+        selected && /* @__PURE__ */ jsx18(View16, { style: [pickStyles.check, { backgroundColor: color }], children: /* @__PURE__ */ jsx18(Text16, { style: pickStyles.checkText, children: "\u2713" }) })
+      ]
+    }
+  );
+}
+var pickStyles = StyleSheet16.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"
+  }
+});
 var styles15 = StyleSheet16.create({
   overlay: {
     ...StyleSheet16.absoluteFillObject,
@@ -6104,6 +6253,20 @@ var styles15 = StyleSheet16.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,