\n \n\n {showCrossSection && (\n

\n setAppState(prev => ({ \n ...prev, \n crossSection: settings \n }))}\n shape4D={currentShape4D}\n />\n

\n )}\n\n {/* Floating action buttons */}\n

\n setIsAutoRotating(!isAutoRotating)}\n title={isAutoRotating ? 'Stop auto-rotation' : 'Start auto-rotation'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 0.9)';\n }}\n >\n {isAutoRotating ? '⏸️' : '▶️'}\n \n\n setShowCrossSection(!showCrossSection)}\n title={showCrossSection ? 'Hide cross-section' : 'Show cross-section'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 0.9)';\n }}\n >\n ✂️\n \n\n {\n // Reset all transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }}\n title=\"Reset transformations\"\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 0.9)';\n }}\n >\n 🔄\n \n

\n \n {/* Help overlay - shown on first load */}\n

Welcome to Higher Dimensional Geometry!

\n Mouse Controls:
\n • Drag to rotate the camera
\n • Scroll to zoom in/out

\n \n Keyboard Shortcuts:
\n • Space: Toggle auto-rotation
\n • Ctrl+R: Reset transformations
\n • 1-4: Select shape
\n • V: Toggle vertices
\n • E: Toggle edges
\n • F: Toggle faces
\n • W: Toggle wireframe

\n\n Features:
\n • Explore 4D and 5D shapes
\n • Real-time transformations
\n • Cross-section analysis
\n • Multiple projection methods\n

\n \n

\n\n {/* Performance indicator */}\n

FPS: 60

Vertices: 0

Shape: {appState.currentShape}

Dimension: {appState.dimension}D

\n );\n}","deleted","label",[172,173,154],"frontend","components","permalink","https://www.val.town/x/spooky/AIDA/code/frontend/components/App.tsx","extension","actionData","errors"]