Add finger numbering hand diagram to lesson 1
This commit is contained in:
Sterling Archer committed
1 parent
7aa12124e3
commit
c15a64ec61
1 file changed
+93
-36
+93
-36
@@ -56,9 +56,9 @@ function autoCorrelate(buf, sr) {
|
||||
}
|
||||
|
||||
const CHORDS = {
|
||||
Em:{ dots:[{s:1,f:2,n:"2"},{s:2,f:2,n:"3"}], open:[3,4,5], muted:[], label:"x x 0 2 2 0" },
|
||||
Am:{ dots:[{s:4,f:2,n:"1"},{s:3,f:2,n:"2"},{s:2,f:2,n:"3"}], open:[4,5], muted:[0], label:"x 0 2 2 1 0" },
|
||||
G: { dots:[{s:0,f:3,n:"2"},{s:5,f:3,n:"4"},{s:1,f:2,n:"1"},{s:4,f:2,n:"3"}], open:[2,3], muted:[], label:"3 2 0 0 3 3" },
|
||||
Em:{ dots:[{s:2,f:2,n:"2"},{s:3,f:2,n:"3"}], open:[0,1,4,5], muted:[], label:"0 0 2 2 0 0" },
|
||||
Am:{ dots:[{s:2,f:2,n:"2"},{s:3,f:2,n:"3"},{s:4,f:2,n:"1"}], open:[1,5], muted:[0], label:"x 0 2 2 1 0" },
|
||||
G: { dots:[{s:0,f:3,n:"2"},{s:1,f:2,n:"1"},{s:4,f:3,n:"3"},{s:5,f:3,n:"4"}], open:[2,3], muted:[], label:"3 2 0 0 3 3" },
|
||||
C: { dots:[{s:1,f:3,n:"3"},{s:2,f:2,n:"2"},{s:4,f:1,n:"1"}], open:[3,5], muted:[0], label:"x 3 2 0 1 0" },
|
||||
D: { dots:[{s:3,f:2,n:"1"},{s:4,f:3,n:"3"},{s:5,f:2,n:"2"}], open:[2], muted:[0,1], label:"x x 0 2 3 2" },
|
||||
};
|
||||
@@ -897,73 +897,130 @@ function LessonBody({ id, detected, onTarget, listening, onStartMic }) {
|
||||
<Tip>Sit with the guitar waist on your right leg. Back straight, neck angled slightly up. Thumb behind the neck, fingers curling over the fretboard.</Tip>
|
||||
<p>Your strumming hand hovers over the soundhole. For now use your thumb, sweeping downward across the strings.</p>
|
||||
<div style={{height:1,background:C.fret,margin:"20px 0"}}/>
|
||||
<p style={{fontWeight:600,color:C.text,marginBottom:8}}>Finger numbering</p>
|
||||
<p style={{marginBottom:12}}>Throughout this app, the gold circles on chord diagrams show you which finger to use. Here is how they are numbered:</p>
|
||||
<div style={{background:"#0A0A0E",borderRadius:12,border:"1px solid "+C.fret,padding:"16px 8px",marginBottom:16}}>
|
||||
<svg viewBox="0 0 320 220" width="100%" style={{display:"block",maxWidth:320,margin:"0 auto"}}>
|
||||
{/* Palm base */}
|
||||
<ellipse cx={160} cy={188} rx={72} ry={30} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
|
||||
|
||||
{/* Thumb - angled left */}
|
||||
<ellipse cx={76} cy={155} rx={16} ry={32} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}
|
||||
transform="rotate(-35 76 155)"/>
|
||||
|
||||
{/* Index finger */}
|
||||
<rect x={91} y={68} width={30} height={88} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
|
||||
{/* Middle finger - tallest */}
|
||||
<rect x={129} y={48} width={30} height={105} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
|
||||
{/* Ring finger */}
|
||||
<rect x={167} y={60} width={30} height={95} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
|
||||
{/* Pinky */}
|
||||
<rect x={205} y={82} width={26} height={73} rx={13} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
|
||||
|
||||
{/* Knuckle lines */}
|
||||
<line x1={94} y1={120} x2={118} y2={120} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={94} y1={140} x2={118} y2={140} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={132} y1={118} x2={156} y2={118} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={132} y1={138} x2={156} y2={138} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={170} y1={120} x2={194} y2={120} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={170} y1={140} x2={194} y2={140} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={208} y1={126} x2={228} y2={126} stroke="#4A3828" strokeWidth={1}/>
|
||||
<line x1={208} y1={144} x2={228} y2={144} stroke="#4A3828" strokeWidth={1}/>
|
||||
|
||||
{/* Gold circles on fingertips with numbers */}
|
||||
{/* Index = 1 */}
|
||||
<circle cx={106} cy={80} r={16} fill="rgba(212,168,71,0.15)"/>
|
||||
<circle cx={106} cy={80} r={13} fill={C.amber}/>
|
||||
<text x={106} y={85} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">1</text>
|
||||
|
||||
{/* Middle = 2 */}
|
||||
<circle cx={144} cy={60} r={16} fill="rgba(212,168,71,0.15)"/>
|
||||
<circle cx={144} cy={60} r={13} fill={C.amber}/>
|
||||
<text x={144} y={65} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">2</text>
|
||||
|
||||
{/* Ring = 3 */}
|
||||
<circle cx={182} cy={72} r={16} fill="rgba(212,168,71,0.15)"/>
|
||||
<circle cx={182} cy={72} r={13} fill={C.amber}/>
|
||||
<text x={182} y={77} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">3</text>
|
||||
|
||||
{/* Pinky = 4 */}
|
||||
<circle cx={218} cy={94} r={16} fill="rgba(212,168,71,0.15)"/>
|
||||
<circle cx={218} cy={94} r={13} fill={C.amber}/>
|
||||
<text x={218} y={99} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">4</text>
|
||||
|
||||
{/* Labels below fingers */}
|
||||
<text x={106} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Index</text>
|
||||
<text x={144} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Middle</text>
|
||||
<text x={182} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Ring</text>
|
||||
<text x={218} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Pinky</text>
|
||||
|
||||
{/* Thumb label */}
|
||||
<text x={58} y={175} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Thumb</text>
|
||||
<text x={58} y={187} textAnchor="middle" fontSize={10} fill={C.muted} fontFamily="sans-serif">(not numbered)</text>
|
||||
</svg>
|
||||
</div>
|
||||
<Tip>When a chord diagram shows a <strong style={{color:C.amber}}>1</strong> on a string, press that string with your index finger. <strong style={{color:C.amber}}>2</strong> = middle, <strong style={{color:C.amber}}>3</strong> = ring, <strong style={{color:C.amber}}>4</strong> = pinky.</Tip>
|
||||
<div style={{height:1,background:C.fret,margin:"20px 0"}}/>
|
||||
<p style={{fontSize:14,color:C.muted}}>Strings thick to thin: <strong style={{color:C.text}}>E A D G B e</strong> - remember with "Elephants And Donkeys Grow Big Ears."</p>
|
||||
</div>
|
||||
);
|
||||
if (id === 1) {
|
||||
const NUM_FRETS=5, NS=6, W=320, H=200;
|
||||
const TOP=44, BOT=H-24, LEFT=44, RIGHT=W-12;
|
||||
// Wider left margin: label col at 14, marker col at 34, nut at 64
|
||||
const NUM_FRETS=5, NS=6, W=340, H=210;
|
||||
const TOP=44, BOT=H-24, LEFT=64, RIGHT=W-10;
|
||||
const strGap=(BOT-TOP)/(NS-1);
|
||||
const fretGap=(RIGHT-LEFT)/NUM_FRETS;
|
||||
const LABELS=["E","A","D","G","B","e"];
|
||||
// Two example notes: open E (str0 fret0), G chord shape highlight (str5 fret3)
|
||||
// Single notes to demo: 1=open E2(str0,fr0), 2=open e(str5,fr0), 3=G chord(str0,fr3 + str5,fr3)
|
||||
const demoNotes=[
|
||||
{str:0,fret:0,label:"1",note:"E2",desc:"Open Low E"},
|
||||
{str:5,fret:0,label:"2",note:"e4",desc:"Open High e"},
|
||||
{str:0,fret:3,label:"3",note:"G",desc:"Fret 3"},
|
||||
{str:5,fret:3,label:"4",note:"G",desc:"Fret 3"},
|
||||
{str:1,fret:2,label:"5",note:"B",desc:"Fret 2"},
|
||||
const markers=[
|
||||
{s:0,type:"open"},{s:1,type:"muted"},{s:2,type:"muted"},
|
||||
{s:3,type:"muted"},{s:4,type:"open"},{s:5,type:"open"}
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<p style={{color:"#C8C5BE",fontSize:15,lineHeight:1.75,marginBottom:14}}>
|
||||
Each line is a string on your guitar. Numbers tell you which fret to press. 0 means open - no fingers needed.
|
||||
</p>
|
||||
<div style={{background:"#0A0A0E",borderRadius:10,padding:"10px 6px",border:"1px solid "+C.fret,marginBottom:16}}>
|
||||
<div style={{background:"#0A0A0E",borderRadius:10,padding:"10px 6px",border:"1px solid "+C.fret,marginBottom:16,overflowX:"auto"}}>
|
||||
<div style={{textAlign:"center",fontSize:12,color:C.muted,marginBottom:8}}>Example - a G chord</div>
|
||||
<svg width={W} height={H} style={{display:"block",margin:"0 auto"}}>
|
||||
{/* Nut */}
|
||||
<line x1={LEFT} y1={TOP-2} x2={LEFT} y2={BOT+2} stroke={C.text} strokeWidth={3}/>
|
||||
{/* Fret lines */}
|
||||
{Array.from({length:NUM_FRETS+1},(_,f)=>(
|
||||
<line key={f} x1={LEFT+f*fretGap} y1={TOP} x2={LEFT+f*fretGap} y2={BOT} stroke={C.fret} strokeWidth={1}/>
|
||||
))}
|
||||
{/* Strings */}
|
||||
{Array.from({length:NS},(_,s)=>(
|
||||
<line key={s} x1={LEFT} y1={TOP+s*strGap} x2={RIGHT} y2={TOP+s*strGap}
|
||||
stroke={C.string} strokeWidth={s===0?2:s===5?0.8:1.2}/>
|
||||
))}
|
||||
{/* String name labels - col 1 */}
|
||||
{LABELS.map((n,s)=>(
|
||||
<text key={s} x={LEFT-10} y={TOP+s*strGap+4} textAnchor="middle"
|
||||
fontSize={10} fill={C.amber} fontFamily="monospace" fontWeight="600">{n}</text>
|
||||
<text key={s} x={14} y={TOP+s*strGap+4} textAnchor="middle"
|
||||
fontSize={11} fill={C.amber} fontFamily="monospace" fontWeight="700">{n}</text>
|
||||
))}
|
||||
{Array.from({length:NUM_FRETS},(_,f)=>(
|
||||
<text key={f} x={LEFT+(f+0.5)*fretGap} y={BOT+16} textAnchor="middle"
|
||||
fontSize={9} fill={C.muted} fontFamily="monospace">{f+1}</text>
|
||||
))}
|
||||
{/* Per-string markers left of nut: O=open, X=muted, nothing=fretted */}
|
||||
{[
|
||||
{s:0, type:"open"},
|
||||
{s:1, type:"muted"},
|
||||
{s:2, type:"muted"},
|
||||
{s:3, type:"muted"},
|
||||
{s:4, type:"open"},
|
||||
{s:5, type:"open"},
|
||||
].map(({s,type})=>{
|
||||
const cy = TOP+s*strGap;
|
||||
const cx = LEFT-16;
|
||||
{/* Open/muted markers - col 2 */}
|
||||
{markers.map(({s,type})=>{
|
||||
const cy=TOP+s*strGap, cx=38;
|
||||
if(type==="open") return (
|
||||
<g key={s}>
|
||||
<circle cx={cx} cy={cy} r={7} fill="none" stroke={C.sage} strokeWidth={2}/>
|
||||
<circle cx={cx} cy={cy} r={8} fill="none" stroke={C.sage} strokeWidth={2}/>
|
||||
<text x={cx} y={cy+4} textAnchor="middle" fontSize={9}
|
||||
fill={C.sage} fontFamily="monospace" fontWeight="700">0</text>
|
||||
</g>
|
||||
);
|
||||
return (
|
||||
<g key={s}>
|
||||
<line x1={cx-5} y1={cy-5} x2={cx+5} y2={cy+5} stroke={C.coral} strokeWidth={2}/>
|
||||
<line x1={cx+5} y1={cy-5} x2={cx-5} y2={cy+5} stroke={C.coral} strokeWidth={2}/>
|
||||
<line x1={cx-6} y1={cy-6} x2={cx+6} y2={cy+6} stroke={C.coral} strokeWidth={2.5}/>
|
||||
<line x1={cx+6} y1={cy-6} x2={cx-6} y2={cy+6} stroke={C.coral} strokeWidth={2.5}/>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
{/* Fret numbers */}
|
||||
{Array.from({length:NUM_FRETS},(_,f)=>(
|
||||
<text key={f} x={LEFT+(f+0.5)*fretGap} y={BOT+16} textAnchor="middle"
|
||||
fontSize={9} fill={C.muted} fontFamily="monospace">{f+1}</text>
|
||||
))}
|
||||
{/* Fretted dots */}
|
||||
{[{s:0,f:3,n:"3"},{s:1,f:2,n:"2"},{s:4,f:2,n:"1"},{s:5,f:3,n:"4"}].map(({s,f,n},i)=>{
|
||||
const cx=LEFT+(f-0.5)*fretGap, cy=TOP+s*strGap;
|
||||
@@ -978,9 +1035,9 @@ function LessonBody({ id, detected, onTarget, listening, onStartMic }) {
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
<Tip>0 = open string (no fingers). A number = press that fret. X = don't play that string. Green O = open, play it.</Tip>
|
||||
<Tip>0 = open string (no fingers). A number = press that fret. X = don't play that string.</Tip>
|
||||
<p style={{color:"#C8C5BE",fontSize:14,lineHeight:1.7,marginTop:12}}>
|
||||
The top string (E) is the thickest - the one closest to you when you hold the guitar. The bottom (e) is the thinnest.
|
||||
The top string (E) is the thickest - closest to you when holding the guitar. The bottom (e) is the thinnest.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user