55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
/** Which finger types the key that is wanted right now, said in words.
|
|
*
|
|
* The keyboard shows *where*; this shows *which finger*, because at six the failure mode
|
|
* is not finding the key, it is finding it with the wrong finger and building the habit
|
|
* that the whole exercise exists to prevent.
|
|
*
|
|
* When the target is a capital it also names the Shift hand - the opposite one, which is
|
|
* the single rule that separates touch typing from a pinky cramp. */
|
|
|
|
import { fingerOf, needsShift, shiftHandFor } from "../lib/fingers";
|
|
|
|
interface Props {
|
|
nextKey: string | null;
|
|
}
|
|
|
|
export function HandHint({ nextKey }: Props) {
|
|
if (!nextKey) return null;
|
|
|
|
const finger = fingerOf(nextKey);
|
|
if (!finger) return null;
|
|
|
|
const shiftHand = needsShift(nextKey) ? shiftHandFor(nextKey) : null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 10,
|
|
color: "var(--paper)",
|
|
fontWeight: 800,
|
|
fontSize: 17,
|
|
opacity: 0.92,
|
|
minHeight: 30,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 16,
|
|
height: 16,
|
|
borderRadius: 999,
|
|
flex: "none",
|
|
background: `oklch(72% 0.15 ${finger.hue})`,
|
|
boxShadow: `0 0 12px oklch(72% 0.15 ${finger.hue} / .7)`,
|
|
}}
|
|
/>
|
|
<span>{finger.label}</span>
|
|
{shiftHand && (
|
|
<span style={{ opacity: 0.85 }}>+ Umschalttaste {shiftHand}</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|