Controls

\n \n \n

\n\n {showPresets && !isCollapsed && (\n

Presets

\n \n

\n {presets.length === 0 ? (\n

No presets saved

\n ) : (\n presets.map(preset => (\n

\n {preset.name}\n \n {new Date(preset.timestamp).toLocaleDateString()}\n \n

\n \n \n

\n ))\n )}\n

\n )}\n\n {!isCollapsed && (\n <>\n

\n \n \n \n \n

\n\n {activeTab === 'shape' && (\n

\n Dimension\n

\n handleDimensionChange(4)}\n >\n 🔲\n 4D\n \n handleDimensionChange(5)}\n >\n 🔳\n 5D\n \n

\n\n

\n Shape Type\n

\n {currentShapes.map(shape => (\n handleShapeChange(shape.id as ShapeType)}\n title={shape.name}\n >\n {shape.icon}\n {shape.name}\n

\n {getShapeComplexity(shape.id)}\n

\n \n ))}\n

\n\n

\n Quick Actions\n

\n \n \n

\n )}\n\n {activeTab === 'transform' && (\n

\n Scale\n

\n handleTransformationChange('scale', parseFloat(e.target.value))}\n />\n

\n {appState.transformations.scale.toFixed(2)}\n

\n\n

\n 4D Rotations\n

\n {Object.entries(appState.transformations.rotation4D).map(([plane, angle]) => (\n

\n \n {plane.toUpperCase()}\n \n {getRotationDescription(plane)}\n \n \n

\n handleTransformationChange(`rotation${plane}`, parseInt(e.target.value))}\n />\n

\n {Math.round(angle * 180 / Math.PI)}°\n

\n ))}\n

\n\n

\n Animation Speed\n

\n onStateChange({ animationSpeed: parseFloat(e.target.value) })}\n />\n

\n {appState.animationSpeed.toFixed(1)}x\n

\n )}\n\n {activeTab === 'render' && (\n

\n Display Options\n

\n \n handleRenderingChange('showVertices', e.target.checked)}\n />\n \n \n ⚫\n Show Vertices\n \n \n \n handleRenderingChange('showEdges', e.target.checked)}\n />\n \n \n 📏\n Show Edges\n \n \n \n handleRenderingChange('showFaces', e.target.checked)}\n />\n \n \n 🔷\n Show Faces\n \n \n \n handleRenderingChange('wireframe', e.target.checked)}\n />\n \n \n 🕸️\n Wireframe Mode\n \n \n

\n\n

\n Opacity\n

\n handleRenderingChange('opacity', parseFloat(e.target.value))}\n />\n

\n {Math.round(appState.rendering.opacity * 100)}%\n

\n\n

\n Colors\n

\n \n 🔷\n Shape Color\n \n

\n handleRenderingChange('color', e.target.value)}\n />\n {appState.rendering.color}\n

\n \n 📏\n Edge Color\n \n

\n handleRenderingChange('edgeColor', e.target.value)}\n />\n {appState.rendering.edgeColor}\n

\n \n ⚫\n Vertex Color\n \n

\n handleRenderingChange('vertexColor', e.target.value)}\n />\n {appState.rendering.vertexColor}\n

\n )}\n\n {activeTab === 'camera' && (\n

\n Projection Distance\n

\n handleProjectionChange('distance', parseFloat(e.target.value))}\n />\n

\n {appState.projection.distance.toFixed(1)}\n

\n\n

\n Field of View\n

\n handleCameraChange('fov', parseInt(e.target.value))}\n />\n

\n {appState.camera.fov}°\n

\n\n

\n Projection Type\n

\n handleProjectionChange('perspective', true)}\n >\n 📐 Perspective\n \n handleProjectionChange('perspective', false)}\n >\n 📏 Orthogonal\n \n

\n )}\n \n )}\n\n {/* Helper functions */}\n {(() => {\n const getShapeComplexity = (shapeId: string) => {\n const complexityMap: { [key: string]: string } = {\n 'tesseract': '●○○',\n '16-cell': '●●○',\n '600-cell': '●●●',\n '120-cell': '●●●',\n 'penteract': '●●○',\n '5-simplex': '●○○',\n '5-orthoplex': '●●○',\n 'custom': '●●●'\n };\n return complexityMap[shapeId] || '●○○';\n };\n\n const getRotationDescription = (plane: string) => {\n const descriptions: { [key: string]: string } = {\n 'xy': 'Standard rotation',\n 'xz': 'Pitch-like rotation',\n 'xw': 'Into 4th dimension',\n 'yz': 'Roll-like rotation',\n 'yw': 'Yaw into 4D',\n 'zw': 'Pure 4D rotation'\n };\n return descriptions[plane] || '';\n };\n\n return null;\n })()}\n\n \n

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