diff --git a/frontend/src/css/keyboard.scss b/frontend/src/css/keyboard.scss index 6c29fe817cb1737d69d60d26693b0d46dcb05dc3..25a26c709818080b803ff72b0a56137a47dad589 100644 --- a/frontend/src/css/keyboard.scss +++ b/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; } } diff --git a/frontend/src/js/fight_scene.ts b/frontend/src/js/fight_scene.ts index 05642bb45d6a9321f768b5d3993b9c426da023e5..d98100c49f0ede23dc513bad21654d053c99bfac 100644 --- a/frontend/src/js/fight_scene.ts +++ b/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; diff --git a/frontend/src/js/typewriter.ts b/frontend/src/js/typewriter.ts index 2c86a4c2391a632797be1124e720c4bbc0df7b17..45eb1460104371929f85706113e4ceabf218c9b0 100644 --- a/frontend/src/js/typewriter.ts +++ b/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;