diff --git a/CHANGELOG.md b/CHANGELOG.md index a6ac09775256898d344b0a3c52f720a4dcc1e78f..cbae6dce827807834bd1c8fd7691cd3628296122 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- `FE` Caps lock now works properly on desktop. + ## [1.3.0] - 2022-05-18 ### Added diff --git a/frontend/src/css/keyboard.scss b/frontend/src/css/keyboard.scss index ad21193b1598ff4d2e6a0f717afbc5b63fe65d31..d3f9664121d2fc71a4ed8f7be67dea2845e70b47 100644 --- a/frontend/src/css/keyboard.scss +++ b/frontend/src/css/keyboard.scss @@ -39,7 +39,7 @@ $key-width: 8vw; // 100/12 ~ 8.3 } &:nth-child(3) { grid-template-columns: 2.333 * $key-width repeat(8, $key-width) 1fr; - & > :first-child { + & > :nth-child(1), & > :nth-child(2) { display: none; } } diff --git a/frontend/src/js/typewriter.ts b/frontend/src/js/typewriter.ts index 6391310c2b1eb4c879e2c9e21c736d066bca92d6..1111e6bb2955ab55026813f80b4b0ac5d85c175b 100644 --- a/frontend/src/js/typewriter.ts +++ b/frontend/src/js/typewriter.ts @@ -15,6 +15,7 @@ enum Key { Space = "{space}", Enter = "{enter}", Backspace = "{backspace}", + CapsLock = "{capslock}", ShiftLeft = "{shiftleft}", ShiftRight = "{shiftright}", a = "a", @@ -150,18 +151,19 @@ class Typewriter { default: [ `q w e r t z u i o p ü ${Key.Backspace}`, `a s d f g h j k l ö ä`, - `${Key.ShiftLeft} ${Key.ShiftRight} y x c v b n m ß ${Key.Enter}`, + `${Key.CapsLock} ${Key.ShiftLeft} ${Key.ShiftRight} y x c v b n m ß ${Key.Enter}`, ], shifted: [ `Q W E R T Z U I O P Ãœ ${Key.Backspace}`, `A S D F G H J K L Ö Ä`, - `${Key.ShiftLeft} ${Key.ShiftRight} Y X C V B N M ẞ ${Key.Enter}`, + `${Key.CapsLock} ${Key.ShiftLeft} ${Key.ShiftRight} Y X C V B N M ẞ ${Key.Enter}`, ], }, display: { [Key.Backspace]: "⟵", // "⌫⟵", [Key.Enter]: "↩", // "âŽâ†©â†µâŽ", [Key.Space]: " ", // "â£", + [Key.CapsLock]: "⇩", [Key.ShiftLeft]: "⇧", [Key.ShiftRight]: "⇧", }, @@ -255,16 +257,26 @@ class Typewriter { // NOTE: this is not really disabled at event level, but events can't be triggered } + toggleLayoutShift() { + const oldLayout = this.keyboard.options.layoutName; + const newLayout = oldLayout === "default" ? "shifted" : "default"; + this.keyboard.setOptions({ layoutName: newLayout }); + } + setShiftModeHoldable() { this.keyboard.setOptions({ onKeyPress: (key: string) => { - if (Key.ShiftLeft == key || Key.ShiftRight == key) { - this.keyboard.setOptions({ layoutName: "shifted" }); + if ( + Key.ShiftLeft == key || + Key.ShiftRight == key || + Key.CapsLock == key + ) { + this.toggleLayoutShift(); } }, onKeyReleased: (key: string) => { if (Key.ShiftLeft == key || Key.ShiftRight == key) { - this.keyboard.setOptions({ layoutName: "default" }); + this.toggleLayoutShift(); } }, });