BuboBubo/bitfielder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor help (more)

Browse Source
This commit is contained in:
Raphaël Forment
2025-07-14 12:30:34 +02:00
parent 80537a4a30
commit d64b3839e8
1 changed files with 100 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/HelpPopup.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import { useStore } from '@nanostores/react';
import { uiState, hideHelp } from '../stores/ui';
export function HelpPopup() {
const ui = useStore(uiState);
const [valueModeExpanded, setValueModeExpanded] = useState(false);
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
@ -303,6 +304,104 @@ export function HelpPopup() {
</div>
<div
className="help-section"
style={{
gridColumn: '1 / -1',
marginTop: '10px',
}}
>
<h4
style={{
cursor: 'pointer',
userSelect: 'none',
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
onClick={() => setValueModeExpanded(!valueModeExpanded)}
>
Value Modes
<span style={{ fontSize: '0.8em' }}>
{valueModeExpanded ? '▼' : '▶'}
</span>
</h4>
{valueModeExpanded && (
<div
style={{
backgroundColor: '#000000',
padding: '15px',
marginTop: '10px',
borderRadius: '0',
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '10px',
}}
>
<p>
<strong>Integer:</strong> Traditional 0-255 mode with modulo wrapping
</p>
<p>
<strong>Spiral:</strong> Logarithmic spirals with value-controlled tightness
</p>
<p>
<strong>Float:</strong> Bitfield shader mode, clamps to 0-1, inverts, scales to 0-255
</p>
<p>
<strong>Turbulence:</strong> Multi-octave turbulence with chaos control
</p>
<p>
<strong>Polar:</strong> Spiral patterns combining angle and radius rotation
</p>
<p>
<strong>Crystal:</strong> Crystalline lattice patterns on grid structure
</p>
<p>
<strong>Distance:</strong> Concentric wave rings with variable frequency
</p>
<p>
<strong>Marble:</strong> Marble-like veining with turbulent noise
</p>
<p>
<strong>Wave:</strong> Multi-source interference with amplitude falloff
</p>
<p>
<strong>Quantum:</strong> Quantum uncertainty probability distributions
</p>
<p>
<strong>Fractal:</strong> Recursive patterns using multiple octaves of noise
</p>
<p>
<strong>Logarithmic:</strong> Simple logarithmic scaling transformation
</p>
<p>
<strong>Cellular:</strong> Cellular automata-inspired neighbor calculations
</p>
<p>
<strong>Mirror:</strong> Kaleidoscope effects with symmetrical patterns
</p>
<p>
<strong>Noise:</strong> Perlin-like noise using layered sine waves
</p>
<p>
<strong>Rings:</strong> Concentric rings with controlled spacing
</p>
<p>
<strong>Warp:</strong> Space deformation with barrel/lens distortion
</p>
<p>
<strong>Mesh:</strong> Grid patterns with density and rotation control
</p>
<p>
<strong>Flow:</strong> Fluid dynamics with flow sources and vortices
</p>
<p>
<strong>Glitch:</strong> Digital corruption effects with bit manipulation
</p>
</div>
)}
</div>
<div
className="help-section"
style={{