// arcai-learner.jsx — L01 Home, L02 Lesson Player, L03 Quiz Result, // L04 Path, L05 Liga, L06 Profile // ── Inline Icons ───────────────────────────────────────────────────────────── const LIcon = { home: (s=20,c='currentColor') => , path: (s=20,c='currentColor') => , practice: (s=20,c='currentColor') => , league: (s=20,c='currentColor') => , profile: (s=20,c='currentColor') => , flame: (s=20,c='#FFC400') => , bolt: (s=20,c='currentColor') => , check: (s=20,c='currentColor') => , play: (s=20,c='currentColor') => , lock: (s=20,c='currentColor') => , trophy: (s=18,c='currentColor') => , arrowUp: (s=14,c='#7BED6F') => , arrowDown: (s=14,c='#FF4B91') => , arrowLeft: (s=20,c='currentColor') => , target: (s=18,c='currentColor') => , clock: (s=14,c='currentColor') => , lightbulb: (s=18,c='currentColor') => , x: (s=20,c='currentColor') => , settings: (s=20,c='currentColor') => , star: (s=20,c='currentColor') => , }; // ── Mascot ──────────────────────────────────────────────────────────────────── function Mascot({ size = 78 }) { return ( ); } // ── Bottom Nav (5 tabs) ─────────────────────────────────────────────────────── function BottomNav({ active, onNavigate }) { const tabs = [ { key: 'home', screen: 'L01', label: 'Home', icon: LIcon.home }, { key: 'path', screen: 'L04', label: 'Path', icon: LIcon.path }, { key: 'practice', screen: 'L02', label: 'Practice', icon: LIcon.practice }, { key: 'league', screen: 'L05', label: 'Liga', icon: LIcon.league }, { key: 'profile', screen: 'L06', label: 'Profil', icon: LIcon.profile }, ]; return (
{tabs.map(t => { const isActive = active === t.key; return ( ); })}
); } // ── L01 Home / Today ────────────────────────────────────────────────────────── function ScreenL01({ onNavigate }) { const [xpAnim, setXpAnim] = React.useState(false); return (
{/* Header */}
{/* Streak pill */}
{LIcon.flame(16,'#FFC400')}
7 hari
{/* XP pill */}
{ setXpAnim(true); setTimeout(() => setXpAnim(false), 1000); }} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '6px 10px 6px 8px', borderRadius: 999, background: 'var(--surface-1)', border: '1px solid var(--accent-overlay-mid)', cursor: 'pointer', position: 'relative' }}> {LIcon.bolt(14,'var(--accent)')} 2,340 XP {xpAnim && ( +30 XP )}
{/* Mascot + greeting */}
Pagi, Rayis!
Lu on fire — jangan putus streak hari ini ya 🔥
{/* Today's lesson card */}
Pelajaran Hari Ini
Prompt Engineering:
Chain-of-Thought
{LIcon.clock(12,'var(--text-muted)')} 6 menit • Pelajaran 5 / 12
onNavigate('L02')} fullWidth>Mulai Sekarang →
{/* Path progress strip */} {/* Daily Challenge */}
{LIcon.target(13,'#FFC400')}
Daily Challenge
+50 XP
Bikin 1 prompt CoT buat kerjaan lu hari ini, trus lapor hasilnya untuk bonus XP.
); } // ── L02 Lesson Player ───────────────────────────────────────────────────────── function ScreenL02({ onNavigate }) { const [selected, setSelected] = React.useState(null); const [submitted, setSubmitted] = React.useState(false); const [showHint, setShowHint] = React.useState(false); const [showExit, setShowExit] = React.useState(false); const step = 3, total = 5; const options = [ { id: 'a', text: '"Tolong tulis email maaf untuk client kami."', correct: false, hint: 'Terlalu umum — AI nggak tau tone, konteks, atau format.' }, { id: 'b', text: '"Kamu adalah manajer profesional. Client kami kecewa karena deadline terlewat 2 hari. Tulis email permintaan maaf yang tulus, formal, dan sertakan rencana perbaikan konkret."', correct: true, hint: 'Persona + konteks + format = sempurna!' }, { id: 'c', text: '"Buatkan email yang sopan untuk client yang marah."', correct: false, hint: '"Sopan" itu subjektif — AI perlu guidance lebih.' }, { id: 'd', text: '"Email apology: client kecewa, deadline terlewat, minta maaf, ada solusi."', correct: false, hint: 'Pendek, tapi kurang konteks dan persona.' }, ]; const current = selected ? options.find(o => o.id === selected) : null; const isCorrect = submitted && current?.correct; return (
{/* Header */}
{step}/{total}
Prompt Engineering · Challenge
{/* Question */}
Prompt mana yang paling efektif?
Kamu project manager. Mau AI buatin email apology ke client yang profesional.
{/* Options */}
{options.map(opt => { const isSel = selected === opt.id; const showResult = submitted && isSel; return ( ); })} {showHint && current && (
{LIcon.lightbulb(14,'#FFC400')}
Hint: {current.hint}
)}
{/* Bottom action */}
{submitted && (
{isCorrect ? '✓ Mantap! Persona + konteks = prompt juara.' : '✗ Belum pas. Persona dan konteks harus spesifik.'}
)}
{!submitted && ( )}
{/* Exit sheet */} {showExit && (
setShowExit(false)}>
e.stopPropagation()} style={{ width: '100%', background: 'var(--surface-2)', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '18px 16px 32px', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
Yakin keluar?
Progress lesson ini bakal hilang. Streak lu aman sampai jam 23:59 WIB.
)}
); } // ── L03 Quiz Result ─────────────────────────────────────────────────────────── function ScreenL03({ onNavigate }) { const [showXP, setShowXP] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setShowXP(true), 600); return () => clearTimeout(t); }, []); return (
✅
Mantap!
Lesson selesai · Streak aman
{/* Score */}
85/100
Skor Anda
{showXP && (
+50 XP
)}
{/* Streak update */}
🔥
+1 hari · 8 hari total
2 hari lagi ke milestone 🏅
{/* AI Feedback */}
AI FEEDBACK
{[ { icon: '✅', label: 'Yang bagus', text: 'Anda memahami pentingnya konteks dalam prompt dan memilih jawaban yang paling spesifik.' }, { icon: '📈', label: 'Bisa diperbaiki', text: 'Coba tambah instruksi format output (e.g. "3 paragraf singkat") untuk hasil yang lebih konsisten.' }, { icon: '💡', label: 'Tip berikutnya', text: 'Pelajari "role prompting" — memberi AI persona spesifik meningkatkan kualitas output 40%.' }, ].map((f, i) => (
{f.icon}
{f.label}
{f.text}
))}
{/* Level progress */}
Level 2 → Level 3 240 / 400 XP
onNavigate('L01')} fullWidth>Lesson Berikutnya → onNavigate('L01')}>Balik ke Home
); } // ── L04 Skill Path (hex-node tree) ──────────────────────────────────────────── function ScreenL04({ onNavigate }) { const nodes = [ { id: 1, label: 'Dasar ChatGPT', status: 'done' }, { id: 2, label: 'Prompt Dasar', status: 'done' }, { id: 3, label: 'Output Format', status: 'done' }, { id: 4, label: 'Prompt Patterns', status: 'done' }, { id: 5, label: 'Chain-of-Thought', status: 'current' }, { id: 6, label: 'Content Generation', status: 'locked' }, { id: 7, label: 'Iklan Copy', status: 'locked' }, { id: 8, label: 'Riset Audience', status: 'locked' }, { id: 9, label: 'A/B Test dgn AI', status: 'locked' }, { id: 10, label: 'Otomasi Email', status: 'locked' }, { id: 11, label: 'Zapier + AI', status: 'locked' }, { id: 12, label: 'Certification', status: 'locked', boss: true }, ]; const cols = [52, 140, 228]; const pattern = [1, 2, 1, 0, 1, 2, 1, 0, 1, 2, 1, 1]; const positioned = nodes.map((n, i) => ({ ...n, x: cols[pattern[i]], y: 30 + i * 88 })); const totalH = positioned[positioned.length - 1].y + 110; const currentNode = positioned.find(n => n.status === 'current'); const HexNode = ({ node }) => { const isDone = node.status === 'done'; const isCurrent = node.status === 'current'; const isLocked = node.status === 'locked'; const size = node.boss ? 72 : 62; const half = size / 2; const fill = (isDone || isCurrent) ? 'var(--accent)' : 'var(--surface-2)'; const shadow = (isDone || isCurrent) ? 'var(--accent-deep)' : '#1a2030'; const iconColor = (isDone || isCurrent) ? '#0B0F14' : 'var(--text-dim)'; const labelColor = isCurrent ? 'var(--accent)' : (isDone ? 'var(--text)' : 'var(--text-dim)'); return (
!isLocked && onNavigate('L02')} style={{ position: 'absolute', left: node.x - half, top: node.y - half, width: size, height: size, cursor: isLocked ? 'default' : 'pointer' }}> {isCurrent && (
)} {!isLocked && (
)}
{isDone && LIcon.check(node.boss ? 30 : 24, iconColor)} {isCurrent && LIcon.play(node.boss ? 28 : 22, iconColor)} {isLocked && !node.boss && LIcon.lock(20, iconColor)} {isLocked && node.boss && LIcon.trophy(26, iconColor)}
{!isLocked && (
)}
{node.label}
); }; const connectors = []; for (let i = 0; i < positioned.length - 1; i++) { const a = positioned[i], b = positioned[i+1]; connectors.push( ); } return (
{/* Header */}
AI untuk Marketer
4 dari 12 pelajaran selesai
40%
{/* Canvas */}
{connectors} {positioned.map(n => )} {currentNode && (
Tinggal 3 lesson lagi sampai level berikutnya 💪
)}
); } // ── L05 Liga / Leaderboard ──────────────────────────────────────────────────── function ScreenL05({ onNavigate }) { const entries = [ { rank: 1, name: 'Rina Wulandari', meta: 'UI/UX · Jakarta', xp: 4820, trend: 'up', medal: 'gold' }, { rank: 2, name: 'Budi Prasetyo', meta: 'Growth · Bandung', xp: 4230, trend: 'up', medal: 'silver' }, { rank: 3, name: 'Citra Mahendra', meta: 'Content · Surabaya', xp: 3980, trend: 'same', medal: 'bronze' }, { rank: 4, name: 'Aditya Nugroho', meta: 'PM · Jakarta', xp: 3540, trend: 'up' }, { rank: 5, name: 'Fajar Hidayat', meta: 'Data · Tangerang', xp: 3210, trend: 'down' }, { rank: 6, name: 'Sarah Putri', meta: 'Marketing · Depok', xp: 2890, trend: 'up' }, { rank: 7, name: 'Rayis Ananda', meta: 'Lu', xp: 2340, trend: 'up', you: true }, { rank: 8, name: 'Randi Kusuma', meta: 'SEO · Jakarta', xp: 2180, trend: 'down' }, { rank: 9, name: 'Tika Handayani', meta: 'Ops · Semarang', xp: 1950, trend: 'same' }, { rank: 10, name: 'Yoga Pratama', meta: 'BD · Medan', xp: 1720, trend: 'down' }, ]; const medalColor = { gold: '#FFC400', silver: '#B8C0CC', bronze: '#D48556' }; return (
{/* Hero header */}
{LIcon.trophy(26,'#0B0F14')}
Liga Perak
{LIcon.clock(11,'var(--text-muted)')} 3 hari 4 jam tersisa
{[1,2,3,4,5,6,7].map(i => (
))}
{LIcon.arrowUp(10,'#7BED6F')}Top 5 → Liga Emas
{LIcon.arrowDown(10,'#FF4B91')}Btm 3
{/* Leaderboard */}
{entries.map((e, i) => (
{e.rank === 5 &&
} {e.rank === 7 &&
} {/* Rank */}
{e.medal ? (
{e.rank}
) : e.rank}
{/* Avatar */}
{e.name.split(' ').map(n=>n[0]).slice(0,2).join('')}
{e.you ? 'Lu' : e.name}
{e.meta}
{e.trend === 'up' && LIcon.arrowUp(11,'#7BED6F')} {e.trend === 'down' && LIcon.arrowDown(11,'#FF4B91')} {e.trend === 'same' &&
}
{e.xp.toLocaleString()}XP
))}
🚀
Naik 3 liga kalo lu masuk Top 5 minggu ini. Tinggal 870 XP lagi!
); } // ── L06 Profile ─────────────────────────────────────────────────────────────── function ScreenL06({ onNavigate }) { const stats = [ { icon: '🔥', label: 'Streak', value: '7', unit: 'hari' }, { icon: '⚡', label: 'Total XP', value: '2,340', unit: 'xp' }, { icon: '📚', label: 'Lesson', value: '14', unit: 'selesai' }, { icon: '🏆', label: 'Level', value: '2', unit: 'AI-Fluent' }, ]; const badges = [ { icon: '🔥', label: '7-Day Streak', done: true }, { icon: '⚡', label: '2000 XP', done: true }, { icon: '🎯', label: 'First Quiz', done: true }, { icon: '🚀', label: '30-Day', done: false }, { icon: '💎', label: 'Level 3', done: false }, { icon: '🏅', label: 'Top 10', done: false }, ]; return (
{/* Hero */}
Rayis Ananda
Product · PT Acme
{/* Stats grid */}
{stats.map(s => (
{s.icon}
{s.value}
{s.unit}
))}
{/* XP progress */}
Level 2 → Level 3 240 / 400 XP
160 XP lagi untuk naik level 🎯
{/* Badges */}
BADGE
{badges.map(b => (
{b.done ? b.icon : '🔒'}
{b.label}
))}
{/* Settings row */}
{[ { icon: '🎯', label: 'Goals & Target' }, { icon: '🔔', label: 'Notifikasi' }, { icon: '🌙', label: 'Preferensi' }, ].map((item, i, arr) => (
e.currentTarget.style.background='var(--bg-soft)'} onMouseLeave={e => e.currentTarget.style.background='transparent'}> {item.icon} {item.label}
))}
); } Object.assign(window, { ScreenL01, ScreenL02, ScreenL03, ScreenL04, ScreenL05, ScreenL06, BottomNav, LIcon, Mascot });