First implementation of 10 finger typing

tippen/src/components/HandHint.tsx

@@ -0,0 +1,54 @@
+/** 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>
+  );
+}