https://balliq.app/assets/OnlineHubTab-VJzrI7KP.js

1import{j as e}from"./client-BDfdeOeq.js";import{r as u,R as d}from"./react-Dz3Vtyqi.js";import{s as E,g as M,P as w,U as P,Z as J,h as B}from"./GameRoot-B08HTdAv.js";import{u as q}from"./profilePhotos-CIiQpZdg.js";import{c as $}from"./webpushVisitor-C990_5lI.js";import"./footleXp-CPwbKYZl.js";import"./StoreBadge-DL3l1YWG.js";import"./wordleStatus-BOVqYAS7.js";import"./clubColour-CGVN3LDl.js";import"./index-D7X09KaW.js";import"./preload-helper-3FF0Ycn8.js";import"./supabase-BIZ8dl4x.js";import"./main-ByhrPmYy.js";import"./SiteHeader-Dmn8OENO.js";import"./mysteryPlayer-C2VIb23l.js";import"./trail-De0UO8zJ.js";import"./ReportButton-DnDe1PH-.js";import"./mysterySchedule-nut2p9VY.js";import"./index-B1a9aOMK.js";(function(){try{var i=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},o=new i.Error().stack;o&&(i._sentryDebugIds=i._sentryDebugIds||{},i._sentryDebugIds[o]="d9d8f720-fcce-4785-aff0-200983707765",i._sentryDebugIdIdentifier="sentry-dbid-d9d8f720-fcce-4785-aff0-200983707765")}catch{}})();/**
2 * @license lucide-react v0.383.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const H=$("KeyRound",[["path",{d:"M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z",key:"167ctg"}],["circle",{cx:"16.5",cy:"7.5",r:".5",fill:"currentColor",key:"w0ekpg"}]]),O="requester_id,addressee_id,requester:profiles!requester_id(id,username,avatar:avatar_id,photo:avatar_url,total_score),addressee:profiles!addressee_id(id,username,avatar:avatar_id,photo:avatar_url,total_score)";function K(i,o=12){const[y,c]=u.useState([]),[v,b]=u.useState(!1);return u.useEffect(()=>{if(!i){c([]);return}let a=!0;return b(!0),(async()=>{try{const{data:h,error:p}=await E.from("friendships").select(O).or(`requester_id.eq.${i},addressee_id.eq.${i}`).eq("status","accepted").limit(o);if(p)throw p;if(!a)return;const S=(h||[]).map(t=>t.requester_id===i?t.addressee:t.requester).filter(t=>t&&t.id);c(S)}catch(h){console.error("[acceptedFriends]",h?.message||"Unknown error"),a&&c([])}finally{a&&b(!1)}})(),()=>{a=!1}},[i,o]),{friends:y,loading:v}}function pe({startMode:i,setOnlineAutoCreate:o,onJoinCode:y,displayName:c,avatarUrl:v,avatarId:b,onChallenge:a,onOpenFriend:h,needsAccount:p,userId:S}){const[t,D]=d.useState(""),[x,R]=d.useState(!1),[k,W]=d.useState(""),[z,T]=d.useState(!1),F=async()=>{if(!x){R(!0),W("");try{const r=await y?.(t);r&&!r.ok&&r.error&&W(r.error)}finally{R(!1)}}},[m]=d.useState(()=>M()),n=d.useMemo(()=>{const r=m.length,g=m.filter(l=>l.won).length;let I=0;for(const l of m)if(l.won)I++;else break;const f=[],_=new Set;for(const l of m){for(const s of l.opponents||[])if(!(!s||_.has(s.id||s.name))&&(_.add(s.id||s.name),f.push({id:s.id,name:s.name,avatar:s.avatar||"",won:(l.myScore??0)>=(s.score??0),line:`${l.myScore??0}–${s.score??0}`}),f.length>=3))break;if(f.length>=3)break}return{games:r,wins:g,losses:r-g,winRate:r?Math.round(100*g/r):null,streak:I,recent:f,rival:f[0]||null}},[m]),N=q(u.useMemo(()=>n.recent.map(r=>r.id),[n.recent])),{friends:j}=K(n.recent.length===0?S:null),L=q(u.useMemo(()=>j.map(r=>r.id),[j])),C=()=>{o?.(!0),i("online")};return e.jsxs("div",{className:"screen tab-content online-hub",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 0 16px"},children:[e.jsx("div",{style:{fontSize:28,fontWeight:800,letterSpacing:"-0.02em",color:"var(--t1)"},children:"Multiplayer"}),n.streak>=2&&e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:6,padding:"6px 13px",borderRadius:999,background:"rgba(255,193,7,0.08)",border:"1px solid rgba(255,193,7,0.3)"},children:[e.jsx("span",{style:{fontSize:12},children:"🔥"}),e.jsxs("span",{style:{fontSize:13,fontWeight:800,color:"var(--gold)",fontVariantNumeric:"tabular-nums"},children:[n.streak," win streak"]})]})]}),e.jsxs("div",{className:"online-cols",children:[e.jsx("div",{className:"online-col-a",children:!p&&e.jsxs("div",{style:{borderRadius:22,background:"var(--s1)",border:"1px solid var(--border)",padding:"22px 18px",boxShadow:"0 4px 16px rgba(0,0,0,0.35)",marginBottom:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:22},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:8,width:110},children:[v?e.jsx("img",{src:v,crossOrigin:"anonymous",alt:"",onError:r=>{r.currentTarget.style.display="none"},style:{width:84,height:84,borderRadius:"50%",objectFit:"cover",border:"2.5px solid var(--accent)",boxShadow:"0 0 0 5px rgba(88,204,2,0.14)"}}):e.jsx("span",{style:{width:84,height:84,borderRadius:"50%",border:"2.5px solid var(--accent)",boxShadow:"0 0 0 5px rgba(88,204,2,0.14)",display:"inline-flex",alignItems:"center",justifyContent:"center",overflow:"hidden",background:"var(--s2)"},children:e.jsx(w,{value:b,name:c}

6)}),e.jsx("span",{style:{fontSize:14,fontWeight:800,color:"var(--t1)",maxWidth:110,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:c})]}),e.jsx("span",{style:{fontFamily:"'JetBrains Mono',monospace",fontSize:19,fontWeight:800,color:"var(--t3)"},children:"VS"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:8,width:110},children:[n.rival?e.jsx("span",{style:{width:84,height:84,borderRadius:"50%",border:`2.5px solid ${n.rival.won?"var(--accent)":"#FF6B6B"}`,display:"inline-flex",alignItems:"center",justifyContent:"center",background:"var(--s2)",overflow:"hidden"},children:e.jsx(w,{value:n.rival.avatar,url:N[n.rival.id],name:n.rival.name})}):e.jsx("span",{style:{width:84,height:84,borderRadius:"50%",border:"2.5px dashed #3E4150",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:30,color:"var(--t3)"},children:"?"}),e.jsx("span",{style:{fontSize:13,fontWeight:n.rival?700:600,color:n.rival?"var(--t1)":"var(--t3)",maxWidth:110,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n.rival?n.rival.name:"Your rival here"})]})]}),n.wins+n.losses===0?e.jsx("div",{style:{marginTop:20,borderTop:"1px solid var(--border)",paddingTop:14,textAlign:"center",fontSize:13,fontWeight:600,color:"var(--t2)",lineHeight:1.5},children:"No matches yet — win one and your record starts here."}):e.jsx("div",{style:{display:"flex",alignItems:"stretch",marginTop:20,borderTop:"1px solid var(--border)",paddingTop:14},children:[{v:n.wins,label:"Wins",color:"var(--grn-soft)"},{v:n.losses,label:"Losses",color:"var(--t1)"},{v:n.winRate==null?"—":`${n.winRate}%`,label:"Win rate",color:"var(--gold)"}].map((r,g)=>e.jsxs(d.Fragment,{children:[g>0&&e.jsx("div",{style:{width:1,background:"var(--border)"}}),e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:[e.jsx("span",{style:{fontSize:24,fontWeight:800,color:r.color,fontVariantNumeric:"tabular-nums"},children:r.v}),e.jsx("span",{style:{fontSize:11,fontWeight:600,color:"var(--t2)"},children:r.label})]})]},r.label))})]})}),e.jsxs("div",{className:"online-col-b",children:[p&&e.jsxs("div",{style:{borderRadius:14,background:"var(--s1)",border:"1px solid var(--border)",padding:"18px 16px 16px",marginBottom:14},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:12,marginBottom:12},children:[e.jsx("span",{className:"t7s-icon",style:{"--mode":"var(--accent)","--mode-rgb":"88,204,2",width:46,height:46,marginTop:2},"aria-hidden":"true",children:e.jsx(P,{size:24,strokeWidth:2})}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("div",{style:{fontSize:19,fontWeight:800,letterSpacing:"-0.3px",color:"var(--t1)",lineHeight:1.15},children:"Who knows more — you or your mates?"}),e.jsx("div",{style:{fontSize:13.5,color:"var(--t2)",marginTop:5,lineHeight:1.45},children:"Ten questions, everyone answers live, the podium settles it. Up to 8 players, any phone."})]})]}),e.jsxs("button",{onClick:C,style:{width:"100%",border:"none",borderRadius:999,background:"var(--accent)",color:"var(--grn-ink)",boxShadow:"0 8px 22px -8px rgba(88,204,2,0.55)",padding:15,display:"flex",alignItems:"center",justifyContent:"center",gap:9,cursor:"pointer",fontFamily:"inherit"},children:[e.jsx("span",{style:{display:"flex",alignItems:"center"},"aria-hidden":"true",children:e.jsx(J,{size:17,strokeWidth:2.4})}),e.jsx("span",{style:{fontSize:16,fontWeight:800,color:"var(--grn-ink)"},children:"Challenge your friends"})]}),e.jsx("div",{style:{marginTop:8,textAlign:"center",fontSize:12.5,color:"var(--t3)",lineHeight:1.45},children:"Free account, takes seconds — then invite anyone with a link."})]}),!p&&e.jsxs("button",{onClick:C,style:{width:"100%",border:"none",borderRadius:999,background:"var(--accent)",color:"var(--grn-ink)",boxShadow:"0 8px 22px -8px rgba(88,204,2,0.55)",padding:17,display:"flex",alignItems:"center",justifyContent:"center",gap:9,cursor:"pointer",fontFamily:"inherit"},children:[e.jsx("span",{style:{display:"flex",alignItems:"center"},"aria-hidden":"true",children:e.jsx(B,{size:17,strokeWidth:2.2})}),e.jsx("span",{style:{fontSize:17,fontWeight:800,color:"var(--grn-ink)"},children:"Create Room"})]}),e.jsx("div",{className:"home-section-title",style:{marginTop:18,marginBottom:2},children:"No account needed"}),e.jsxs("div",{style:{display:"flex",gap:9,marginTop:10},children:[e.jsxs("div",{style:{flex:1,minWidth:0,borderRadius:999,background:"var(--s1)",padding:"0 15px",display:"flex",alignItems:"center",gap:10,border:z?"1.5px solid rgba(88,204,2,0.55)":"1px solid var(--border)",boxShadow:z?"0 0 0 4px rgba(88,204,2,0.12)":void 0},children:[e.jsx("span",{style:{flexShrink:0,display:"flex",color:"var(--t3)"},"aria-hidden":"true",children:e.jsx(H,{size:15,strokeWidth:2})}),e.jsx("input",{type:"text",value:t,onChange:r=>{D(r.target.value.toUpperCase().replace(/[^A-Z0-9]/g,"").slice(0,6)),k&&W("")},onKeyDown:r=>{r.key==="Enter"&&t.length>0&&F()},onFocus:()=>T(!0),onBlur:()=>T(!1),placeholder:"Got a code? Type it here",autoCapitalize:"characters",autoCorrect:"off",autoComplete:"off",spellCheck:!1,maxLength:6,disabled:x,enterKeyHint:"go","aria-label":"Room code",style:{flex:1,minWidth:0,border:"none",background:"transparent",outline:"none",padding:"15px 0",fontSize:t?17:16,fontWeight:t?800:500,letterSpacing:t?"0.22em":"normal",color:"var(--text)",fontFamily:t?"'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace":"inherit"}})]}),e.jsx("button",{onClick:F,disabled:x||t.length===0,style:{borderRadius:999,padding:"15px 24px",fontSize:15,fontWeight:800,cursor:"pointer",fontFamily:"inherit",flexShrink:0,...t.length>0&&!x?{border:"none",background:"var(--accent)",color:"var(--grn-ink)",boxShadow:"0 8px 24px rgba(88,204,2,0.25)"}:{background:"var(--s1)",border:"1px solid var(--border)",color:"var(--t3)"}},children:x?"…":"Join"})]}),k?e.jsx("div",{style:{color:"#FF6B6B",fontSize:12,marginTop:9,paddingLeft:4},children:k}):z||t?e.jsx("div",{style:{color:"var(--t3)",fontSize:11.5,marginTop:9,paddingLeft:4},children:"Codes are 6 characters — ask your friend for theirs."}):null,n.recent.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{fontSize:11.5,fontWeight:800,letterSpacing:"0.14em",textTransform:"uppercase",color:"var(--t2)",marginTop:24},children:"Recent opponents"}),e.jsx("div",{style:{display:"flex",gap:9,marginTop:12},children:n.recent.map(r=>e.jsxs("div",{style:{flex:1,borderRadius:16,background:"var(--s1)",border:"1px solid var(--border)",padding:"14px 8px",display:"flex",flexDirection:"column",alignItems:"center",gap:7},children:[e.jsx("span",{style:{width:46,height:46,borderRadius:"50%",background:"var(--s2)",border:`2px solid ${r.won?"var(--accent)":"#FF6B6B"}`,display:"inline-flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},children:e.jsx(w,{value:r.avatar,url:N[r.id],name:r.name})}),e.jsx("span",{style:{fontSize:13,fontWeight:700,color:"var(--t1)",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r.name}),e.jsxs("span",{style:{fontSize:11,fontWeight:800,textAlign:"center",color:r.won?"var(--grn-soft)":"#FF6B6B"},children:[r.won?"Won":"Lost"," ",r.line]}),e.jsx("button",{onClick:()=>r.id&&a?a({id:r.id,username:r.name}):C(),style:{marginTop:"auto",border:"1.5px solid rgba(88,204,2,0.5)",borderRadius:999,padding:"5px 14px",fontSize:12,fontWeight:800,color:"var(--accent)",background:"rgba(88,204,2,0.06)",cursor:"pointer",fontFamily:"inherit"},children:"Rematch"})]},r.name))})]}),n.recent.length===0&&j.length>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{fontSize:11.5,fontWeight:800,letterSpacing:"0.14em",textTransform:"uppercase",color:"var(--t2)",marginTop:24},children:"Challenge a friend"}),e.jsx("div",{className:"mp-friend-list",style:{display:"flex",flexDirection:"column",gap:8,marginTop:12},children:j.slice(0,4).map(r=>e.jsxs("div",{className:"todays-seven-secondary mp-row",children:[e.jsxs("button",{type:"button",className:"mp-row-open",onClick:()=>h?.({id:r.id,username:r.username,avatar:r.avatar}),"aria-label":`View ${r.username}'s profile`,children:[e.jsx("span",{className:"t7s-icon","aria-hidden":"true",children:e.jsx("span",{style:{width:30,height:30,borderRadius:"50%",overflow:"hidden",display:"inline-flex",alignItems:"center",justifyContent:"center"},children:e.jsx(w,{value:r.avatar,url:L[r.id],name:r.username})})}),e.jsx("span",{className:"t7s-body",children:e.jsx("span",{className:"t7s-title",children:r.username})})]}),e.jsx("button",{type:"button",className:"t7s-cta",onClick:()=>a?.({id:r.id,username:r.username}),children:"Challenge"})]},r.id))})]}),e.jsxs("div",{className:"todays-seven-secondary mp-row",role:"group","aria-label":"Local pass and play",style:{marginTop:16,marginBottom:0},children:[e.jsxs("button",{type:"button",className:"mp-row-open",onClick:()=>i("local"),"aria-label":"Play locally on one phone",children:[e.jsx("span",{className:"t7s-icon","aria-hidden":"true",children:e.jsx(B,{size:20,strokeWidth:2})}),e.jsxs("span",{className:"t7s-body",children:[e.jsx("span",{className:"t7s-title",children:"Local pass & play"}),e.jsx("span",{className:"t7s-sub",children:"Same couch, one phone · up to 6 players"})]})]}),e.jsx("button",{type:"button",className:"t7s-cta mp-row-invite",onClick:()=>i("local"),children:"Play"})]})]})]})]})}export{pe as OnlineHubTab};