feat: #fe accept case sensitive input

frontend/src/css/keyboard.scss

@@ -31,14 +31,13 @@ $key-width: 8vw; // 100/12 ~ 8.3
     grid-auto-flow: column;
     // grid-column-gap: $kbd-gutter;
     &:nth-child(1) {
-      grid-auto-columns: 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 1fr;
+      grid-template-columns: repeat(11, $key-width) 1fr;
     }
     &:nth-child(2) {
-      padding-left: 0.5 * $key-width;
-      grid-auto-columns: 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw;
+      grid-template-columns: 0.666 * $key-width repeat(11, $key-width) 1fr;
     }
     &:nth-child(3) {
-      grid-auto-columns: 1fr 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 1fr;
+      grid-template-columns: 2.333 * $key-width repeat(8, $key-width) 1fr;
     }
   }
 

frontend/src/js/fight_scene.ts

@@ -329,7 +329,13 @@ export default class FightScene extends Phaser.Scene {
 
   createAndBindTypewriter() {
     this.typewriter ??= new Typewriter();
-    this.typewriter.setHidden(this.game.device.os.desktop);
+    if (this.game.device.os.desktop) {
+      this.typewriter.setHidden(true);
+      this.typewriter.setShiftModeHoldable();
+    } else {
+      this.typewriter.setHidden(false);
+      this.typewriter.setShiftModeOneShot();
+    }
     this.typewriter.onSubmit = async (inputStatus) => {
       if (inputStatus.began_at === null) return;
       if (inputStatus.ended_at === null) return;

frontend/src/js/typewriter.ts

@@ -12,36 +12,69 @@ enum Key {
   Space = "{space}",
   Enter = "{enter}",
   Backspace = "{backspace}",
-  A = "a",
-  B = "b",
-  C = "c",
-  D = "d",
-  E = "e",
-  F = "f",
-  G = "g",
-  H = "h",
-  I = "i",
-  J = "j",
-  K = "k",
-  L = "l",
-  M = "m",
-  N = "n",
-  O = "o",
-  P = "p",
-  Q = "q",
-  R = "r",
-  S = "s",
-  T = "t",
-  U = "u",
-  V = "v",
-  W = "w",
-  X = "x",
-  Y = "y",
-  Z = "z",
-  Ä = "ä",
-  Ö = "ö",
-  Ü = "ü",
+  ShiftLeft = "{shiftleft}",
+  ShiftRight = "{shiftright}",
+  a = "a",
+  b = "b",
+  c = "c",
+  d = "d",
+  e = "e",
+  f = "f",
+  g = "g",
+  h = "h",
+  i = "i",
+  j = "j",
+  k = "k",
+  l = "l",
+  m = "m",
+  n = "n",
+  o = "o",
+  p = "p",
+  q = "q",
+  r = "r",
+  s = "s",
+  t = "t",
+  u = "u",
+  v = "v",
+  w = "w",
+  x = "x",
+  y = "y",
+  z = "z",
+  ä = "ä",
+  ö = "ö",
+  ü = "ü",
   ß = "ß",
+  A = "A",
+  B = "B",
+  C = "C",
+  D = "D",
+  E = "E",
+  F = "F",
+  G = "G",
+  H = "H",
+  I = "I",
+  J = "J",
+  K = "K",
+  L = "L",
+  M = "M",
+  N = "N",
+  O = "O",
+  P = "P",
+  Q = "Q",
+  R = "R",
+  S = "S",
+  T = "T",
+  U = "U",
+  V = "V",
+  W = "W",
+  X = "X",
+  Y = "Y",
+  Z = "Z",
+  Ä = "Ä",
+  Ö = "Ö",
+  Ü = "Ü",
+  ẞ = "ẞ", // TODO: is this even typeable on a physical keyboard?
+}
 
 // NOTE: this is a hack to get onKeyReleased to work with physical keyboards, stealing from the following points
 // https://github.com/hodgef/simple-keyboard/blob/ed2c5ce81d7149b07cb3b11f4b629a63034be8ce/src/lib/services/PhysicalKeyboard.ts#L27-L64
@@ -71,7 +104,7 @@ const hackPhysicalKeyboardKeyUp = function (event: KeyboardEvent) {
       buttonDOM.removeAttribute("style");
 
       instance.handleButtonMouseUp(buttonName, event);
-}
+    }
   });
 };
 
@@ -103,14 +136,21 @@ class Typewriter {
       layout: {
         default: [
           `q w e r t z u i o p ü ${Key.Backspace}`,
-          `a s d f g h j k l ö ä`,
+          `${Key.ShiftLeft} a s d f g h j k l ö ä ${Key.ShiftRight}`,
           `${Key.Space} y x c v b n m ß ${Key.Enter}`,
         ],
+        shifted: [
+          `Q W E R T Z U I O P Ü ${Key.Backspace}`,
+          `${Key.ShiftLeft} A S D F G H J K L Ö Ä ${Key.ShiftRight}`,
+          `${Key.Space} Y X C V B N M ẞ ${Key.Enter}`,
+        ],
       },
       display: {
         [Key.Backspace]: "⟵", // "⌫⟵",
         [Key.Enter]: "↩", // "⏎↩↵⏎",
         [Key.Space]: " ", // "␣",
+        [Key.ShiftLeft]: "⇧",
+        [Key.ShiftRight]: "⇧",
       },
       onChange: this.keyboardOnChangeHandler.bind(this),
     } as KeyboardOptions);
@@ -176,6 +216,36 @@ class Typewriter {
   setHidden(hidden: boolean) {
     this.keyboard.keyboardDOM.hidden = hidden;
   }
+
+  setShiftModeHoldable() {
+    this.keyboard.setOptions({
+      onKeyPress: (key: string) => {
+        if (Key.ShiftLeft == key || Key.ShiftRight == key) {
+          this.keyboard.setOptions({ layoutName: "shifted" });
+        }
+      },
+      onKeyReleased: (key: string) => {
+        if (Key.ShiftLeft == key || Key.ShiftRight == key) {
+          this.keyboard.setOptions({ layoutName: "default" });
+        }
+      },
+    });
+  }
+
+  setShiftModeOneShot() {
+    this.keyboard.setOptions({
+      onKeyPress: undefined,
+      onKeyReleased: (key: string) => {
+        if (this.keyboard.options.layoutName == "shifted") {
+          this.keyboard.setOptions({ layoutName: "default" });
+        } else if (Key.ShiftLeft == key || Key.ShiftRight == key) {
+          this.keyboard.setOptions({
+            layoutName: "shifted",
+          });
+        }
+      },
+    });
+  }
 }
 
 export default Typewriter;