// krossi-web-app.jsx — Browser-based Krossi with desktop layout // Uses same Supabase project as the mobile app const SUPABASE_URL = 'https://hhybjpgrvlbazbqiaaao.supabase.co'; const SUPABASE_ANON_KEY = 'sb_publishable_IKLRGbstMLfxKeXwBTavSA_UVYyMgTL'; const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { auth: { autoRefreshToken: true, persistSession: true, detectSessionInUrl: true }, }); // ── Constants ────────────────────────────────────────── const AREA_OPTIONS = ['Lahti', 'Turku', 'Helsinki', 'Tampere', 'Oulu', 'Jyväskylä', 'Pori', 'Kuopio']; const VISIBLE_AREAS = AREA_OPTIONS; const PLAIN_SKILL_LEVELS = ['aloittelija', 'keskitaso', 'edistynyt', 'kilpapelaaja']; const PLAY_STYLES = ['pallottelu', 'treenit', 'matsit', 'kaksinpeli', 'nelinpeli', 'kaikki käy']; const MATCH_TYPES = ['kaksinpeli', 'nelinpeli', 'pallottelu']; const CHALLENGE_DURATION_HOURS = 3; // haaste vanhenee feedistä tämän jälkeen sovitusta ajankohdasta const OPEN_CHALLENGE_TTL_HOURS = 48; // "aika avoin" -haasteille, joilla ei ole kellonaikaa const LOCATION_TYPES = ['sisätennis', 'ulkotennis', 'missä vain']; const AVAILABILITY_SLOTS = [ { value: 'aamuvirkku', label: 'Aamuvirkku', time: '6-9' }, { value: 'arkiaamut', label: 'Arkiaamut', time: '9-12' }, { value: 'arkipäivät', label: 'Arkipäivät', time: '12-15' }, { value: 'arki-iltapäivät', label: 'Arki-iltapäivät', time: '15-18' }, { value: 'arki-illat', label: 'Arki-illat', time: '19-22' }, { value: 'viikonloppuaamut', label: 'Viikonloppuaamut', time: '9-12' }, { value: 'viikonloppupäivät', label: 'Viikonloppupäivät', time: '12-15' }, { value: 'viikonloppuiltapäivät', label: 'Viikonloppuiltapäivät', time: '15-18' }, { value: 'viikonloppuillat', label: 'Viikonloppuillat', time: '19-22' }, { value: 'joustavasti', label: 'Joustavasti', time: '' }, ]; const INDOOR_VENUES = [ { name: 'Janus Areena', city: 'Lahti' }, { name: 'Kispi Areena', city: 'Lahti' }, { name: 'Jarkko Nieminen Areena', city: 'Turku' }, { name: 'Bo Arena', city: 'Turku' }, { name: 'Kerttulantenniskeskus', city: 'Turku' }, { name: 'Smash Center', city: 'Helsinki' }, { name: 'Talin Tenniskeskus', city: 'Helsinki' }, { name: 'Tennis Tower Helsinki', city: 'Helsinki' }, { name: 'Tampereen Tenniskeskus', city: 'Tampere' }, { name: 'Oulun Tenniskeskus', city: 'Oulu' }, { name: 'Jyväskylän Tenniskeskus', city: 'Jyväskylä' }, { name: 'Porin Tenniskeskus', city: 'Pori' }, { name: 'Kuopion Tenniskeskus', city: 'Kuopio' }, ]; const SKILL_LEVEL_INFO = [ { value: 'aloittelija', label: 'Aloittelija', desc: 'Olet juuri aloittamassa tai pelannut vasta muutaman kerran.' }, { value: 'keskitaso', label: 'Keskitaso', desc: 'Hallitset perusliikkeet ja pystyt pitämään pisteen yllä.' }, { value: 'edistynyt', label: 'Edistynyt', desc: 'Pelaat säännöllisesti ja hallitset taktiikkaa sekä eri lyöntejä.' }, { value: 'kilpapelaaja', label: 'Kilpapelaaja', desc: 'Pelaat tai olet pelannut kilpaa, ja sinulla on kilpailuluokka.' }, ]; const COMPETITION_CLASSES = ['A1','A2','A3','B1','B2','B3','C1','C2','C3','D1','D2','D3','E1','E2','E3']; const GAME_TYPES = ['pallottelu', 'treenit', 'matsit']; const MATCH_FORMATS = ['kaksinpeli', 'nelinpeli', 'kaikki käy']; const AGE_RANGES = [ { value: 'alle20', label: 'Alle 20' }, { value: '20-30', label: '20–30' }, { value: '30-40', label: '30–40' }, { value: '40-50', label: '40–50' }, { value: '50-60', label: '50–60' }, { value: '60+', label: '60+' }, ]; // ── Helpers ──────────────────────────────────────────── function parseSkillLevels(raw) { if (!raw) return ['keskitaso']; const parts = raw.split(',').map(s => s.trim()).filter(Boolean); const valid = parts.filter(p => PLAIN_SKILL_LEVELS.includes(p) || /^[A-E][1-3]$/.test(p)); return valid.length > 0 ? valid : ['keskitaso']; } function formatSkillLevels(levels) { if (!levels || levels.length === 0) return ''; const comp = levels.filter(l => /^[A-E][1-3]$/.test(l)); if (comp.length === 0) return titleCase(levels[0]); if (comp.length === 1) return comp[0]; return `${comp[comp.length - 1]}-${comp[0]}`; } function parsePlayStyles(raw) { if (!raw) return ['kaikki käy']; return raw.split(',').map(s => s.trim()).filter(Boolean); } function parseAreas(raw) { if (!raw) return []; return raw.split(',').map(s => s.trim()).filter(s => AREA_OPTIONS.includes(s)); } function titleCase(s) { return s.length > 0 ? s[0].toUpperCase() + s.slice(1) : s; } function timeAgo(dateStr) { const mins = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000); if (mins < 1) return 'Nyt'; if (mins < 60) return `${mins} min`; const h = Math.floor(mins / 60); if (h < 24) return `${h} t`; const d = Math.floor(h / 24); return d === 1 ? 'Eilen' : `${d} pv`; } function formatDate(dateStr) { if (!dateStr) return ''; const d = new Date(dateStr); return `${'SuMaTiKeToToLa'.match(/../g)[d.getDay()]} ${d.getDate()}.${d.getMonth()+1}. klo ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; } function slotsNeeded(mt) { return mt === 'nelinpeli' ? 3 : 1; } function storageUrl(path) { return path ? (path.startsWith('http') ? path : `${SUPABASE_URL}/storage/v1/object/public/profile-avatars/${path}`) : null; } function chatImgUrl(path) { return path ? (path.startsWith('http') ? path : `${SUPABASE_URL}/storage/v1/object/public/chat-images/${path}`) : null; } function fmtLastMsg(raw) { if (!raw) return { text: null }; try { const p = JSON.parse(raw); if (p.__type==='challenge_join') return { text: `${p.joinerName} liittyi peliin!` }; if (p.__type==='thumbs_up') return { text: '👍' }; } catch {} return { text: raw }; } function slotLabel(v) { const s = AVAILABILITY_SLOTS.find(a => a.value === v); return s ? (s.time ? `${s.label} ${s.time}` : s.label) : v; } function ageRangeLabel(v) { const r = AGE_RANGES.find(a => a.value === v); return r ? r.label : v; } function archivedStorageKey(uid) { return `krossi_archived_conversations_${uid}`; } function getArchivedIds(uid) { if (!uid) return []; try { return JSON.parse(localStorage.getItem(archivedStorageKey(uid)) || '[]'); } catch { return []; } } function saveArchivedIds(uid, ids) { if (!uid) return; try { localStorage.setItem(archivedStorageKey(uid), JSON.stringify(ids)); } catch {} } async function fetchWebConversations(uid) { const { data: cpD } = await supabase.from('conversation_participants').select('conversation_id,last_read_at,conversation:conversations(id,updated_at,last_message,challenge_id)').eq('user_id',uid); const rows = cpD || []; const cids = rows.map(r=>r.conversation_id); if (cids.length === 0) return []; const [{data:ap},{data:lm}] = await Promise.all([ supabase.from('conversation_participants').select('conversation_id,user_id,profile:profiles!conversation_participants_user_id_fkey(id,name,avatar_url,avatar_color)').in('conversation_id',cids), supabase.from('messages').select('conversation_id,sender_id,created_at').in('conversation_id',cids).order('created_at',{ascending:false}), ]); const pm=new Map(); (ap||[]).forEach(i=>{const a=pm.get(i.conversation_id)||[];if(i.profile)a.push({userId:i.profile.id,name:i.profile.name,avatarUrl:i.profile.avatar_url,avatarColor:i.profile.avatar_color||'blue'});pm.set(i.conversation_id,a);}); const lmm=new Map(); (lm||[]).forEach(i=>{if(!lmm.has(i.conversation_id))lmm.set(i.conversation_id,{senderId:i.sender_id,createdAt:i.created_at});}); return rows.map(r=>{ const others=(pm.get(r.conversation_id)||[]).filter(p=>p.userId!==uid);const o=others[0]; if(!r.conversation||!o)return null; const lt=lmm.get(r.conversation_id);const lr=r.last_read_at; const unread=lt?.senderId&<.senderId!==uid&&(!lr||new Date(lt.createdAt)>new Date(lr)); return {id:r.conversation_id,otherUserId:o.userId,otherUserName:o.name,otherUserAvatarUrl:o.avatarUrl,otherUserAvatarColor:o.avatarColor,displayName:others.length>1?'Ryhmäkeskustelu':o.name,isGroup:others.length>1,participantProfiles:others,lastMessage:fmtLastMsg(r.conversation.last_message).text,updatedAt:r.conversation.updated_at,hasUnread:unread}; }).filter(Boolean).sort((a,b)=>new Date(b.updatedAt)-new Date(a.updatedAt)); } function mapMatchResult(row) { return { id:row.id, createdAt:row.created_at, gameType:row.game_type, format:row.format, partnerName:row.partner_name, opponentName:row.opponent_name, oppPartnerName:row.opp_partner_name, sets:row.sets||[], won:row.won }; } async function fetchMatchResultsWeb() { const { data, error } = await supabase.from('match_results').select('*').order('created_at',{ascending:false}).limit(50); if (error) throw error; return (data||[]).map(mapMatchResult); } async function saveMatchResultWeb(id, payload) { const row = { game_type:payload.gameType, format:payload.format, partner_name:payload.partnerName||null, opponent_name:payload.opponentName||null, opp_partner_name:payload.oppPartnerName||null, sets:payload.sets, won:payload.won }; if (id) { const {error}=await supabase.from('match_results').update(row).eq('id',id); if(error) throw error; } else { const { data: { user } } = await supabase.auth.getUser(); const {error}=await supabase.from('match_results').insert({...row, created_by:user.id}); if(error) throw error; } } async function deleteMatchResultWeb(id) { const { error } = await supabase.from('match_results').delete().eq('id', id); if (error) throw error; } async function recordChallengeOutcome(challengeId, outcome) { const { error } = await supabase.from('challenges').update({ outcome, outcome_recorded_at: new Date().toISOString() }).eq('id', challengeId); if (error) throw error; } async function fetchPendingOutcomeChallenges(uid) { const nowIso = new Date().toISOString(); const cols = 'id,creator_id,location,location_type,scheduled_at,match_type,title'; const [{ data: created }, { data: joinedRows }] = await Promise.all([ supabase.from('challenges').select(cols).eq('creator_id', uid).in('status', ['open', 'filled']).is('outcome', null).lt('expires_at', nowIso), supabase.from('challenge_participants').select(`challenge:challenges!challenge_participants_challenge_id_fkey(${cols},status,outcome,expires_at)`).eq('user_id', uid), ]); const joined = (joinedRows || []).map(r => r.challenge).filter(c => c && ['open', 'filled'].includes(c.status) && c.outcome == null && c.expires_at && c.expires_at < nowIso); const merged = new Map(); [...(created || []), ...joined].forEach(c => merged.set(c.id, c)); const list = [...merged.values()]; if (list.length === 0) return []; const ids = list.map(c => c.id); const creatorIds = [...new Set(list.map(c => c.creator_id))]; const [{ data: pR }, { data: cR }] = await Promise.all([ supabase.from('challenge_participants').select('challenge_id,user_id,profile:profiles!challenge_participants_user_id_fkey(name,avatar_url,avatar_color)').in('challenge_id', ids), supabase.from('profiles').select('id,name,avatar_url,avatar_color').in('id', creatorIds), ]); const cm = new Map(); (cR || []).forEach(c => cm.set(c.id, c)); const pm = new Map(); (pR || []).forEach(p => { const a = pm.get(p.challenge_id) || []; if (p.profile) a.push({ userId: p.user_id, name: p.profile.name, avatarUrl: p.profile.avatar_url, avatarColor: p.profile.avatar_color || 'blue' }); pm.set(p.challenge_id, a); }); return list.map(c => { const creator = cm.get(c.creator_id); return { id: c.id, location: c.location, locationType: c.location_type, scheduledAt: c.scheduled_at, matchType: c.match_type, title: c.title, creatorId: c.creator_id, creatorName: creator?.name || 'Pelaaja', creatorAvatarUrl: creator?.avatar_url, creatorAvatarColor: creator?.avatar_color || 'blue', participants: pm.get(c.id) || [], }; }); } function calculateMatchWon(sets) { const won = sets.filter(s=>s.my>s.opp).length; const lost = sets.filter(s=>s.opp>s.my).length; return won>lost; } function mapProfile(d) { return { id: d.id, nimi: d.name, ika: d.age, sukupuoli: d.gender || null, alue: parseAreas(d.area), bio: d.bio, avatarUrl: d.avatar_url, avatarColor: d.avatar_color || 'blue', pelitaso: parseSkillLevels(d.tennis_preferences?.skill_level), pelimuoto: parsePlayStyles(d.tennis_preferences?.play_style), saatavuus: (d.availability || []).map(a => a.slot), katisyys: d.tennis_preferences?.handedness || null, rysty: d.tennis_preferences?.backhand_type || null, playingThisWeek: d.playing_this_week || false, hiddenFromFeed: d.hidden_from_feed || false, }; } const PROFILE_SELECT = 'id, name, age, gender, area, bio, avatar_url, avatar_color, playing_this_week, hidden_from_feed, tennis_preferences(skill_level, play_style, handedness, backhand_type), availability(slot)'; // ── Tiny components ──────────────────────────────────── function Avatar({ uri, name, color = 'blue', size = 44 }) { if (uri) return ; return
{(name||'?')[0].toUpperCase()}
; } function Toast({ show, text }) { return show ?
{text}
: null; } function Spinner() { return
; } function Empty({ title, action, onAction }) { return

{title}

{action && }
; } function TrashIcon() { return ; } function ArchiveIcon() { return ; } function UndoIcon() { return ; } function Toggle({ on, onChange }) { return ( ); } function AvatarPicker({ preview, onPick }) { const inputRef = React.useRef(null); return (
inputRef.current?.click()} style={{ position: 'relative', cursor: 'pointer', width: 88, height: 88 }}> {preview ? :
+
}

Auta muita pelaajia tietämään kuka on vastassa

); } // ── Auth Context ─────────────────────────────────────── const AuthContext = React.createContext(null); function AuthProvider({ children }) { const [session, setSession] = React.useState(null); const [profile, setProfile] = React.useState(null); const [loading, setLoading] = React.useState(true); const loadProfile = React.useCallback(async (uid) => { if (!uid) { setProfile(null); return; } try { const { data, error } = await supabase.from('profiles').select(PROFILE_SELECT).eq('id', uid).maybeSingle(); if (error) throw error; setProfile(data ? mapProfile(data) : null); } catch { setProfile(null); } }, []); React.useEffect(() => { supabase.auth.getSession().then(({ data: { session: s } }) => { setSession(s); if (s?.user?.id) loadProfile(s.user.id).finally(() => setLoading(false)); else setLoading(false); }); const { data: { subscription } } = supabase.auth.onAuthStateChange((ev, s) => { setSession(s); if (ev === 'TOKEN_REFRESHED' || ev === 'USER_UPDATED') return; if (s?.user?.id) { setLoading(true); loadProfile(s.user.id).finally(() => setLoading(false)); } else { setProfile(null); setLoading(false); } }); return () => subscription.unsubscribe(); }, [loadProfile]); const refreshProfile = React.useCallback(async () => { if (session?.user?.id) await loadProfile(session.user.id); }, [session, loadProfile]); const value = React.useMemo(() => ({ session, profile, loading, needsOnboarding: Boolean(session?.user && !profile && !loading), refreshProfile, }), [session, profile, loading, refreshProfile]); return {children}; } function useAuth() { return React.useContext(AuthContext); } // ── Auth Screen ──────────────────────────────────────── function AuthScreen() { const [mode, setMode] = React.useState('register'); const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [error, setError] = React.useState(''); const [info, setInfo] = React.useState(''); const [busy, setBusy] = React.useState(false); const [showTerms, setShowTerms] = React.useState(false); const [showPrivacy, setShowPrivacy] = React.useState(false); const signInWithGoogle = async () => { setError(''); setBusy(true); try { const { error: e } = await supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin + '/pelaa' }, }); if (e) throw e; } catch (err) { setError(err.message || 'Google-kirjautuminen epäonnistui'); setBusy(false); } }; const signInWithApple = async () => { setError(''); setBusy(true); try { const { error: e } = await supabase.auth.signInWithOAuth({ provider: 'apple', options: { redirectTo: window.location.origin + '/pelaa' }, }); if (e) throw e; } catch (err) { setError(err.message || 'Apple-kirjautuminen epäonnistui'); setBusy(false); } }; const submit = async (e) => { e.preventDefault(); setError(''); setInfo(''); setBusy(true); try { if (mode === 'login') { const { error } = await supabase.auth.signInWithPassword({ email, password: pw }); if (error) throw error; } else if (mode === 'register') { const { data, error } = await supabase.auth.signUp({ email, password: pw, options: { emailRedirectTo: window.location.origin + '/pelaa' } }); if (error) throw error; if (typeof fbq !== 'undefined') fbq('track', 'Lead'); if (data.user && !data.session) setInfo('Vahvistusviesti lähetetty sähköpostiisi.'); } else { const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo: location.origin + '/pelaa' }); if (error) throw error; setInfo('Palautuslinkki lähetetty.'); } } catch (err) { setError(err.message || 'Virhe'); } finally { setBusy(false); } }; const oauthBtnStyle = { display:'flex', alignItems:'center', justifyContent:'center', gap:10, width:'100%', padding:'12px 16px', borderRadius:12, border:'1px solid #e0ddd6', background:'#fff', cursor:'pointer', fontFamily:'inherit', fontSize:14, fontWeight:600, color:'var(--ink)', transition:'background .15s, border-color .15s', }; return (
Krossi

Löydä pelikavereita tennikseen

{mode === 'login' ? 'Kirjaudu sisään' : mode === 'register' ? 'Luo tili' : 'Palauta salasana'}

{mode === 'register' && (

Luomalla tilin hyväksyt Krossin{' '} {' '}ja{' '} .

)} {error &&
{error}
} {info &&
{info}
} {mode !== 'reset' && (
)} {mode !== 'reset' && (
tai sähköpostilla
)}
setEmail(e.target.value)} required /> {mode !== 'reset' && setPw(e.target.value)} required minLength={6} />}
{mode === 'login' ? <> · : }
← Takaisin etusivulle {(showTerms || showPrivacy) && (
{ setShowTerms(false); setShowPrivacy(false); }}>
e.stopPropagation()}> {showTerms ? : }
)}
); } // ── Käyttöehdot & tietosuojaseloste (in-app popupit) ──── function LegalSection({ title, children }) { return (
{title}
{children}
); } function TermsContent() { return (

Krossin käyttöehdot

Voimassa 9.7.2026 alkaen

Krossi on palvelu, jonka avulla käyttäjät löytävät pelikavereita tennikseen: selaavat pelaajaprofiileja, sopivat pelejä ja liittyvät toisten luomiin haasteisiin. Krossi ei omista kenttiä eikä ole osapuolena käyttäjien välisissä peleissä tai tapaamisissa. Tilin luominen edellyttää, että annat itsestäsi oikeat tiedot etkä esiinny toisena henkilönä. Palvelu on tarkoitettu vähintään 16-vuotiaille. Vastaat itse tilisi ja salasanasi säilyttämisestä. Käytä palvelua asiallisesti. Häirintä, uhkailu, syrjivä käytös tai väärän tiedon antaminen muista käyttäjistä ei ole sallittua. Voit ilmoittaa sopimattomasta käytöksestä palvelun sisäisellä ilmoitustoiminnolla, ja Krossi voi tämän perusteella rajoittaa tai poistaa käyttöoikeuden. Krossi ei tarkista käyttäjien taustoja. Tapaamisia toisten käyttäjien kanssa varten kannattaa käyttää tervettä järkeä, esimerkiksi sopia ensimmäinen tapaaminen julkiselle kentälle. Krossi ei vastaa käyttäjien välisistä sopimuksista, peleistä tai niiden aikana sattuneista vahingoista. Vastaat itse jakamastasi sisällöstä (profiilikuva, bio, viestit). Et saa jakaa laitonta, loukkaavaa tai muiden oikeuksia loukkaavaa sisältöä. Voit poistaa tilisi milloin tahansa ottamalla yhteyttä alla olevaan osoitteeseen. Krossi voi sulkea tilin, jos näitä ehtoja rikotaan. Näitä ehtoja voidaan päivittää palvelun kehittyessä. Olennaisista muutoksista pyritään ilmoittamaan palvelussa. Kysymykset: eelispuro@gmail.com
); } function PrivacyContent() { return (

Tietosuojaseloste

Voimassa 9.7.2026 alkaen

Krossi. Yhteydenotot tietosuoja-asioissa: eelispuro@gmail.com Tiliin liittyvät tiedot (sähköposti), profiilitiedot (nimi, ikäryhmä, kotikaupunki, profiilikuva, pelitaso, kilpailuluokka, pelitoiveet, saatavuus, bio), sekä palvelun käytöstä syntyvä data: viestit muiden käyttäjien kanssa, pelipyynnöt, haasteet ja niihin osallistuminen, ottelutulokset sekä mahdolliset ilmoitukset sopimattomasta käytöksestä. Käsittelemme tietoja tarjotaksemme palvelun ydintoiminnon: sopivien pelikavereiden löytämisen ja pelien sopimisen. Käsittelyn peruste on käyttäjän kanssa tehtävän sopimuksen täytäntöönpano sekä rekisteröitymisen yhteydessä annettu suostumus. Säilytämme tietoja niin kauan kuin tilisi on aktiivinen. Kun poistat tilisi, tiedot poistetaan kohtuullisessa ajassa, ellei laki edellytä pidempää säilytystä. Tietoja käsitellään Supabase-alustalla (tietokanta ja tiedostojen tallennus, EU-alueella sijaitsevat palvelimet). Jos kirjaudut Google- tai Apple-tunnuksilla, kyseinen palveluntarjoaja käsittelee kirjautumiseen tarvittavat tiedot omien ehtojensa mukaisesti. Profiilitietojasi ei myydä eikä luovuteta markkinointitarkoituksiin kolmansille osapuolille. Sinulla on oikeus tarkastaa, oikaista ja pyytää poistettavaksi omat tietosi, rajoittaa niiden käsittelyä, siirtää tiedot toiseen palveluun sekä vastustaa käsittelyä. Voit käyttää oikeuksiasi yllä olevasta sähköpostiosoitteesta. Sinulla on myös oikeus tehdä valitus tietosuojavaltuutetun toimistolle. Krossin markkinointisivustolla käytetään erikseen evästesuostumuksella hallittavia analytiikka- ja markkinointievästeitä. Tämä ei koske sovelluksen sisäisiä profiilitietoja.
); } // ── Onboarding ───────────────────────────────────────── function OnboardingScreen() { const { session, refreshProfile } = useAuth(); const [step, setStep] = React.useState(1); const [form, setForm] = React.useState({ nimi:'', ika:'', alue:'', pelitaso:'', kilpaluokat:[], pelimuoto:[], otteluTyyppi:[], bio:'', saatavuus:[], playingThisWeek:true, hiddenFromFeed:false, }); const [avatarFile, setAvatarFile] = React.useState(null); const [avatarPreview, setAvatarPreview] = React.useState(null); const [error, setError] = React.useState(''); const [busy, setBusy] = React.useState(false); const set = (k,v) => setForm(p => ({...p,[k]:v})); const tog = (k,v) => setForm(p => ({...p,[k]:p[k].includes(v)?p[k].filter(x=>x!==v):[...p[k],v]})); const onAvatarChange = (e) => { const file = e.target.files?.[0]; if (!file) return; setAvatarFile(file); setAvatarPreview(URL.createObjectURL(file)); }; const save = async () => { setError(''); setBusy(true); try { const uid = session.user.id; let avatarPath = null; if (avatarFile) { const ext = (avatarFile.name.split('.').pop() || 'jpg').toLowerCase(); const path = `${uid}/${Date.now()}.${ext}`; const { error: upErr } = await supabase.storage.from('profile-avatars').upload(path, avatarFile, { upsert: true }); if (upErr) throw upErr; avatarPath = path; } const skillLevels = form.pelitaso === 'kilpapelaaja' && form.kilpaluokat.length > 0 ? [form.pelitaso, ...form.kilpaluokat] : [form.pelitaso]; await supabase.from('profiles').upsert({ id:uid, name:form.nimi.trim(), age:form.ika, area:form.alue, bio:form.bio.trim()||null, playing_this_week:form.playingThisWeek, hidden_from_feed:form.hiddenFromFeed, ...(avatarPath ? { avatar_url: avatarPath } : {}), }); await supabase.auth.updateUser({ data: { display_name: form.nimi.trim(), full_name: form.nimi.trim() } }); await supabase.from('tennis_preferences').upsert({ user_id:uid, skill_level:skillLevels.join(','), play_style:[...form.pelimuoto, ...form.otteluTyyppi].join(', '), }); await supabase.from('availability').delete().eq('user_id',uid); if (form.saatavuus.length>0) await supabase.from('availability').insert(form.saatavuus.map(s=>({user_id:uid,slot:s}))); if (typeof fbq !== 'undefined') fbq('track', 'CompleteRegistration'); await refreshProfile(); } catch (err) { setError(err.message||'Tallennus epäonnistui'); } finally { setBusy(false); } }; return (

Luo profiilisi

Vaihe {step}/3

{error &&
{error}
} {step===1 &&
Nimi
set('nimi',e.target.value)}/>
Ikä
{AGE_RANGES.map(r=>)}
Kotikaupunki
{AREA_OPTIONS.map(a=>)}
} {step===2 &&
Pelitaso
{SKILL_LEVEL_INFO.map(s => ( ))}
{form.pelitaso==='kilpapelaaja' && (
Kilpailuluokka
{COMPETITION_CLASSES.map(c=>)}
)}
Millaista peliä haet?
{GAME_TYPES.map(g=>)}
Ottelumuoto
{MATCH_FORMATS.map(m=>)}
Bio