feat: show the modifier key that is the opposite of the main key

Author: aradzie

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

@@ -75,7 +75,7 @@ test.serial("with modifiers", async (t) => {
   await TestRenderer.act(() => {});
   await fake.timers.run();
 
-  t.is(renderer.root.findAllByType("circle").length, 3);
+  t.is(renderer.root.findAllByType("circle").length, 2);
 
   t.snapshot(renderer.toJSON());
 });

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

@@ -85,41 +85,6 @@ Generated by [AVA](https://avajs.dev).
 
     {
       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: 'modifierPointer',
-            cx: 45,
-            cy: 140,
-            r: 30,
-          },
-          type: 'circle',
-        },
         {
           children: [
             {

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

@@ -58,18 +58,38 @@ function pointers(keyboard: Keyboard, combo: KeyCombo | null): ReactNode[] {
       if (combo.modifier.shift) {
         const l = keyboard.getShape("ShiftLeft");
         const r = keyboard.getShape("ShiftRight");
-        children.unshift(
-          pointer(l, styles.modifierPointer),
-          pointer(r, styles.modifierPointer),
-        );
+        switch (shape.hand) {
+          case "left":
+            children.unshift(pointer(r, styles.modifierPointer));
+            break;
+          case "right":
+            children.unshift(pointer(l, styles.modifierPointer));
+            break;
+          default:
+            children.unshift(
+              pointer(l, styles.modifierPointer),
+              pointer(r, styles.modifierPointer),
+            );
+            break;
+        }
       }
       if (combo.modifier.alt) {
         const l = keyboard.getShape("AltLeft");
         const r = keyboard.getShape("AltRight");
-        children.unshift(
-          pointer(l, styles.modifierPointer),
-          pointer(r, styles.modifierPointer),
-        );
+        switch (shape.hand) {
+          case "left":
+            children.unshift(pointer(r, styles.modifierPointer));
+            break;
+          case "right":
+            children.unshift(pointer(l, styles.modifierPointer));
+            break;
+          default:
+            children.unshift(
+              pointer(l, styles.modifierPointer),
+              pointer(r, styles.modifierPointer),
+            );
+            break;
+        }
       }
     }
     combo = combo.prefix;