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

tweak fretboard

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-21 22:08:01 +01:00
parent 8f84fc1acd
commit 5c20b65413
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/FretboardHint.tsx
View File

@@ -64,7 +64,7 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y={paddingY} y={paddingY}
width={width - (paddingX * 2) - nutWidth} width={width - (paddingX * 2) - nutWidth}
height={height - (paddingY * 2)} height={height - (paddingY * 2)}
fill="#4a3e35" // Dark wood color fill="#999999" // Requested dark gray
stroke="none" stroke="none"
/> />
@@ -74,7 +74,7 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y={paddingY} y={paddingY}
width={nutWidth} width={nutWidth}
height={height - (paddingY * 2)} height={height - (paddingY * 2)}
fill="#ddd" // Bone/plastic color fill="#333" // Dark nut
/> />
{/* Fret Markers (Dots) on fretboard */} {/* Fret Markers (Dots) on fretboard */}
@@ -87,14 +87,14 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
// Draw two dots // Draw two dots
return ( return (
<g key={`marker-${m}`}> <g key={`marker-${m}`}>
<circle cx={cx} cy={height / 2 - stringSpacing} r={6} fill="#aaa" opacity={0.6} /> <circle cx={cx} cy={height / 2 - stringSpacing} r={6} fill="#777" />
<circle cx={cx} cy={height / 2 + stringSpacing} r={6} fill="#aaa" opacity={0.6} /> <circle cx={cx} cy={height / 2 + stringSpacing} r={6} fill="#777" />
</g> </g>
); );
} }
return ( return (
<circle key={`marker-${m}`} cx={cx} cy={cy} r={6} fill="#aaa" opacity={0.6} /> <circle key={`marker-${m}`} cx={cx} cy={cy} r={6} fill="#777" />
); );
})} })}
@@ -109,8 +109,8 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y1={paddingY} y1={paddingY}
x2={x} x2={x}
y2={height - paddingY} y2={height - paddingY}
stroke="#silver" stroke="#CCCCCC" // Lighter frets
strokeWidth={2} strokeWidth={1}
/> />
); );
})} })}
@@ -120,7 +120,8 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
const y = getStringY(i); const y = getStringY(i);
// i=0 is LOW pitch (thickest). // i=0 is LOW pitch (thickest).
const visualThickness = 3 - (i * 0.3); // 0 -> 3, 5 -> 1.5 // Bolder: Increase base thick
const visualThickness = 4 - (i * 0.4); // 4 down to ~2
return ( return (
<line <line
@@ -129,8 +130,8 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
y1={y} y1={y}
x2={width - paddingX} x2={width - paddingX}
y2={y} y2={y}
stroke="#d4d4d4" // String color stroke="#EEEEEE" // Lighter strings
strokeWidth={Math.max(1, visualThickness)} strokeWidth={Math.max(1.5, visualThickness)}
/> />
); );
})} })}