function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation }) { const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback(function(patch) { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData(Object.assign({}, data || {}, patch)); } }, [isMultiplayer, patchSharedData, setData, data]); var memberList = (isMultiplayer && members && (members || []).length > 0) ? members : [ { id: user.id, displayName: user.name || 'You', handle: user.handle, avatarUrl: user.avatarUrl, role: 'owner' } ]; var TOTAL_ROUNDS = 5; var ROUND_TIME = 60; var sharedDataRef = useRef(sharedData); var dataRef = useRef(data); useEffect(function() { sharedDataRef.current = sharedData; }, [sharedData]); useEffect(function() { dataRef.current = data; }, [data]); var getLatest = useCallback(function() { return isMultiplayer ? (sharedDataRef.current || {}) : (dataRef.current || {}); }, [isMultiplayer]); var [expression, setExpression] = useState(''); var [feedback, setFeedback] = useState(null); var [shakeInput, setShakeInput] = useState(false); var [showConfetti, setShowConfetti] = useState(false); var [showWinner, setShowWinner] = useState(null); var [showChampion, setShowChampion] = useState(null); var [timer, setTimer] = useState(ROUND_TIME); var [personalBest, setPersonalBest] = useState(null); var [roundStartTime, setRoundStartTime] = useState(Date.now()); var inputRef = useRef(null); function generateNumbers() { var sets = [ [1,2,3,4],[1,3,5,7],[1,4,5,6],[1,5,7,8],[1,6,7,8], [2,3,4,6],[2,3,7,8],[2,4,6,8],[3,3,4,6],[3,3,8,8], [1,2,7,8],[2,3,5,8],[1,3,6,8],[2,5,5,8],[3,4,5,6], [4,4,5,8],[1,4,6,7],[2,6,7,7],[3,5,6,6],[4,5,6,9] ]; return sets[Math.floor(Math.random() * (sets || []).length)]; } function safeEvaluate(expr) { var cleaned = expr.replace(/\s/g, '').replace(/x/gi, '*').replace(/×/g, '*').replace(/÷/g, '/'); if (!/^[\d+\-*/().]+$/.test(cleaned)) throw new Error('Invalid characters'); var pos = 0; function parseNumber() { var numStr = ''; var hasDec = false; while (pos < (cleaned || []).length && /[\d.]/.test(cleaned[pos])) { if (cleaned[pos] === '.') { if (hasDec) throw new Error('bad'); hasDec = true; } numStr += cleaned[pos]; pos++; } if (!numStr || numStr === '.') throw new Error('Expected number'); return parseFloat(numStr); } function parseFactor() { if (cleaned[pos] === '(') { pos++; var r = parseExpression(); if (cleaned[pos] !== ')') throw new Error('Missing )'); pos++; return r; } if (cleaned[pos] === '-') { pos++; return -parseFactor(); } return parseNumber(); } function parseTerm() { var left = parseFactor(); while (pos < (cleaned || []).length && (cleaned[pos] === '*' || cleaned[pos] === '/')) { var op = cleaned[pos]; pos++; var right = parseFactor(); if (op === '/' && right === 0) throw new Error('Div zero'); left = op === '*' ? left * right : left / right; } return left; } function parseExpression() { var left = parseTerm(); while (pos < (cleaned || []).length && (cleaned[pos] === '+' || cleaned[pos] === '-')) { var op = cleaned[pos]; pos++; var right = parseTerm(); left = op === '+' ? left + right : left - right; } return left; } var result = parseExpression(); if (pos !== (cleaned || []).length) throw new Error('Unexpected char'); return result; } function extractNumbers(expr) { var cleaned = expr.replace(/\s/g, '').replace(/x/gi, '*').replace(/×/g, '*').replace(/÷/g, '/'); var nums = cleaned.match(/\d+\.?\d*/g); if (!nums) return []; return (nums || []).map(Number); } function arraysMatchSorted(a, b) { if ((a || []).length !== (b || []).length) return false; var sa = (a || []).slice().sort(function(x, y) { return x - y; }); var sb = (b || []).slice().sort(function(x, y) { return x - y; }); for (var i = 0; i < (sa || []).length; i++) { if (sa[i] !== sb[i]) return false; } return true; } var gameState = appData?.game || null; var scores = appData?.scores || {}; var currentRound = gameState?.currentRound || 0; var numbers = gameState?.numbers || [1, 2, 3, 4]; var roundSolvedBy = gameState?.roundSolvedBy || null; var matchOver = gameState?.matchOver || false; var roundActive = gameState?.roundActive || false; var roundEndTime = gameState?.roundEndTime || 0; var practiceMode = !gameState || matchOver; var [practiceNumbers, setPracticeNumbers] = useState(generateNumbers); var [practiceScore, setPracticeScore] = useState(0); useEffect(function() { if (!roundActive || roundSolvedBy || matchOver) return; var interval = setInterval(function() { var remaining = Math.max(0, Math.ceil((roundEndTime - Date.now()) / 1000)); setTimer(remaining); if (remaining <= 0) { clearInterval(interval); if (isMultiplayer) { var latest = getLatest(); var g = latest.game || {}; if (g.roundActive && !g.roundSolvedBy) { var nextRound = (g.currentRound || 0) + 1; if (nextRound >= TOTAL_ROUNDS) { patchSharedData({ game: Object.assign({}, g, { roundActive: false, matchOver: true }) }); } else { var newNums = generateNumbers(); patchSharedData({ game: { currentRound: nextRound, numbers: newNums, roundSolvedBy: null, roundActive: true, roundEndTime: Date.now() + ROUND_TIME * 1000, matchOver: false } }); } } } } }, 250); return function() { clearInterval(interval); }; }, [roundActive, roundEndTime, roundSolvedBy, matchOver, isMultiplayer, getLatest, patchSharedData]); function startMatch() { var newNums = generateNumbers(); var initScores = {}; (memberList || []).forEach(function(m) { initScores[m.id] = 0; }); var newGame = { currentRound: 0, numbers: newNums, roundSolvedBy: null, roundActive: true, roundEndTime: Date.now() + ROUND_TIME * 1000, matchOver: false }; if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData({ game: newGame, scores: initScores }); } else { setData(Object.assign({}, data || {}, { game: newGame, scores: initScores })); } setExpression(''); setFeedback(null); setShowChampion(null); setRoundStartTime(Date.now()); setTimer(ROUND_TIME); } function handleSubmitPractice() { if (!expression.trim()) return; var usedNums = extractNumbers(expression); if (!arraysMatchSorted(usedNums, practiceNumbers)) { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); return; } try { var result = safeEvaluate(expression); if (Math.abs(result - 24) < 0.001) { setFeedback('correct'); setShowConfetti(true); var solveTime = ((Date.now() - roundStartTime) / 1000).toFixed(1); var newScore = practiceScore + 1; setPracticeScore(newScore); if (!personalBest || parseFloat(solveTime) < personalBest) { setPersonalBest(parseFloat(solveTime)); } setTimeout(function() { setShowConfetti(false); setFeedback(null); setPracticeNumbers(generateNumbers()); setExpression(''); setRoundStartTime(Date.now()); }, 1500); } else { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); } } catch (e) { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); } } function handleSubmitMatch() { if (!expression.trim() || roundSolvedBy || !roundActive) return; var usedNums = extractNumbers(expression); if (!arraysMatchSorted(usedNums, numbers)) { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); return; } try { var result = safeEvaluate(expression); if (Math.abs(result - 24) < 0.001) { setFeedback('correct'); setShowConfetti(true); var solverName = user.name || 'You'; setShowWinner(solverName); var latest = getLatest(); var latestScores = Object.assign({}, latest.scores || {}); latestScores[user.id] = (latestScores[user.id] || 0) + 1; var latestGame = Object.assign({}, latest.game || {}); latestGame.roundSolvedBy = { id: user.id, name: solverName, expression: expression, _user: { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.profileImageUrl || user.avatarUrl }, _timestamp: Date.now() }; latestGame.roundActive = false; if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData({ game: latestGame, scores: latestScores }); } else { setData(Object.assign({}, latest, { game: latestGame, scores: latestScores })); } setTimeout(function() { setShowConfetti(false); setShowWinner(null); setFeedback(null); var lat2 = getLatest(); var g2 = lat2.game || {}; var nextRound = (g2.currentRound || 0) + 1; if (nextRound >= TOTAL_ROUNDS) { var finalGame = Object.assign({}, g2, { matchOver: true, roundActive: false }); var finalScores = lat2.scores || {}; var maxScore = 0; var champId = null; Object.keys(finalScores || {}).forEach(function(pid) { if (finalScores[pid] > maxScore) { maxScore = finalScores[pid]; champId = pid; } }); var champMember = (memberList || []).find(function(m) { return m.id === champId; }); setShowChampion(champMember ? champMember.displayName : 'Unknown'); if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData({ game: finalGame }); } else { setData(Object.assign({}, lat2, { game: finalGame })); } } else { var newNums = generateNumbers(); var nextGame = { currentRound: nextRound, numbers: newNums, roundSolvedBy: null, roundActive: true, roundEndTime: Date.now() + ROUND_TIME * 1000, matchOver: false }; if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData({ game: nextGame }); } else { setData(Object.assign({}, lat2, { game: nextGame })); } setRoundStartTime(Date.now()); setTimer(ROUND_TIME); } setExpression(''); }, 2000); } else { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); } } catch (e) { setFeedback('wrong'); setShakeInput(true); setTimeout(function() { setShakeInput(false); }, 500); } } function handleSubmit(e) { if (e) e.preventDefault(); if (practiceMode) { handleSubmitPractice(); } else { handleSubmitMatch(); } } var displayNumbers = practiceMode ? practiceNumbers : numbers; var displayTimer = practiceMode ? null : timer; var confettiPieces = useMemo(function() { var pieces = []; for (var i = 0; i < 30; i++) { pieces.push({ left: Math.random() * 100, delay: Math.random() * 0.5, color: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'][i % 6], size: 6 + Math.random() * 8 }); } return pieces; }, []); var scoreEntries = Object.keys(scores || {}).map(function(pid) { var mem = (memberList || []).find(function(m) { return m.id === pid; }); return { id: pid, name: mem ? mem.displayName : 'Player', handle: mem ? mem.handle : '', score: scores[pid] || 0 }; }).sort(function(a, b) { return b.score - a.score; }); var bgColor = '#C0C0C0'; var borderOutset = '3px outset #FFFFFF'; var borderInset = '3px inset #808080'; var headerBg = '#000080'; var headerColor = '#FFFFFF'; var accentRed = '#FF0000'; var accentGreen = '#00FF00'; var accentBlue = '#0000FF'; var buttonFace = '#C0C0C0'; var fontMain = 'Arial, Helvetica, sans-serif'; var fontHeader = '"Arial Black", "Impact", sans-serif'; var fontMono = '"Courier New", monospace'; var containerStyle = { minHeight: '100dvh', display: 'flex', flexDirection: 'column', paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 8px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 8px)', maxWidth: 480, margin: '0 auto', width: '100%', boxSizing: 'border-box', background: '#008080', fontFamily: fontMain, fontSize: 16 }; var windowStyle = { background: bgColor, border: borderOutset, margin: '0 0 8px 0' }; var titleBarStyle = { background: headerBg, color: headerColor, padding: '4px 8px', fontFamily: fontHeader, fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }; var windowBodyStyle = { padding: 12 }; var buttonStyle = { background: buttonFace, border: borderOutset, padding: '8px 16px', fontFamily: fontMain, fontSize: 16, fontWeight: 700, cursor: 'pointer', minHeight: 48, minWidth: 48 }; var inputStyle = { width: '100%', height: 48, fontSize: 18, fontFamily: fontMono, padding: '0 12px', border: '3px inset #808080', background: '#FFFFFF', boxSizing: 'border-box', outline: 'none' }; if (shakeInput) { inputStyle.borderColor = accentRed; } if (feedback === 'correct') { inputStyle.borderColor = accentGreen; inputStyle.background = '#CCFFCC'; } var numbersDisplay = (displayNumbers || []).map(function(n, i) { return React.createElement('div', { key: i, style: { width: 64, height: 64, background: '#FFFFFF', border: '3px inset #808080', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, fontWeight: 900, fontFamily: fontHeader, color: accentBlue } }, n); }); var timerSection = null; if (!practiceMode && displayTimer !== null) { var timerColor = displayTimer <= 10 ? accentRed : '#000000'; timerSection = React.createElement('div', { style: { textAlign: 'center', marginBottom: 8, fontFamily: fontMono, fontSize: 24, fontWeight: 900, color: timerColor } }, '⏱ ' + displayTimer + 's'); } var feedbackSection = null; if (feedback === 'wrong') { feedbackSection = React.createElement('div', { style: { textAlign: 'center', color: accentRed, fontWeight: 700, fontSize: 16, marginTop: 8, fontFamily: fontHeader } }, '❌ WRONG! Try again...'); } if (feedback === 'correct') { feedbackSection = React.createElement('div', { style: { textAlign: 'center', color: '#008000', fontWeight: 700, fontSize: 18, marginTop: 8, fontFamily: fontHeader } }, '✅ SOLVED! 🎉🎉🎉'); } var confettiOverlay = null; if (showConfetti) { confettiOverlay = React.createElement('div', { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', zIndex: 9999, overflow: 'hidden' } }, (confettiPieces || []).map(function(p, i) { return React.createElement('div', { key: i, style: { position: 'absolute', left: p.left + '%', top: -20, width: p.size, height: p.size, background: p.color, animation: 'confettiFall 1.5s ease-in forwards', animationDelay: p.delay + 's' } }); })); } var winnerBanner = null; if (showWinner) { winnerBanner = React.createElement('div', { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,128,0.85)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 9998, color: '#FFFF00', fontFamily: fontHeader, textAlign: 'center' } }, React.createElement('div', { style: { fontSize: 48 } }, '🏆'), React.createElement('div', { style: { fontSize: 32, fontWeight: 900, marginTop: 8 } }, 'WINNER!'), React.createElement('div', { style: { fontSize: 22, marginTop: 8, color: '#FFFFFF' } }, showWinner + ' solved it first!') ); } var championOverlay = null; if (showChampion) { championOverlay = React.createElement('div', { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(128,0,0,0.92)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 10000, color: '#FFFF00', fontFamily: fontHeader, textAlign: 'center', padding: 24 } }, React.createElement('div', { style: { fontSize: 64 } }, '👑'), React.createElement('div', { style: { fontSize: 36, fontWeight: 900, marginTop: 12 } }, 'MATCH CHAMPION'), React.createElement('div', { style: { fontSize: 24, marginTop: 12, color: '#FFFFFF' } }, showChampion), React.createElement('div', { style: { fontSize: 18, marginTop: 8, color: '#FFD700' } }, '🎉 Congratulations! 🎉'), React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap', justifyContent: 'center' } }, React.createElement('button', { onClick: function() { setShowChampion(null); }, style: Object.assign({}, buttonStyle, { fontSize: 18, color: '#000000', padding: '10px 24px' }) }, 'OK'), React.createElement('button', { onClick: function() { share(); }, style: Object.assign({}, buttonStyle, { fontSize: 18, color: '#FFFFFF', background: '#000080', padding: '10px 24px' }) }, '📤 Share Results') ) ); } var styleTag = React.createElement('style', null, '@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }'); var headerWindow = React.createElement('div', { style: windowStyle }, React.createElement('div', { style: titleBarStyle }, React.createElement('span', null, '🎮 24 GAME'), React.createElement('div', { style: { display: 'flex', gap: 4 } }, React.createElement('button', { onClick: share, style: { background: buttonFace, border: borderOutset, fontSize: 12, padding: '2px 8px', cursor: 'pointer', fontWeight: 700, minHeight: 24 } }, '📤 Share') ) ), React.createElement('div', { style: Object.assign({}, windowBodyStyle, { padding: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }) }, React.createElement('span', { style: { fontSize: 14, fontWeight: 700 } }, practiceMode ? '🎯 Practice Mode' : ('Round ' + (currentRound + 1) + ' of ' + TOTAL_ROUNDS) ), practiceMode && personalBest !== null ? React.createElement('span', { style: { fontSize: 13, color: '#800000' } }, '⚡ Best: ' + personalBest + 's') : null, practiceMode ? React.createElement('span', { style: { fontSize: 13 } }, '🔥 Streak: ' + practiceScore) : null ) ); var gameWindow = React.createElement('div', { style: windowStyle }, React.createElement('div', { style: titleBarStyle }, React.createElement('span', null, practiceMode ? 'Practice Round' : 'Round ' + (currentRound + 1)) ), React.createElement('div', { style: windowBodyStyle }, timerSection, React.createElement('div', { style: { display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' } }, numbersDisplay), React.createElement('div', { style: { textAlign: 'center', fontSize: 13, color: '#808080', marginBottom: 12 } }, 'Use all 4 numbers with + - × ÷ to make 24' ), roundSolvedBy && !practiceMode ? React.createElement('div', { style: { textAlign: 'center', padding: 12, background: '#FFFFCC', border: '2px solid #FFD700', marginBottom: 12, fontWeight: 700 } }, React.createElement('span', { onClick: function() { if (roundSolvedBy._user && roundSolvedBy._user.handle) openProfile(roundSolvedBy._user.handle); }, style: { cursor: (roundSolvedBy._user && roundSolvedBy._user.handle) ? 'pointer' : 'default', textDecoration: (roundSolvedBy._user && roundSolvedBy._user.handle) ? 'underline' : 'none' } }, '🏆 ' + (roundSolvedBy._user?.displayName || roundSolvedBy.name) + ' solved it: ' + roundSolvedBy.expression)) : null, React.createElement('form', { onSubmit: handleSubmit }, React.createElement('input', { ref: inputRef, value: expression, onChange: function(e) { setExpression(e.target.value); setFeedback(null); }, placeholder: 'e.g. (1+2+3)*4', style: Object.assign({}, inputStyle, shakeInput ? { animation: 'shake 0.3s ease' } : {}), disabled: !!roundSolvedBy && !practiceMode }), React.createElement('button', { type: 'submit', style: Object.assign({}, buttonStyle, { width: '100%', marginTop: 8, background: '#000080', color: '#FFFFFF', fontSize: 18 }), disabled: (!!roundSolvedBy && !practiceMode) || !expression.trim() }, '✅ SUBMIT') ), feedbackSection, practiceMode ? React.createElement('button', { onClick: function() { setPracticeNumbers(generateNumbers()); setExpression(''); setFeedback(null); setRoundStartTime(Date.now()); }, style: Object.assign({}, buttonStyle, { width: '100%', marginTop: 8, fontSize: 14 }) }, '🔄 Skip / New Numbers') : null ) ); var membersWindow = React.createElement('div', { style: windowStyle }, React.createElement('div', { style: titleBarStyle }, React.createElement('span', null, '👥 Players') ), React.createElement('div', { style: windowBodyStyle }, (memberList || []).map(function(m) { var mScore = (scores || {})[m.id] || 0; return React.createElement('div', { key: m.id, onClick: function() { if (m.handle) openProfile(m.handle); }, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 4px', borderBottom: '1px solid #808080', cursor: m.handle ? 'pointer' : 'default' } }, React.createElement('div', { style: { width: 32, height: 32, borderRadius: '50%', border: '2px outset #FFFFFF', background: m.avatarUrl ? 'url(' + m.avatarUrl + ') center/cover' : '#C0C0C0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 } }, !m.avatarUrl ? '👤' : null), React.createElement('span', { style: { flex: 1, fontWeight: 700, fontSize: 14 } }, m.displayName || 'Player'), !practiceMode ? React.createElement('span', { style: { fontFamily: fontMono, fontWeight: 900, fontSize: 18, color: accentBlue } }, mScore) : null ); }), !practiceMode && (scoreEntries || []).length > 0 ? React.createElement('div', { style: { marginTop: 8, padding: 8, background: '#FFFFCC', border: '1px solid #808080' } }, React.createElement('div', { style: { fontWeight: 700, fontSize: 13, marginBottom: 4 } }, '📊 SCOREBOARD'), (scoreEntries || []).map(function(se, idx) { var medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : ' '; return React.createElement('div', { key: se.id, style: { display: 'flex', justifyContent: 'space-between', fontSize: 14, padding: '2px 0' } }, React.createElement('span', null, medal + ' ' + se.name), React.createElement('span', { style: { fontWeight: 900, fontFamily: fontMono } }, se.score + ' wins') ); }) ) : null ) ); var actionSection = React.createElement('div', { style: { padding: 8, flexShrink: 0 } }, practiceMode ? React.createElement('button', { onClick: startMatch, style: Object.assign({}, buttonStyle, { width: '100%', background: '#008000', color: '#FFFFFF', fontSize: 18, padding: '12px 16px' }) }, '🎮 Start ' + TOTAL_ROUNDS + '-Round Match!') : null, React.createElement('button', { onClick: function() { share(); }, style: Object.assign({}, buttonStyle, { width: '100%', marginTop: 8, background: '#000080', color: '#FFFFFF', fontSize: 16, padding: '10px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }) }, '📤 Share & Invite Friends') ); return React.createElement('div', { style: containerStyle }, styleTag, confettiOverlay, winnerBanner, championOverlay, headerWindow, React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' } }, gameWindow, membersWindow ), actionSection ); }