feat: point at a key that must be pressed next

packages/keybr-intl/translations/en.json

@@ -353,7 +353,10 @@
   "settings.forgiveErrors.description": "If enabled, the text input field will forgive some kinds of errors by automatically fixing them. These are errors such as typing a wrong character or skipping a character.",
   "settings.forgiveErrors.label": "Forgive errors",
   "settings.interfaceOptions.legend": "Interface Options",
+  "settings.keyboardColors.description": "Show color coding of the keyboard zones. Use this option to learn which finger to use to press a key.",
   "settings.keyboardColors.label": "Colored keys",
+  "settings.keyboardPointers.description": "Highlight a key that must to be pressed next. Use this option to quickly find the position of a key if you don't know the keyboard layout well.",
+  "settings.keyboardPointers.label": "Highlight keys",
   "settings.lessonLength.description": "Adjust the number of words in the lesson text. Making lessons longer can improve your learning.",
   "settings.lessonLength.label": "Add words to lessons:",
   "settings.lessonOptions.legend": "Lesson Options",

packages/keybr-intl/translations/pl.json

@@ -350,7 +350,9 @@
   "settings.forgiveErrors.description": "Włączenie tej opcji sprawi, że pole wprowadzania tekstu będzie wybaczać niektóre rodzaje błędów, automatycznie je poprawiając. Są to takie błędy, jak wpisanie nieprawidłowego znaku lub pominięcie znaku.",
   "settings.forgiveErrors.label": "Nie uwzględniaj błędów",
   "settings.interfaceOptions.legend": "Opcje interfejsu",
+  "settings.keyboardColors.description": "Wyświetlić kodowanie kolorami stref klawiatury. Użyj tej opcji, aby dowiedzieć się, którym palcem należy nacisnąć klawisz.",
   "settings.keyboardColors.label": "Kolorowe klawisze",
+  "settings.keyboardPointers.description": "Podświetlić klawisz, który należy następnie nacisnąć. Użyj tej opcji, aby szybko znaleźć pozycję klawisza, jeśli nie znasz dobrze układu klawiatury.",
   "settings.lessonLength.description": "Dostosuj liczbę słów w tekście lekcji. Dłuższe lekcje mogą poprawić Twoją naukę.",
   "settings.lessonLength.label": "Dodaj słowa do lekcji:",
   "settings.lessonOptions.legend": "Opcje lekcji",

packages/keybr-keyboard-ui/lib/PointersLayer.module.less

@@ -0,0 +1,14 @@
+.pointer {
+  fill: transparent;
+  stroke: var(--KeyboardKey-pointer__color);
+  stroke-opacity: 0.5;
+  stroke-width: 5px;
+}
+
+.modifierPointer {
+  fill: transparent;
+  stroke: var(--KeyboardKey-pointer__color);
+  stroke-opacity: 0.5;
+  stroke-width: 3px;
+  stroke-dasharray: 3px;
+}

packages/keybr-keyboard-ui/lib/PointersLayer.module.less.d.ts

@@ -0,0 +1,2 @@
+export const pointer: string;
+export const modifierPointer: string;

packages/keybr-keyboard-ui/lib/PointersLayer.test.tsx

@@ -0,0 +1,81 @@
+import { KeyboardContext, Layout, loadKeyboard } from "@keybr/keyboard";
+import { fake } from "@keybr/test-env-time";
+import test from "ava";
+import TestRenderer from "react-test-renderer";
+import { PointersLayer } from "./PointersLayer.tsx";
+
+test.beforeEach(() => {
+  fake.timers.set();
+});
+
+test.afterEach(() => {
+  fake.timers.reset();
+});
+
+test.serial("empty", async (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <PointersLayer suffix={[]} />
+    </KeyboardContext.Provider>,
+  );
+
+  await TestRenderer.act(() => {});
+  await fake.timers.run();
+
+  t.is(renderer.root.findAllByType("circle").length, 0);
+
+  t.snapshot(renderer.toJSON());
+});
+
+test.serial("unknown", async (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <PointersLayer suffix={[0x0000]} />
+    </KeyboardContext.Provider>,
+  );
+
+  await TestRenderer.act(() => {});
+  await fake.timers.run();
+
+  t.is(renderer.root.findAllByType("circle").length, 0);
+
+  t.snapshot(renderer.toJSON());
+});
+
+test.serial("without modifiers", async (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <PointersLayer suffix={[/* "a" */ 0x0061]} />
+    </KeyboardContext.Provider>,
+  );
+
+  await TestRenderer.act(() => {});
+  await fake.timers.run();
+
+  t.is(renderer.root.findAllByType("circle").length, 1);
+
+  t.snapshot(renderer.toJSON());
+});
+
+test.serial("with modifiers", async (t) => {
+  const keyboard = loadKeyboard(Layout.EN_US);
+
+  const renderer = TestRenderer.create(
+    <KeyboardContext.Provider value={keyboard}>
+      <PointersLayer suffix={[/* "A" */ 0x0041]} />
+    </KeyboardContext.Provider>,
+  );
+
+  await TestRenderer.act(() => {});
+  await fake.timers.run();
+
+  t.is(renderer.root.findAllByType("circle").length, 3);
+
+  t.snapshot(renderer.toJSON());
+});

packages/keybr-keyboard-ui/lib/PointersLayer.test.tsx.md

@@ -0,0 +1,199 @@
+# Snapshot report for `lib/PointersLayer.test.tsx`
+
+The actual snapshot is saved in `PointersLayer.test.tsx.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## empty
+
+> Snapshot 1
+
+    {
+      children: null,
+      props: {
+        x: 15,
+        y: 15,
+      },
+      type: 'svg',
+    }
+
+## unknown
+
+> Snapshot 1
+
+    {
+      children: null,
+      props: {
+        x: 15,
+        y: 15,
+      },
+      type: 'svg',
+    }
+
+## without modifiers
+
+> Snapshot 1
+
+    {
+      children: [
+        {
+          children: [
+            {
+              children: null,
+              props: {
+                attributeName: 'opacity',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 1,
+              },
+              type: 'animate',
+            },
+            {
+              children: null,
+              props: {
+                attributeName: 'r',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 30,
+              },
+              type: 'animate',
+            },
+          ],
+          props: {
+            className: 'pointer',
+            cx: 90,
+            cy: 100,
+            r: 30,
+          },
+          type: 'circle',
+        },
+      ],
+      props: {
+        x: 15,
+        y: 15,
+      },
+      type: 'svg',
+    }
+
+## with modifiers
+
+> Snapshot 1
+
+    {
+      children: [
+        {
+          children: [
+            {
+              children: null,
+              props: {
+                attributeName: 'opacity',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 1,
+              },
+              type: 'animate',
+            },
+            {
+              children: null,
+              props: {
+                attributeName: 'r',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 30,
+              },
+              type: 'animate',
+            },
+          ],
+          props: {
+            className: 'pointer',
+            cx: 90,
+            cy: 100,
+            r: 30,
+          },
+          type: 'circle',
+        },
+        {
+          children: [
+            {
+              children: null,
+              props: {
+                attributeName: 'opacity',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 1,
+              },
+              type: 'animate',
+            },
+            {
+              children: null,
+              props: {
+                attributeName: 'r',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 30,
+              },
+              type: 'animate',
+            },
+          ],
+          props: {
+            className: 'modifierPointer',
+            cx: 45,
+            cy: 140,
+            r: 30,
+          },
+          type: 'circle',
+        },
+        {
+          children: [
+            {
+              children: null,
+              props: {
+                attributeName: 'opacity',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 1,
+              },
+              type: 'animate',
+            },
+            {
+              children: null,
+              props: {
+                attributeName: 'r',
+                dur: '0.5s',
+                from: 0,
+                repeatCount: '1',
+                restart: 'always',
+                to: 30,
+              },
+              type: 'animate',
+            },
+          ],
+          props: {
+            className: 'modifierPointer',
+            cx: 545,
+            cy: 140,
+            r: 30,
+          },
+          type: 'circle',
+        },
+      ],
+      props: {
+        x: 15,
+        y: 15,
+      },
+      type: 'svg',
+    }