const team_data = [ { short_name: "3HM", id: 3084, name: "3 Headed Monsters", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/3hmonsters-1.svg", }, { short_name: "3CO", id: 2915, name: "3's Company", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/3scompany-1.svg", }, { short_name: "ALI", id: 2916, name: "Aliens", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/Aliens.svg", }, { short_name: "BH", id: 2917, name: "Ball Hogs", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/ballhogs-1.svg", }, { short_name: "BIV", id: 2918, name: "Bivouac", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/Bivouac300x300.svg", }, { short_name: "ENM", id: 2919, name: "Enemies", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/enemies.svg", }, { short_name: "GB", id: 2920, name: "Ghost Ballers", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/ghostballers-1.svg", }, { short_name: "K3", id: 2921, name: "Killer 3's", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/killer3s-1.svg", }, { short_name: "POW", id: 2922, name: "Power", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/power-1.svg", }, { short_name: "TS", id: 2923, name: "Tri-State", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/tristate-1.svg", }, { short_name: "TRI", id: 2924, name: "Trilogy", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/trilogy-1-1.svg", }, { short_name: "TRP", id: 2925, name: "Triplets", image: "https://fhfaxdtipfmoxqxoxtec.supabase.co/storage/v1/object/public/images/Triplets-2.svg", }, ]; State.init({ selections: [], matches: Near.view("neetion.near", "getMatches").filter( (m) => new Date() < new Date(m.time) ), }); const onTeamSelect = (team, matchIndex) => { let _selections = state.selections.filter((t) => t.index !== matchIndex); _selections.push({ predictor: context.accountId, team: team, index: matchIndex, }); State.update({ selections: _selections }); }; const onSubmit = () => { return Near.call("neetion.near", "bulkPick", { picks: state.selections }); }; const button = (name, image, first, selected, onClick) => ( <button onClick={onClick} disabled={!context.accountId} style={{ display: "flex", padding: "1rem", backgroundColor: selected ? "#00A160" : "#ffffff", flexDirection: first ? "row-reverse" : "reverse", justifyContent: first ? "end" : "start", alignItems: "center", width: "100%", borderRadius: "0.5rem", borderWidth: "2px", borderColor: "#000000", gap: "2rem", color: selected ? "#ffffff" : "#000000", fontSize: "2rem", fontWeight: 600, }} > <img src={image} width={100} height={100} alt="" /> <div className="text-3xl font-extrabold leading-tight tracking-tighter"> {name} </div> </button> ); const matchup = (index, team1, team2, onSelect) => ( <div style={{ display: "flex", flexDirection: "row", alignItems: "center", width: "100%", gap: "1rem", }} > {button( team1.name, team1.image, true, state.selections.some((s) => s.index === index && s.team === 1), () => onTeamSelect(1, index) )} <div className="flex items-center justify-center text-xl font-bold">vs</div> {button( team2.name, team2.image, false, state.selections.some((s) => s.index === index && s.team === 2), () => onTeamSelect(2, index) )} </div> ); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%", gap: "1rem", }} > <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", }} > <h1 style={{ fontSize: "1.875rem", lineHeight: "2.25rem", fontWeight: "800", letterSpacing: "-0.05em", lineHeight: "1.25", lineHeight: "2.5rem", }} > Week 3 Pick 'Em </h1> <p style={{ fontSize: "1.125rem", lineHeight: "1.75rem", }} > {context.accountId ? ( <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "0.5rem", }} > Signed in as {context.accountId} </div> ) : ( <div style={{ display: "flex", color: "#000000", fontWeight: "700", flexDirection: "column", alignItems: "flex-start", gap: "0.5rem", }} > Connect your NEAR wallet to make your picks </div> )} </p> </div> {state.matches.map((m) => { return matchup( m.index, { ...team_data.find((t) => t.id === m.team1), }, { ...team_data.find((t) => t.id === m.team2), }, () => {} ); })} <button onClick={onSubmit}>Submit Picks</button> </div> );