import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const BACKGROUND_COLOR = '#0f172a'; const ACCENT_COLOR = '#38bdf8'; const TEXT_COLOR = '#e2e8f0'; // --- Data & Configuration --- const ELEMENT_DATA = [ { z: 1, s: 'H', n: 'Hydrogen', cat: 'Nonmetal', desc: 'The Sun / Fuel', col: 1, row: 1 }, { z: 2, s: 'He', n: 'Helium', cat: 'Noble Gas', desc: 'Balloons', col: 18, row: 1 }, { z: 3, s: 'Li', n: 'Lithium', cat: 'Alkali Metal', desc: 'Batteries', col: 1, row: 2 }, { z: 6, s: 'C', n: 'Carbon', cat: 'Nonmetal', desc: 'Life / Diamond', col: 14, row: 2 }, { z: 7, s: 'N', n: 'Nitrogen', cat: 'Nonmetal', desc: 'Atmosphere / DNA', col: 15, row: 2 }, { z: 8, s: 'O', n: 'Oxygen', cat: 'Nonmetal', desc: 'Respiration', col: 16, row: 2 }, { z: 10, s: 'Ne', n: 'Neon', cat: 'Noble Gas', desc: 'Neon Signs', col: 18, row: 2 }, { z: 11, s: 'Na', n: 'Sodium', cat: 'Alkali Metal', desc: 'Salt (NaCl)', col: 1, row: 3 }, { z: 13, s: 'Al', n: 'Aluminium', cat: 'Post-transition', desc: 'Cans / Foil', col: 13, row: 3 }, { z: 14, s: 'Si', n: 'Silicon', cat: 'Metalloid', desc: 'Computer Chips', col: 14, row: 3 }, { z: 26, s: 'Fe', n: 'Iron', cat: 'Transition Metal', desc: 'Steel / Industry', col: 8, row: 4 }, { z: 29, s: 'Cu', n: 'Copper', cat: 'Transition Metal', desc: 'Wires / Electronics', col: 11, row: 4 }, { z: 47, s: 'Ag', n: 'Silver', cat: 'Transition Metal', desc: 'Jewelry / Mirrors', col: 11, row: 5 }, { z: 79, s: 'Au', n: 'Gold', cat: 'Transition Metal', desc: 'Currency / Wealth', col: 11, row: 6 }, { z: 92, s: 'U', n: 'Uranium', cat: 'Actinide', desc: 'Nuclear Power', col: 3, row: 7, isActinide: true }, // Special handling for pos ]; // Helper to generate grid positions for the full 118 elements background const generateFullTable = () => { const table = []; // Standard Period Table mapping logic const structure = [ { row: 1, cols: [1, 18] }, { row: 2, cols: [1, 2, 13, 14, 15, 16, 17, 18] }, { row: 3, cols: [1, 2, 13, 14, 15, 16, 17, 18] }, { row: 4, cols: Array.from({ length: 18 }, (_, i) => i + 1) }, { row: 5, cols: Array.from({ length: 18 }, (_, i) => i + 1) }, { row: 6, cols: Array.from({ length: 18 }, (_, i) => i + 1) }, // 57-71 are lanthanides { row: 7, cols: Array.from({ length: 18 }, (_, i) => i + 1) }, // 89-103 are actinides ]; let zCounter = 1; structure.forEach(({ row, cols }) => { cols.forEach(col => { let isSpecial = false; let specialRow = 0; let specialCol = 0; // Logic for Lanthanides/Actinides spacing in grid if (row === 6 && col === 3) { // Range 57-71 for (let k = 0; k < 15; k++) { table.push({ z: 57 + k, row: 9, col: 4 + k, s: '', isSpecial: true }); } zCounter += 15; // Skip the block in main grid logic, just place placeholder return; // The main grid slot for 57-71 is usually represented by the first one or a gap. // For visual simplicity, we just draw the main grid and the bottom rows. } if (row === 7 && col === 3) { for (let k = 0; k < 15; k++) { table.push({ z: 89 + k, row: 10, col: 4 + k, s: '', isSpecial: true }); } zCounter += 15; return; } table.push({ z: zCounter++, row, col, s: '' }); }); }); return table; }; // --- Graphics Components --- const AtomGraphic = ({ type, progress }) => { // Rotate based on progress const rotation = progress * 360; switch (type) { case 'H': // Sun / Hydrogen return ( {/* Solar flares effect */} {[...Array(8)].map((_, i) => ( ))} FUSION ENERGY ); case 'He': // Balloons return ( LIGHTER THAN AIR ); case 'Li': // Battery return ( {/* Charge Level */} ENERGY STORAGE + ); case 'C': // Diamond return ( CRYSTAL LATTICE ); case 'Si': // Chip return ( {/* Pins */} {[...Array(6)].map((_, i) => ( ))} SEMICONDUCTOR ); case 'Au': // Gold Bar return ( 999.9 {/* Sparkle */} PRECIOUS METAL ); case 'U': // Radiation return ( {[0, 120, 240].map(deg => ( ))} RADIOACTIVE ); case 'O': // Oxygen/Leaf return ( {/* Bubbles */} PHOTOSYNTHESIS ); case 'Fe': // Anvil/Gear return ( CONSTRUCTION ); case 'Ne': // Neon Sign return ( OPEN OPEN DISCHARGE TUBE ); case 'Cu': // Wires return ( CONDUCTIVITY ); default: // Generic Atom return ( ELEMENT {type} ); } }; // --- Main Component --- export const PeriodicTableAnimation = () => { const [activeIdx, setActiveIdx] = useState(0); const [progress, setProgress] = useState(0); // Refs for animation loop const requestRef = useRef(); const startTimeRef = useRef(); const duration = 4000; // Time per element // Static data const fullGrid = useMemo(() => generateFullTable(), []); // Loop logic const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; const normalizedProgress = Math.min(elapsed / duration, 1); setProgress(normalizedProgress); if (elapsed >= duration) { // Move to next element in our curated list setActiveIdx((prev) => (prev + 1) % ELEMENT_DATA.length); startTimeRef.current = time; setProgress(0); } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); const currentElement = ELEMENT_DATA[activeIdx]; // Layout constants const CELL_SIZE = 36; const GAP = 4; const TABLE_START_X = 50; const TABLE_START_Y = 100; // Info Panel Position const INFO_X = 800; const INFO_Y = 200; return ( ); };