/* Sims-style mini scene โ€” characters wander, chat bubbles, click to move */ const CHARS = [ { id: 'c1', name: 'Alex', color: '#22d3ee', x: 25, y: 55, role: '๐Ÿ‘จโ€๐Ÿ’ป', lines: ['Shipping v2!', 'Push to prod ๐Ÿš€', 'Reviewing the PR'] }, { id: 'c2', name: 'Maya', color: '#f472b6', x: 45, y: 35, role: '๐ŸŽจ', lines: ['New mockups โœจ', 'Need feedback', 'Loving the cyan'] }, { id: 'c3', name: 'Ethan', color: '#a78bfa', x: 65, y: 60, role: 'โ›“๏ธ', lines: ['Block #482,113', 'Smart contract OK', 'Gas optimized'] }, { id: 'c4', name: 'Sofia', color: '#fbbf24', x: 75, y: 30, role: '๐Ÿง ', lines: ['AI agent trained', 'Token economy', 'Mint ready'] }, ]; const SimsGame = () => { const [chars, setChars] = React.useState(CHARS); const [bubbles, setBubbles] = React.useState([]); const stageRef = React.useRef(null); const bubbleId = React.useRef(0); // Random bubbles React.useEffect(() => { const id = setInterval(() => { const ch = chars[Math.floor(Math.random() * chars.length)]; const line = ch.lines[Math.floor(Math.random() * ch.lines.length)]; const bid = ++bubbleId.current; setBubbles(b => [...b, { id: bid, char: ch.id, text: line }]); setTimeout(() => setBubbles(b => b.filter(x => x.id !== bid)), 2400); }, 2200); return () => clearInterval(id); }, [chars]); // Auto wander React.useEffect(() => { const id = setInterval(() => { setChars(prev => prev.map(c => ({ ...c, x: Math.max(8, Math.min(88, c.x + (Math.random() - 0.5) * 14)), y: Math.max(15, Math.min(80, c.y + (Math.random() - 0.5) * 10)), }))); }, 2600); return () => clearInterval(id); }, []); // Click stage = move nearest character there const onStageClick = (e) => { if (!stageRef.current) return; const rect = stageRef.current.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; // find nearest setChars(prev => { let bestI = 0, bestD = Infinity; prev.forEach((c, i) => { const dx = c.x - x, dy = c.y - y; const d = dx * dx + dy * dy; if (d < bestD) { bestD = d; bestI = i; } }); return prev.map((c, i) => i === bestI ? { ...c, x, y } : c); }); }; return (
{/* Status bar */}
9:41 GameHub ยท Web4 Town โ—โ—โ— 100%
{/* HUD */}
PLAYERS {chars.length}
COINS 1,248
QUESTS 3 / 5
{/* Stage */}
{chars.map(c => { const bubble = bubbles.find(b => b.char === c.id); return (
{bubble &&
{bubble.text}
}
{c.role}
{c.name}
); })}
tap anywhere โ†’ nearest character moves
{/* Bottom controls */}
); }; const SimsStageBg = () => ( {/* decorative trees / buildings */} {/* paths */} ); Object.assign(window, { SimsGame });