jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 09:34:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

mobile UI

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-30 20:17:35 +01:00
parent 7a272175d9
commit aea2442fd6
7 changed files with 102 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Controls.tsx
View File

@@ -35,6 +35,7 @@ export interface AppSettings {
micSensitivity?: number; // 0.0 to 1.0 (0=least sensitive, 1=most)
virtualGuitarMute?: boolean;
disableAnimation?: boolean;
theme?: 'light' | 'dark' | 'auto';
}
interface ControlsProps {

15
src/components/Fretboard.tsx
View File

@@ -99,7 +99,8 @@ export function Fretboard({
y={paddingY}
width={width - (paddingX * 2) - nutWidth}
height={height - (paddingY * 2)}
fill="#999999"
fill="var(--color-text-muted)"
fillOpacity={0.3}
stroke="none"
/>
@@ -109,7 +110,7 @@ export function Fretboard({
y={paddingY}
width={nutWidth}
height={height - (paddingY * 2)}
fill="#333"
fill="var(--color-primary)"
/>
{/* Fret Markers (Dots) */}
@@ -120,13 +121,13 @@ export function Fretboard({
if (isDouble) {
return (
<g key={`marker-${m}`}>
<circle cx={cx} cy={height / 2 - stringSpacing} r={6} fill="#777" />
<circle cx={cx} cy={height / 2 + stringSpacing} r={6} fill="#777" />
<circle cx={cx} cy={height / 2 - stringSpacing} r={6} fill="var(--color-bg)" />
<circle cx={cx} cy={height / 2 + stringSpacing} r={6} fill="var(--color-bg)" />
</g>
);
}
return (
<circle key={`marker-${m}`} cx={cx} cy={height / 2} r={6} fill="#777" />
<circle key={`marker-${m}`} cx={cx} cy={height / 2} r={6} fill="var(--color-bg)" />
);
})}
@@ -141,7 +142,7 @@ export function Fretboard({
y1={paddingY}
x2={x}
y2={height - paddingY}
stroke="#CCCCCC"
stroke="var(--color-text-muted)"
strokeWidth={1}
/>
);
@@ -158,7 +159,7 @@ export function Fretboard({
y1={y}
x2={width - paddingX}
y2={y}
stroke="#EEEEEE"
stroke="var(--color-text-main)"
strokeWidth={Math.max(1.5, visualThickness)}
/>
);

22
src/components/PianoKeys.tsx
View File

@@ -157,12 +157,12 @@ export function PianoKeys({
Range: {keys.list[0]?.midi} - {keys.list[keys.list.length - 1]?.midi}
</div>
<div className="view-toggles" style={{ display: 'flex', gap: '8px', background: '#333', padding: '2px', borderRadius: '4px' }}>
<div className="view-toggles" style={{ display: 'flex', gap: '8px', background: 'var(--color-surface)', padding: '2px', borderRadius: '4px', border: '1px solid var(--color-text-muted)' }}>
<button
onClick={() => setViewMode('zoomed')}
style={{
background: viewMode === 'zoomed' ? '#666' : 'transparent',
border: 'none', color: 'white', padding: '2px 8px', borderRadius: '2px', cursor: 'pointer', fontSize: '10px'
background: viewMode === 'zoomed' ? 'var(--color-primary)' : 'transparent',
border: 'none', color: viewMode === 'zoomed' ? 'var(--color-bg)' : 'var(--color-text-main)', padding: '2px 8px', borderRadius: '2px', cursor: 'pointer', fontSize: '10px'
}}
>
Zoom
@@ -170,8 +170,8 @@ export function PianoKeys({
<button
onClick={() => setViewMode('full')}
style={{
background: viewMode === 'full' ? '#666' : 'transparent',
border: 'none', color: 'white', padding: '2px 8px', borderRadius: '2px', cursor: 'pointer', fontSize: '10px'
background: viewMode === 'full' ? 'var(--color-primary)' : 'transparent',
border: 'none', color: viewMode === 'full' ? 'var(--color-bg)' : 'var(--color-text-main)', padding: '2px 8px', borderRadius: '2px', cursor: 'pointer', fontSize: '10px'
}}
>
Full
@@ -187,8 +187,8 @@ export function PianoKeys({
style={{
width: '100%',
overflowX: viewMode === 'full' ? 'hidden' : 'auto',
borderTop: '1px solid #444',
background: '#222',
borderTop: '1px solid var(--color-text-muted)',
background: 'var(--color-bg)',
position: 'relative'
}}
>
@@ -208,14 +208,14 @@ export function PianoKeys({
const isMarked = markedNotes.includes(k.midi);
// Styling
let fill = k.isBlack ? '#222' : '#fff';
let fill = k.isBlack ? 'var(--color-primary)' : 'var(--color-surface)';
if (isMarked) {
fill = k.isBlack ? '#d32f2f' : '#ffcdd2'; // Red-ish for marked
fill = k.isBlack ? 'var(--color-error)' : 'var(--color-success)'; // Use theme vars
} else if (interactive && hoverMidi === k.midi) {
fill = k.isBlack ? '#444' : '#eee'; // Subtle hover
fill = k.isBlack ? 'var(--color-text-muted)' : 'var(--color-bg)'; // Subtle hover
}
const stroke = '#000';
const stroke = 'var(--color-text-main)';
const rectHeight = k.isBlack ? BLACK_KEY_HEIGHT_PERCENT * 100 : 100;
return (

43
src/components/SettingsModal.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { X, Volume2, VolumeX, ChevronDown, ChevronUp, Mic, MicOff } from 'lucide-react';
import { X, Volume2, VolumeX, ChevronDown, ChevronUp, Mic, MicOff, Sun, Moon, Monitor } from 'lucide-react';
import type { AppSettings } from './Controls';
import type { MicrophoneDebugInfo } from '../hooks/usePitchDetector';
@@ -72,6 +72,47 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
<button className="help-close" onClick={onClose}><X size={20} /></button>
<h2 style={{ marginTop: 0, marginBottom: '24px' }}>Settings</h2>
{/* Theme Settings */}
<div className="control-group" style={{ marginBottom: '24px' }}>
<label className="control-label" style={{ marginBottom: '8px', fontSize: '16px' }}>
<span>Theme</span>
</label>
<div style={{ display: 'flex', background: 'rgba(128,128,128,0.1)', padding: '4px', borderRadius: '8px', gap: '4px' }}>
{[
{ id: 'light', icon: Sun, label: 'Light' },
{ id: 'dark', icon: Moon, label: 'Dark' },
{ id: 'auto', icon: Monitor, label: 'Auto' }
].map(mode => (
<button
key={mode.id}
onClick={() => onUpdateSettings({ ...settings, theme: mode.id as any })}
style={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '6px',
padding: '8px',
border: 'none',
background: (settings.theme || 'auto') === mode.id ? 'var(--color-surface)' : 'transparent',
color: (settings.theme || 'auto') === mode.id ? 'var(--color-primary)' : 'var(--color-text-muted)',
borderRadius: '6px',
cursor: 'pointer',
boxShadow: (settings.theme || 'auto') === mode.id ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
fontWeight: 500,
fontSize: '13px',
transition: 'all 0.2s'
}}
>
<mode.icon size={16} />
{mode.label}
</button>
))}
</div>
</div>
<hr style={{ borderColor: 'rgba(255,255,255,0.1)', margin: '24px 0' }} />
{/* Animation Settings */}
<div className="control-group" style={{ marginBottom: '24px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>