// krossi-phone.jsx — interactive Krossi app mockup, faithful to the real app flows. // Exports KrossiPhone. Tabs + player detail + request modal + filter sheet + conversations. const KP = { Avatar({ initial, hue = 150, size = 44, ring = false }) { return (
{initial}
); }, Chip({ children, variant = 'outline' }) { const base = { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap', lineHeight: 1 }; if (variant === 'lime') return {children}; if (variant === 'active') return ( {children} ); return {children}; }, }; const KP_AGE_RANGES = ['Alle 20', '20–30', '30–40', '40–50', '50–60', '60+']; const KP_PLAYERS = [ { id: 0, initial: 'E', hue: 150, name: 'Eero', age: '30–40', loc: 'Lahti · Hennala', active: true, level: 'Keskitaso', forms: 'Treenit · Matsit', avail: ['Arkiaamut 9–12', 'Arki-illat 18–21'], style: 'Oikeakätinen · Yhden käden rysty', bio: 'Pelaillaan rennosti, taso ei niin väliä — pääasia että pallo pysyy kentällä.' }, { id: 1, initial: 'S', hue: 18, name: 'Saana', age: '20–30', loc: 'Lahti · Keskusta', active: true, level: 'Edistynyt', forms: 'Pallottelu · Matsit', avail: ['Arki-illat 17–20', 'Viikonloput 10–14'], style: 'Vasenkätinen', bio: 'Etsin tasaista vastusta arki-iltoihin. Tykkään kovasta temposta.' }, { id: 2, initial: 'M', hue: 265, name: 'Mikko', age: '40–50', loc: 'Lahti · Laune', active: false, level: 'Kilpapelaaja', forms: 'Matsit', avail: ['Arkiaamut 7–9', 'Lauantai 9–12'], style: 'Oikeakätinen · Kahden käden rysty', bio: 'Sarjapelaaja, mutta lähden mielelläni myös rentoon pallotteluun.' }, { id: 3, initial: 'L', hue: 330, name: 'Lotta', age: '20–30', loc: 'Lahti · Mukkula', active: true, level: 'Aloittelija', forms: 'Treenit', avail: ['Arki-illat 18–21'], style: 'Oikeakätinen', bio: 'Aloittelin viime vuonna ja haluan oppia lisää. Kärsivällinen pelikaveri plussaa!' }, ]; const KP_GAMES = [ { day: 'Ke 4.6.', time: 'klo 18:00', p: 0, place: 'Tenniskeskus Lahti · Sisä', type: 'Pallottelu', slots: 1 }, { day: 'To 5.6.', time: 'klo 09:00', p: 1, place: 'Mukkulan kentät · Ulko', type: 'Kaksinpeli', slots: 1 }, { day: 'La 7.6.', time: 'klo 11:00', p: 2, place: 'Hollolan halli · Sisä', type: 'Nelinpeli', slots: 3 }, ]; const KP_REQUESTS = [ { p: 2, text: 'Olisiko viikonloppuna aikaa matsiin? Mulle käy erityisesti lauantain päivävuoro.' }, { p: 3, text: 'Lähtisitkö treenaamaan perjantaina iltapäivällä? Vasta-alkajakin kelpaa!' }, ]; const KP_CONVOS = [ { p: 1, last: 'Nähdään huomenna kentällä! 🎾', time: '9.12', unread: true }, { p: 0, last: 'Joo, kello 18 käy hyvin 👍', time: 'eilen', unread: false }, ]; const KP_BUBBLES = [ { me: false, text: 'Moi! Lähtisitkö huomenna kentälle?' }, { me: true, text: 'Joo, kello 18 käy hyvin 👍' }, { me: false, text: 'Varaan kentän Tenniskeskuksesta.' }, { me: false, text: 'Nähdään huomenna kentällä! 🎾' }, ]; // ── shared bits ───────────────────────────────────────── function KPHeader({ title, action }) { return (

{title}

{action}
); } function KPFilters({ onFilter }) { const items = ['Suosikit', 'Sijainti', 'Pelitaso', 'Pelimuoto']; return (
{items.map((x) => {x})}
); } // ── screens ───────────────────────────────────────────── function KPPlayers({ onOpen, onFilter }) { return (
Etsitään peliä tänään? Luo haaste
{KP_PLAYERS.map((p) => ( ))}
); } function KPGames({ onFilter }) { return (
+ Luo haaste} />
{KP_GAMES.map((g, i) => { const p = KP_PLAYERS[g.p]; return (
{g.day} · {g.time} {g.type}
{p.name}
{g.place}
{Array.from({ length: g.slots }).map((_, k) => )}
); })}
); } function KPMessages({ onConvo, onReply }) { return (
Uudet pelipyynnöt
{KP_REQUESTS.map((r, i) => { const p = KP_PLAYERS[r.p]; return (
{p.name}

{r.text}

); })}
Keskustelut
{KP_CONVOS.map((c, i) => { const p = KP_PLAYERS[c.p]; return ( ); })}
); } function KPProfile({ liveOn, setLiveOn }) { const cities = ['Lahti', 'Turku', 'Helsinki', 'Tampere', 'Oulu', 'Jyväskylä', 'Pori', 'Kuopio']; return (
} />
Aleksi
Aina valmis matsiin!
{cities.map((c, i) => {c})}
{[['Pelitaso', 'Keskitaso'], ['Pelimuodot', 'Kaikki käy']].map(([k, v]) => (
{k}
{v}
))}
Ajankohdat
{['Arkiaamut 9–12', 'Arki-illat 18–21', 'Viikonloput 10–14'].map((t) =>
{t}
)}
); } // ── overlays ──────────────────────────────────────────── function KPDetail({ player, onBack, onRequest }) { if (!player) return null; const Field = ({ label, children }) => (
{label}
{children}
); return (
{player.name}, {player.age}
{player.loc}
{player.active &&
Tällä viikolla
}
{player.level} {player.forms} {player.avail.map((a, i) =>
{a}
)} {player.style} {player.bio}
); } function KPRequestModal({ player, onClose, onSend }) { const [val, setVal] = React.useState('Lähtisitkö ottamaan matsia huomenna?'); if (!player) return null; return (
e.stopPropagation()} className="kp-sheet" style={{ width: '100%', background: '#F4F2EC', borderRadius: '24px 24px 0 0', padding: '22px 18px calc(18px + env(safe-area-inset-bottom))' }}>

Pyyntö pelaajalle {player.name}