dpad visual + kb/cont toggle + general style updates

assets/config_menu.rml

@@ -131,14 +131,16 @@
 								<div class="config__header">
 									<div class="config__header-left">
 										<button
-											class="button button--primary"
+											class="toggle"
+											data-class-toggle--checked="input_device_is_keyboard"
+											onclick="toggle_input_device"
 										>
-											<div class="button__label">Controller</div>
+											<div class="toggle__border" />
-										</button>
+											<div class="toggle__floater" />
-										<button
+											<div class="toggle__icons">
-											class="button button--secondary"
+												<div class="toggle__icon toggle__icon--left"><div>␼</div></div>
-										>
+												<div class="toggle__icon toggle__icon--right"><div>␽</div></div>
-											<div class="button__label">Keyboard</div>
+											</div>
 										</button>
 									</div>
 									<div>
@@ -198,8 +200,53 @@
 													<!-- top half -->
 													<div class="input-config__visual-half">
 														<div class="input-config__visual-quarter-left">
-															<div>
+															<div
-																dpad lmao
+																class="input-viz input-viz__dpad"
+																visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
+															>
+																<svg src="icons/VizMap/DPad.svg" />
+																<div class="input-viz__dpad-split input-viz__dpad-split--vertical">
+																	<div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
+																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
+																		<div
+																			class="input-config__visual-mapping"
+																			data-for="cur_binding, i : inputs.DPAD_UP"
+																		>
+																			<div>{{cur_binding}}</div>
+																		</div>
+																	</div>
+																	<div class="input-viz__dpad-divider" />
+																	<div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
+																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
+																		<div
+																			class="input-config__visual-mapping"
+																			data-for="cur_binding, i : inputs.DPAD_DOWN"
+																		>
+																			<div>{{cur_binding}}</div>
+																		</div>
+																	</div>
+																</div>
+																<div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
+																	<div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
+																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
+																		<div
+																			class="input-config__visual-mapping"
+																			data-for="cur_binding, i : inputs.DPAD_LEFT"
+																		>
+																			<div>{{cur_binding}}</div>
+																		</div>
+																	</div>
+																	<div class="input-viz__dpad-divider" />
+																	<div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
+																		<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
+																		<div
+																			class="input-config__visual-mapping"
+																			data-for="cur_binding, i : inputs.DPAD_RIGHT"
+																		>
+																			<div>{{cur_binding}}</div>
+																		</div>
+																	</div>
+																</div>
 															</div>
 														</div>
 														<div class="input-config__visual-quarter-right">

assets/scss/styles/base.scss

@@ -6,4 +6,5 @@
 @import "./vars/gradients";
 @import "./vars/transitions";
 @import "./mixins/typography";
+@import "./mixins/transitions";
 @import "./mixins/helpers";

assets/scss/styles/components/Button.scss

@@ -24,6 +24,7 @@
 .button {
     @extend %label-md;
     @include create-button-variation($color-primary);
+    @include trans-colors;
 
     display: block;
     // leave 1dp room for border expansion

assets/scss/styles/components/Config.scss

@@ -121,12 +121,14 @@
     }
 
     input.range slidertrack {
+        @include trans-colors;
         margin-top: 7dp;
         height: 2dp;
         background-color: $color-border;
     }
     
     input.range sliderbar {
+        @include trans-colors;
         margin-left: -8dp;
         margin-right: -6dp;
         width: space(16);

assets/scss/styles/components/ControlOption.scss

@@ -2,6 +2,7 @@
 
 .control-option {
     @include set-color($color-text-dim);
+    @include trans-colors-svg;
     display: flex;
     position: relative;
     flex-direction: row;
@@ -49,6 +50,7 @@
 
 .control-option__binding {
     @include set-color($color-text-dim);
+    @include trans-colors-border;
     display: flex;
     align-items: center;
     justify-content: center;

assets/scss/styles/components/IconButton.scss

@@ -24,6 +24,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2);
 
 .icon-button {
     @include set-color($color-text-dim);
+    @include trans-colors-border;
 
     display: flex;
     align-items: center;

assets/scss/styles/components/InputConfig.scss

@@ -78,11 +78,10 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
 
 .input-config__visual-quarter-left {
     display: flex;
-    flex: 1 1 auto;
+    flex: 1 1 50%;
     width: auto;
     align-items: flex-start;
     justify-content: flex-start;
-
 }
 
 .input-config__visual-quarter-right {
@@ -115,12 +114,13 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
 }
 
 .input-viz {
+    @include trans-colors-opa;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    svg {
+    > svg:not(.input-viz__dpad-arrow) {
         position: absolute;
         top: 0;
         right: 0;
@@ -159,8 +159,8 @@ $all-inputs:
 }
 
 @each $inp in $all-inputs {
-    .input-viz[visual-input="#{$inp}"] {
+    .input-viz[visual-input~="#{$inp}"] {
-        opacity: 0.5;
+        opacity: 0.25;
 
         [cur-input="#{$inp}"] & {
             opacity: 1.0;
@@ -172,7 +172,7 @@ $all-inputs:
     width: space($sz);
     height: space($sz);
     
-    svg {
+    > svg {
         width: space($sz);
         height: space($sz);
     }
@@ -211,6 +211,77 @@ $all-inputs:
     @include set-sizes(136);
 }
 
+$dpad-size: 192;
+.input-viz.input-viz__dpad {
+    @include set-svgs-color($color-text);
+    @include set-sizes($dpad-size);
+    $edge-dist: space(32);
+    position: relative;
+}
+
+.input-viz__dpad-split {
+    @include inset-block(0);
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &--vertical {
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &--horizontal {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    > div {
+        display: flex;
+        flex: 1 1 100%;
+        width: space(math.div($dpad-size, 3));
+        height: space(math.div($dpad-size, 3));
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
+
+        // .input-config__visual-mapping {
+        //     display: block;
+        // }
+    }
+}
+
+.input-viz__dpad-arrow {
+    position: absolute;
+    width: space(60);
+    height: space(60);
+    $edge-dist: space(4);
+
+    &--up {
+        top: $edge-dist;
+        margin: 0 auto;
+    }
+
+    &--down {
+        bottom: $edge-dist;
+        margin: 0 auto;
+        transform: rotate(180deg);
+    }
+
+    &--left {
+        left: $edge-dist;
+        margin: auto 0;
+        transform: rotate(-90deg);
+    }
+
+    &--right {
+        right: $edge-dist;
+        margin: auto 0;
+        transform: rotate(90deg);
+    }
+}
+
 .input-viz__R {
     @include set-svgs-color($color-white);
     @include set-sizes(96);

assets/scss/styles/components/Tabs.scss

@@ -23,6 +23,7 @@
     margin: 0;
     color: $color-text-inactive;
     transition: color $transition-quick;
+    opacity: 0.9;
 
     &:selected {
         color: $color-text;
@@ -38,10 +39,12 @@
 
     &:hover {
         cursor: pointer;
+        opacity: 1;
     }
 
     &:focus {
         color: $color-text;
+        opacity: 1;
     }
 }
 

assets/scss/styles/components/Toggle.scss

@@ -0,0 +1,96 @@
+@use "sass:math";
+
+$toggle-width: 162;
+$toggle-height: 72;
+
+$toggle-floater-width: 80;
+$toggle-floater-height: 64;
+$toggle-floater-margin: 4;
+$toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-floater-width;
+
+.toggle {
+    @extend %nav-all;
+    @include trans-colors-opa;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: space($toggle-width);
+    height: space($toggle-height);
+    background: $color-transparent;
+    border-radius: space(math.div($toggle-height, 2));
+    cursor: pointer;
+    opacity: 0.9;
+
+    &:hover, &:focus-visible, &:focus {
+        background-color: $color-secondary-a30;
+        opacity: 1;
+    }
+
+    &:active {
+        background-color: $color-secondary-a5;
+        opacity: 1;
+    }
+
+    .toggle__border {
+        @include inner-border-block($color-secondary-l);
+        border-radius: space(math.div($toggle-height, 2));
+    }
+
+    .toggle__floater {
+        position: absolute;
+        width: space($toggle-floater-width);
+        height: space($toggle-floater-height);
+        top: 50%;
+        left: space($toggle-floater-margin);
+        transform: translateY(-50%);
+        border-radius: space(math.div($toggle-floater-height, 2));
+        background: $color-secondary-d;
+    }
+    
+    &--checked {
+        .toggle__floater {
+            left: space($toggle-checked-left-offset);
+        }
+
+        .toggle__icon {
+            &.toggle__icon--left {
+                color: $color-secondary-l;
+                opacity: 0.9;
+            }
+            &.toggle__icon--right {
+                color: $color-text;
+                opacity: 1.0;
+            }
+        }
+    }
+}
+
+.toggle__icons {
+    display: flex;
+    position: absolute;
+    height: space(56);
+    top: 50%;
+    transform: translateY(-50%);
+    right: space(16);
+    left: space(16);
+    align-items: center;
+    justify-content: space-between;
+}
+
+.toggle__icon {
+    @extend %prompt-font-lg;
+    @include trans-colors;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: space(56);
+    height: space(56);
+    color: $color-text;
+
+    &--right {
+        opacity: 1;
+        color: $color-secondary-l;
+    }
+}

assets/scss/styles/components/_components.scss

@@ -8,3 +8,4 @@
 @import "./Launcher";
 @import "./MenuListItem";
 @import "./SubtitleTitle";
+@import "./Toggle";

assets/scss/styles/mixins/_transitions.scss

@@ -0,0 +1,36 @@
+
+/*
+@include trans-colors;
+*/
+@mixin trans-colors {
+    transition: color $transition-quick, background-color $transition-quick;
+}
+
+/*
+@include trans-colors-opa;
+*/
+@mixin trans-colors-opa {
+    transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick;
+}
+
+/*
+@include trans-colors-svg;
+*/
+@mixin trans-colors-svg {
+    transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick;
+
+    svg {
+        transition: image-color $transition-quick, background-color $transition-quick;
+    }
+}
+
+/*
+@include trans-colors-border;
+*/
+@mixin trans-colors-border {
+    transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick, border-color $transition-quick;
+
+    svg {
+        transition: image-color $transition-quick, background-color $transition-quick;
+    }
+}

assets/scss/styles/mixins/_typography.scss

@@ -51,6 +51,14 @@ $font-stack: chiaro;
 	font-weight: 400;
 }
 
+%prompt-font-lg {
+    font-family: promptfont;
+    font-style: normal;
+    font-weight: 400;
+    font-size: space(56);
+    line-height: space(56);
+}
+
 %prompt-font {
     font-family: promptfont;
     font-style: normal;

assets/scss/styles/vars/_borders.scss

@@ -6,7 +6,8 @@ $border-radius-lg: 16dp;
 
 $border-radius-modal: $border-radius-lg;
 
-$border-width-thickness-num: 1.5;
+$border-width-thickness-num: 1.1;
+// $border-width-thickness-num: 1.5;
 $border-width-thickness: space($border-width-thickness-num);
 
 @mixin border($col: $color-border) {
@@ -23,3 +24,19 @@ $border-width-thickness: space($border-width-thickness-num);
     border-bottom-color: $col;
     border-bottom-width: $border-width-thickness;
 }
+
+@mixin inset-block($inset-amt) {
+    position: absolute;
+    top: $inset-amt;
+    right: $inset-amt;
+    bottom: $inset-amt;
+    left: $inset-amt;
+}
+
+// add this to a child of the container that needs a border.
+// parent must have `position: relative` 
+@mixin inner-border-block($col: $color-border) {
+    @include inset-block($border-width-thickness);
+    @include border($col);
+    display: block;
+}

assets/scss/styles/vars/_transitions.scss

@@ -1,2 +1,3 @@
 // see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp
-$transition-quick: 0.033s linear-in-out;
+$transition-quick: 0.05s linear-in-out;
+// $transition-quick: 0.033s linear-in-out;

include/promptfont.h

@@ -0,0 +1,82 @@
+#ifndef PROMPTFONT_H
+#define PROMPTFONT_H
+
+#define PF_KEYBOARD_LEFT "\u23F4"
+#define PF_KEYBOARD_UP "\u23F5"
+#define PF_KEYBOARD_RIGHT "\u23F6"
+#define PF_KEYBOARD_DOWN "\u23F7"
+#define PF_KEYBOARD_WASD "\u2423"
+#define PF_KEYBOARD_ARROWS "\u2424"
+#define PF_KEYBOARD_IJKL "\u2425"
+#define PF_KEYBOARD_FN "\u2426"
+#define PF_KEYBOARD_CONTROL "\u2427"
+#define PF_KEYBOARD_ALT "\u2428"
+#define PF_KEYBOARD_SHIFT "\u2429"
+#define PF_KEYBOARD_SUPER "\u242A"
+#define PF_KEYBOARD_TAB "\u242B"
+#define PF_KEYBOARD_CAPS "\u242C"
+#define PF_KEYBOARD_BACKSPACE "\u242D"
+#define PF_KEYBOARD_ENTER "\u242E"
+#define PF_KEYBOARD_ESCAPE "\u242F"
+#define PF_KEYBOARD_PRINT_SCREEN "\u2430"
+#define PF_KEYBOARD_SCROLL_LOCK "\u2431"
+#define PF_KEYBOARD_PAUSE "\u2432"
+#define PF_KEYBOARD_NUM_LOCK "\u2433"
+#define PF_KEYBOARD_INSERT "\u2434"
+#define PF_KEYBOARD_HOME "\u2435"
+#define PF_KEYBOARD_PAGE_UP "\u2436"
+#define PF_KEYBOARD_DELETE "\u2437"
+#define PF_KEYBOARD_END "\u2438"
+#define PF_KEYBOARD_PAGE_DOWN "\u2439"
+#define PF_KEYBOARD_SPACE "\u243A"
+#define PF_KEYBOARD_F1 "\u2460"
+#define PF_KEYBOARD_F2 "\u2461"
+#define PF_KEYBOARD_F3 "\u2462"
+#define PF_KEYBOARD_F4 "\u2463"
+#define PF_KEYBOARD_F5 "\u2464"
+#define PF_KEYBOARD_F6 "\u2465"
+#define PF_KEYBOARD_F7 "\u2466"
+#define PF_KEYBOARD_F8 "\u2467"
+#define PF_KEYBOARD_F9 "\u2468"
+#define PF_KEYBOARD_F10 "\u2469"
+#define PF_KEYBOARD_F11 "\u246A"
+#define PF_KEYBOARD_F12 "\u246B"
+#define PF_KEYBOARD_KEY "\u248F"
+#define PF_KEYBOARD_0 "\uFF10"
+#define PF_KEYBOARD_1 "\uFF11"
+#define PF_KEYBOARD_2 "\uFF12"
+#define PF_KEYBOARD_3 "\uFF13"
+#define PF_KEYBOARD_4 "\uFF14"
+#define PF_KEYBOARD_5 "\uFF15"
+#define PF_KEYBOARD_6 "\uFF16"
+#define PF_KEYBOARD_7 "\uFF17"
+#define PF_KEYBOARD_8 "\uFF18"
+#define PF_KEYBOARD_9 "\uFF19"
+#define PF_KEYBOARD_A "\uFF21"
+#define PF_KEYBOARD_B "\uFF22"
+#define PF_KEYBOARD_C "\uFF23"
+#define PF_KEYBOARD_D "\uFF24"
+#define PF_KEYBOARD_E "\uFF25"
+#define PF_KEYBOARD_F "\uFF26"
+#define PF_KEYBOARD_G "\uFF27"
+#define PF_KEYBOARD_H "\uFF28"
+#define PF_KEYBOARD_I "\uFF29"
+#define PF_KEYBOARD_J "\uFF2A"
+#define PF_KEYBOARD_K "\uFF2B"
+#define PF_KEYBOARD_L "\uFF2C"
+#define PF_KEYBOARD_M "\uFF2D"
+#define PF_KEYBOARD_N "\uFF2E"
+#define PF_KEYBOARD_O "\uFF2F"
+#define PF_KEYBOARD_P "\uFF30"
+#define PF_KEYBOARD_Q "\uFF31"
+#define PF_KEYBOARD_R "\uFF32"
+#define PF_KEYBOARD_S "\uFF33"
+#define PF_KEYBOARD_T "\uFF34"
+#define PF_KEYBOARD_U "\uFF35"
+#define PF_KEYBOARD_V "\uFF36"
+#define PF_KEYBOARD_W "\uFF37"
+#define PF_KEYBOARD_X "\uFF38"
+#define PF_KEYBOARD_Y "\uFF39"
+#define PF_KEYBOARD_Z "\uFF3A"
+
+#endif

include/recomp_input.h

@@ -13,26 +13,26 @@ namespace recomp {
     // x-macros to build input enums and arrays.
     // First parameter is the enum name, second parameter is the bit field for the input (or 0 if there is no associated one), third is the readable name.
     #define DEFINE_N64_BUTTON_INPUTS() \
-        DEFINE_INPUT(A, 0x8000, "[A Button]") \
+        DEFINE_INPUT(A, 0x8000, "A Button") \
-        DEFINE_INPUT(B, 0x4000, "[B Button]") \
+        DEFINE_INPUT(B, 0x4000, "B Button") \
-        DEFINE_INPUT(Z, 0x2000, "[Z Button]") \
+        DEFINE_INPUT(Z, 0x2000, "Z Button") \
-        DEFINE_INPUT(START, 0x1000, "[Start Button]") \
+        DEFINE_INPUT(START, 0x1000, "Start Button") \
-        DEFINE_INPUT(DPAD_UP, 0x0800, "[Dpad Up]") \
+        DEFINE_INPUT(DPAD_UP, 0x0800, "Dpad Up") \
-        DEFINE_INPUT(DPAD_DOWN, 0x0400, "[Dpad Down]") \
+        DEFINE_INPUT(DPAD_DOWN, 0x0400, "Dpad Down") \
-        DEFINE_INPUT(DPAD_LEFT, 0x0200, "[Dpad Left]") \
+        DEFINE_INPUT(DPAD_LEFT, 0x0200, "Dpad Left") \
-        DEFINE_INPUT(DPAD_RIGHT, 0x0100, "[Dpad Right]") \
+        DEFINE_INPUT(DPAD_RIGHT, 0x0100, "Dpad Right") \
-        DEFINE_INPUT(L, 0x0020, "[L Button]") \
+        DEFINE_INPUT(L, 0x0020, "L Button") \
-        DEFINE_INPUT(R, 0x0010, "[R Button]") \
+        DEFINE_INPUT(R, 0x0010, "R Button") \
-        DEFINE_INPUT(C_UP, 0x0008, "[C Up]") \
+        DEFINE_INPUT(C_UP, 0x0008, "C Up") \
-        DEFINE_INPUT(C_DOWN, 0x0004, "[C Down]") \
+        DEFINE_INPUT(C_DOWN, 0x0004, "C Down") \
-        DEFINE_INPUT(C_LEFT, 0x0002, "[C Left]") \
+        DEFINE_INPUT(C_LEFT, 0x0002, "C Left") \
-        DEFINE_INPUT(C_RIGHT, 0x0001, "[C Right]")
+        DEFINE_INPUT(C_RIGHT, 0x0001, "C Right")
 
     #define DEFINE_N64_AXIS_INPUTS() \
-        DEFINE_INPUT(X_AXIS_NEG, 0, "[Analog Left]") \
+        DEFINE_INPUT(X_AXIS_NEG, 0, "Analog Left") \
-        DEFINE_INPUT(X_AXIS_POS, 0, "[Analog Right]") \
+        DEFINE_INPUT(X_AXIS_POS, 0, "Analog Right") \
-        DEFINE_INPUT(Y_AXIS_NEG, 0, "[Analog Down]") \
+        DEFINE_INPUT(Y_AXIS_NEG, 0, "Analog Down") \
-        DEFINE_INPUT(Y_AXIS_POS, 0, "[Analog Up]") \
+        DEFINE_INPUT(Y_AXIS_POS, 0, "Analog Up") \
 
     #define DEFINE_ALL_INPUTS() \
         DEFINE_N64_BUTTON_INPUTS() \

src/game/input.cpp

@@ -6,6 +6,7 @@
 #include "recomp_ui.h"
 #include "SDL.h"
 #include "rt64_layer.h"
+#include "promptfont.h"
 #include "GamepadMotion.hpp"
 
 constexpr float axis_threshold = 0.5f;
@@ -497,6 +498,85 @@ std::string controller_button_to_string(SDL_GameControllerButton button) {
     }
 }
 
+std::unordered_map<SDL_Scancode, std::string> scancode_codepoints {
+    {SDL_SCANCODE_LEFT, PF_KEYBOARD_LEFT},
+    // NOTE: UP and RIGHT are swapped with promptfont.
+    {SDL_SCANCODE_UP, PF_KEYBOARD_RIGHT},
+    {SDL_SCANCODE_RIGHT, PF_KEYBOARD_UP},
+    {SDL_SCANCODE_DOWN, PF_KEYBOARD_DOWN},
+    {SDL_SCANCODE_A, PF_KEYBOARD_A},
+    {SDL_SCANCODE_B, PF_KEYBOARD_B},
+    {SDL_SCANCODE_C, PF_KEYBOARD_C},
+    {SDL_SCANCODE_D, PF_KEYBOARD_D},
+    {SDL_SCANCODE_E, PF_KEYBOARD_E},
+    {SDL_SCANCODE_F, PF_KEYBOARD_F},
+    {SDL_SCANCODE_G, PF_KEYBOARD_G},
+    {SDL_SCANCODE_H, PF_KEYBOARD_H},
+    {SDL_SCANCODE_I, PF_KEYBOARD_I},
+    {SDL_SCANCODE_J, PF_KEYBOARD_J},
+    {SDL_SCANCODE_K, PF_KEYBOARD_K},
+    {SDL_SCANCODE_L, PF_KEYBOARD_L},
+    {SDL_SCANCODE_M, PF_KEYBOARD_M},
+    {SDL_SCANCODE_N, PF_KEYBOARD_N},
+    {SDL_SCANCODE_O, PF_KEYBOARD_O},
+    {SDL_SCANCODE_P, PF_KEYBOARD_P},
+    {SDL_SCANCODE_Q, PF_KEYBOARD_Q},
+    {SDL_SCANCODE_R, PF_KEYBOARD_R},
+    {SDL_SCANCODE_S, PF_KEYBOARD_S},
+    {SDL_SCANCODE_T, PF_KEYBOARD_T},
+    {SDL_SCANCODE_U, PF_KEYBOARD_U},
+    {SDL_SCANCODE_V, PF_KEYBOARD_V},
+    {SDL_SCANCODE_W, PF_KEYBOARD_W},
+    {SDL_SCANCODE_X, PF_KEYBOARD_X},
+    {SDL_SCANCODE_Y, PF_KEYBOARD_Y},
+    {SDL_SCANCODE_Z, PF_KEYBOARD_Z},
+    {SDL_SCANCODE_0, PF_KEYBOARD_0},
+    {SDL_SCANCODE_1, PF_KEYBOARD_1},
+    {SDL_SCANCODE_2, PF_KEYBOARD_2},
+    {SDL_SCANCODE_3, PF_KEYBOARD_3},
+    {SDL_SCANCODE_4, PF_KEYBOARD_4},
+    {SDL_SCANCODE_5, PF_KEYBOARD_5},
+    {SDL_SCANCODE_6, PF_KEYBOARD_6},
+    {SDL_SCANCODE_7, PF_KEYBOARD_7},
+    {SDL_SCANCODE_8, PF_KEYBOARD_8},
+    {SDL_SCANCODE_9, PF_KEYBOARD_9},
+    {SDL_SCANCODE_ESCAPE, PF_KEYBOARD_ESCAPE},
+    {SDL_SCANCODE_F1, PF_KEYBOARD_F1},
+    {SDL_SCANCODE_F2, PF_KEYBOARD_F2},
+    {SDL_SCANCODE_F3, PF_KEYBOARD_F3},
+    {SDL_SCANCODE_F4, PF_KEYBOARD_F4},
+    {SDL_SCANCODE_F5, PF_KEYBOARD_F5},
+    {SDL_SCANCODE_F6, PF_KEYBOARD_F6},
+    {SDL_SCANCODE_F7, PF_KEYBOARD_F7},
+    {SDL_SCANCODE_F8, PF_KEYBOARD_F8},
+    {SDL_SCANCODE_F9, PF_KEYBOARD_F9},
+    {SDL_SCANCODE_F10, PF_KEYBOARD_F10},
+    {SDL_SCANCODE_F11, PF_KEYBOARD_F11},
+    {SDL_SCANCODE_F12, PF_KEYBOARD_F12},
+    {SDL_SCANCODE_PRINTSCREEN, PF_KEYBOARD_PRINT_SCREEN},
+    {SDL_SCANCODE_SCROLLLOCK, PF_KEYBOARD_SCROLL_LOCK},
+    {SDL_SCANCODE_PAUSE, PF_KEYBOARD_PAUSE},
+    {SDL_SCANCODE_INSERT, PF_KEYBOARD_INSERT},
+    {SDL_SCANCODE_HOME, PF_KEYBOARD_HOME},
+    {SDL_SCANCODE_PAGEUP, PF_KEYBOARD_PAGE_UP},
+    {SDL_SCANCODE_DELETE, PF_KEYBOARD_DELETE},
+    {SDL_SCANCODE_END, PF_KEYBOARD_END},
+    {SDL_SCANCODE_PAGEDOWN, PF_KEYBOARD_PAGE_DOWN},
+    {SDL_SCANCODE_SPACE, PF_KEYBOARD_SPACE},
+    {SDL_SCANCODE_BACKSPACE, PF_KEYBOARD_BACKSPACE},
+    {SDL_SCANCODE_TAB, PF_KEYBOARD_TAB},
+    {SDL_SCANCODE_RETURN, PF_KEYBOARD_ENTER},
+    {SDL_SCANCODE_CAPSLOCK, PF_KEYBOARD_CAPS},
+    {SDL_SCANCODE_NUMLOCKCLEAR, PF_KEYBOARD_NUM_LOCK},
+};
+
+std::string keyboard_input_to_string(SDL_Scancode key) {
+    if (scancode_codepoints.find(key) != scancode_codepoints.end()) {
+        return scancode_codepoints[key];
+    }
+    return std::to_string(key);
+}
+
 std::string controller_axis_to_string(int axis) {
     bool positive = axis > 0;
     SDL_GameControllerAxis actual_axis = SDL_GameControllerAxis(abs(axis) - 1);
@@ -526,6 +606,8 @@ std::string recomp::InputField::to_string() const {
             return controller_button_to_string((SDL_GameControllerButton)input_id);
         case InputType::ControllerAnalog:
             return controller_axis_to_string(input_id);
+        case InputType::Keyboard:
+            return keyboard_input_to_string((SDL_Scancode)input_id);
         default:
             return std::to_string(input_type) + "," + std::to_string(input_id);
     }

src/ui/ui_config.cpp

@@ -47,7 +47,7 @@ static int scanned_binding_index = -1;
 static int scanned_input_index = -1;
 static int focused_input_index = -1;
 
-constexpr recomp::InputDevice cur_device = recomp::InputDevice::Controller;
+static recomp::InputDevice cur_device = recomp::InputDevice::Controller;
 
 void recomp::finish_scanning_input(recomp::InputField scanned_field) {
 	recomp::set_input_binding(static_cast<recomp::GameInput>(scanned_input_index), scanned_binding_index, cur_device, scanned_field);
@@ -105,6 +105,15 @@ public:
 			[](const std::string& param, Rml::Event& event) {
 				close_config_menu();
 			});
+
+		recomp::register_event(listener, "toggle_input_device",
+			[](const std::string& param, Rml::Event& event) {
+				cur_device = cur_device == recomp::InputDevice::Controller
+					? recomp::InputDevice::Keyboard
+					: recomp::InputDevice::Controller;
+				controls_model_handle.DirtyVariable("input_device_is_keyboard");
+				controls_model_handle.DirtyVariable("inputs");
+			});
 	}
 	void make_graphics_bindings(Rml::Context* context) {
 		Rml::DataModelConstructor constructor = context->CreateDataModel("graphics_model");
@@ -147,6 +156,7 @@ public:
 		}
 
 		constructor.BindFunc("input_count", [](Rml::Variant& out) { out = recomp::get_num_inputs(); } );
+		constructor.BindFunc("input_device_is_keyboard", [](Rml::Variant& out) { out = cur_device == recomp::InputDevice::Keyboard; } );
 
 		constructor.RegisterTransformFunc("get_input_name", [](const Rml::VariantList& inputs) {
 			return Rml::Variant{recomp::get_input_name(static_cast<recomp::GameInput>(inputs.at(0).Get<size_t>()))};
@@ -205,7 +215,7 @@ public:
 			virtual int Size(void* ptr) override { return recomp::bindings_per_input; }
 			virtual Rml::DataVariable Child(void* ptr, const Rml::DataAddressEntry& address) override {
 				recomp::GameInput input = static_cast<recomp::GameInput>((uintptr_t)ptr);
-				return Rml::DataVariable{&input_field_definition_instance, &recomp::get_input_binding(input, address.index, recomp::InputDevice::Controller)};
+				return Rml::DataVariable{&input_field_definition_instance, &recomp::get_input_binding(input, address.index, cur_device)};
 			}
 		};
 		// Static instance of the InputField array variable definition to have a fixed pointer to return to RmlUi.