import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Terminal, Zap, Database, ArrowRight, Activity } from 'lucide-react'; // --- Constants & Types --- const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#0f172a', grid: '#1e293b', primary: '#38bdf8', // Cyan secondary: '#f472b6', // Pink accent: '#facc15', // Yellow text: '#e2e8f0', muted: '#475569', stackBg: 'rgba(30, 41, 59, 0.5)', }; type TokenType = 'operand' | 'operator' | 'parenthesis'; type Location = 'input' | 'stack' | 'output' | 'discarded'; interface Token { id: string; value: string; type: TokenType; precedence: number; } interface VisualToken extends Token { location: Location; index: number; // Position within its location (array index) } // Infix Expression: A * ( B + C ) - D const INITIAL_EXPRESSION: Token[] = [ { id: 't1', value: 'A', type: 'operand', precedence: 0 }, { id: 't2', value: '*', type: 'operator', precedence: 2 }, { id: 't3', value: '(', type: 'parenthesis', precedence: 0 }, { id: 't4', value: 'B', type: 'operand', precedence: 0 }, { id: 't5', value: '+', type: 'operator', precedence: 1 }, { id: 't6', value: 'C', type: 'operand', precedence: 0 }, { id: 't7', value: ')', type: 'parenthesis', precedence: 0 }, { id: 't8', value: '-', type: 'operator', precedence: 1 }, { id: 't9', value: 'D', type: 'operand', precedence: 0 }, ]; export default function InfixToPostfixAnimation() { // --- State --- const [tokens, setTokens] = useState([]); const [highlightId, setHighlightId] = useState(null); const [message, setMessage] = useState('Initializing System...'); const [isRunning, setIsRunning] = useState(false); const [systemTime, setSystemTime] = useState(0); // Refs for logic loop const processingRef = useRef(false); // --- Initialization --- useEffect(() => { // Initial setup of tokens in 'input' const initialVisuals = INITIAL_EXPRESSION.map((t, i) => ({ ...t, location: 'input' as Location, index: i, })); setTokens(initialVisuals); setMessage('Ready. Waiting for command.'); }, []); // --- Background Animation Loop --- useEffect(() => { let frameId: number; const animate = () => { setSystemTime((prev) => prev + 0.05); frameId = requestAnimationFrame(animate); }; frameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(frameId); }, []); // --- Helper: Sleep --- const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); // --- Helper: Update Token Location --- const moveToken = (id: string, to: Location, newIndex: number) => { setTokens((prev) => prev.map((t) => { if (t.id === id) { return { ...t, location: to, index: newIndex }; } // Adjust indices for other items if necessary (simple version: just re-index logic in main loop) return t; }) ); }; const reindexLocation = (loc: Location, excludeId: string | null = null) => { setTokens((prev) => { const items = prev.filter((t) => t.location === loc && t.id !== excludeId); // Sort by their current index to maintain order items.sort((a, b) => a.index - b.index); const newTokens = [...prev]; items.forEach((item, idx) => { const tokenIndex = newTokens.findIndex(t => t.id === item.id); if (tokenIndex !== -1) { newTokens[tokenIndex] = { ...newTokens[tokenIndex], index: idx }; } }); return newTokens; }); }; // --- The Algorithm (Main Logic) --- useEffect(() => { const run = async () => { if (processingRef.current || tokens.length === 0 || isRunning) return; setIsRunning(true); processingRef.current = true; await sleep(1000); setMessage('Starting Infix to Postfix Conversion...'); await sleep(1000); const stack: string[] = []; // Stores IDs const output: string[] = []; // Stores IDs const inputIds = INITIAL_EXPRESSION.map((t) => t.id); // Local helper to get current visual state const getTopStackId = () => stack.length > 0 ? stack[stack.length - 1] : null; const getToken = (id: string) => INITIAL_EXPRESSION.find(t => t.id === id)!; for (let i = 0; i < inputIds.length; i++) { const currentId = inputIds[i]; const token = getToken(currentId); setHighlightId(currentId); setMessage(`Scanning token: ${token.value}`); await sleep(800); if (token.type === 'operand') { setMessage(`Operand '${token.value}': Move directly to Output.`); output.push(currentId); moveToken(currentId, 'output', output.length - 1); await sleep(1000); } else if (token.value === '(') { setMessage(`Left Parenthesis: Push to Stack.`); stack.push(currentId); moveToken(currentId, 'stack', stack.length - 1); await sleep(1000); } else if (token.value === ')') { setMessage(`Right Parenthesis: Pop Stack until '(' found.`); let topId = getTopStackId(); while (topId && getToken(topId).value !== '(') { // Pop to output stack.pop(); output.push(topId); moveToken(topId, 'output', output.length - 1); setMessage(`Popping '${getToken(topId).value}' to Output.`); await sleep(800); topId = getTopStackId(); } if (topId && getToken(topId).value === '(') { // Discard the '(' setMessage(`Discarding matching '(' and ')'.`); stack.pop(); moveToken(topId, 'discarded', 0); // Fly away moveToken(currentId, 'discarded', 0); // Fly away await sleep(800); } } else { // Operator setMessage(`Operator '${token.value}': Check precedence.`); let topId = getTopStackId(); while ( topId && getToken(topId).value !== '(' && getToken(topId).precedence >= token.precedence ) { setMessage(`Stack top '${getToken(topId).value}' >= '${token.value}'. Pop stack.`); stack.pop(); output.push(topId); moveToken(topId, 'output', output.length - 1); await sleep(800); topId = getTopStackId(); } setMessage(`Pushing '${token.value}' to Stack.`); stack.push(currentId); moveToken(currentId, 'stack', stack.length - 1); await sleep(1000); } } setMessage('End of Input. Pop remaining Stack operators.'); while (stack.length > 0) { const topId = stack.pop()!; output.push(topId); moveToken(topId, 'output', output.length - 1); await sleep(600); } setHighlightId(null); setMessage('Conversion Complete. Result: Postfix Expression.'); setIsRunning(false); }; // Trigger run only once when tokens are ready and user hasn't interacted if (tokens.length > 0 && !processingRef.current) { run(); } }, [tokens, isRunning]); // --- Render Helpers --- const getTokenColor = (type: TokenType) => { switch (type) { case 'operand': return COLORS.primary; case 'operator': return COLORS.secondary; case 'parenthesis': return COLORS.accent; default: return COLORS.text; } }; const getPosition = (loc: Location, idx: number) => { const inputY = 150; const outputY = 150; const stackBaseX = 250; const stackBaseY = 550; const gap = 70; switch (loc) { case 'input': return { x: 450 + idx * gap, y: inputY }; case 'output': return { x: 450 + idx * gap, y: outputY + 250 }; // Lower section case 'stack': return { x: stackBaseX, y: stackBaseY - idx * 60 }; case 'discarded': return { x: WIDTH + 100, y: -100 }; // Fly off screen default: return { x: 0, y: 0 }; } }; return (

{/* Background Grid */} {/* Animated Elements Layer */} {/* UI Overlay */}

SHUNTING_YARD_ALGO_V1.0

{isRunning ? 'PROCESSING' : 'IDLE'}

{/* Status Log Box */}

{message}

{/* Legend */}

Operand

Operator

Parenthesis

{/* Floating Particles (Decor) */}

); }