essais
This commit is contained in:
@ -116,162 +116,132 @@ export function TopBar() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="topbar" className={ui.uiVisible ? '' : 'hidden'}>
|
||||
<div
|
||||
id="topbar"
|
||||
className={ui.uiVisible ? '' : 'hidden'}>
|
||||
<div className="title">Bitfielder</div>
|
||||
<div className="controls">
|
||||
<div className="controls-desktop">
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
<select
|
||||
value={settings.resolution}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ resolution: parseInt(e.target.value) })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
marginRight: '10px',
|
||||
}}
|
||||
>
|
||||
Resolution:
|
||||
<select
|
||||
value={settings.resolution}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ resolution: parseInt(e.target.value) })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
<option value="1">Full (1x)</option>
|
||||
<option value="2">Half (2x)</option>
|
||||
<option value="4">Quarter (4x)</option>
|
||||
<option value="8">Eighth (8x)</option>
|
||||
<option value="16">Sixteenth (16x)</option>
|
||||
<option value="32">Thirty-second (32x)</option>
|
||||
</select>
|
||||
</label>
|
||||
<option value="1">Full (1x)</option>
|
||||
<option value="2">Half (2x)</option>
|
||||
<option value="4">Quarter (4x)</option>
|
||||
<option value="8">Eighth (8x)</option>
|
||||
<option value="16">Sixteenth (16x)</option>
|
||||
<option value="32">Thirty-second (32x)</option>
|
||||
</select>
|
||||
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
<select
|
||||
value={settings.fps}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ fps: parseInt(e.target.value) })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
marginRight: '10px',
|
||||
}}
|
||||
>
|
||||
FPS:
|
||||
<select
|
||||
value={settings.fps}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ fps: parseInt(e.target.value) })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
<option value="15">15 FPS</option>
|
||||
<option value="30">30 FPS</option>
|
||||
<option value="60">60 FPS</option>
|
||||
</select>
|
||||
</label>
|
||||
<option value="15">15 FPS</option>
|
||||
<option value="30">30 FPS</option>
|
||||
<option value="60">60 FPS</option>
|
||||
</select>
|
||||
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
<select
|
||||
value={settings.valueMode}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ valueMode: e.target.value as ValueMode })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
marginRight: '10px',
|
||||
}}
|
||||
>
|
||||
Value Mode:
|
||||
<select
|
||||
value={settings.valueMode}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ valueMode: e.target.value as ValueMode })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
{VALUE_MODES.map((mode) => (
|
||||
<option key={mode} value={mode}>
|
||||
{getValueModeLabel(mode)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{VALUE_MODES.map((mode) => (
|
||||
<option key={mode} value={mode}>
|
||||
{getValueModeLabel(mode)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
<select
|
||||
value={settings.renderMode}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ renderMode: e.target.value })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
marginRight: '10px',
|
||||
}}
|
||||
>
|
||||
Render Mode:
|
||||
<select
|
||||
value={settings.renderMode}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ renderMode: e.target.value })
|
||||
}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.1)',
|
||||
border: '1px solid #555',
|
||||
color: '#fff',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
<option value="classic">Classic</option>
|
||||
<option value="grayscale">Grayscale</option>
|
||||
<option value="red">Red Channel</option>
|
||||
<option value="green">Green Channel</option>
|
||||
<option value="blue">Blue Channel</option>
|
||||
<option value="rainbow">Rainbow</option>
|
||||
<option value="thermal">Thermal</option>
|
||||
<option value="neon">Neon</option>
|
||||
<option value="sunset">Sunset</option>
|
||||
<option value="ocean">Ocean</option>
|
||||
<option value="forest">Forest</option>
|
||||
<option value="copper">Copper</option>
|
||||
<option value="dithered">Dithered</option>
|
||||
<option value="palette">Palette</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="infrared">Infrared</option>
|
||||
<option value="fire">Fire</option>
|
||||
<option value="ice">Ice</option>
|
||||
<option value="plasma">Plasma</option>
|
||||
<option value="xray">X-Ray</option>
|
||||
<option value="spectrum">Spectrum</option>
|
||||
</select>
|
||||
</label>
|
||||
<option value="classic">Classic</option>
|
||||
<option value="grayscale">Grayscale</option>
|
||||
<option value="red">Red Channel</option>
|
||||
<option value="green">Green Channel</option>
|
||||
<option value="blue">Blue Channel</option>
|
||||
<option value="rainbow">Rainbow</option>
|
||||
<option value="thermal">Thermal</option>
|
||||
<option value="neon">Neon</option>
|
||||
<option value="sunset">Sunset</option>
|
||||
<option value="ocean">Ocean</option>
|
||||
<option value="forest">Forest</option>
|
||||
<option value="copper">Copper</option>
|
||||
<option value="dithered">Dithered</option>
|
||||
<option value="palette">Palette</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="infrared">Infrared</option>
|
||||
<option value="fire">Fire</option>
|
||||
<option value="ice">Ice</option>
|
||||
<option value="plasma">Plasma</option>
|
||||
<option value="xray">X-Ray</option>
|
||||
<option value="spectrum">Spectrum</option>
|
||||
</select>
|
||||
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
>
|
||||
Hue Shift:
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="360"
|
||||
value={settings.hueShift ?? 0}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ hueShift: parseInt(e.target.value) })
|
||||
}
|
||||
style={{ width: '80px', verticalAlign: 'middle' }}
|
||||
/>
|
||||
<span style={{ fontSize: '11px' }}>
|
||||
{settings.hueShift ?? 0}°
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="360"
|
||||
value={settings.hueShift ?? 0}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ hueShift: parseInt(e.target.value) })
|
||||
}
|
||||
style={{ width: '80px', verticalAlign: 'middle', marginRight: '10px' }}
|
||||
/>
|
||||
|
||||
<label
|
||||
style={{ color: '#ccc', fontSize: '12px', marginRight: '10px' }}
|
||||
>
|
||||
UI Opacity:
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
value={Math.round((settings.uiOpacity ?? 0.3) * 100)}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ uiOpacity: parseInt(e.target.value) / 100 })
|
||||
}
|
||||
style={{ width: '80px', verticalAlign: 'middle' }}
|
||||
/>
|
||||
<span style={{ fontSize: '11px' }}>
|
||||
{Math.round((settings.uiOpacity ?? 0.3) * 100)}%
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
value={Math.round((settings.uiOpacity ?? 0.3) * 100)}
|
||||
onChange={(e) =>
|
||||
updateAppSettings({ uiOpacity: parseInt(e.target.value) / 100 })
|
||||
}
|
||||
style={{ width: '80px', verticalAlign: 'middle', marginRight: '10px' }}
|
||||
/>
|
||||
|
||||
<button id="help-btn" onClick={showHelp}>
|
||||
<LucideIcon name="help" />
|
||||
|
||||
Reference in New Issue
Block a user