Update dialog.

* Use the free function isntead of clearing the snow count directly.

* Also initialize the queue count to 0 if re-allocated.

.gitignore

@@ -13,8 +13,12 @@ RecompiledPatches/
 
 # Linux build output
 build/
+build-cmake/
 *.o
 
+# Flatpak build process
+repo/
+
 # Windows build output
 *.exe
 *.dll

.gitmodules

@@ -1,15 +1,6 @@
 [submodule "lib/N64ModernRuntime"]
 	path = lib/N64ModernRuntime
 	url = https://github.com/N64Recomp/N64ModernRuntime
-[submodule "lib/RmlUi"]
-	path = lib/RmlUi
-	url = https://github.com/mikke89/RmlUi
-[submodule "lib/freetype-windows-binaries"]
-	path = lib/freetype-windows-binaries
-	url = https://github.com/ubawurinna/freetype-windows-binaries/
-[submodule "lib/lunasvg"]
-	path = lib/lunasvg
-	url = https://github.com/sammycage/lunasvg
 [submodule "lib/rt64"]
 	path = lib/rt64
 	url = https://github.com/rt64/rt64
@@ -19,3 +10,6 @@
 [submodule "BanjoRecompSyms"]
 	path = BanjoRecompSyms
 	url = https://github.com/BanjoRecomp/BanjoRecompSyms
+[submodule "lib/RecompFrontend"]
+	path = lib/RecompFrontend
+	url = https://github.com/N64Recomp/RecompFrontend

CMakeLists.txt

@@ -51,15 +51,7 @@ endif()
 
 add_subdirectory(${CMAKE_SOURCE_DIR}/lib/rt64 ${CMAKE_BINARY_DIR}/rt64)
 
-# set(BUILD_SHARED_LIBS_SAVED "${BUILD_SHARED_LIBS}")
 set(BUILD_SHARED_LIBS OFF)
-SET(LUNASVG_BUILD_EXAMPLES OFF CACHE BOOL "" FORCE)
-add_subdirectory(${CMAKE_SOURCE_DIR}/lib/lunasvg)
-# set(BUILD_SHARED_LIBS "${BUILD_SHARED_LIBS_SAVED}")
-SET(RMLUI_SVG_PLUGIN ON CACHE BOOL "" FORCE)
-SET(RMLUI_TESTS_ENABLED OFF CACHE BOOL "" FORCE)
-add_subdirectory(${CMAKE_SOURCE_DIR}/lib/RmlUi)
-target_compile_definitions(rmlui_core PRIVATE LUNASVG_BUILD_STATIC)
 
 add_subdirectory(${CMAKE_SOURCE_DIR}/lib/N64ModernRuntime)
 
@@ -148,15 +140,12 @@ add_custom_command(OUTPUT
 add_executable(BanjoRecompiled)
 
 set (SOURCES
+    ${CMAKE_SOURCE_DIR}/src/main/launcher_animation.cpp
     ${CMAKE_SOURCE_DIR}/src/main/main.cpp
-    ${CMAKE_SOURCE_DIR}/src/main/support.cpp
     ${CMAKE_SOURCE_DIR}/src/main/register_overlays.cpp
     ${CMAKE_SOURCE_DIR}/src/main/register_patches.cpp
-    ${CMAKE_SOURCE_DIR}/src/main/rt64_render_context.cpp
     ${CMAKE_SOURCE_DIR}/src/main/theme.cpp
 
-    ${CMAKE_SOURCE_DIR}/src/game/input.cpp
-    ${CMAKE_SOURCE_DIR}/src/game/controls.cpp
     ${CMAKE_SOURCE_DIR}/src/game/config.cpp
     ${CMAKE_SOURCE_DIR}/src/game/debug.cpp
     ${CMAKE_SOURCE_DIR}/src/game/recomp_api.cpp
@@ -164,68 +153,36 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/game/recomp_data_api.cpp
     ${CMAKE_SOURCE_DIR}/src/game/rom_decompression.cpp
 
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_renderer.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_state.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_launcher.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_config.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_prompt.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_config_sub_menu.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_color_hack.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_rml_hacks.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_elements.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_mod_details_panel.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_mod_installer.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_mod_menu.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_api.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_api_events.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_api_images.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/ui_utils.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/util/hsv.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/core/ui_context.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_button.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_clickable.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_container.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_element.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_image.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_label.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_radio.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_scroll_container.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_slider.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_span.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_style.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_text_input.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_theme.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ui_toggle.cpp
-
     ${CMAKE_SOURCE_DIR}/rsp/n_aspMain.cpp
-
-    ${CMAKE_SOURCE_DIR}/lib/RmlUi/Backends/RmlUi_Platform_SDL.cpp
 )
 
-if (APPLE)
-    list(APPEND SOURCES ${CMAKE_SOURCE_DIR}/src/main/support_apple.mm)
-endif()
-
 target_include_directories(BanjoRecompiled PRIVATE
     ${CMAKE_SOURCE_DIR}/include
     ${CMAKE_SOURCE_DIR}/lib/N64ModernRuntime/N64Recomp/include
     ${CMAKE_SOURCE_DIR}/lib/concurrentqueue
-    ${CMAKE_SOURCE_DIR}/lib/GamepadMotionHelpers
-    ${CMAKE_SOURCE_DIR}/lib/RmlUi/Include
-    ${CMAKE_SOURCE_DIR}/lib/RmlUi/Backends
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/contrib
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/contrib/hlslpp/include
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/contrib/dxc/inc
     ${CMAKE_SOURCE_DIR}/lib/rt64/src
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/rhi
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/render
+    ${CMAKE_SOURCE_DIR}/lib/RecompFrontend/recompinput/include
+    ${CMAKE_SOURCE_DIR}/lib/RecompFrontend/recompui/include
+    ${CMAKE_SOURCE_DIR}/lib/RecompFrontend/recompui/src
     ${CMAKE_SOURCE_DIR}/lib/freetype-windows-binaries/include
     ${CMAKE_SOURCE_DIR}/lib/rt64/src/contrib/nativefiledialog-extended/src/include
     ${CMAKE_SOURCE_DIR}/lib/SlotMap
-    ${CMAKE_BINARY_DIR}/shaders
     ${CMAKE_CURRENT_BINARY_DIR}
 )
 
+# Generate icon_bytes.c from the app icon PNG.
+add_custom_command(OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.h
+    COMMAND file_to_c ${CMAKE_SOURCE_DIR}/icons/app.png icon_bytes ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.h
+    DEPENDS ${CMAKE_SOURCE_DIR}/icons/app.png
+)
+
+target_sources(BanjoRecompiled PRIVATE ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c)
+
 if(CMAKE_SIZEOF_VOID_P EQUAL 8 AND CMAKE_SYSTEM_PROCESSOR MATCHES "x86_64|amd64|AMD64")
     target_compile_options(BanjoRecompiled PRIVATE
         -march=nehalem
@@ -285,11 +242,11 @@ if (WIN32)
         PROPERTIES
             LINK_FLAGS_DEBUG "/SUBSYSTEM:CONSOLE"
             LINK_FLAGS_RELEASE "/SUBSYSTEM:WINDOWS /ENTRY:mainCRTStartup"
-            LINK_FLAGS_RELWITHDEBINFO "/SUBSYSTEM:WINDOWS /ENTRY:mainCRTStartup"
+            LINK_FLAGS_RELWITHDEBINFO  "/SUBSYSTEM:WINDOWS /ENTRY:mainCRTStartup"
             LINK_FLAGS_MINSIZEREL "/SUBSYSTEM:WINDOWS /ENTRY:mainCRTStartup"
     )
 
-    # target_sources(BanjoRecompiled PRIVATE ${CMAKE_SOURCE_DIR}/icons/app.rc)
+    target_sources(BanjoRecompiled PRIVATE ${CMAKE_SOURCE_DIR}/icons/app.rc)
     target_link_libraries(BanjoRecompiled PRIVATE SDL2 Winmm.lib)
 endif()
 
@@ -310,15 +267,9 @@ if (CMAKE_SYSTEM_NAME MATCHES "Linux")
     find_package(SDL2 REQUIRED)
     find_package(X11 REQUIRED)
 
+    add_compile_definitions("PLUME_SDL_VULKAN_ENABLED")
     add_compile_definitions("RT64_SDL_WINDOW_VULKAN")
 
-    # Generate icon_bytes.c from the app icon PNG.
-    add_custom_command(OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.h
-        COMMAND file_to_c ${CMAKE_SOURCE_DIR}/icons/512.png icon_bytes ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.h
-        DEPENDS ${CMAKE_SOURCE_DIR}/icons/512.png
-    )
-    target_sources(BanjoRecompiled PRIVATE ${CMAKE_CURRENT_BINARY_DIR}/icon_bytes.c)
-
     message(STATUS "SDL2_FOUND = ${SDL2_FOUND}")
     message(STATUS "SDL2_INCLUDE_DIRS = ${SDL2_INCLUDE_DIRS}")
 
@@ -348,18 +299,6 @@ if (CMAKE_SYSTEM_NAME MATCHES "Linux")
     target_link_libraries(BanjoRecompiled PRIVATE "-latomic -static-libstdc++" ${CMAKE_DL_LIBS} Threads::Threads)
 endif()
 
-target_link_libraries(BanjoRecompiled PRIVATE
-    PatchesLib
-    RecompiledFuncs
-    librecomp
-    ultramodern
-    rt64
-    RmlUi::Core
-    RmlUi::Debugger
-    nfd
-    lunasvg
-)
-
 # TODO fix the rt64 CMake script so that this doesn't need to be duplicated here
 # For DXC
 set (DXC_COMMON_OPTS "-I${PROJECT_SOURCE_DIR}/src")
@@ -392,8 +331,21 @@ else()
     endif()
 endif()
 
-build_vertex_shader(BanjoRecompiled "shaders/InterfaceVS.hlsl" "shaders/InterfaceVS.hlsl")
-build_pixel_shader(BanjoRecompiled "shaders/InterfacePS.hlsl" "shaders/InterfacePS.hlsl")
+set(RECOMP_FRONTEND_N64MODERNRUNTIME_PATH ${CMAKE_SOURCE_DIR}/lib/N64ModernRuntime)
+set(RECOMP_FRONTEND_RT64_PATH ${CMAKE_SOURCE_DIR}/lib/rt64)
+
+add_subdirectory(${CMAKE_SOURCE_DIR}/lib/RecompFrontend)
+
+target_link_libraries(BanjoRecompiled PRIVATE
+    PatchesLib
+    RecompiledFuncs
+    recompui
+    recompinput
+    librecomp
+    ultramodern
+    rt64
+    nfd
+)
 
 # Embed all .nrm files in the "mods" directory
 file(GLOB NRM_FILES "${CMAKE_SOURCE_DIR}/mods/*.nrm")

assets/Banjo.svg

@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 649 622" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-367,-304)">
+        <g transform="matrix(0.946016,0,0,0.946016,29.4118,58.1121)">
+            <g id="Banjo" transform="matrix(19.8117,0,0,19.8117,336.522,82.7412)">
+                <g>
+                    <g>
+                        <path d="M15.411,23.721L16.802,21.264L15.038,16.771C14.44,13.215 16.372,8.93 20.504,9.189C28.893,10.832 37.74,18.394 35.195,32.829C34.692,35.685 31.138,37.414 29.053,36.96" style="fill:rgb(111,36,6);"/>
+                        <path d="M15.038,35.777C15.056,39.159 17.023,42.13 19.725,42.13C26.084,42.13 30.194,36.258 31.12,34.02C32.045,31.782 33.531,27.026 31.12,24.615C29.348,22.843 25.753,21.06 19.991,23.173" style="fill:rgb(255,206,140);"/>
+                        <path d="M28.506,13.481C30.336,11.364 31.158,10.191 33.077,12.435C34.465,14.058 34.168,15.414 31.874,17.788" style="fill:rgb(111,36,6);"/>
+                        <g transform="matrix(0.74875,0,0,0.727217,7.57778,3.95431)">
+                            <path d="M28.941,12.931C30.707,10.695 31.557,9.588 33.539,12.106C34.861,13.784 34.44,15.653 31.992,17.508C31.479,15.668 30.044,14.066 28.941,12.931Z" style="fill:rgb(255,206,140);"/>
+                        </g>
+                        <path d="M16.108,35.523C16.325,39.271 20.035,39.854 22.515,38.056C24.764,36.425 25.913,32.747 24.171,29.342" style="fill:rgb(186,87,87);"/>
+                        <clipPath id="_clip1">
+                            <path d="M16.108,35.523C16.325,39.271 20.035,39.854 22.515,38.056C24.764,36.425 25.913,32.747 24.171,29.342"/>
+                        </clipPath>
+                        <g clip-path="url(#_clip1)">
+                            <path d="M17.337,37.397C19.65,34.474 22.629,33.498 24.081,35.425L23.994,39.036L16.623,39.792L17.337,37.397Z" style="fill:rgb(225,151,151);"/>
+                            <path d="M16.709,35.345C16.811,37.082 17.425,37.886 18.875,38.022C21.324,38.253 24.213,36.316 25.008,33.12C28.305,38.592 25.787,40.96 18.875,40.981C15.876,39.827 14.338,38.095 15.374,35.345" style="fill:white;"/>
+                        </g>
+                        <g>
+                            <path d="M19.427,17.547C18.324,14.059 15.417,15.606 14.776,17.152C14.267,18.381 14.228,20.129 14.776,21.21C15.506,22.65 17.747,24.305 19.427,21.279C19.865,20.49 19.735,18.522 19.427,17.547Z" style="fill:white;"/>
+                            <path d="M23.5,14.989C20.518,14.838 18.529,17.828 19.101,20.275C19.38,21.474 20.275,22.542 21.968,23.047C26.221,24.314 28.194,15.65 23.5,14.989" style="fill:white;"/>
+                            <g transform="matrix(1.05952,0.153499,-0.15249,1.05255,1.44489,-4.37471)">
+                                <clipPath id="_clip2">
+                                    <path d="M22.982,15.046C20.205,15.306 18.767,18.357 19.623,20.557C20.042,21.635 21.012,22.509 22.645,22.75C26.746,23.356 27.41,15.027 22.982,15.046"/>
+                                </clipPath>
+                                <g clip-path="url(#_clip2)">
+                                    <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048Z" style="fill:rgb(65,175,239);"/>
+                                    <clipPath id="_clip3">
+                                        <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048Z"/>
+                                    </clipPath>
+                                    <g clip-path="url(#_clip3)">
+                                        <g transform="matrix(1,0,0,1,0.368837,-1.57879)">
+                                            <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.044,21.376 21.044,19.856C21.044,18.336 21.755,17.048 23.062,17.048Z" style="fill:rgb(7,121,188);"/>
+                                        </g>
+                                        <g transform="matrix(0.53744,1.64783e-17,-1.64783e-17,0.53744,11.0687,9.25602)">
+                                            <clipPath id="_clip4">
+                                                <path d="M22.982,15.046C20.205,15.306 18.767,18.357 19.623,20.557C20.042,21.635 21.012,22.509 22.645,22.75C26.746,23.356 27.41,15.027 22.982,15.046"/>
+                                            </clipPath>
+                                            <g clip-path="url(#_clip4)">
+                                                <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048Z"/>
+                                            </g>
+                                        </g>
+                                        <g transform="matrix(0.264491,0.0301672,-0.0297719,0.264491,17.1628,13.1906)">
+                                            <clipPath id="_clip5">
+                                                <path d="M22.982,15.046C20.205,15.306 18.767,18.357 19.623,20.557C20.042,21.635 21.012,22.509 22.645,22.75C26.746,23.356 27.41,15.027 22.982,15.046"/>
+                                            </clipPath>
+                                            <g clip-path="url(#_clip5)">
+                                                <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048Z" style="fill:white;"/>
+                                            </g>
+                                        </g>
+                                    </g>
+                                    <path d="M25.086,19.953C25.086,19.962 25.085,19.97 25.085,19.978C25.067,20.476 24.984,20.868 24.875,21.175C25.011,20.789 25.073,20.363 25.086,19.953ZM24.325,22.071C24.007,22.377 23.588,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048C24.498,17.048 25.035,18.164 25.084,19.58C25.07,19.213 25.019,18.875 24.95,18.61C24.561,17.118 23.478,17.07 23.062,17.067L23.062,17.299C23.062,17.306 22.531,17.235 22.045,17.628C21.357,18.183 21.1,19.281 21.19,20.41C21.316,21.985 22.134,22.536 23.157,22.522C23.751,22.515 24.131,22.252 24.325,22.071ZM24.875,21.175C24.87,21.188 24.865,21.202 24.861,21.215C24.773,21.452 24.66,21.665 24.522,21.848C24.638,21.694 24.769,21.476 24.875,21.175Z" style="fill:rgb(7,121,188);"/>
+                                </g>
+                            </g>
+                            <g transform="matrix(0.976398,-0.00871671,0.0091843,1.02877,-5.67531,-0.415767)">
+                                <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 21.11,21.416 21.11,19.896C21.11,18.375 21.869,17.048 23.062,17.048Z" style="fill:rgb(65,175,239);"/>
+                                <clipPath id="_clip6">
+                                    <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 21.11,21.416 21.11,19.896C21.11,18.375 21.869,17.048 23.062,17.048Z"/>
+                                </clipPath>
+                                <g clip-path="url(#_clip6)">
+                                    <g transform="matrix(1,0,0,1,0.661429,-1.55465)">
+                                        <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 20.622,20.935 21.017,19.398C21.396,17.921 21.869,17.048 23.062,17.048Z" style="fill:rgb(7,121,188);"/>
+                                    </g>
+                                    <g transform="matrix(0.53744,-2.16183e-18,-2.27597e-17,0.53744,11.0608,9.33321)">
+                                        <clipPath id="_clip7">
+                                            <path d="M25.328,17.462C23.752,13.788 20.732,15.77 19.87,17.392C17.949,21.006 21.567,25.434 25.638,21.482C25.656,21.464 25.675,21.446 25.694,21.428"/>
+                                        </clipPath>
+                                        <g clip-path="url(#_clip7)">
+                                            <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.869,17.048 23.062,17.048Z"/>
+                                        </g>
+                                    </g>
+                                    <g transform="matrix(0.280835,0.0606888,-0.0622655,0.25954,17.4675,12.6085)">
+                                        <clipPath id="_clip8">
+                                            <path d="M25.328,17.462C23.752,13.788 20.732,15.77 19.87,17.392C17.949,21.006 21.567,25.434 25.638,21.482C25.656,21.464 25.675,21.446 25.694,21.428"/>
+                                        </clipPath>
+                                        <g clip-path="url(#_clip8)">
+                                            <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.869,17.048 23.062,17.048Z" style="fill:white;"/>
+                                        </g>
+                                    </g>
+                                </g>
+                                <path d="M25.052,20.39C25.052,20.391 25.052,20.391 25.052,20.391C25.025,20.607 24.983,20.813 24.925,21.007C25.031,20.648 25.084,20.249 25.088,19.832C25.088,19.855 25.087,19.878 25.087,19.9C25.083,20.058 25.073,20.225 25.052,20.39ZM23.948,22.34C23.695,22.479 23.4,22.556 23.062,22.556C21.461,22.556 21.11,21.416 21.11,19.896C21.11,18.376 21.869,17.048 23.062,17.048L23.062,17.307C22.89,17.304 22.333,17.294 21.83,17.998C21.555,18.383 21.285,19.033 21.255,19.896C21.197,21.55 21.606,22.497 23.078,22.532C23.508,22.542 23.818,22.414 23.99,22.317C23.98,22.323 23.971,22.328 23.961,22.333C23.956,22.336 23.952,22.339 23.948,22.34ZM24.302,22.082C24.251,22.13 24.198,22.174 24.143,22.216C24.216,22.161 24.285,22.101 24.349,22.036C24.333,22.052 24.318,22.067 24.302,22.082ZM24.349,22.036C24.502,21.879 24.672,21.651 24.811,21.325C24.72,21.54 24.607,21.733 24.471,21.9C24.432,21.947 24.392,21.992 24.349,22.036ZM23.062,17.048C24.589,17.048 25.045,18.168 25.085,19.589C25.08,19.443 25.07,19.296 25.054,19.147C24.985,18.494 24.805,17.971 24.482,17.613C24.003,17.084 23.343,17.07 23.062,17.068L23.062,17.048Z" style="fill:rgb(7,121,188);"/>
+                            </g>
+                            <g transform="matrix(0.260875,0.114682,-0.0945952,0.215183,19.9731,15.1626)">
+                                <clipPath id="_clip9">
+                                    <path d="M22.982,15.046C20.205,15.306 18.767,18.357 19.623,20.557C20.042,21.635 21.012,22.509 22.645,22.75C26.746,23.356 27.41,15.027 22.982,15.046"/>
+                                </clipPath>
+                                <g clip-path="url(#_clip9)">
+                                    <path d="M23.062,17.048C24.572,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.441,22.556 23.062,22.556C21.552,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.755,17.048 23.062,17.048Z" style="fill:white;"/>
+                                </g>
+                            </g>
+                            <g transform="matrix(0.27972,0.0291679,-0.0255573,0.245094,12.2906,16.2888)">
+                                <clipPath id="_clip10">
+                                    <path d="M25.328,17.462C23.752,13.788 20.732,15.77 19.87,17.392C17.949,21.006 21.567,25.434 25.638,21.482C25.656,21.464 25.675,21.446 25.694,21.428"/>
+                                </clipPath>
+                                <g clip-path="url(#_clip10)">
+                                    <path d="M23.062,17.048C24.664,17.048 25.088,18.282 25.088,19.802C25.088,21.322 24.416,22.556 23.062,22.556C21.461,22.556 21.037,21.322 21.037,19.802C21.037,18.282 21.869,17.048 23.062,17.048Z" style="fill:white;"/>
+                                </g>
+                            </g>
+                        </g>
+                        <path d="M22.021,9.551C17.546,8.366 12.927,8.618 10.575,14.496C13.332,15.58 16.969,14.792 20.963,12.389" style="fill:rgb(111,36,6);"/>
+                        <g transform="matrix(0.99548,-0.0949726,0.0949726,0.99548,-0.729626,2.03017)">
+                            <path d="M20.504,9.189C16.028,8.005 12.927,8.618 10.575,14.496C13.332,15.58 16.969,14.792 20.963,12.389" style="fill:rgb(111,36,6);"/>
+                        </g>
+                        <g transform="matrix(0.932428,-0.164274,0.175814,0.997929,-0.109592,3.46156)">
+                            <path d="M20.504,9.189C16.028,8.005 12.927,8.618 10.575,14.496C13.332,15.58 16.969,14.792 20.963,12.389" style="fill:rgb(111,36,6);"/>
+                        </g>
+                        <path d="M21.228,22.768C17.758,23.429 15.151,21.035 12.225,20.129C8.051,18.838 3.034,23.309 2.945,24.615C2.399,32.669 6.556,35.739 11.337,36.053C16.118,36.366 23.547,33.798 24.983,26.952" style="fill:rgb(255,206,140);"/>
+                        <clipPath id="_clip11">
+                            <path d="M21.228,22.768C17.758,23.429 15.151,21.035 12.225,20.129C8.051,18.838 3.034,23.309 2.945,24.615C2.399,32.669 6.556,35.739 11.337,36.053C16.118,36.366 23.547,33.798 24.983,26.952"/>
+                        </clipPath>
+                        <g clip-path="url(#_clip11)">
+                            <path d="M14.98,35.788C13.095,36.183 9.808,35.962 7.43,33.8C4.424,31.068 4.608,26.832 4.776,25.035C4.786,24.927 4.861,24.866 4.874,24.856C4.901,24.835 4.932,24.818 4.964,24.808C5.072,24.777 5.155,24.823 5.17,24.831C5.265,24.883 5.291,24.972 5.296,24.988C5.306,25.021 5.305,25.057 5.306,25.092C5.307,25.149 5.082,26.554 5.219,28.18C5.782,34.87 11.575,36.34 14.934,35.795L14.98,35.788Z" style="fill:rgb(180,138,80);"/>
+                        </g>
+                    </g>
+                    <path d="M5.583,25.051C3.978,25 2.552,24.013 1.936,22.53C1.188,20.728 0.716,18.644 1.413,16.951C2.107,15.266 4.098,14.029 6.544,13.982C8.55,13.943 11.204,15.606 11.897,17.253C12.608,18.94 12.621,21.373 10.011,23.906C9.283,24.611 8.32,25.02 7.307,25.056C6.781,25.074 6.209,25.071 5.583,25.051Z" style="fill:rgb(49,49,49);"/>
+                    <path d="M5.291,19.898C5.039,19.32 4.979,18.579 5.104,18.052C5.24,17.478 8.438,17.548 8.072,18.561C7.976,18.828 7.077,19.806 7.077,19.806C7.785,18.616 7.609,18.466 7.395,18.461C6.487,18.437 5.784,18.913 5.291,19.898Z"/>
+                    <g transform="matrix(-0.540336,-0.220184,-0.310328,0.761552,11.9366,5.53434)">
+                        <path d="M5.291,19.898C5.039,19.32 4.979,18.579 5.104,18.052C5.24,17.478 8.438,17.548 8.072,18.561C7.976,18.828 7.077,19.806 7.077,19.806C7.785,18.616 7.609,18.466 7.395,18.461C6.487,18.437 5.784,18.913 5.291,19.898Z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

assets/Cloud1.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 461 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-104,-128)">
+        <path id="Cloud1" d="M541.776,256.714C556.651,258.998 565,261.564 565,264.275C565,273.809 461.716,281.55 334.5,281.55C207.284,281.55 104,273.809 104,264.275C104,260.866 117.201,257.687 139.978,255.009C136.85,250.725 135,245.429 135,239.7C135,225.461 146.426,213.9 160.5,213.9C166.004,213.9 171.103,215.668 175.272,218.673C177.641,197.762 195.214,181.5 216.512,181.5C231.842,181.5 245.242,189.926 252.431,202.446C257.117,190.196 268.878,181.5 282.631,181.5C290.836,181.5 298.332,184.596 304.04,189.694C304.013,188.966 304,188.235 304,187.5C304,154.661 330.661,128 363.5,128C380.444,128 395.742,135.098 406.583,146.479C410.731,137.908 419.439,132 429.5,132C441.276,132 451.198,140.093 454.124,151.077C457.505,150.371 461.007,150 464.593,150C492.936,150 515.972,173.174 516.185,201.801C516.786,201.767 517.391,201.75 518,201.75C535.865,201.75 550.369,216.425 550.369,234.5C550.369,243.07 547.109,250.875 541.776,256.714Z" style="fill:white;"/>
+    </g>
+</svg>

assets/Cloud2.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 461 167" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-659,-115)">
+        <g id="Cloud2" transform="matrix(1,0,0,1,555,0)">
+            <path d="M542.735,256.863C557.009,259.11 565,261.623 565,264.275C565,273.809 461.716,281.55 334.5,281.55C207.284,281.55 104,273.809 104,264.275C104,261.041 115.882,258.014 136.55,255.424C133.075,251.144 130.988,245.666 130.988,239.7C130.988,226.013 141.972,214.9 155.5,214.9C160.086,214.9 164.379,216.177 168.051,218.398C168.017,217.769 168,217.137 168,216.5C168,197.459 183.279,182 202.099,182C209.626,182 216.587,184.473 222.23,188.659C226.718,160.251 251.339,138.5 281,138.5C288.882,138.5 296.409,140.036 303.296,142.825C317.767,126.151 339.111,115.6 362.9,115.6C391.852,115.6 417.183,131.228 430.91,154.501C435.157,152.885 439.757,152 444.56,152C465.981,152 483.372,169.596 483.372,191.269C483.372,192.715 483.295,194.143 483.144,195.548C487.017,193.597 491.383,192.5 496,192.5C511.956,192.5 524.91,205.606 524.91,221.75C524.91,223.717 524.718,225.638 524.351,227.496C526.498,226.534 528.873,226 531.371,226C540.958,226 548.741,233.875 548.741,243.575C548.741,248.88 546.413,253.64 542.735,256.863Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>

assets/Cloud3.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 295 167" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-1190,-115)">
+        <g id="Cloud3" transform="matrix(1,0,0,1,991.5,2.84217e-14)">
+            <path d="M211.793,257.103C203.71,250.792 198.5,240.894 198.5,229.775C198.5,210.734 213.779,195.275 232.599,195.275L232.611,195.275C234.309,170.098 255.297,150.174 280.901,150.174C287.974,150.174 294.694,151.694 300.753,154.426C311.82,131.462 335.322,115.6 362.5,115.6C391.518,115.6 416.345,133.682 426.32,159.183C430.023,156.91 434.367,155.6 439.012,155.6C452.54,155.6 463.523,166.713 463.523,180.4C463.523,182.645 463.228,184.821 462.674,186.89C479.579,191.132 492.124,206.599 492.124,225.006C492.124,237.763 486.099,249.107 476.773,256.282C487.456,258.673 493.5,261.392 493.5,264.275C493.5,273.809 427.407,281.55 346,281.55C264.593,281.55 198.5,273.809 198.5,264.275C198.5,261.717 203.258,259.288 211.793,257.103Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>

assets/Cloud4.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 301 293" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-446,-345)">
+        <path id="Cloud4" d="M507.232,547.816C501.885,550.184 495.97,551.5 489.75,551.5C465.88,551.5 446.5,532.12 446.5,508.25C446.5,484.38 465.88,465 489.75,465C496.442,465 502.78,466.523 508.438,469.241C508.211,467.861 508.092,466.444 508.092,465C508.092,456.045 512.646,448.144 519.562,443.49C516.331,439.168 514.417,433.806 514.417,428C514.417,413.701 526.026,402.092 540.325,402.092C544.387,402.092 548.232,403.029 551.656,404.698C558.101,398.629 566.782,394.908 576.325,394.908C578.586,394.908 580.798,395.117 582.943,395.516C582.325,392.678 582,389.731 582,386.709C582,363.919 600.502,345.417 623.291,345.417C645.367,345.417 663.42,362.779 664.529,384.581C666.116,384.142 667.782,383.908 669.5,383.908C680.262,383.908 689,393.094 689,404.408L688.998,404.729C692.46,401.423 697.058,399.408 702.099,399.408C708.585,399.408 714.336,402.744 717.882,407.873C719.085,407.628 720.328,407.5 721.599,407.5C732.361,407.5 741.099,416.686 741.099,428C741.099,432.836 739.502,437.284 736.833,440.791C739.534,445.046 741.099,450.092 741.099,455.5C741.099,470.678 728.777,483 713.599,483C707.252,483 701.405,480.845 696.749,477.228C695.363,487.436 688.367,495.872 678.972,499.323C678.991,499.879 679,500.439 679,501C679,507.623 677.683,513.941 675.297,519.706C676.122,521.635 676.733,523.677 677.1,525.803C685.992,530.361 692.083,539.62 692.083,550.291C692.083,550.59 692.078,550.888 692.069,551.184C695.81,551.993 699.161,553.931 701.787,556.643C706.24,553.716 711.501,552.024 717.135,552.024C733.148,552.024 746.147,565.691 746.147,582.524C746.147,589.606 743.847,596.127 739.989,601.306C741.31,604.095 742.049,607.212 742.049,610.5C742.049,622.38 732.404,632.024 720.524,632.024C715.35,632.024 710.599,630.194 706.885,627.147C701.859,633.741 693.923,638 685,638C669.822,638 657.5,625.678 657.5,610.5C657.5,607.508 657.979,604.626 658.864,601.929C649.258,601.088 641.62,592.914 641.036,582.753C640.047,582.915 639.033,583 638,583C631.267,583 625.326,579.405 621.822,573.942C618.019,576.272 613.811,578.004 609.33,579.006C606.616,586.84 599.485,592.451 591.111,592.5C591.691,594.787 592,597.182 592,599.648C592,615.654 579.006,628.648 563,628.648C555.88,628.648 549.356,626.077 544.307,621.813C541.916,622.913 539.275,623.524 536.5,623.524C525.738,623.524 517,614.339 517,603.024C517,597.125 519.376,591.804 523.175,588.063C519.493,585.907 517,581.774 517,577.033C517,574.591 517.661,572.31 518.806,570.377C511.821,567.258 506.917,559.976 506.917,551.5C506.917,550.242 507.025,549.011 507.232,547.816Z" style="fill:white;"/>
+    </g>
+</svg>

assets/JiggyColor.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1054 1044" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-348,-18)">
+        <g transform="matrix(0.965901,0,0,0.965901,29.8367,18.4135)">
+            <rect x="330" y="0" width="1090" height="1080" style="fill:rgb(255,201,69);"/>
+        </g>
+    </g>
+</svg>

assets/JiggyHole.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2180 2160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.837799,0,0,0.823158,362.599,628.361)">
+        <path d="M2169.26,-763.354L2169.26,1860.69L-432.8,1860.69L-432.8,-763.354L2169.26,-763.354ZM576.269,847.984L660.512,1167.98L950.699,1088.84C912.269,1067.12 882.2,1030.18 869.936,983.6C845.93,892.416 899.177,798.549 988.767,774.117C1078.36,749.684 1170.58,803.878 1194.59,895.062C1206.85,941.647 1198.96,988.933 1176.35,1027.3L1466.53,948.162L1382.27,628.092C1360.47,662.883 1326.33,689.805 1284.12,701.316C1194.53,725.75 1102.3,671.558 1078.3,580.372C1054.29,489.188 1107.54,395.321 1197.13,370.888C1239.34,359.377 1282.13,365.317 1318.1,384.358L1250.56,127.805L960.463,206.919C983.019,168.569 990.892,121.33 978.639,74.789C954.634,-16.395 862.407,-70.589 772.817,-46.157C683.227,-21.724 629.98,72.143 653.985,163.327C666.238,209.868 696.263,246.771 734.637,268.505L444.539,347.619L512.06,604.091C476.111,585.098 433.361,579.18 391.193,590.679C301.6,615.113 248.356,708.979 272.362,800.163C296.368,891.349 388.591,945.541 478.184,921.108C520.352,909.608 554.468,882.73 576.269,847.984Z" style="fill:#1F63C2"/>
+    </g>
+</svg>

assets/JiggyShine.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1275 1346" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-505,-288)">
+        <g transform="matrix(1,0,0,1,182,432)">
+            <g transform="matrix(1.60405,0.926099,-0.849835,1.47196,-1141.53,-1729.71)">
+                <path d="M1708.78,2.179L1708.78,916.607L1476.3,1062.88L1476.3,148.447L1708.78,2.179Z" style="fill:white;"/>
+            </g>
+        </g>
+    </g>
+</svg>

assets/Kazooie.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 626 774" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(18.7432,0,0,18.7432,-523.058,-16.6354)">
+        <path d="M27.907,26.263C28.143,24.255 29.853,23.644 30.51,21.766C31.989,17.547 33.536,12.065 38.499,11.647C42.804,11.285 46.114,18.297 46.269,20.704" style="fill:rgb(255,8,0);"/>
+        <path d="M43.914,24.141L49.374,21.553L61.231,20.771C56.596,22.793 54.56,24.744 52.176,26.175C50.874,26.957 47.438,26.469 46.145,25.919" style="fill:rgb(147,73,55);"/>
+        <path d="M33.358,24.754L37.467,23.743L47.922,25.487C47.383,28.654 46.443,34.187 46.585,37.22C46.768,41.132 46.802,42.424 46.139,42.146C42.525,40.635 38.206,35.972 35.282,32.266" style="fill:rgb(255,247,82);"/>
+        <clipPath id="_clip1">
+            <path d="M33.358,24.754L37.467,23.743L47.922,25.487C47.383,28.654 46.443,34.187 46.585,37.22C46.768,41.132 46.802,42.424 46.139,42.146C42.525,40.635 38.206,35.972 35.282,32.266"/>
+        </clipPath>
+        <g clip-path="url(#_clip1)">
+            <path d="M43.6,21.343L43.875,30.283C46.057,30.917 47.599,29.129 49.287,27.789L50.722,20.771L43.6,21.343Z" style="fill:rgb(255,152,82);"/>
+        </g>
+        <path d="M37.467,26.47C35.161,26.605 40.2,34.968 43.039,38.061" style="fill:rgb(255,152,82);"/>
+        <path d="M37.467,26.47C39.247,33.527 42.035,37.894 45.617,40.282C45.691,34.495 45.504,29.033 46.702,26.47L37.467,26.47Z" style="fill:rgb(255,107,140);"/>
+        <g transform="matrix(1,0,0,1,0.34705,-0.563957)">
+            <g transform="matrix(1.0402,0,0,1.03343,2.01974,-0.750564)">
+                <path d="M38.377,15.224C40.611,15.039 41.442,17.13 41.442,19.136C41.442,21.141 40.627,21.872 38.76,21.872C37.848,21.872 36.545,20.671 36.545,18.665C36.545,16.66 37.384,15.306 38.377,15.224Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(1.0402,0,0,1.03343,-1.44414,-0.706384)">
+                <path d="M38.038,15.181C39.905,15.181 41.442,17.13 41.442,19.136C41.442,21.141 40.244,22.547 38.377,22.547C36.51,22.547 34.728,21.521 34.655,18.815C34.6,16.81 35.767,15.181 38.038,15.181Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.763712,0,0,0.933729,13.3761,0.911446)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:rgb(20,219,51);"/>
+                <clipPath id="_clip2">
+                    <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z"/>
+                </clipPath>
+                <g clip-path="url(#_clip2)">
+                    <g transform="matrix(1.07989,0,0,0.943665,-2.82912,-0.546845)">
+                        <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:rgb(12,133,22);"/>
+                    </g>
+                </g>
+            </g>
+            <g transform="matrix(0.763712,0,0,0.933729,13.3761,0.911446)">
+                <path d="M39.038,21.804C38.795,21.947 38.525,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,19.793 40.102,19.878 40.095,19.961C40.075,20.177 40.032,20.391 39.964,20.595C39.929,20.699 39.889,20.799 39.842,20.895C40.203,20.141 40.208,19.154 39.751,18.365C39.566,18.046 39.333,17.813 39.097,17.661C38.696,17.403 38.343,17.409 38.24,17.41L38.386,17.673C37.862,17.663 36.964,17.751 36.767,19.414C36.741,19.629 36.582,20.489 37.094,21.246C37.656,22.075 38.427,22.165 39.048,21.798C39.045,21.8 39.041,21.802 39.038,21.804ZM39.515,21.4C39.388,21.547 39.245,21.673 39.089,21.773C39.075,21.781 39.062,21.79 39.048,21.798C39.227,21.688 39.382,21.553 39.515,21.4Z" style="fill:rgb(12,133,22);"/>
+            </g>
+            <g transform="matrix(0.399715,0,0,0.412466,27.3537,11.0962)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z"/>
+            </g>
+            <g transform="matrix(0.240395,0.0616877,-0.0641565,0.250016,34.2748,11.2529)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.944849,0,0,0.933729,1.79968,1.16243)">
+                <ellipse cx="38.239" cy="19.707" rx="1.867" ry="2.319" style="fill:rgb(20,219,51);"/>
+                <clipPath id="_clip3">
+                    <ellipse cx="38.239" cy="19.707" rx="1.867" ry="2.319"/>
+                </clipPath>
+                <g clip-path="url(#_clip3)">
+                    <g transform="matrix(0.942334,0,0,1,2.31274,-1.38757)">
+                        <ellipse cx="38.239" cy="19.707" rx="1.867" ry="2.319" style="fill:rgb(12,133,22);"/>
+                    </g>
+                </g>
+            </g>
+            <g transform="matrix(0.944849,0,0,0.933729,1.79968,1.16243)">
+                <path d="M39.028,21.81C39.021,21.814 39.013,21.818 39.004,21.823C39.071,21.785 39.12,21.752 39.148,21.733C39.109,21.761 39.069,21.786 39.028,21.81ZM38.239,17.388C38.343,17.388 38.444,17.398 38.543,17.418C38.568,17.424 38.594,17.43 38.62,17.437C38.503,17.407 38.376,17.389 38.239,17.388ZM39.004,21.823C38.771,21.954 38.512,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 37.209,17.388 38.239,17.388L38.24,17.673C37.454,17.643 37.06,18.287 36.829,18.962C36.365,20.317 36.923,21.898 38.18,21.998C38.598,22.031 38.906,21.878 39.004,21.823ZM38.62,17.437C38.652,17.445 38.683,17.454 38.714,17.464C38.872,17.515 39.021,17.592 39.16,17.69C38.966,17.553 38.776,17.478 38.62,17.437ZM39.376,17.868C39.47,17.958 39.557,18.058 39.636,18.169C39.687,18.24 39.735,18.316 39.778,18.395C39.71,18.272 39.579,18.063 39.376,17.868ZM40.091,19.409C40.101,19.507 40.106,19.606 40.106,19.707C40.106,19.733 40.106,19.759 40.105,19.785C40.1,19.962 40.078,20.138 40.041,20.309C40.104,20.017 40.121,19.711 40.091,19.409ZM40.041,20.309C39.998,20.508 39.934,20.702 39.849,20.882C39.822,20.939 39.793,20.995 39.762,21.048C39.89,20.823 39.984,20.572 40.041,20.309Z" style="fill:rgb(12,133,22);"/>
+            </g>
+            <g transform="matrix(0.455702,0,0,0.450339,20.5043,10.6887)">
+                <ellipse cx="38.239" cy="19.707" rx="1.867" ry="2.319"/>
+            </g>
+            <g transform="matrix(0.240395,0.0616877,-0.0714623,0.278486,29.3898,11.0009)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.240395,0.0616877,-0.0641565,0.250016,35.9349,12.8745)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.240395,0.0616877,-0.0714623,0.278486,31.4342,12.886)">
+                <path d="M38.239,17.388C39.269,17.373 40.106,18.427 40.106,19.707C40.106,20.987 39.27,22.027 38.239,22.027C37.209,22.027 36.373,20.987 36.373,19.707C36.373,18.427 36.826,17.407 38.239,17.388Z" style="fill:white;"/>
+            </g>
+        </g>
+        <path d="M34.949,26.47C45.991,30.923 49.398,22.609 61.231,20.771C56.331,18.491 47.094,19.43 40.335,20.771C34.477,21.934 29.498,23.59 28.13,25.595C26.823,27.513 31.911,30.95 36.88,32.959" style="fill:rgb(255,247,82);"/>
+        <clipPath id="_clip4">
+            <path d="M34.949,26.47C45.991,30.923 49.398,22.609 61.231,20.771C56.331,18.491 47.094,19.43 40.335,20.771C34.477,21.934 29.498,23.59 28.13,25.595C26.823,27.513 31.911,30.95 36.88,32.959"/>
+        </clipPath>
+        <g clip-path="url(#_clip4)">
+            <path d="M62.518,20.767L57.185,19.666C55.674,19.774 54.3,23.016 56.708,23.584" style="fill:rgb(247,132,16);"/>
+        </g>
+        <g>
+            <g transform="matrix(0.970003,-0.154382,0.15857,1.02858,0.0314522,6.52731)">
+                <path d="M36.982,11.628C36.695,7.2 36.995,2.859 40.066,0.878C40.807,0.628 41.65,0.686 42.38,0.969C39.087,3.153 39.139,8.22 39.064,11.626L38.091,11.715L37.004,11.962C37.001,11.913 36.997,11.864 36.994,11.814L36.97,11.817C36.973,11.754 36.977,11.691 36.982,11.628Z" style="fill:url(#_Radial5);"/>
+            </g>
+            <g transform="matrix(0.978973,0.0797037,-0.0925252,1.07184,2.61052,-2.90073)">
+                <path d="M36.982,11.628C36.695,7.2 36.995,2.859 40.066,0.878C40.915,0.615 41.659,0.75 42.38,0.969C39.087,3.153 39.139,8.22 39.064,11.626L38.091,11.715L37.004,11.962C37.001,11.913 36.997,11.864 36.994,11.814L36.97,11.817C36.973,11.754 36.977,11.691 36.982,11.628Z" style="fill:url(#_Radial6);"/>
+            </g>
+            <g transform="matrix(0.932256,0.309256,-0.344847,1.02284,7.32634,-11.0721)">
+                <path d="M36.982,11.628C36.695,7.2 36.995,2.859 40.066,0.878C40.558,0.663 41.699,0.839 42.424,1.166C39.132,3.351 39.139,8.22 39.064,11.626L38.091,11.715L37.004,11.962C37.001,11.913 36.997,11.864 36.994,11.814L36.97,11.817C36.973,11.754 36.977,11.691 36.982,11.628Z" style="fill:url(#_Radial7);"/>
+            </g>
+            <g transform="matrix(0.83251,0.521217,-0.556563,0.879409,13.5819,-17.463)">
+                <path d="M36.982,11.628C36.695,7.2 36.741,3.068 39.813,1.087C40.656,1.113 41.659,1.428 42.132,1.96C38.866,3.835 38.481,9.299 39.456,10.905L38.091,11.715L37.004,11.962C37.001,11.913 36.997,11.864 36.994,11.814L36.97,11.817C36.973,11.754 36.977,11.691 36.982,11.628Z" style="fill:url(#_Radial8);"/>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <radialGradient id="_Radial5" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.36904,-9.3704,9.9501,4.16909,36.9827,11.4974)"><stop offset="0" style="stop-color:rgb(255,8,0);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(249,29,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,99,0);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.36904,-9.3704,9.9501,4.16909,36.9827,11.4974)"><stop offset="0" style="stop-color:rgb(255,8,0);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(249,29,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,99,0);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.36904,-9.3704,9.9501,4.16909,36.9827,11.4974)"><stop offset="0" style="stop-color:rgb(255,8,0);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(249,29,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,99,0);stop-opacity:1"/></radialGradient>
+        <radialGradient id="_Radial8" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.36904,-9.3704,9.9501,4.16909,36.9827,11.4974)"><stop offset="0" style="stop-color:rgb(255,8,0);stop-opacity:1"/><stop offset="0.52" style="stop-color:rgb(249,29,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(231,99,0);stop-opacity:1"/></radialGradient>
+    </defs>
+</svg>

assets/config_menu.rml

@@ -1,136 +0,0 @@
-<rml>
-<head>
-	<link type="text/rcss" href="rml.rcss"/>
-	<link type="text/rcss" href="recomp.rcss"/>
-	<title>Inventory</title>
-	<style>
-		body
-		{
-			width: 100%;
-			height: 100%;
-		}
-
-		/* Hide the window icon. */
-		div#title_bar div#icon
-		{
-			display: none;
-		}
-		.flex-grid {
-			display: flex;
-		}
-		.col {
-			flex: 1;
-			text-align: center;
-		}
-	</style>
-	<link type="text/template" href="config_menu/general.rml" />
-	<link type="text/template" href="config_menu/controls.rml" />
-	<link type="text/template" href="config_menu/graphics.rml" />
-	<link type="text/template" href="config_menu/sound.rml" />
-	<link type="text/template" href="config_menu/mods.rml" />
-	<link type="text/template" href="config_menu/debug.rml" />
-</head>
-<body class="window">
-	<!-- <handle move_target="#document"> -->
-		<div id="window" class="rmlui-window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
-			<div class="centered-page" onclick="close_config_menu_backdrop">
-				<div class="centered-page__modal">
-					<tabset class="tabs" id="config_tabset">
-						<tab class="tab" autofocus id="tab_general">
-							<div>General</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config" data-model="general_model">
-							<template src="config-menu__general" />
-						</panel>
-						<tab class="tab" id="tab_controls">
-							<div>Controls</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config" data-model="controls_model">
-							<template src="config-menu__controls" />
-						</panel>
-						<tab class="tab" id="tab_graphics">
-							<div>Graphics</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config" data-model="graphics_model">
-							<template src="config-menu__graphics" />
-						</panel>
-						<tab class="tab" id="tab_sound">
-							<div>Sound</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config" data-model="sound_options_model">
-							<template src="config-menu__sound" />
-						</panel>
-						<tab class="tab" id="tab_mods">
-							<div>Mods</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config">
-							<template src="config-menu__mods" />
-						</panel>
-						<tab class="tab" data-model="debug_model" data-if="debug_enabled" id="tab_debug">
-							<div>Debug</div>
-							<div class="tab__indicator"></div>
-						</tab>
-						<panel class="config" data-model="debug_model">
-							<template src="config-menu__debug" />
-						</panel>
-					</tabset>
-					<div class="config__icon-buttons">
-						<button
-							class="icon-button"
-							onclick="open_quit_game_prompt"
-							id="config__quit-game-button"
-						>
-							<svg src="icons/Quit.svg" />
-						</button>
-						<button
-							class="icon-button"
-							onclick="close_config_menu"
-							id="config__close-menu-button"
-						>
-							<svg src="icons/X.svg" />
-						</button>
-					</div>
-				</div>
-				<div
-					class="centered-page__controls"
-					data-model="nav_help_model"
-				>
-					<label>
-						<span>Navigate</span>
-						<span class="prompt-font-sm">{{nav_help__navigate}}</span>
-					</label>
-					<label>
-						<span>Accept</span>
-						<span class="prompt-font-sm">{{nav_help__accept}}</span>
-					</label>
-					<label>
-						<span>Exit</span>
-						<span class="prompt-font-sm">{{nav_help__exit}}</span>
-					</label>
-					<!-- <label><span style="font-family:promptfont;">&#x21F3;</span> Navigate</label>
-					<label><span style="font-family:promptfont;">&#x21A7;</span> Accept</label> -->
-				</div>
-			</div>
-			<!-- <div
-				id="prompt-root"
-				data-model="prompt_model"
-				data-if="prompt__open"
-				data-alias-promptOpen="prompt__open"
-				data-alias-promptHeader="prompt__header"
-				data-alias-promptContent="prompt__content"
-				data-alias-promptConfirmLabel="prompt__confirmLabel"
-				data-alias-promptCancelLabel="prompt__cancelLabel"
-				data-event-click="prompt__on_click"
-			>
-				<template src="prompt"/>
-			</div> -->
-		</div>
-	<!-- </handle> -->
-	<!-- <handle size_target="#document" style="position: absolute; width: 16dp; height: 16dp; bottom: 0px; right: 0px; cursor: resize;"></handle> -->
-</body>
-</rml>

assets/config_menu/controls.rml

@@ -1,360 +0,0 @@
-<template name="config-menu__controls">
-    <head>
-    </head>
-    <body>
-        <form class="config__form" data-attr-cur-input="cur_input_row" data-attr-cur-binding-slot="active_binding_slot">
-            <div class="config__header">
-                <div class="config__header-left">
-                    <button
-                        class="toggle"
-                        id="cont_kb_toggle"
-                        data-class-toggle--checked="input_device_is_keyboard"
-                        onclick="toggle_input_device"
-                        style="nav-down: #input_row_button_0_0; nav-up: #tab_controls"
-                    >
-                        <div class="toggle__border" />
-                        <div class="toggle__floater" />
-                        <div class="toggle__icons">
-                            <div class="toggle__icon toggle__icon--left"><div>␼</div></div>
-                            <div class="toggle__icon toggle__icon--right"><div>␽</div></div>
-                        </div>
-                    </button>
-                </div>
-                <div>
-                    <button
-                        class="button button--warning"
-                        style="nav-down:#input_row_button_0_0"
-                        data-event-click="reset_input_bindings_to_defaults"
-                    >
-                        <div class="button__label">Reset to defaults</div>
-                    </button>
-                </div>
-            </div>
-            <div class="config__wrapper input-config">
-                <div class="input-config__horizontal-split">
-                    <div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
-                        <div class="input-config__mappings-scroll">
-                            <div class="input-config__mappings-wrapper">
-                                <div
-                                    class="control-option"
-                                    data-attr-id="'input_row_' + i"
-                                    data-for="input_bindings, i : inputs.array"
-                                    data-event-mouseover="set_input_row_focus(i)"
-                                    data-class-control-option--active="get_input_enum_name(i)==cur_input_row"
-                                    data-if="!input_device_is_keyboard || (get_input_enum_name(i) != 'TOGGLE_MENU' && get_input_enum_name(i) != 'ACCEPT_MENU' && get_input_enum_name(i) != 'APPLY_MENU')"
-                                >
-                                    <label
-                                        class="control-option__label"
-                                    >{{get_input_name(i)}}</label>
-                                    <div class="control-option__bindings">
-                                        <button
-                                            data-attr-id="'input_row_button_' + i + '_' + j"
-                                            data-event-blur="set_input_row_focus(-1)"
-                                            data-event-focus="set_input_row_focus(i)"
-                                            data-for="cur_binding, j : input_bindings"
-                                            data-event-click="set_input_binding(i,j)"
-                                            class="prompt-font control-option__binding"
-                                            data-attr-bind-slot="j"
-                                            data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
-                                        >
-                                            <div class="control-option__binding-recording">
-                                                <div class="control-option__binding-circle" />
-                                                <div class="control-option__binding-edge">
-                                                    <svg class="control-option__binding-edge-svg" src="icons/RecordBorder.svg" />
-                                                </div>
-                                            </div>
-                                            <div class="control-option__binding-icon">{{cur_binding}}</div>
-                                        </button>
-                                    </div>
-                                    <button
-                                        data-if="get_input_enum_name(i) != 'TOGGLE_MENU' && get_input_enum_name(i) != 'ACCEPT_MENU'"
-                                        data-event-blur="set_input_row_focus(-1)"
-                                        data-event-focus="set_input_row_focus(i)"
-                                        data-event-click="clear_input_bindings(i)"
-                                        class="icon-button icon-button--danger"
-                                        data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
-                                    >
-                                        <svg src="icons/Trash.svg" />
-                                    </button>
-                                    <button
-                                        data-if="get_input_enum_name(i) == 'TOGGLE_MENU' || get_input_enum_name(i) == 'ACCEPT_MENU'"
-                                        data-event-blur="set_input_row_focus(-1)"
-                                        data-event-focus="set_input_row_focus(i)"
-                                        data-event-click="reset_single_input_binding_to_default(i)"
-                                        class="icon-button icon-button--danger"
-                                        data-attr-style="i == 0 ? 'nav-up:#cont_kb_toggle' : 'nav-up:auto'"
-                                    >
-                                        <svg src="icons/Reset.svg" />
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="input-config__visual-wrapper">
-                        <div class="input-config__visual-aspect">
-                            <div class="input-config__visual">
-                                <!-- stick only -->
-                                <div class="input-config__visual-stick-wrapper">
-                                    <div
-                                        class="input-viz input-config__visual-stick"
-                                        visual-input="X_AXIS_NEG X_AXIS_POS Y_AXIS_NEG Y_AXIS_POS"
-                                    >
-                                        <div class="input-viz__stick-split input-viz__stick-split--vertical">
-                                            <div class="input-viz input-viz__mappings" visual-input="Y_AXIS_POS">
-                                                <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.Y_AXIS_POS"
-                                                >
-                                                    <div>{{cur_binding}}</div>
-                                                </div>
-                                            </div>
-                                            <div class="input-viz__dpad-divider" />
-                                            <div class="input-viz input-viz__mappings" visual-input="Y_AXIS_NEG">
-                                                <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.Y_AXIS_NEG"
-                                                >
-                                                    <div>{{cur_binding}}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="input-viz__stick-split input-viz__stick-split--horizontal">
-                                            <div class="input-viz input-viz__mappings" visual-input="X_AXIS_NEG">
-                                                <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.X_AXIS_NEG"
-                                                >
-                                                    <div>{{cur_binding}}</div>
-                                                </div>
-                                            </div>
-                                            <div class="input-viz__dpad-divider" />
-                                            <div class="input-viz input-viz__mappings" visual-input="X_AXIS_POS">
-                                                <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.X_AXIS_POS"
-                                                >
-                                                    <div>{{cur_binding}}</div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- top half -->
-                                <div class="input-config__visual-half">
-                                    <div class="input-config__visual-quarter-left">
-                                        <div
-                                            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">
-                                        <div class="input-config__main-buttons">
-                                            <div
-                                                class="input-viz input-viz__button input-viz__button--sm input-viz__button--Start"
-                                                visual-input="START"
-                                            >
-                                                <svg src="icons/VizMap/ButtonSmall.svg" />
-                                                <div class="input-viz__mappings">
-                                                    <div
-                                                        class="input-config__visual-mapping"
-                                                        data-for="cur_binding, i : inputs.START"
-                                                    >
-                                                        <div>{{cur_binding}}</div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div
-                                                class="input-viz input-viz__button input-viz__button--lg input-viz__button--B"
-                                                visual-input="B"
-                                            >
-                                                <svg src="icons/VizMap/ButtonLarge.svg" />
-                                                <div class="input-viz__mappings">
-                                                    <div
-                                                        class="input-config__visual-mapping"
-                                                        data-for="cur_binding, i : inputs.B"
-                                                    >
-                                                        <div>{{cur_binding}}</div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div
-                                                class="input-viz input-viz__button input-viz__button--lg input-viz__button--A"
-                                                visual-input="A"
-                                            >
-                                                <svg src="icons/VizMap/ButtonLarge.svg" />
-                                                <div class="input-viz__mappings">
-                                                    <div
-                                                        class="input-config__visual-mapping"
-                                                        data-for="cur_binding, i : inputs.A"
-                                                    >
-                                                        <div>{{cur_binding}}</div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="input-config__c-buttons">
-                                            <div class="input-config__c-buttons-lr">
-                                                <div
-                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
-                                                    visual-input="C_LEFT"
-                                                >
-                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
-                                                    <div class="input-viz__mappings">
-                                                        <div
-                                                            class="input-config__visual-mapping"
-                                                            data-for="cur_binding, i : inputs.C_LEFT"
-                                                        >
-                                                            <div>{{cur_binding}}</div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div
-                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
-                                                    visual-input="C_RIGHT"
-                                                >
-                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
-                                                    <div class="input-viz__mappings">
-                                                        <div
-                                                            class="input-config__visual-mapping"
-                                                            data-for="cur_binding, i : inputs.C_RIGHT"
-                                                        >
-                                                            <div>{{cur_binding}}</div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="input-config__c-buttons-du">
-                                                <div
-                                                    class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
-                                                    visual-input="C_DOWN"
-                                                >
-                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
-                                                    <div class="input-viz__mappings">
-                                                        <div
-                                                            class="input-config__visual-mapping"
-                                                            data-for="cur_binding, i : inputs.C_DOWN"
-                                                        >
-                                                            <div>{{cur_binding}}</div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div
-                                                    class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
-                                                    visual-input="C_UP"
-                                                >
-                                                    <svg src="icons/VizMap/ButtonMedium.svg" />
-                                                    <div class="input-viz__mappings">
-                                                        <div
-                                                            class="input-config__visual-mapping"
-                                                            data-for="cur_binding, i : inputs.C_UP"
-                                                        >
-                                                            <div>{{cur_binding}}</div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- bottom half -->
-                                <div class="input-config__visual-half input-config__visual-half--bottom">
-                                    <div
-                                        class="input-viz input-viz__Z"
-                                        visual-input="Z"
-                                    >
-                                        <svg src="icons/VizMap/Target.svg" />
-                                        <div class="input-viz__mappings">
-                                            <div
-                                                class="input-config__visual-mapping"
-                                                data-for="cur_binding, i : inputs.Z"
-                                            >
-                                                <div>{{cur_binding}}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="input-viz input-viz__R"
-                                        visual-input="R"
-                                    >
-                                        <svg src="icons/VizMap/Shield.svg" />
-                                        <div class="input-viz__mappings">
-                                            <div
-                                                class="input-config__visual-mapping"
-                                                data-for="cur_binding, i : inputs.R"
-                                            >
-                                                <div>{{cur_binding}}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="input-viz input-viz__L"
-                                        visual-input="L"
-                                    >
-                                        <svg src="icons/VizMap/Map.svg" />
-                                        <div class="input-viz__mappings">
-                                            <div
-                                                class="input-config__visual-mapping"
-                                                data-for="cur_binding, i : inputs.L"
-                                            >
-                                                <div>{{cur_binding}}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </form>
-    </body>
-</template>
-    

assets/config_menu/debug.rml

@@ -1,13 +0,0 @@
-<template name="config-menu__debug">
-    <head>
-    </head>
-    <body>
-        <form class="config__form">
-            <div class="config__wrapper">
-                <div class="config-debug">
-                </div>
-            </div>
-        </form>
-    </body>
-</template>
-    

assets/config_menu/general.rml

@@ -1,297 +0,0 @@
-<template name="config-menu__general">
-    <head>
-    </head>
-    <body>
-        <form class="config__form" id="conf-general__form">
-            <div class="config__hz-wrapper" id="conf-general__hz-wrapper">
-                <!-- Options -->
-                <div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)" id="conf-general__wrapper">
-                    <!-- rumble strength -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
-                        <label class="config-option__title">Rumble Strength</label>
-                        <div class="config-option__range-wrapper config-option__list">
-                            <label class="config-option__range-label">{{rumble_strength}}%</label>
-                            <input
-                                class="nav-vert"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(1)"
-                                id="rumble_strength_input"
-                                type="range"
-                                min="0"
-                                max="100"
-                                style="flex: 1; margin: 0dp;"
-                                data-value="rumble_strength"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- gyro sensitivity -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(2)">
-                        <label class="config-option__title">Gyro Sensitivity</label>
-                        <div class="config-option__range-wrapper config-option__list">
-                            <label class="config-option__range-label">{{gyro_sensitivity}}%</label>
-                            <input
-                                class="nav-vert"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(2)"
-                                id="gyro_sensitivity_input"
-                                type="range"
-                                min="0"
-                                max="100"
-                                style="flex: 1; margin: 0dp;"
-                                data-value="gyro_sensitivity"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- mouse sensitivity -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(3)">
-                        <label class="config-option__title">Mouse Sensitivity</label>
-                        <div class="config-option__range-wrapper config-option__list">
-                            <label class="config-option__range-label">{{mouse_sensitivity}}%</label>
-                            <input
-                                class="nav-vert"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(3)"
-                                id="mouse_sensitivity_input"
-                                type="range"
-                                min="0"
-                                max="100"
-                                style="flex: 1; margin: 0dp;"
-                                data-value="mouse_sensitivity"
-                            />
-                        </div>
-                    </div>
-                    
-                    <!-- joystick deadzone -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(4)">
-                        <label class="config-option__title">Joystick Deadzone</label>
-                        <div class="config-option__range-wrapper config-option__list">
-                            <label class="config-option__range-label">{{joystick_deadzone}}%</label>
-                            <input
-                                class="nav-vert"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(4)"
-                                id="joystick_deadzone_input"
-                                type="range"
-                                min="0"
-                                max="100"
-                                style="flex: 1; margin: 0dp; nav-down: #bg_input_enabled"
-                                data-value="joystick_deadzone"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- background input -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(5)" id="conf-general__Background-Input">
-                        <label class="config-option__title">Background Input</label>
-                        <div class="config-option__list">
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(5)"
-                                name="background_input_mode"
-                                data-checked="background_input_mode"
-                                value="On"
-                                id="bg_input_enabled"
-                                style="nav-up: #joystick_deadzone_input; nav-down: #camera_inversion_none"
-                            />
-                            <label class="config-option__tab-label" for="bg_input_enabled">On</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(5)"
-                                name="background_input_mode"
-                                data-checked="background_input_mode"
-                                value="Off"
-                                id="bg_input_disabled"
-                                style="nav-up: #joystick_deadzone_input; nav-down: #camera_inversion_x"
-                            />
-                            <label class="config-option__tab-label" for="bg_input_disabled">Off</label>
-                        </div>
-                    </div>
-                    
-                    <!-- camera inversion -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(7)">
-                        <label class="config-option__title">Aiming Camera Mode</label>
-                        <div class="config-option__list">
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(7)"
-                                name="camera_invert_mode"
-                                data-checked="camera_invert_mode"
-                                value="InvertNone"
-                                id="camera_inversion_none"
-                                style="nav-up: #bg_input_enabled; nav-down: #analog_cam_enabled"
-                            />
-                            <label class="config-option__tab-label" for="camera_inversion_none">None</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(7)"
-                                name="camera_invert_mode"
-                                data-checked="camera_invert_mode"
-                                value="InvertX"
-                                id="camera_inversion_x"
-                                style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
-                            />
-                            <label class="config-option__tab-label" for="camera_inversion_x">Invert X</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(7)"
-                                name="camera_invert_mode"
-                                data-checked="camera_invert_mode"
-                                value="InvertY"
-                                id="camera_inversion_y"
-                                style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
-                            />
-                            <label class="config-option__tab-label" for="camera_inversion_y">Invert Y</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(7)"
-                                name="camera_invert_mode"
-                                data-checked="camera_invert_mode"
-                                value="InvertBoth"
-                                id="camera_inversion_both"
-                                style="nav-up: #bg_input_disabled; nav-down: #analog_cam_disabled"
-                            />
-                            <label class="config-option__tab-label" for="camera_inversion_both">Invert Both</label>
-                        </div>
-                    </div>
-                    
-                    <!-- analog camera -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(8)">
-                        <label class="config-option__title">Analog Camera</label>
-                        <div class="config-option__list">
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(8)"
-                                name="analog_cam_mode"
-                                data-checked="analog_cam_mode"
-                                value="On"
-                                id="analog_cam_enabled"
-                                style="nav-up: #camera_inversion_none; nav-down: #analog_camera_inversion_none"
-                            />
-                            <label class="config-option__tab-label" for="analog_cam_enabled">On</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(8)"
-                                name="analog_cam_mode"
-                                data-checked="analog_cam_mode"
-                                value="Off"
-                                id="analog_cam_disabled"
-                                style="nav-up: #camera_inversion_x; nav-down: #analog_camera_inversion_x"
-                            />
-                            <label class="config-option__tab-label" for="analog_cam_disabled">Off</label>
-                        </div>
-                    </div>
-                    
-                    <!-- analog camera inversion -->
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(9)">
-                        <label class="config-option__title">Analog Camera Mode</label>
-                        <div class="config-option__list">
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(9)"
-                                name="analog_camera_invert_mode"
-                                data-checked="analog_camera_invert_mode"
-                                value="InvertNone"
-                                id="analog_camera_inversion_none"
-                                style="nav-up: #analog_cam_enabled;"
-                            />
-                            <label class="config-option__tab-label" for="analog_camera_inversion_none">None</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(9)"
-                                name="analog_camera_invert_mode"
-                                data-checked="analog_camera_invert_mode"
-                                value="InvertX"
-                                id="analog_camera_inversion_x"
-                                style="nav-up: #analog_cam_disabled;"
-                            />
-                            <label class="config-option__tab-label" for="analog_camera_inversion_x">Invert X</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(9)"
-                                name="analog_camera_invert_mode"
-                                data-checked="analog_camera_invert_mode"
-                                value="InvertY"
-                                id="analog_camera_inversion_y"
-                                style="nav-up: #analog_cam_disabled;"
-                            />
-                            <label class="config-option__tab-label" for="analog_camera_inversion_y">Invert Y</label>
-
-                            <input
-                                type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(9)"
-                                name="analog_camera_invert_mode"
-                                data-checked="analog_camera_invert_mode"
-                                value="InvertBoth"
-                                id="analog_camera_inversion_both"
-                                style="nav-up: #analog_cam_disabled;"
-                            />
-                            <label class="config-option__tab-label" for="analog_camera_inversion_both">Invert Both</label>
-                        </div>
-                    </div>
-                </div>
-                <!-- Descriptions -->
-                <div class="config__wrapper">
-                    <p data-if="cur_config_index == 1">
-                        Controls the strength of rumble when using a controller that supports it. <b>Setting this to zero will disable rumble.</b>
-                    </p>
-                    <p data-if="cur_config_index == 2">
-                        Controls the sensitivity of gyro aiming when using items in first person for controllers that support it. <b>Setting this to zero will disable gyro.</b>
-                        <br />
-                        <br />
-                        <b>Note: To recalibrate controller gyro, set the controller down on a still, flat surface for 5 seconds.</b>
-                    </p>
-                    <p data-if="cur_config_index == 3">
-                        Controls the sensitivity of mouse aiming when using items in first person. <b>Setting this to zero will disable mouse aiming.</b>
-                        <br />
-                        <br />
-                        <b>Note: This option does not allow mouse buttons to activate items. Mouse aiming is intended to be used with inputs that are mapped to mouse movement, such as gyro on Steam Deck.</b>
-                    </p>
-                    <p data-if="cur_config_index == 4">
-                        Applies a deadzone to joystick inputs.
-                    </p>
-                    <p data-if="cur_config_index == 5">
-                        Allows the game to read controller input when out of focus.
-                        <br/>
-                        <b>This setting does not affect keyboard input.</b>
-                    </p>
-                    <p data-if="cur_config_index == 7">
-                        Inverts the camera controls for first-person aiming. <b>Invert Y</b> is the default and matches the original game.
-                    </p>
-                    <p data-if="cur_config_index == 8">
-                        Enables an analog "free" camera similar to later entries in the series that's mapped to the right analog stick on the controller.
-                        <br/>
-                        <br/>
-                        When you move the right stick, the camera will enter free mode and stop centering behind Link. Press the <b>Target</b> button at any time to go back into the normal camera mode. The camera will also return to normal mode after a cutscene plays or when you move between areas.
-                        <br/>
-                        <br/>
-                        This option also enables right stick control while looking and aiming.
-                    </p>
-                    <p data-if="cur_config_index == 9">
-                        Inverts the camera controls for the analog camera if it's enabled. <b>None</b> is the default.
-                    </p>
-                </div>
-            </div>
-        </form>
-    </body>
-</template>

assets/config_menu/graphics.rml

@@ -1,325 +0,0 @@
-<template name="config-menu__graphics">
-    <head>
-    </head>
-    <body>
-        <form class="config__form">
-            <div class="config__hz-wrapper">
-                <div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
-                        <label class="config-option__title">Resolution</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(0)"
-                                name="resolution"
-                                data-checked="res_option"
-                                value="Original"
-                                id="res_original"
-                                style="nav-up:#tab_graphics; nav-down: #ds_windowed"
-                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_original' : 'nav-up:#tab_graphics; nav-down: #ds_windowed'"
-                            />
-                            <label class="config-option__tab-label" for="res_original">Original</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(0)"
-                                name="resolution"
-                                data-checked="res_option"
-                                value="Original2x"
-                                id="res_2x"
-                                style="nav-up:#tab_graphics; nav-down: #ds_2x"
-                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_2x'"
-                            />
-                            <label class="config-option__tab-label" for="res_2x">Original 2x</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(0)"
-                                name="resolution"
-                                data-checked="res_option"
-                                value="Auto"
-                                id="res_auto"
-                                style="nav-up:#tab_graphics; nav-down: #ds_4x"
-                                data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_4x'"
-                            />
-                            <label class="config-option__tab-label" for="res_auto">Auto</label>
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
-                        <label class="config-option__title">Downsampling Quality</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(1)"
-                                name="downsampling"
-                                data-attrif-disabled="res_option == 'Auto'"
-                                data-checked="ds_option"
-                                value="1"
-                                id="ds_windowed"
-                                style="nav-up: #res_original; nav-down: #ar_original"
-                            />
-                            <label class="config-option__tab-label" for="ds_windowed">Off</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(1)"
-                                name="downsampling"
-                                data-attrif-disabled="res_option == 'Auto'"
-                                data-checked="ds_option"
-                                value="2"
-                                id="ds_2x"
-                                style="nav-up: #res_2x; nav-down: #ar_expand"
-                            />
-                            <label class="config-option__tab-label" for="ds_2x">2x</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(1)"
-                                name="downsampling"
-                                data-attrif-disabled="res_option == 'Auto'"
-                                data-checked="ds_option"
-                                value="4"
-                                id="ds_4x"
-                                style="nav-up: #res_auto; nav-down: #ar_expand"
-                            />
-                            <label class="config-option__tab-label" for="ds_4x">4x</label>
-                            <div class="config-option__details">{{ds_info}}</div>
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(2)">
-                        <label class="config-option__title">Aspect Ratio</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(2)"
-                                name="aspectratio"
-                                data-checked="ar_option"
-                                value="Original"
-                                id="ar_original"
-                                style="nav-up: #ds_windowed; nav-down: #wm_windowed"
-                                data-attr-style="res_option == 'Auto' ? 'nav-up:#res_original; nav-down: #wm_windowed' : 'nav-up:#ds_windowed; nav-down: #wm_windowed'"
-                            />
-                            <label class="config-option__tab-label" for="ar_original">Original</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(2)"
-                                name="aspectratio"
-                                data-checked="ar_option"
-                                value="Expand"
-                                id="ar_expand"
-                                style="nav-up: #ds_2x; nav-down: #wm_fullscreen"
-                                data-attr-style="res_option == 'Auto' ? 'nav-up:#res_2x; nav-down: #wm_fullscreen' : 'nav-up:#ds_2x; nav-down: #wm_fullscreen'"
-                            />
-                            <label class="config-option__tab-label" for="ar_expand">Expand</label>
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(3)">
-                        <label class="config-option__title">Window Mode</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(3)"
-                                name="windowmode"
-                                data-checked="wm_option"
-                                value="Windowed"
-                                id="wm_windowed"
-                                style="nav-up: #ar_original; nav-down: #rr_original"
-                            />
-                            <label class="config-option__tab-label" for="wm_windowed">Windowed</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(3)"
-                                name="windowmode"
-                                data-checked="wm_option"
-                                value="Fullscreen"
-                                id="wm_fullscreen"
-                                style="nav-up: #ar_expand; nav-down: #rr_display"
-                            />
-                            <label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(4)">
-                        <label class="config-option__title">Framerate</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)" 
-                                data-event-focus="set_cur_config_index(4)"
-                                name="refreshrate"
-                                data-checked="rr_option"
-                                value="Original"
-                                id="rr_original"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_windowed; nav-down: #rr_manual_input' : 'nav-up: #wm_windowed; nav-down: #msaa_none'"
-                            />
-                            <label class="config-option__tab-label" for="rr_original">Original</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)" 
-                                data-event-focus="set_cur_config_index(4)"
-                                name="refreshrate"
-                                data-checked="rr_option"
-                                value="Display"
-                                id="rr_display"
-                                style="nav-up: #wm_fullscreen"
-                                data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
-                            />
-                            <label class="config-option__tab-label" for="rr_display">Display</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)" 
-                                data-event-focus="set_cur_config_index(4)"
-                                name="refreshrate"
-                                data-checked="rr_option"
-                                value="Manual"
-                                id="rr_manual"
-                                style="nav-up: #wm_fullscreen"
-                                data-style-nav-down="rr_option=='Manual' ? '#rr_manual_input' : (msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none'))"
-                            />
-                            <label class="config-option__tab-label" for="rr_manual">Manual</label>
-                        </div>
-                        <div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
-                            <label class="config-option__range-label">{{rr_manual_value}}</label>
-                            <input
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(4)"
-                                id="rr_manual_input"
-                                type="range"
-                                min="20"
-                                max="360"
-                                style="flex:1;margin: 0dp;nav-up:#rr_manual;nav-down:#msaa_none;"
-                                data-value="rr_manual_value"
-                            />
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(5)">
-                        <label class="config-option__title">MS Anti-Aliasing</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(5)"
-                                name="antialiasing"
-                                data-checked="msaa_option"
-                                value="None"
-                                id="msaa_none"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_original' : 'nav-up: #rr_original; nav-down: #hr_original'"
-                            />
-                            <label class="config-option__tab-label" for="msaa_none">None</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(5)"
-                                name="antialiasing"
-                                data-attrif-disabled="!msaa2x_supported"
-                                data-checked="msaa_option"
-                                value="MSAA2X"
-                                id="msaa_2x"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_16_9' : 'nav-up: #rr_display; nav-down: #hr_16_9'"
-                                data-style-nav-right="msaa4x_supported ? '#msaa_4x' : 'none'"
-                            />
-                            <label class="config-option__tab-label" for="msaa_2x">2x</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(5)"
-                                name="antialiasing"
-                                data-attrif-disabled="!msaa4x_supported"
-                                data-checked="msaa_option"
-                                value="MSAA4X"
-                                id="msaa_4x"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
-                            />
-                            <label class="config-option__tab-label" for="msaa_4x">4x</label>
-                            <div class="config-option__details" data-if="!sample_positions_supported">Not available (missing sample positions support)</div>
-                        </div>
-                    </div>
-
-                    <div class="config-option" data-event-mouseover="set_cur_config_index(6)">
-                        <label class="config-option__title">HUD Placement</label>
-                        <div class="config-option__list">
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(6)"
-                                name="hr-option"
-                                data-checked="hr_option"
-                                value="Original"
-                                id="hr_original"
-                                style="nav-up: #msaa_none; nav-down: #apply_button"
-                            />
-                            <label class="config-option__tab-label" for="hr_original">Original</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(6)"
-                                name="hr-option"
-                                data-checked="hr_option"
-                                value="Clamp16x9"
-                                id="hr_16_9"
-                                style="nav-up: #msaa_2x; nav-down: #apply_button"
-                                data-style-nav-up="msaa2x_supported ? '#msaa_2x' : '#msaa_none'"
-                            />
-                            <label class="config-option__tab-label" for="hr_16_9">16:9</label>
-                            <input type="radio"
-                                data-event-blur="set_cur_config_index(-1)"
-                                data-event-focus="set_cur_config_index(6)"
-                                name="hr-option"
-                                data-checked="hr_option"
-                                value="Full"
-                                id="hr_full"
-                                style="nav-up: #msaa_4x; nav-down: #apply_button"
-                                data-style-nav-up="msaa4x_supported ? '#msaa_4x' : (msaa2x_supported ? '#msaa_2x' : '#msaa_none')"
-                            />
-                            <label class="config-option__tab-label" for="hr_full">Expand</label>
-                        </div>
-                    </div>
-
-                </div>
-                <div class="config__wrapper">
-                    <p data-if="cur_config_index == 0">
-                        Sets the output resolution of the game. <b>Original</b> matches the game's original 240p resolution. <b>Original 2x</b> will render at 480p. <b>Auto</b> will scale based on the game window's resolution.
-                    </p>
-                    <p data-if="cur_config_index == 1">
-                        Renders at a higher resolution and scales it down to the output resolution for increased quality. Only available in <b>Original</b> and <b>Original 2x</b> resolution.
-                        <br />
-                        <br />
-                        Note: <b>4x</b> downsampling quality at <b>Original 2x</b> resolution may cause performance issues on low end devices, as it will cause the game to render <i>at almost 4k internal resolution</i>.
-                    </p>
-                    <p data-if="cur_config_index == 2">
-                        Sets the horizontal aspect ratio. <b>Original</b> uses the game's original 4:3 aspect ratio. <b>Expand</b> will adjust to match the game window's aspect ratio.
-                    </p>
-                    <p data-if="cur_config_index == 3">
-                        Sets whether the game should display <b>Windowed</b> or <b>Fullscreen</b>. You can also use <b>F11</b> or <b>Alt + Enter</b> to toggle this option.
-                    </p>
-                    <p data-if="cur_config_index == 4">
-                        Sets the game's output framerate. This option does not affect gameplay.
-                        <br />
-                        <br />
-                        Note: If you have issues with <b>Display</b> mode while using an external frame limiter, use <b>Manual</b> mode instead and configure it to that same frame limit.
-                        <br />
-                        <br />
-                        <b>Detected display refresh rate: {{display_refresh_rate}}hz</b>
-                    </p>
-                    <p data-if="cur_config_index == 5">
-                        Sets the multisample anti-aliasing (MSAA) quality level. This reduces jagged edges in the final image at the expense of rendering performance.
-                        <br />
-                        <br />
-                        <b>Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.</b>
-                    </p>
-                    <p data-if="cur_config_index == 6">
-                        Adjusts the placement of HUD elements to fit the selected aspect ratio. <b>Expand</b> will use the aspect ratio of the game's output window.
-                    </p>
-                </div>
-            </div>
-            <div class="config__footer">
-                <!-- this empty div makes sure Apply button gets right aligned -->
-                <div />
-                <div>
-                    <button
-                        class="button button--secondary"
-                        nav-return="rr_manual"
-                        data-attrif-disabled="!options_changed"
-                        onclick="apply_options"
-                        id="apply_button"
-                        style="nav-up:#hr_original"
-                    >
-                        <div class="button__label">Apply<span class="prompt-font-sm">{{gfx_help__apply}}</span></div>
-                    </button>
-                </div>
-            </div>
-        </form>
-    </body>
-</template>

assets/config_menu/mods.rml

@@ -1,9 +0,0 @@
-<template name="config-menu__mods">
-    <head>
-    </head>
-    <body>
-        <form class="config__form">
-            <recomp-mod-menu id="menu_mods" />
-        </form>
-    </body>
-</template>

assets/config_menu/sound.rml

@@ -1,89 +0,0 @@
-<template name="config-menu__sound">
-    <head>
-    </head>
-    <body>
-        <form class="config__form">
-            <div class="config__hz-wrapper">
-                <!-- Options -->
-                <div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
-                        <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
-                            <label class="config-option__title">Main Volume</label>
-                            <div class="config-option__range-wrapper config-option__list">
-                                <label class="config-option__range-label">{{main_volume}}%</label>
-                                <input
-                                    data-event-blur="set_cur_config_index(-1)"
-                                    data-event-focus="set_cur_config_index(0)"
-                                    class="nav-vert"
-                                    id="main_volume_input"
-                                    type="range"
-                                    min="0"
-                                    max="100"
-                                    style="flex: 1; margin: 0dp; nav-up: #tab_sound; nav-down: #bgm_volume_input;"
-                                    data-value="main_volume"
-                                />
-                            </div>
-                        </div>
-                        <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
-                            <label class="config-option__title">Background Music Volume</label>
-                            <div class="config-option__range-wrapper config-option__list">
-                                <label class="config-option__range-label">{{bgm_volume}}%</label>
-                                <input
-                                    data-event-blur="set_cur_config_index(-1)"
-                                    data-event-focus="set_cur_config_index(1)"
-                                    class="nav-vert"
-                                    id="bgm_volume_input"
-                                    type="range"
-                                    min="0"
-                                    max="100"
-                                    style="flex: 1; margin: 0dp; nav-up: #main_volume_input; nav-down: #lhb_on;"
-                                    data-value="bgm_volume"
-                                />
-                            </div>
-                        </div>
-
-                        <div class="config-option" data-event-mouseover="set_cur_config_index(2)">
-                            <label class="config-option__title">Low Health Beeps</label>
-                            <div class="config-option__list">
-                                <input
-                                    type="radio"
-                                    data-event-blur="set_cur_config_index(-1)"
-                                    data-event-focus="set_cur_config_index(2)"
-                                    name="lhb"
-                                    data-checked="low_health_beeps_enabled"
-                                    value="1"
-                                    id="lhb_on"
-                                    style="nav-up: #bgm_volume_input"
-                                />
-                                <label class="config-option__tab-label" for="lhb_on">On</label>
-
-                                <input
-                                    type="radio"
-                                    data-event-blur="set_cur_config_index(-1)"
-                                    data-event-focus="set_cur_config_index(2)"
-                                    name="lhb"
-                                    data-checked="low_health_beeps_enabled"
-                                    value="0"
-                                    id="lhb_off"
-                                    style="nav-up: #bgm_volume_input"
-                                />
-                                <label class="config-option__tab-label" for="lhb_off">Off</label>
-                            </div>
-                        </div>
-                </div>
-                <!-- Descriptions -->
-                <div class="config__wrapper">
-					<p data-if="cur_config_index == 0">
-						Controls the main volume of the game.
-					</p>
-                    <p data-if="cur_config_index == 1">
-                        Controls the overall volume of background music.
-                    </p>
-                    <p data-if="cur_config_index == 2">
-                        Toggles whether or not the low-health beeping sound plays.
-                    </p>
-                </div>
-            </div>
-        </form>
-    </body>
-</template>
-    

assets/config_sub_menu.rml

@@ -1,70 +0,0 @@
-<rml>
-<head>
-    <link type="text/rcss" href="rml.rcss"/>
-    <link type="text/rcss" href="recomp.rcss"/>
-    <title>Inventory</title>
-    <style>
-        body
-        {
-            width: 100%;
-            height: 100%;
-        }
-
-        /* Hide the window icon. */
-        div#title_bar div#icon
-        {
-            display: none;
-        }
-        .flex-grid {
-            display: flex;
-        }
-        .col {
-            flex: 1;
-            text-align: center;
-        }
-    </style>
-</head>
-<body class="window">
-    <!-- <handle move_target="#document"> -->
-        <div id="window" class="rmlui-window" style="display:flex; flex-flow: column; background-color:rgba(0,0,0,0)" onkeydown="config_keydown">
-            <div class="centered-page" onclick="close_config_menu_backdrop">
-                <div class="centered-page__modal">
-                    <div class="config__icon-buttons">
-                        <button
-                            class="icon-button"
-                            onclick="open_quit_game_prompt"
-                            id="config__quit-game-button"
-                        >
-                            <svg src="icons/Quit.svg" />
-                        </button>
-                        <button
-                            class="icon-button"
-                            onclick="close_config_menu"
-                            id="config__close-menu-button"
-                        >
-                            <svg src="icons/X.svg" />
-                        </button>
-                    </div>
-                    <recomp-config-sub-menu id="config_sub_menu" />
-                </div>
-                <div
-                    class="centered-page__controls"
-                    data-model="nav_help_model"
-                >
-                    <label>
-                        <span>Navigate</span>
-                        <span class="prompt-font-sm">{{nav_help__navigate}}</span>
-                    </label>
-                    <label>
-                        <span>Accept</span>
-                        <span class="prompt-font-sm">{{nav_help__accept}}</span>
-                    </label>
-                    <label>
-                        <span>Exit</span>
-                        <span class="prompt-font-sm">{{nav_help__exit}}</span>
-                    </label>
-                </div>
-            </div>
-        </div>
-</body>
-</rml>

assets/icons/Caret.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 11L15.2929 22.2929C15.6834 22.6834 16.3166 22.6834 16.7071 22.2929L28 11" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"/>
+</svg>

assets/icons/Cont.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.72625 23.3925C8.13475 23.0659 8.61021 22.3958 9.032 21.7129C9.78396 20.4953 11.0499 19.6669 12.4578 19.6669H19.5422C20.9501 19.6669 22.216 20.4953 22.968 21.7129C23.3898 22.3958 23.8653 23.0659 24.2738 23.3925C25.2857 24.2015 26.6008 24.2035 27.6585 23.3925C28.4268 22.8033 29 21.7232 29 20.2983C29 18.8735 28.6384 12.9609 27.6585 9.98045C26.6786 7 23.4285 7 16 7C8.57147 7 5.32145 7 4.34153 9.98045C3.36162 12.9609 3 18.8735 3 20.2983C3 21.7232 3.5732 22.8033 4.34153 23.3925C5.39916 24.2035 6.71431 24.2015 7.72625 23.3925Z" stroke="white" stroke-width="4"/>
+</svg>

assets/icons/Keyboard.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 7C29.2091 7 31 8.79086 31 11V21C31 23.2091 29.2091 25 27 25H5C2.79086 25 1 23.2091 1 21V11C1 8.79086 2.79086 7 5 7H27ZM5 19V21H7V19H5ZM9 19V21H23V19H9ZM25 19V21H27V19H25ZM5 15V17H9V15H5ZM11 15V17H13V15H11ZM15 15V17H17V15H15ZM19 15V17H21V15H19ZM23 15V17H27V15H23ZM5 11V13H7V11H5ZM9 11V13H11V11H9ZM13 11V13H15V11H13ZM17 11V13H19V11H17ZM21 11V13H23V11H21ZM25 11V13H27V11H25Z" fill="white"/>
+</svg>

assets/icons/PlusKeyboard.svg

@@ -0,0 +1,17 @@
+<svg width="48" height="20" viewBox="0 0 48 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_543_3678)">
+<g clip-path="url(#clip1_543_3678)">
+<path d="M8 5V15" stroke="white" stroke-width="4" stroke-linecap="round"/>
+<path d="M3 10L13 10" stroke="white" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M43 1C45.2091 1 47 2.79086 47 5V15C47 17.2091 45.2091 19 43 19H21C18.7909 19 17 17.2091 17 15V5C17 2.79086 18.7909 1 21 1H43ZM21 13V15H23V13H21ZM25 13V15H39V13H25ZM41 13V15H43V13H41ZM21 9V11H25V9H21ZM27 9V11H29V9H27ZM31 9V11H33V9H31ZM35 9V11H37V9H35ZM39 9V11H43V9H39ZM21 5V7H23V5H21ZM25 5V7H27V5H25ZM29 5V7H31V5H29ZM33 5V7H35V5H33ZM37 5V7H39V5H37ZM41 5V7H43V5H41Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_543_3678">
+<rect width="48" height="20" fill="white"/>
+</clipPath>
+<clipPath id="clip1_543_3678">
+<rect width="16" height="16" fill="white" transform="translate(0 2)"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/Port.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 3C24.091 3.00019 28.7417 10.0042 28.9902 16.082C29.0372 17.2318 28.8162 18.5326 28.2207 19.4746C27.7079 20.2859 26.8271 21 25 21H7C5.17292 21 4.29117 20.2859 3.77832 19.4746C3.18306 18.5326 2.96285 17.2316 3.00977 16.082C3.25811 10.0041 7.90882 3 16 3Z" stroke="white" stroke-width="4" stroke-linecap="round"/>
+<circle cx="16" cy="14.5" r="2.5" fill="white"/>
+<circle cx="22.5" cy="14.5" r="2.5" fill="white"/>
+<circle cx="9.5" cy="14.5" r="2.5" fill="white"/>
+</svg>

assets/icons/Question.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00008 11C9.00008 6.5 12.0002 4 16.0002 4C20.0002 4 23.0002 7 23.0002 11C23.0002 15 20.0002 18 16.0002 18" stroke="white" stroke-width="4" stroke-linecap="round"/>
+<path d="M16 22V18" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="16" cy="28" r="2" fill="white"/>
+</svg>

assets/icons/RecordSpinner.svg

@@ -0,0 +1,16 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_541_3853)">
+<circle cx="16" cy="28" r="3" fill="white"/>
+<mask id="mask0_541_3853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M32 32H16C18.2091 32 20 30.2091 20 28C20 25.7909 18.2091 24 16 24C13.7909 24 12 25.7909 12 28C12 30.2091 13.7909 32 16 32H0V0H32V32Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_541_3853)">
+<circle cx="16" cy="16" r="12" stroke="white" stroke-width="4"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_541_3853">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/launcher.rml

@@ -1,70 +0,0 @@
-<rml>
-	<head>
-		<title>Launcher</title>
-		<link type="text/rcss" href="rml.rcss"/>
-		<link type="text/rcss" href="recomp.rcss"/>
-		<style>
-			body
-			{
-				width: 100%;
-				height: 100%;
-			}
-		</style>
-	</head>
-	<body>
-		<div id="window" data-model="launcher_model">
-			<div class="launcher">
-				<!--<div class="launcher__vertical-split">
-					<div class="launcher__title-quadrant">
-						<button class="subtitle-title" disabled>
-							<div><h3>Banjo: Recompiled</h3></div>
-							<div><h1>Banjo-Tooie</h1></div>
-							<div class="subtitle-title__disclaimer">Coming Soon™</div>
-						</button>
-					</div>
-					<div class="launcher__content-quadrant"></div>
-				</div>-->
-				<div class="launcher__vertical-split launcher__vertical-split--right">
-					<div class="launcher__background-wrapper">
-						<!-- <svg src="[changeme].svg" class="launcher__background-bk" /> -->
-					</div>
-					<div class="launcher__title-quadrant launcher__title-quadrant--right">
-						<button class="subtitle-title subtitle-title--right" selected>
-							<div><h3>Banjo: Recompiled</h3></div>
-							<div><h1>Banjo-Kazooie</h1></div>
-						</button>
-					</div>
-					<div class="launcher__content-quadrant">
-						<button data-if="!bk_rom_valid" onclick="select_rom" class="menu-list-item menu-list-item--right" autofocus>
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Select ROM</div>
-						</button>
-						<button data-if="bk_rom_valid" onclick="start_game" class="menu-list-item menu-list-item--right" autofocus>
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Start game</div>
-						</button>
-						<button onclick="open_controls" class="menu-list-item menu-list-item--right">
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Setup controls</div>
-						</button>
-						<button onclick="open_settings" class="menu-list-item menu-list-item--right">
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Settings</div>
-						</button>
-						<button onclick="open_mods" class="menu-list-item menu-list-item--right">
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Mods</div>
-						</button>
-						<button onclick="exit_game" class="menu-list-item menu-list-item--right">
-							<div class="menu-list-item__bullet">•</div>
-							<div class="menu-list-item__label">Exit</div>
-						</button>
-					</div>
-				</div>
-				<div class="bottom-left">
-					<label>v{{version_number}}</label>
-				</div>
-			</div>
-		</div>
-	</body>
-</rml>

assets/promptfont/promptfont.css

@@ -1,335 +0,0 @@
-@font-face{font-family:'promptfont'; src:url('promptfont.ttf');}
-.pf{font-family:promptfont;}
-.pf-exchange::after{content:'\u2194';}
-.pf-reverse::after{content:'\u2195';}
-.pf-left-trigger-lt::after{content:'\u2196';}
-.pf-right-trigger-rt::after{content:'\u2197';}
-.pf-left-shoulder-lb::after{content:'\u2198';}
-.pf-right-shoulder-rb::after{content:'\u2199';}
-.pf-left-trigger-zl::after{content:'\u219A';}
-.pf-right-trigger-zr::after{content:'\u219B';}
-.pf-left-shoulder-l::after{content:'\u219C';}
-.pf-right-shoulder-r::after{content:'\u219D';}
-.pf-dpad-left::after{content:'\u219E';}
-.pf-dpad-up::after{content:'\u219F';}
-.pf-dpad-right::after{content:'\u21A0';}
-.pf-dpad-down::after{content:'\u21A1';}
-.pf-dpad-left-right::after{content:'\u21A2';}
-.pf-dpad-up-down::after{content:'\u21A3';}
-.pf-button-left-x::after{content:'\u21A4';}
-.pf-button-up-y::after{content:'\u21A5';}
-.pf-button-right-b::after{content:'\u21A6';}
-.pf-button-down-a::after{content:'\u21A7';}
-.pf-left-analog-clockwise::after{content:'\u21A9';}
-.pf-left-analog-counter::after{content:'\u21AA';}
-.pf-right-analog-clockwise::after{content:'\u21AB';}
-.pf-right-analog-counter::after{content:'\u21AC';}
-.pf-both-analog-clockwise::after{content:'\u21AD';}
-.pf-both-analog-counter::after{content:'\u21AE';}
-.pf-left-shoulder-l1::after{content:'\u21B0';}
-.pf-right-shoulder-r1::after{content:'\u21B1';}
-.pf-left-trigger-l2::after{content:'\u21B2';}
-.pf-right-trigger-r2::after{content:'\u21B3';}
-.pf-dpad-left-down::after{content:'\u21B4';}
-.pf-dpad-up-right::after{content:'\u21B5';}
-.pf-analog-clockwise::after{content:'\u21B6';}
-.pf-analog-counter::after{content:'\u21B7';}
-.pf-both-analog-click::after{content:'\u21B9';}
-.pf-left-analog-click::after{content:'\u21BA';}
-.pf-right-analog-click::after{content:'\u21BB';}
-.pf-left-analog-left::after{content:'\u21BC';}
-.pf-right-analog-left::after{content:'\u21BD';}
-.pf-left-analog-up::after{content:'\u21BE';}
-.pf-right-analog-up::after{content:'\u21BF';}
-.pf-left-analog-right::after{content:'\u21C0';}
-.pf-right-analog-right::after{content:'\u21C1';}
-.pf-left-analog-down::after{content:'\u21C2';}
-.pf-right-analog-down::after{content:'\u21C3';}
-.pf-left-analog-left-right::after{content:'\u21C4';}
-.pf-left-analog-up-down::after{content:'\u21C5';}
-.pf-right-analog-left-right::after{content:'\u21C6';}
-.pf-analog-left::after{content:'\u21C7';}
-.pf-analog-up::after{content:'\u21C8';}
-.pf-analog-right::after{content:'\u21C9';}
-.pf-analog-down::after{content:'\u21CA';}
-.pf-left-analog::after{content:'\u21CB';}
-.pf-right-analog::after{content:'\u21CC';}
-.pf-dpad::after{content:'\u21CE';}
-.pf-button-x::after{content:'\u21D0';}
-.pf-button-y::after{content:'\u21D1';}
-.pf-button-b::after{content:'\u21D2';}
-.pf-button-a::after{content:'\u21D3';}
-.pf-analog-left-right::after{content:'\u21D4';}
-.pf-analog-up-down::after{content:'\u21D5';}
-.pf-analog-up-left::after{content:'\u21D6';}
-.pf-analog-up-right::after{content:'\u21D7';}
-.pf-analog-down-right::after{content:'\u21D8';}
-.pf-analog-down-left::after{content:'\u21D9';}
-.pf-left-analog-touch::after{content:'\u21DA';}
-.pf-right-analog-touch::after{content:'\u21DB';}
-.pf-left-trigger-pull::after{content:'\u21DC';}
-.pf-right-trigger-pull::after{content:'\u21DD';}
-.pf-dpad-right-down::after{content:'\u21DE';}
-.pf-dpad-left-up::after{content:'\u21DF';}
-.pf-button-square::after{content:'\u21E0';}
-.pf-button-triangle::after{content:'\u21E1';}
-.pf-button-circle::after{content:'\u21E2';}
-.pf-button-cross::after{content:'\u21E3';}
-.pf-steam-menu::after{content:'\u21E4';}
-.pf-options-menu::after{content:'\u21E5';}
-.pf-dualshock-share::after{content:'\u21E6';}
-.pf-dualshock-touchpad::after{content:'\u21E7';}
-.pf-dualshock-options::after{content:'\u21E8';}
-.pf-gamecube-z::after{content:'\u21E9';}
-.pf-back-trigger-z::after{content:'\u21EA';}
-.pf-button-c::after{content:'\u21EB';}
-.pf-button-z::after{content:'\u21EC';}
-.pf-button-alt-1::after{content:'\u21ED';}
-.pf-button-alt-2::after{content:'\u21EE';}
-.pf-left-analog-any::after{content:'\u21F1';}
-.pf-right-analog-any::after{content:'\u21F2';}
-.pf-analog-any::after{content:'\u21F3';}
-.pf-right-analog-up-down::after{content:'\u21F5';}
-.pf-select-share::after{content:'\u21F7';}
-.pf-start::after{content:'\u21F8';}
-.pf-home-menu::after{content:'\u21F9';}
-.pf-share-capture::after{content:'\u21FA';}
-.pf-burger-menu::after{content:'\u21FB';}
-.pf-minus::after{content:'\u21FD';}
-.pf-plus::after{content:'\u21FE';}
-.pf-joycon-dpad-left::after{content:'\u21FF';}
-.pf-joycon-dpad-up::after{content:'\u2200';}
-.pf-joycon-dpad-right::after{content:'\u2201';}
-.pf-joycon-dpad-down::after{content:'\u2202';}
-.pf-joycon-sl::after{content:'\u2203';}
-.pf-joycon-sr::after{content:'\u2204';}
-.pf-lenovo-legion-quick-settings::after{content:'\u2205';}
-.pf-dualsense-share::after{content:'\u2206';}
-.pf-dualsense-touchpad::after{content:'\u2207';}
-.pf-dualsense-options::after{content:'\u2208';}
-.pf-ayaneo-lc::after{content:'\u2209';}
-.pf-ayaneo-rc::after{content:'\u220A';}
-.pf-ayaneo-wave::after{content:'\u220B';}
-.pf-ayn-home::after{content:'\u220C';}
-.pf-ayn-lcc::after{content:'\u220D';}
-.pf-gpd-c1::after{content:'\u220E';}
-.pf-gpd-c2::after{content:'\u220F';}
-.pf-onexplayer-keyboard::after{content:'\u2210';}
-.pf-onexplayer-turbo::after{content:'\u2211';}
-.pf-m1::after{content:'\u2212';}
-.pf-m2::after{content:'\u2213';}
-.pf-m3::after{content:'\u2214';}
-.pf-y1::after{content:'\u2215';}
-.pf-y2::after{content:'\u2216';}
-.pf-y3::after{content:'\u2217';}
-.pf-onexplayer-function::after{content:'\u2218';}
-.pf-onexplayer-home::after{content:'\u2219';}
-.pf-left-trackpad-any::after{content:'\u2264';}
-.pf-right-trackpad-any::after{content:'\u2265';}
-.pf-left-trackpad-click::after{content:'\u2266';}
-.pf-right-trackpad-click::after{content:'\u2267';}
-.pf-left-trackpad-touch::after{content:'\u2268';}
-.pf-right-trackpad-touch::after{content:'\u2269';}
-.pf-left-trackpad-left::after{content:'\u226E';}
-.pf-right-trackpad-left::after{content:'\u226F';}
-.pf-left-trackpad-up::after{content:'\u2270';}
-.pf-right-trackpad-up::after{content:'\u2271';}
-.pf-left-trackpad-right::after{content:'\u2272';}
-.pf-right-trackpad-right::after{content:'\u2273';}
-.pf-left-trackpad-down::after{content:'\u2274';}
-.pf-right-trackpad-down::after{content:'\u2275';}
-.pf-steamdeck-l4::after{content:'\u2276';}
-.pf-steamdeck-r4::after{content:'\u2277';}
-.pf-steamdeck-l5::after{content:'\u2278';}
-.pf-steamdeck-r5::after{content:'\u2279';}
-.pf-xbox-dpad-left::after{content:'\u227A';}
-.pf-xbox-dpad-up::after{content:'\u227B';}
-.pf-xbox-dpad-right::after{content:'\u227C';}
-.pf-xbox-dpad-down::after{content:'\u227D';}
-.pf-xbox-dpad-left-right::after{content:'\u227E';}
-.pf-xbox-dpad-up-down::after{content:'\u227F';}
-.pf-xbox-dpad-left-up::after{content:'\u2280';}
-.pf-xbox-dpad-right-up::after{content:'\u2281';}
-.pf-xbox-dpad-left-down::after{content:'\u2282';}
-.pf-xbox-dpad-right-down::after{content:'\u2283';}
-.pf-xbox-dpad::after{content:'\u2284';}
-.pf-pin::after{content:'\u2316';}
-.pf-tabs::after{content:'\u23CD';}
-.pf-back::after{content:'\u23CE';}
-.pf-home-screen::after{content:'\u23CF';}
-.pf-horizontal-dots::after{content:'\u23D0';}
-.pf-vertical-dots::after{content:'\u23D1';}
-.pf-hamburger-menu::after{content:'\u23D2';}
-.pf-arrow-left::after{content:'\u23F4';}
-.pf-arrow-up::after{content:'\u23F5';}
-.pf-arrow-right::after{content:'\u23F6';}
-.pf-arrow-down::after{content:'\u23F7';}
-.pf-wasd::after{content:'\u2423';}
-.pf-arrow-keys::after{content:'\u2424';}
-.pf-ijkl::after{content:'\u2425';}
-.pf-fn::after{content:'\u2426';}
-.pf-ctrl::after{content:'\u2427';}
-.pf-alt::after{content:'\u2428';}
-.pf-shift::after{content:'\u2429';}
-.pf-super::after{content:'\u242A';}
-.pf-tab::after{content:'\u242B';}
-.pf-caps::after{content:'\u242C';}
-.pf-backspace::after{content:'\u242D';}
-.pf-enter::after{content:'\u242E';}
-.pf-esc::after{content:'\u242F';}
-.pf-prtsc::after{content:'\u2430';}
-.pf-scrlk::after{content:'\u2431';}
-.pf-pause::after{content:'\u2432';}
-.pf-numlock::after{content:'\u2433';}
-.pf-insert::after{content:'\u2434';}
-.pf-home::after{content:'\u2435';}
-.pf-page-up::after{content:'\u2436';}
-.pf-delete::after{content:'\u2437';}
-.pf-end::after{content:'\u2438';}
-.pf-page-down::after{content:'\u2439';}
-.pf-space::after{content:'\u243A';}
-.pf-gamepad::after{content:'\u243C';}
-.pf-keyboard::after{content:'\u243D';}
-.pf-mouse::after{content:'\u243E';}
-.pf-mouse-and-keyboard::after{content:'\u243F';}
-.pf-f1::after{content:'\u2460';}
-.pf-f2::after{content:'\u2461';}
-.pf-f3::after{content:'\u2462';}
-.pf-f4::after{content:'\u2463';}
-.pf-f5::after{content:'\u2464';}
-.pf-f6::after{content:'\u2465';}
-.pf-f7::after{content:'\u2466';}
-.pf-f8::after{content:'\u2467';}
-.pf-f9::after{content:'\u2468';}
-.pf-f10::after{content:'\u2469';}
-.pf-f11::after{content:'\u246A';}
-.pf-f12::after{content:'\u246B';}
-.pf-empty-keycap::after{content:'\u248F';}
-.pf-1::after{content:'\u24F5';}
-.pf-2::after{content:'\u24F6';}
-.pf-3::after{content:'\u24F7';}
-.pf-4::after{content:'\u24F8';}
-.pf-5::after{content:'\u24F9';}
-.pf-6::after{content:'\u24FA';}
-.pf-7::after{content:'\u24FB';}
-.pf-8::after{content:'\u24FC';}
-.pf-9::after{content:'\u24FD';}
-.pf-0::after{content:'\u24FF';}
-.pf-star::after{content:'\u2605';}
-.pf-skull::after{content:'\u2620';}
-.pf-frown::after{content:'\u2639';}
-.pf-smile::after{content:'\u263A';}
-.pf-empty-heart::after{content:'\u2661';}
-.pf-heart::after{content:'\u2665';}
-.pf-d4::after{content:'\u2673';}
-.pf-d6::after{content:'\u2674';}
-.pf-d8::after{content:'\u2675';}
-.pf-d10::after{content:'\u2676';}
-.pf-d12::after{content:'\u2677';}
-.pf-d20::after{content:'\u2678';}
-.pf-d6-1::after{content:'\u2680';}
-.pf-d6-2::after{content:'\u2681';}
-.pf-d6-3::after{content:'\u2682';}
-.pf-d6-4::after{content:'\u2683';}
-.pf-d6-5::after{content:'\u2684';}
-.pf-d6-6::after{content:'\u2685';}
-.pf-flag::after{content:'\u2691';}
-.pf-gears-options-settings::after{content:'\u2699';}
-.pf-cross::after{content:'\u2717';}
-.pf-question::after{content:'\u2753';}
-.pf-exclamation::after{content:'\u2757';}
-.pf-mouse-button-1::after{content:'\u278A';}
-.pf-mouse-button-2::after{content:'\u278B';}
-.pf-mouse-button-3::after{content:'\u278C';}
-.pf-mouse-button-4::after{content:'\u278D';}
-.pf-mouse-button-5::after{content:'\u278E';}
-.pf-mouse-button-6::after{content:'\u278F';}
-.pf-mouse-button-7::after{content:'\u2790';}
-.pf-mouse-button-8::after{content:'\u2791';}
-.pf-scroll-up::after{content:'\u27F0';}
-.pf-scroll-down::after{content:'\u27F1';}
-.pf-left-click::after{content:'\u27F5';}
-.pf-right-click::after{content:'\u27F6';}
-.pf-middle-click::after{content:'\u27F7';}
-.pf-mouse-left-right::after{content:'\u27FA';}
-.pf-mouse-up-down::after{content:'\u27FB';}
-.pf-mouse-any::after{content:'\u27FC';}
-.pf-box-crate::after{content:'\u2B1B';}
-.pf-playstation::after{content:'\uE000';}
-.pf-xbox::after{content:'\uE001';}
-.pf-nintendo-switch::after{content:'\uE002';}
-.pf-ayaneo::after{content:'\uE003';}
-.pf-lenovo-legion::after{content:'\uE004';}
-.pf-rog-ally-armoury::after{content:'\uE005';}
-.pf-rog-alloy-command::after{content:'\uE006';}
-.pf-apple-mac::after{content:'\uE007';}
-.pf-windows::after{content:'\uE008';}
-.pf-linux::after{content:'\uE009';}
-.pf-bsd::after{content:'\uE00A';}
-.pf-key-0::after{content:'\uFF10';}
-.pf-key-1::after{content:'\uFF11';}
-.pf-key-2::after{content:'\uFF12';}
-.pf-key-3::after{content:'\uFF13';}
-.pf-key-4::after{content:'\uFF14';}
-.pf-key-5::after{content:'\uFF15';}
-.pf-key-6::after{content:'\uFF16';}
-.pf-key-7::after{content:'\uFF17';}
-.pf-key-8::after{content:'\uFF18';}
-.pf-key-9::after{content:'\uFF19';}
-.pf-key-a::after{content:'\uFF21';}
-.pf-key-b::after{content:'\uFF22';}
-.pf-key-c::after{content:'\uFF23';}
-.pf-key-d::after{content:'\uFF24';}
-.pf-key-e::after{content:'\uFF25';}
-.pf-key-f::after{content:'\uFF26';}
-.pf-key-g::after{content:'\uFF27';}
-.pf-key-h::after{content:'\uFF28';}
-.pf-key-i::after{content:'\uFF29';}
-.pf-key-j::after{content:'\uFF2A';}
-.pf-key-k::after{content:'\uFF2B';}
-.pf-key-l::after{content:'\uFF2C';}
-.pf-key-m::after{content:'\uFF2D';}
-.pf-key-n::after{content:'\uFF2E';}
-.pf-key-o::after{content:'\uFF2F';}
-.pf-key-p::after{content:'\uFF30';}
-.pf-key-q::after{content:'\uFF31';}
-.pf-key-r::after{content:'\uFF32';}
-.pf-key-s::after{content:'\uFF33';}
-.pf-key-t::after{content:'\uFF34';}
-.pf-key-u::after{content:'\uFF35';}
-.pf-key-v::after{content:'\uFF36';}
-.pf-key-w::after{content:'\uFF37';}
-.pf-key-x::after{content:'\uFF38';}
-.pf-key-y::after{content:'\uFF39';}
-.pf-key-z::after{content:'\uFF3A';}
-.pf-headphones::after{content:'\u1F3A7';}
-.pf-music::after{content:'\u1F3B6';}
-.pf-fish::after{content:'\u1F41F';}
-.pf-dance-pad::after{content:'\u1F483';}
-.pf-laptop::after{content:'\u1F4BB';}
-.pf-diskette::after{content:'\u1F4BE';}
-.pf-write::after{content:'\u1F4DD';}
-.pf-phone::after{content:'\u1F4F1';}
-.pf-camera::after{content:'\u1F4F7';}
-.pf-speaker::after{content:'\u1F508';}
-.pf-light-gun::after{content:'\u1F52B';}
-.pf-sfx-sound-effect-noise::after{content:'\u1F56C';}
-.pf-steering-wheel::after{content:'\u1F578';}
-.pf-fight-stick-joystick::after{content:'\u1F579';}
-.pf-vr-headset::after{content:'\u1F57B';}
-.pf-vr-controller::after{content:'\u1F57C';}
-.pf-flight-stick::after{content:'\u1F57D';}
-.pf-cpu-processor::after{content:'\u1F5A5';}
-.pf-web-internet-link::after{content:'\u1F5A7';}
-.pf-gpu-graphics-card::after{content:'\u1F5A8';}
-.pf-ram-memory::after{content:'\u1F5AA';}
-.pf-usb-stick::after{content:'\u1F5AB';}
-.pf-database::after{content:'\u1F5AC';}
-.pf-hard-disk-drive::after{content:'\u1F5B4';}
-.pf-screen-video::after{content:'\u1F5B5';}
-.pf-text-entry-edit::after{content:'\u1F5B9';}
-.pf-speaking-voice::after{content:'\u1F5E3';}
-.pf-language::after{content:'\u1F5E9';}
-.pf-exit-quit-leave::after{content:'\u1F6AA';}
-.pf-information::after{content:'\u1F6C8';}
-.pf-shopping-cart::after{content:'\u1F6D2';}

assets/rml.rcss

@@ -1,61 +0,0 @@
-/*
-* Default styles for all the basic elements.
-*/
-
-div
-{
-	display: block;
-}
-
-p
-{
-	display: block;
-}
-
-h1
-{
-	display: block;
-}
-
-em
-{
-	font-style: italic;
-}
-
-strong
-{
-	font-weight: bold;
-}
-
-select
-{
-	text-align: left;
-}
-
-tabset tabs
-{
-	display: block;
-}
-
-table {
-	box-sizing: border-box;
-	display: table;
-}
-tr {
-	box-sizing: border-box;
-	display: table-row;
-}
-td {
-	box-sizing: border-box;
-	display: table-cell;
-}
-col {
-	box-sizing: border-box;
-	display: table-column;
-}
-colgroup {
-	display: table-column-group;
-}
-thead, tbody, tfoot {
-	display: table-row-group;
-}

assets/scss/.nvmrc

@@ -1 +0,0 @@
-iron

assets/scss/.stylelintrc

@@ -1,99 +0,0 @@
-{
-    "extends": [
-        "stylelint-config-recommended",
-        "stylelint-config-standard",
-        "stylelint-config-sass-guidelines",
-        "stylelint-config-property-sort-order-smacss",
-        "stylelint-config-standard-scss"
-    ],
-    "plugins": ["stylelint-scss"],
-    "overrides": [{
-        "files": ["**/*.scss"],
-        "customSyntax": "postcss-scss"
-    }],
-    "rules": {
-        "no-descending-specificity": null,
-        "declaration-empty-line-before": null,
-        "declaration-colon-newline-after": null,
-        "declaration-block-no-duplicate-properties": true,
-        "declaration-block-trailing-semicolon": null,
-        "declaration-no-important": true,
-        "declaration-property-value-disallowed-list": {
-            "/^transition/": ["/all/"]
-        },
-        "block-closing-brace-newline-after": null,
-        "max-empty-lines": null,
-        "selector-list-comma-newline-after": null,
-        "at-rule-empty-line-before": null,
-        "at-rule-semicolon-newline-after": null,
-        "selector-pseudo-element-colon-notation": "single",
-        "color-no-hex": true,
-        "function-url-quotes": "always",
-        "max-nesting-depth": [
-            4,
-            {
-                "ignoreAtRules": ["each", "media", "supports", "include"],
-                "severity": "warning"
-            }
-        ],
-        "number-leading-zero": null,
-        "order/order": [
-            [
-                "custom-properties",
-                "dollar-variables",
-                {
-                    "type": "at-rule",
-                    "name": "extend"
-                },
-                {
-                    "type": "at-rule",
-                    "name": "include"
-                },
-                "declarations",
-                "rules"
-            ]
-        ],
-        "order/properties-alphabetical-order": null,
-        "property-no-vendor-prefix": [
-            true,
-            {
-                "severity": "warning"
-            }
-        ],
-        "value-no-vendor-prefix": [
-            true,
-            {
-                "severity": "warning"
-            }
-        ],
-        "scss/selector-no-redundant-nesting-selector": null,
-        "selector-class-pattern": null,
-        "selector-max-compound-selectors": [
-            4,
-            {
-                "severity": "warning"
-            }
-        ],
-        "selector-no-qualifying-type": null,
-        "string-quotes": null,
-        "max-line-length": null,
-        "keyframes-name-pattern": null,
-        "scss/double-slash-comment-empty-line-before": null,
-        "scss/double-slash-comment-whitespace-inside": null,
-        "scss/dollar-variable-empty-line-before": null,
-        "scss/dollar-variable-pattern": "[a-z-]",
-        "scss/at-import-partial-extension": null,
-        "declaration-block-no-redundant-longhand-properties": null,
-        "color-function-notation": null,
-        "alpha-value-notation": null,
-        "at-rule-no-unknown": null,
-        "property-no-unknown": null,
-        "scss/at-rule-no-unknown": true,
-        "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["selected"] }],
-        "font-family-no-missing-generic-family-keyword": null,
-        "scss/no-global-function-names": null,
-        "unit-no-unknown": [true, { "ignoreUnits": ["dp"] }],
-        "selector-type-no-unknown": [true, { "ignore": ["custom-elements", "default-namespace"] }],
-        "value-keyword-case": null
-    }
-}

assets/scss/main.scss

@@ -1,2 +0,0 @@
-@import "styles/base";
-@import "styles/global";

assets/scss/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "mmrecomp-ui-scss",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "npm run watch",
-    "watch": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss --watch",
-    "watch:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss --watch",
-    "build": "sass --no-source-map --no-charset --style=compressed main.scss ..\\recomp.rcss",
-    "build:debug": "sass --no-source-map --no-charset main.scss ..\\recomp.rcss",
-    "lint": "stylelint '.\\**\\*.scss'"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "postcss-scss": "^4.0.9",
-    "stylelint": "^15.11.0",
-    "stylelint-config-property-sort-order-smacss": "^9.1.0",
-    "stylelint-config-sass-guidelines": "^10.0.0",
-    "stylelint-config-scss": "^1.0.0-security",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^11.1.0",
-    "stylelint-scss": "^5.3.1"
-  },
-  "dependencies": {
-    "sass": "^1.75.0"
-  }
-}

assets/scss/styles/base.scss

@@ -1,11 +0,0 @@
-@use 'sass:math';
-@import "./functions/spacing";
-@import "./vars/spacing";
-@import "./vars/colors";
-@import "./vars/borders";
-@import "./vars/gradients";
-@import "./vars/transitions";
-@import "./vars/animations";
-@import "./mixins/typography";
-@import "./mixins/transitions";
-@import "./mixins/helpers";

assets/scss/styles/components/BottomLeft.scss

@@ -1,14 +0,0 @@
-@use 'sass:math';
-
-.bottom-left {
-    display: flex;
-    position: absolute;
-    bottom: space(4);
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    max-width: space($base-modal-max-width);
-    height: auto;
-    margin: 0 space(4);
-}

assets/scss/styles/components/Button.scss

@@ -1,81 +0,0 @@
-@use 'sass:color';
-
-@mixin create-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
-    border-color: $base-col-80;
-    background-color: $base-col-05;
-    color: $color-text-dim;
-
-    &:focus, &:hover {
-        border-color: $base-col;
-        background-color: $base-col-30;
-        color: $color-text;
-    }
-
-    &:disabled,&[disabled] {
-        color: $color-text-inactive;
-    }
-
-    &:active {
-        background-color: $base-col-20;
-        color: $color-text-active;
-    }
-}
-
-.button {
-    @extend %label-md;
-    @extend %nav-all;
-    @include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
-    @include trans-colors;
-
-    display: block;
-    width: auto;
-    height: auto;
-    // leave 1dp room for border expansion
-    padding: space(24 - 1);
-    border-width: $border-width-thickness;
-
-    border-radius: $border-radius-md;
-
-    // Setting it by default for convenience
-    &--primary {
-        @include create-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
-    }
-
-    &--large {
-        @extend %label-lg;
-    }
-
-    &--secondary {
-        @include create-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
-    }
-
-    &--tertiary {
-        @include create-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
-    }
-
-    &--success {
-        @include create-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
-    }
-
-    &--danger {
-        @include create-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
-    }
-
-    &--warning {
-        @include create-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
-    }
-
-    &:not([disabled]) {
-        @extend %nav-all;
-        cursor: pointer;
-    }
-
-    &:disabled,&[disabled] {
-        opacity: 0.5;
-    }
-
-    &__label {
-        width: auto;
-        height: auto;
-    }
-}

assets/scss/styles/components/CenteredPage.scss

@@ -1,73 +0,0 @@
-@use 'sass:math';
-
-.centered-page {
-    display: flex;
-    // visibility: hidden;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: space($page-margin);
-    background-color: $color-border-soft;
-}
-
-.centered-page__modal {
-    display: flex;
-    position: relative;
-    flex: 1 1 100%;
-    flex-direction: column;
-    width: 100%;
-    max-width: space($base-modal-max-width);
-    height: 100%;
-    margin: auto;
-    border-width: $border-width-thickness;
-    border-radius: $border-radius-modal;
-    border-color: $color-border;
-    background: $color-modal-overlay;
-
-    > .tabs {
-        display: flex;
-        position: relative;
-        flex: 1 1 100%;
-        flex-direction: column;
-        width: 100%;
-        max-width: space($base-modal-max-width);
-        height: 100%;
-        margin: auto;
-    }
-
-    panels {
-        flex: 1 1 100%;
-    }
-}
-
-.centered-page__controls {
-    display: flex;
-    position: absolute;
-    bottom: space(24);
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    max-width: space($base-modal-max-width);
-    height: auto;
-    margin: 0 auto;
-
-    > label {
-        @extend %label-sm;
-        display: inline-block;
-        align-items: center;
-        justify-content: space-between;
-        width: auto;
-        height: space(24);
-
-        &:not(:last-child) {
-            margin-right: space(40);
-        }
-
-        > span:first-child {
-            margin-right: space(4);
-        }
-    }
-}

assets/scss/styles/components/Config.scss

@@ -1,101 +0,0 @@
-
-.config__icon-buttons {
-    display: flex;
-    position: absolute;
-    top: space(8);
-    right: space(0);
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-    width: auto;
-
-    .icon-button {
-        margin: 0 space(8);
-    }
-}
-
-.config__form {
-    @include border-top($color-border-soft);
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    border-bottom-right-radius: $border-radius-modal;
-    border-bottom-left-radius: $border-radius-modal;
-}
-
-.config__wrapper {
-    flex: 1 1 100%;
-    width: auto;
-    height: auto;
-    padding: space(16);
-    border-radius: 0dp;
-    border-bottom-right-radius: $border-radius-modal;
-    border-bottom-left-radius: $border-radius-modal;
-    background-color: $color-bg-shadow;
-    text-align: left;
-
-    p {
-        @extend %body;
-        padding: space(16);
-        line-height: space(28);
-        white-space: pre-line;
-
-        b {
-            color: $color-primary;
-        }
-
-        i {
-            color: $color-warning;
-            font-style: normal;
-        }
-    }
-}
-
-.config__hz-wrapper {
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: row;
-    width: 100%;
-    height: 100%;
-    border-radius: 0dp;
-    text-align: left;
-}
-
-.config__header, .config__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    background-color: $color-bg-shadow;
-}
-
-.config__header {
-    @include border-bottom($color-border-soft);
-    padding: space(12) space(20);
-}
-
-.config__footer {
-    @include border-top($color-border-soft);
-    padding: space(20) space(20);
-    border-bottom-right-radius: $border-radius-modal;
-    border-bottom-left-radius: $border-radius-modal;
-}
-
-.config__header-left {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: row;
-
-    > :not(:first-child) {
-        margin-left: space(8);
-    }
-}
-
-.config__row {
-    display: flex;
-    flex-direction: row;
-}
-

assets/scss/styles/components/ConfigDescription.scss

@@ -1,27 +0,0 @@
-.config-description {
-    flex: 1 1 100%;
-    width: auto;
-    height: auto;
-    padding: space(16);
-    border-radius: 0dp;
-    border-bottom-right-radius: $border-radius-modal;
-    border-bottom-left-radius: $border-radius-modal;
-    background-color: $color-bg-shadow;
-    text-align: left;
-
-    &__contents {
-        @extend %body;
-        padding: space(16);
-        line-height: space(28);
-        white-space: pre-line;
-
-        b {
-            color: $color-primary;
-        }
-
-        i {
-            color: $color-warning;
-            font-style: normal;
-        }
-    }
-}

assets/scss/styles/components/ConfigGroup.scss

@@ -1,29 +0,0 @@
-
-.config-group {
-    position: relative;
-
-    &--scrollable {
-        flex: 1 1 100%;
-        width: auto;
-        height: auto;
-        padding: 0 0 0 space(16);
-        
-        .config-group__wrapper {
-            max-height: 100%;
-            overflow-y: auto;
-        }
-    }
-
-    &__title {
-        @extend %label-md;
-        color: $color-primary;
-
-        &--hidden {
-            display: none;
-        }
-    }
-    
-    &__wrapper {
-        padding: space(16) 0;
-    }
-}

assets/scss/styles/components/ConfigOption.scss

@@ -1,413 +0,0 @@
-.config-option {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    margin: space(16) space(0) space(24);
-
-    &--hz {
-        flex-direction: row-reverse;
-        align-items: center;
-        margin-top: space(4);
-        margin-bottom: space(4);
-
-        .config-option__title {
-            @extend %label-md;
-            flex: 1 1 100%;
-        }
-
-        .config-option__list {
-            flex: 1 1 auto;
-            width: auto;
-        }
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.config-option__title {
-    @extend %label-md;
-    padding: 0 space(12);
-}
-
-.config-option__radio-tabs,
-.config-option__list {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    height: auto;
-    padding: 0;
-
-    input:first-of-type {
-        nav-left: none;
-    }
-
-    input:last-of-type {
-        nav-right: none;
-    }
-
-    .config-option__tab-label {
-        @extend %label-sm;
-        @include trans-colors-opa;
-        display: block;
-        position: relative;
-        height: auto;
-        margin: space(4) space(12) 0;
-        padding: space(8) 0;
-        color: $color-text-inactive;
-        tab-index: none;
-
-        &:hover {
-            color: $color-text;
-            cursor: pointer;
-        }
-    }
-
-    .config-option__checkbox-wrapper {
-        @include trans-colors-opa;
-        width: space(32);
-        height: space(32);
-        margin: space(4) space(12) 0;
-        border-radius: $border-radius-sm;
-        opacity: 0.5;
-        background-color: $color-bg-overlay;
-        cursor: pointer;
-
-        &:hover {
-            opacity: 1;
-        }
-        
-        &[checked] {
-            background-color: $color-a;
-        }
-    }
-
-    .config-option__checkbox {
-        @extend %nav-all;
-        @include trans-colors-opa;
-        visibility: visible;
-        width: 0;
-        height: 0;
-    }
-
-    // TODO: Remove & Replace old stylings
-    input.radio {
-        @extend %nav-all;
-        @include trans-colors-opa;
-        visibility: visible;
-        width: 0;
-        height: 0;
-
-        &:not(:disabled) {
-            &:checked + .config-option__tab-label {
-                border-bottom: 1dp;
-                border-color: $color-text;
-                color: $color-text;
-    
-                &:hover {
-                    cursor: default;
-                }
-            }
-    
-            .rmlui-window:not([mouse-active]) &:focus + .config-option__tab-label {
-                transition: none;
-                animation: $focus-anim-border;
-                border-color: $color-secondary;
-                color: $color-secondary;
-            }
-
-            &:focus + .config-option__tab-label,
-            &:hover + .config-option__tab-label {
-                color: $color-text;
-            }
-        }
-
-        &:disabled + .config-option__tab-label {
-            opacity: 0.5;
-
-            &:hover {
-                cursor: default;
-            }
-        }
-    }
-
-    input.range slidertrack {
-        @include trans-colors;
-        height: 2dp;
-        margin-top: space(8);
-        background-color: $color-border;
-    }
-    
-    input.range sliderbar {
-        @include trans-colors;
-        width: space(16);
-        height: space(16);
-        margin-top: space(1);
-        margin-right: space(-8);
-        margin-left: space(-8);
-        transition: background-color $transition-quick;
-        border-radius: 8dp;
-        background-color: $color-text-dim;
-        
-        .rmlui-window:not([mouse-active]) &:focus {
-            @include border($color-a);
-            animation: $focus-anim-bg;
-        }
-
-        &:hover {
-            background-color: $color-text;
-            cursor: pointer;
-        }
-    }
-    
-    input.range sliderbar:active,
-    input.range slidertrack:active + sliderbar {
-        background-color: $color-secondary;
-    }
-
-    input.range sliderarrowdec,
-    input.range sliderarrowinc {
-        display: none;
-    }
-}
-
-.config-option__details {
-    @extend %label-xs;
-    height: space(18);
-    margin: space(14) space(12) 0;
-    color: $color-primary;
-}
-
-.config-option-color {
-    width: 100%;
-    max-width: space(360);
-    height: auto;
-    margin-top: space(4);
-    margin-left: space(12);
-    padding: 0;
-
-    &__preview-wrapper {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-        height: space(8 * 9);
-    }
-
-    &__preview-block {
-        display: block;
-        width:  space(8 * 11);
-        height: 100%;
-        border-width: $border-width-thickness;
-        border-radius: $border-radius-lg;
-        border-color: $color-border;
-    }
-
-    &__hsv-wrapper {
-        display: flex;
-        flex: 1 1 100%;
-        flex-direction: column;
-        width: auto;
-        height: auto;
-        padding-left: space(8);
-
-        .config-option-range {
-            flex: 1 1 auto;
-
-            label {
-                min-width: space(72);
-            }
-
-            input {
-                flex: 1 1 auto;
-            }
-        }
-    }
-}
-
-.config-option-range {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    max-width: space(360);
-    height: auto;
-    margin-top: space(4);
-    padding: 0;
-
-    &__label {
-        @extend %label-sm;
-
-        display: block;
-        width: space(56);
-        margin: 0 12dp;
-        margin-right: space(16);
-        padding: 0;
-        color: $color-text;
-        tab-index: none;
-    }
-
-    &__range-input {
-        flex: 1;
-
-        slidertrack {
-            @include trans-colors;
-            height: 2dp;
-            margin-top: space(8);
-            background-color: $color-border;
-        }
-        
-        sliderbar {
-            @include trans-colors;
-            width: space(16);
-            height: space(16);
-            margin-top: space(1);
-            margin-right: space(-8);
-            margin-left: space(-8);
-            transition: background-color $transition-quick;
-            border-radius: 8dp;
-            background-color: $color-text-dim;
-            
-            .rmlui-window:not([mouse-active]) &:focus {
-                @include border($color-a);
-                animation: $focus-anim-bg;
-            }
-
-            &:hover {
-                background-color: $color-text;
-                cursor: pointer;
-            }
-        }
-        
-        sliderbar:active,
-        slidertrack:active + sliderbar {
-            background-color: $color-secondary;
-        }
-
-        sliderarrowdec,
-        sliderarrowinc {
-            display: none;
-        }
-    }
-
-}
-
-.config-option__range-wrapper {
-    max-width: space(360);
-    margin-top: space(4);
-}
-
-.config-option__range-label {
-    @extend %label-sm;
-
-    display: block;
-    // flex: 0 0 space(32);
-    width: space(56);
-    margin: 0 12dp;
-    margin-right: space(16);
-    padding: 0;
-    color: $color-text;
-    tab-index: none;
-}
-
-.config-option-dropdown, .config-option-textfield {
-    display: flex;
-    position: relative;
-    flex: 1 1 100%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    width: auto;
-    height: auto;
-    padding: space(8) space(24) space(8) space(12);
-
-    &__select {
-        display: block;
-        height: space(48);
-        padding: space(14);
-        cursor: pointer;
-    }
-
-    &__wrapper {
-        // Cursed guess & check so that this appears to be the same height as the select
-        $extra-space: 2;
-
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        width: 100%;
-        height: auto;
-        padding: space(0 + $extra-space) 0 space(10 + $extra-space);
-        cursor: text;
-
-        input {
-            width: 100%;
-            height: auto;
-            vertical-align: middle;
-        }
-    }
-
-    &__select, &__wrapper {
-        @extend %body;
-        @extend %nav-all;
-        @include trans-colors-border;
-        @include border($color-white-a50);
-        position: relative;
-        box-sizing: border-box;
-        flex: 1 1 100%;
-
-        width: auto;
-        border-radius: $border-radius-md;
-        background-color: $color-white-a5;
-
-        &:hover, &:focus {
-            @include border($color-white-a80);
-            background-color: $color-white-a20;
-        }
-
-        selectvalue {
-            display: inline;
-            height: auto;
-            margin: auto 0;
-        }
-
-        selectbox {
-            @include border($color-border);
-            margin-top: space(2);
-            padding: space(4) 0;
-            border-radius: $border-radius-md;
-            background-color: $color-background-3;
-            
-            option {
-                @extend %nav-all;
-                @include trans-colors;
-                padding: space(8) space(12);
-                background-color: $color-transparent;
-                color: $color-text-dim;
-                font-weight: 400;
-
-                &:hover, &:focus {
-                    background-color: $color-white-a20;
-                }
-
-                &:hover:not(:checked) {
-                    cursor: pointer;
-                }
-
-                &:checked {
-                    background-color: $color-white-a5;
-                    color: $color-white;
-                }
-            }
-        }
-    }
-}

assets/scss/styles/components/ControlOption.scss

@@ -1,170 +0,0 @@
-@use 'sass:color';
-@use 'sass:math';
-
-.control-option {
-    @include set-color($color-text-dim);
-    @include trans-colors-svg;
-    display: flex;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: auto;
-    padding: space(4) space(16) space(4) space(20);
-    border-radius: $border-radius-sm;
-    background-color: rgba(0, 0, 0, 0);
-
-    &:focus-visible:not(:disabled, [disabled]),
-    &:hover:not(:disabled, [disabled]) {
-        @include set-color($color-text);
-        background-color: $color-bg-overlay;
-    }
-
-    &:disabled, &[disabled] {
-        opacity: 0.5;
-    }
-
-    &--active {
-        // while actively looking for inputs, set styles to the correct slots
-        $valid-binding-slots: 0, 1;
-        @each $slot in $valid-binding-slots {
-            // global attr -> this active row -> binding slot
-            [cur-binding-slot="#{$slot}"] & .control-option__binding[bind-slot="#{$slot}"] {
-                border-color: $color-danger;
-
-                .control-option__binding-icon {
-                    opacity: 0;
-                }
-
-                .control-option__binding-recording {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-    .icon-button {
-        flex: 1 1 auto;
-    }
-}
-
-.control-option__label {
-    @extend %label-md;
-    flex: 2 1 space(300);
-    height: auto;
-    white-space: nowrap;
-}
-
-.control-option__bindings {
-    display: flex;
-    position: relative;
-    flex: 2 1 space(400);
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: space(56);
-    padding: 0 space(12) 0 space(4);
-}
-
-.control-option__binding {
-    @include set-color($color-text-dim);
-    @include trans-colors-border;
-    display: flex;
-    position: relative;
-
-    flex: 1 1 100%;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: space(56);
-    margin: 0 space(4);
-    padding: space(8);
-    border-width: $border-width-thickness;
-    border-radius: $border-radius-sm;
-    border-color: $color-bg-overlay;
-    background-color: $color-bg-overlay;
-
-    &:focus, &:hover {
-        @include set-color($color-text);
-        border-color: $color-text;
-        background-color: $color-border-soft;
-    }
-
-    &:active {
-        @include set-color($color-text-active);
-    }
-
-    &:disabled, &[disabled] {
-        @include set-color($color-text-dim);
-        opacity: 0.5;
-    }
-
-    &:not([disabled]) {
-        @extend %nav-all;
-        cursor: pointer;
-    }
-}
-
-.control-option__binding-icon {
-    @include trans-colors-opa;
-    opacity: 1;
-}
-
-@keyframes control-option__binding-recording-scale {
-	0% {
-		transform: scale(1);
-	}
-
-	50% {
-		transform: scale(0.85);
-	}
-
-	100% { 
-		transform: scale(1);
-	}
-}
-
-.control-option__binding-recording {
-    @include trans-colors-opa;
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-
-    .control-option__binding-circle {
-        $rec-size: 24;
-
-        width: space($rec-size);
-        height: space($rec-size);
-        animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
-        border-radius: space($rec-size);
-        background-color: $color-danger;
-    }
-
-    .control-option__binding-edge {
-        $edge-size: 36;
-        $h-edge-size: math.div($edge-size, 2);
-
-        position: absolute;
-
-        top: 50%;
-        left: 50%;
-        width: space($edge-size);
-        height: space($edge-size);
-
-        transform: translate(-50%, -50%);
-        
-        > svg.control-option__binding-edge-svg {
-            width: space($edge-size);
-            height: space($edge-size);
-            image-color: $color-danger;
-        }
-    }
-}

assets/scss/styles/components/IconButton.scss

@@ -1,92 +0,0 @@
-@use 'sass:color';
-
-/*
-    <button
-        class="icon-button icon-button--danger"
-    >
-        <svg src="icons/Trash.svg" />
-    </button>
-*/
-@mixin create-icon-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
-    border-color: $base-col-80;
-    background-color: $base-col-05;
-
-    &:focus, &:hover {
-        border-color: $base-col;
-        background-color: $base-col-30;
-    }
-
-    &:active {
-        background-color: $base-col-20;
-    }
-}
-
-$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;
-    justify-content: center;
-    width: space($icon-button-size);
-    min-width: space($icon-button-size);
-    max-width: space($icon-button-size);
-    height: space($icon-button-size);
-    min-height: space($icon-button-size);
-    max-height: space($icon-button-size);
-    border-width: $border-width-thickness;
-    border-radius: space($icon-button-size * 0.5);
-    border-color: $color-transparent;
-    background-color: $color-transparent;
-
-    &:focus, &:hover {
-        @include set-color($color-text);
-        background-color: $color-border;
-    }
-
-    &:active {
-        @include set-color($color-text-active);
-        background-color: $color-border-soft;
-    }
-
-    &:disabled,&[disabled] {
-        @include set-color($color-text-dim);
-        opacity: 0.5;
-    }
-
-    &:not([disabled]) {
-        @extend %nav-all;
-        cursor: pointer;
-    }
-
-    svg {
-        width: space(32);
-        height: space(32);
-    }
-
-    &--primary {
-        @include create-icon-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
-    }
-
-    &--secondary {
-        @include create-icon-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
-    }
-
-    &--tertiary {
-        @include create-icon-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
-    }
-
-    &--success {
-        @include create-icon-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
-    }
-
-    &--danger {
-        @include create-icon-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
-    }
-
-    &--warning {
-        @include create-icon-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
-    }
-}

assets/scss/styles/components/InputConfig.scss

@@ -1,347 +0,0 @@
-@use 'sass:math';
-
-// Probably will need to adjust for other langs...
-$mapping-min-width: 80 * 8;
-$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;
-
-.input-config {
-    padding: 0;
-}
-
-.input-config__horizontal-split {
-    display: flex;
-    position: relative;
-    flex-direction: row;
-    height: 100%;
-}
-
-.input-config__mappings {
-    display: block;
-    flex: 1 1 auto;
-    min-width: space($mapping-min-width);
-    height: 100%;
-}
-
-.input-config__mappings-scroll {
-    display: block;
-    width: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-}
-
-.input-config__mappings-wrapper {
-    padding: space(8);
-}
-
-.input-config__visual-wrapper {
-    display: block;
-    flex: 1 1 100%;
-    width: auto;
-    max-width: space($visual-max-width);
-    height: auto;
-    max-height: space(math.div($visual-max-width, 4) * 3);
-    margin: auto 0;
-}
-
-.input-config__visual-aspect {
-    position: relative;
-    width: 100%;
-    margin: auto 0;
-    padding-bottom: 75%;
-    background-color: $color-bg-shadow;
-}
-
-.input-config__visual {
-    display: flex;
-    position: absolute;
-    top: space(16);
-    right: space(16);
-    bottom: space(16);
-    left: space(16);
-    flex-direction: column;
-    border-radius: space(108);
-    background-color: $color-white-a5;
-}
-
-.input-config__visual-half {
-    display: flex;
-    position: relative;
-    flex: 1 1 100%;
-    flex-direction: row;
-    padding: 6%;
-
-    &--bottom {
-        align-items: flex-end;
-        justify-content: space-between;
-    }
-}
-
-.input-config__visual-quarter-left {
-    display: flex;
-    flex: 1 1 50%;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: auto;
-}
-
-.input-config__visual-quarter-right {
-    display: flex;
-    flex: 1 1 100%;
-    align-items: flex-start;
-    justify-content: flex-end;
-}
-
-.input-config__visual-stick-wrapper {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-}
-
-.input-viz {
-    @include trans-colors-opa;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-
-    > svg:not(.input-viz__dpad-arrow) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    &__mappings div {
-        @extend %prompt-font-sm;
-    }
-}
-
-$all-inputs: A,
-    B,
-    Z,
-    START,
-    DPAD_UP,
-    DPAD_DOWN,
-    DPAD_LEFT,
-    DPAD_RIGHT,
-    L,
-    R,
-    C_UP,
-    C_DOWN,
-    C_LEFT,
-    C_RIGHT,
-    X_AXIS_NEG,
-    X_AXIS_POS,
-    Y_AXIS_NEG,
-    Y_AXIS_POS;
-
-// Show default state while no inputs are active
-[cur-input="NONE"] .input-viz[visual-input] {
-    opacity: 1;
-}
-
-@each $inp in $all-inputs {
-    .input-viz[visual-input~="#{$inp}"] {
-        opacity: 0.25;
-
-        [cur-input="#{$inp}"] & {
-            opacity: 1.0;
-        }
-    }
-}
-
-@mixin set-sizes($sz) {
-    width: space($sz);
-    height: space($sz);
-    
-    > svg {
-        width: space($sz);
-        height: space($sz);
-    }
-}
-
-.input-viz__button {
-    @include set-color($color-text);
-
-    &--sm {
-        @include set-sizes(64);
-    }
-
-    &--md {
-        @include set-sizes(76);
-    }
-
-    &--lg {
-        @include set-sizes(84);
-    }
-
-    &--C {
-        @include set-svgs-color($color-warning);
-    }
-
-    &--A {
-        @include set-svgs-color($color-a);
-        margin-top: auto;
-    }
-
-    &--B {
-        @include set-svgs-color($color-success);
-    }
-
-    &--Start {
-        @include set-svgs-color($color-danger);
-    }
-}
-
-.input-viz__Z {
-    @include set-svgs-color($color-warning);
-    @include set-sizes(136);
-}
-
-$dpad-size: 192;
-
-.input-viz.input-viz__dpad {
-    @include set-svgs-color($color-text);
-    @include set-sizes($dpad-size);
-    position: relative;
-}
-
-$stick-size: 200;
-
-.input-config__visual-stick {
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    width: space($stick-size);
-    height: space($stick-size);
-    border-radius: space(math.div($stick-size, 2));
-    background-color: $color-white-a5;
-}
-
-.input-viz__dpad-split,
-.input-viz__stick-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%;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
-}
-
-.input-viz__dpad-split > div {
-    width: space(math.div($dpad-size, 3));
-    height: space(math.div($dpad-size, 3));
-}
-
-.input-viz__stick-split > div {
-    width: space(math.div($stick-size, 3));
-    height: space(math.div($stick-size, 3));
-}
-
-.input-viz__dpad-arrow {
-    $edge-dist: space(4);
-    position: absolute;
-    width: space(60);
-    height: space(60);
-
-    &--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);
-}
-
-.input-viz__L {
-    @include set-svgs-color($color-secondary);
-    @include set-sizes(136);
-}
-
-.input-config__c-buttons {
-    position: relative;
-    width: space(76 + 76 + 56);
-    height: space(76 + 56);
-
-    &-lr, &-du {
-        display: flex;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    &-lr {
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-    }
-
-    &-du {
-        flex-direction: column-reverse;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .input-viz {
-        &[visual-input="C_UP"] {
-            margin-top: space(-32);
-        }
-    }
-}
-
-.input-config__main-buttons {
-    display: flex;
-    position: relative;
-    flex-direction: row;
-    justify-content: space-between;
-    width: space(268);
-    height: space(128);
-    margin-right: space(10);
-}

assets/scss/styles/components/Launcher.scss

@@ -1,108 +0,0 @@
-
-// TODO: Affect all elements with launcher fade-in
-// @keyframes fade-launcher-in {
-// 	0% {
-// 		opacity: 0;
-// 	}
-// 	to { 
-// 		opacity: 1;
-// 	}
-// }
-
-.launcher {
-    display: block;
-    position: relative;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    background-color: $color-background-1;
-}
-
-.launcher__vertical-split {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 50%;
-    bottom: 0;
-    left: 0;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    &--right {
-        right: 0;
-        left: 50%;
-        align-items: flex-end;  
-    }
-}
-
-
-@keyframes slide-mm-bg-over {
-	0% {
-		transform: translateX(space(100));
-	}
-
-	100% { 
-		transform: translateX(space(0));
-	}
-}
-
-.launcher__background-wrapper {
-    display: flex;
-    position: absolute;
-    top: -55vw;
-    right: -100%;
-    bottom: -50vw;
-    left: -70vw;
-    align-items: center;
-    justify-content: flex-start;
-    transform: translateX(space(0));
-    animation: 25s cubic-out 1 slide-mm-bg-over;
-}
-
-@keyframes fade-mm-in {
-	0% {
-		opacity: 0;
-	}
-
-	100% { 
-		opacity: 0.1;
-	}
-}
-
-.launcher__background-bk {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    height: 100%;
-    animation: 2.5s cubic-in-out 1 fade-mm-in;
-    opacity: 0.1;
-}
-
-.launcher__title-quadrant {
-    flex: 1 1 auto;
-    width: auto;
-    height: auto;
-    padding-top: space(96);
-    padding-left: space(96);
-
-    &--right {
-        padding-right: space(96);
-        padding-left: 0;
-    }
-}
-
-.launcher__content-quadrant {
-    display: flex;
-    position: relative;
-    flex: 1 1 100%;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-    width: 100%;
-    height: auto;
-    padding: space(32);
-}

assets/scss/styles/components/MenuListItem.scss

@@ -1,73 +0,0 @@
-
-/*
-    Example layout:
-        <button class="menu-list-item menu-list-item--right">
-            <div class="menu-list-item__bullet">•</div>
-            <div class="menu-list-item__label">Setup controls</div>
-        </button>
-    - Variants:
-        .menu-list-item--right (align to right side)
-    - Optional:
-        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
-
-*/
-
-.menu-list-item {
-    @include set-color($color-text-dim);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    height: auto;
-    padding: space(16);
-    border-radius: $border-radius-sm;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-
-    &--right {
-        flex-direction: row-reverse;
-        align-content: flex-end;
-
-        .menu-list-item__bullet {
-            margin-left: space(12);
-            opacity: 1;
-        }
-
-        &.menu-list-item:focus:not(:disabled, [disabled]),
-        &.menu-list-item:hover:not(:disabled, [disabled]) {
-            // decorator: $primary-rl-fade;
-            background-color: $color-white-a5;
-        }
-    }
-
-    &:focus:not(:disabled, [disabled]),
-    &:hover:not(:disabled, [disabled]) {
-        @include set-color($color-primary);
-        // decorator: $primary-lr-fade;
-        background-color: $color-white-a5;
-
-        .menu-list-item__bullet {
-            opacity: 1;
-        }
-    }
-
-    &:not(:disabled, [disabled]) {
-        @extend %nav-all;
-    }
-
-    &:disabled, &[disabled] {
-        opacity: 0.5;
-        tab-index: none;
-        cursor: default;
-    }
-
-}
-
-.menu-list-item__label {
-    @extend %label-lg;
-}
-
-.menu-list-item__bullet {
-    margin-right: space(12);
-    opacity: 0;
-}

assets/scss/styles/components/Prompt.scss

@@ -1,70 +0,0 @@
-@use 'sass:math';
-
-$prompt-space: 24;
-
-.prompt {
-    &__overlay {
-        background-color: $color-bg-overlay;
-        pointer-events: auto;
-    }
-
-    &__overlay,
-    &__content-wrapper {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-
-    &__content-wrapper {
-        display: flex;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    &__content {
-        display: flex;
-        position: relative;
-        flex: 1 1 100%;
-        flex-direction: column;
-        width: 100%;
-        max-width: space(700);
-        height: auto;
-        margin: auto;
-        border-width: $border-width-thickness;
-        border-radius: $border-radius-modal;
-        border-color: $color-border;
-        background: $color-modal-overlay;
-
-        h3, p {
-            margin: space($prompt-space);
-        }
-
-        p {
-            margin-top: 0;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        padding: space($prompt-space) space(math.div($prompt-space, 2));
-        border-top-width: $border-width-thickness;
-        border-top-color: $color-border-soft;
-
-        .button {
-            min-width: space(math.div(700, 3));
-            margin: 0 space(math.div($prompt-space, 2));
-            text-align: center;
-            nav-up: none;
-            nav-down: none;
-        }
-    }
-}

assets/scss/styles/components/SubtitleTitle.scss

@@ -1,71 +0,0 @@
-/*
-    Example layout:
-
-        <button class="subtitle-title" disabled>
-            <h3>Zelda 64: Recompiled</h3>
-            <h1>Ocarina of Time</h1>
-            <div class="subtitle-title__disclaimer">Coming Soon™</div>
-        </button>
-    - Variants:
-        .subtitle-title--right (align to right side)
-    - Optional:
-        - <div class="subtitle-title__disclaimer">Coming Soon™</div>
-
-*/
-
-.subtitle-title {
-    display: block;
-    position: relative;
-    flex-direction: column;
-    align-content: flex-start;
-    align-items: flex-start;
-    width: auto;
-    height: auto;
-    padding: 0;
-    background-color: rgba(0, 0, 0, 0);
-    color: $color-text-dim;
-    text-align: left;
-    cursor: pointer;
-
-    &--right {
-        align-content: flex-end;
-    }
-
-    &--right, &--right > * {
-        text-align: right;
-    }
-
-    &[selected] {
-        color: $color-text;
-        cursor: default;
-    }
-    
-    &:focus:not(:disabled, [disabled]),
-    &:hover:not(:disabled, [disabled], [selected]) {
-        color: $color-primary;
-    }
-
-    &:not(:disabled, [disabled]) {
-        @extend %nav-all;
-    }
-
-    &:disabled, &[disabled] {
-        opacity: 0.5;
-        cursor: default;
-        tab-index: none;
-    }
-
-    h3 {
-        margin-bottom: space(6);
-    }
-
-    h1 {
-        margin-top: space(6);
-    }
-
-    &__disclaimer {
-        @extend %label-sm;
-
-        margin-top: space(16);
-    }
-}

assets/scss/styles/components/Tabs.scss

@@ -1,63 +0,0 @@
-/*
-    Example:
-        <tab class="tab">
-            <div>Graphics</div>
-            <div class="tab__indicator"></div>
-        </tab>
-*/
-
-.tabs tabs {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.tab {
-    @extend %nav-all;
-    @extend %header-3;
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: space(20) space(24);
-    transition: color $transition-quick;
-    opacity: 0.9;
-    background-color: rgba(0,0,0,0);
-    color: $color-text-inactive;
-
-    &:selected {
-        color: $color-text;
-
-        .tab__indicator {
-            background-color: $color-border-solid;
-        }
-
-        &:hover {
-            cursor: default;
-        }
-    }
-
-    .rmlui-window:not([mouse-active]) &:focus {
-        transition: none;
-        animation: $focus-anim-border;
-
-        &:selected .tab__indicator {
-            animation: $focus-anim-bg;
-        }
-    }
-
-    &:focus, &:hover {
-        opacity: 1;
-        color: $color-text;
-        cursor: pointer;
-    }
-}
-
-.tab__indicator {
-    position: absolute;
-    right: 0;
-    bottom: 2dp;
-    left: 0;
-    height: 2dp;
-    background-color: rgba(0, 0, 0, 0);
-}

assets/scss/styles/components/Toggle.scss

@@ -1,97 +0,0 @@
-@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;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: space($toggle-width);
-    height: space($toggle-height);
-    border-radius: space(math.div($toggle-height, 2));
-    opacity: 0.9;
-    background: $color-transparent;
-    cursor: pointer;
-
-    &:hover, &:focus-visible, &:focus {
-        opacity: 1;
-        background-color: $color-secondary-a30;
-    }
-
-    &:active {
-        opacity: 1;
-        background-color: $color-secondary-a5;
-    }
-
-    .toggle__border {
-        @include inner-border-block($color-secondary-l);
-        border-radius: space(math.div($toggle-height, 2));
-    }
-
-    .toggle__floater {
-        position: absolute;
-        top: 50%;
-        left: space($toggle-floater-margin);
-        width: space($toggle-floater-width);
-        height: space($toggle-floater-height);
-        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 {
-                opacity: 0.9;
-                color: $color-secondary-l;
-            }
-
-            &.toggle__icon--right {
-                opacity: 1.0;
-                color: $color-text;
-            }
-        }
-    }
-}
-
-.toggle__icons {
-    display: flex;
-    position: absolute;
-    top: 50%;
-    right: space(16);
-    left: space(16);
-    align-items: center;
-    justify-content: space-between;
-    height: space(56);
-    transform: translateY(-50%);
-}
-
-.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

@@ -1,16 +0,0 @@
-@import "./CenteredPage";
-@import "./ControlOption";
-@import "./Tabs";
-@import "./Config";
-@import "./ConfigGroup";
-@import "./ConfigOption";
-@import "./ConfigDescription";
-@import "./InputConfig";
-@import "./Button";
-@import "./IconButton";
-@import "./Launcher";
-@import "./MenuListItem";
-@import "./SubtitleTitle";
-@import "./Toggle";
-@import "./BottomLeft";
-@import "./Prompt";

assets/scss/styles/functions/_spacing.scss

@@ -1,4 +0,0 @@
-
-@function space($amt) {
-    @return #{$amt}dp;
-}

assets/scss/styles/global.scss

@@ -1,134 +0,0 @@
-@import "./base";
-
-body
-{
-    @extend %body;
-    box-sizing: border-box;
-	color: $color-text;
-	font-family: $font-stack;
-}
-
-@import "./globals/old";
-@import "./globals/scrollbars";
-@import "./components/components";
-@import "./pages/pages";
-
-$font-size: 20dp;
-
-
-.rmlui-window {
-    opacity: 1;
-
-    &--hidden {
-        opacity: 0;
-    }
-
-    &:not([mouse-active]) {
-        pointer-events: none;
-    }
-}
-
-.nav-vert {
-    @extend %nav-vert;
-}
-
-.nav-horiz {
-    @extend %nav-horiz;
-}
-
-.nav-dir {
-    @extend %nav-dir;
-}
-
-.nav-foc {
-    @extend %nav-foc;
-}
-
-.nav-all {
-    @extend %nav-all;
-}
-
-*, *:before, *:after {
-    box-sizing: border-box;
-}
-
-h1 {
-    @extend %header-1;
-}
-
-h2 {
-    @extend %header-2;
-}
-
-h3 {
-    @extend %header-3;
-}
-
-.label-lg {
-    @extend %label-lg;
-}
-
-.label-md {
-    @extend %label-md;
-}
-
-.label-sm {
-    @extend %label-sm;
-}
-
-.prompt-font {
-    @extend %prompt-font;
-}
-
-.prompt-font-sm {
-    @extend %prompt-font-sm;
-}
-
-button {
-    background-color: $color-primary-d;
-}
-
-@keyframes blue-pulse {
-	0% {
-		color: $color-secondary;
-	}
-
-	50% {
-		color: $color-secondary-l;
-	}
-
-	100% { 
-		color: $color-secondary;
-	}
-}
-
-@keyframes blue-pulse-with-border {
-	0% {
-		border-color: $color-secondary;
-		color: $color-secondary;
-	}
-
-	50% {
-		border-color: $color-secondary-l;
-		color: $color-secondary-l;
-	}
-
-	100% {
-		border-color: $color-secondary; 
-		color: $color-secondary;
-	}
-}
-
-@keyframes blue-pulse-background {
-	0% {
-		background-color: $color-secondary;
-	}
-
-	50% {
-		background-color: $color-secondary-l;
-	}
-
-	100% { 
-		background-color: $color-secondary;
-	}
-}

assets/scss/styles/globals/_old.scss

@@ -1,211 +0,0 @@
-/* stylelint-disable color-no-hex */
-/* stylelint-disable selector-max-id */
-
-* {
-    box-sizing:border-box;
-}
-
-hr {
-    display:block;
-    padding:1.5dp;
-    background: $color-background-1;
-}
-
-body {
-    color: #fff;
-    font-size: 20dp;
-    font-style: normal;
-    font-weight: normal
-}
-
-/* div { 
-    focus:none;
-    tab-index:none;
-} */
-
-div#window {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    border-color: $color-border;
-    background-color: $color-background-2;
-}
-
-div#content {
-    z-index: 2;
-    width: auto;
-    height: 100%;
-    overflow: hidden auto;
-    text-align: center
-}
-
-p {
-    text-align: left;
-}
-
-input.submit {
-    margin-left: 0
-}
-
-
-input.text,
-input.password {
-    box-sizing: border-box;
-    height: 31dp;
-    padding: 11dp 10dp 0;
-    text-align: left;
-    cursor: text
-}
-
-textarea {
-    padding: 14dp 12dp 10dp;
-    text-align: left;
-    cursor: text
-}
-
-input.text,
-input.password,
-select,
-textarea {
-    /* color: #333; */
-
-    /* font-size: 13dp */
-    height: auto;
-}
-
-table input.text {
-    box-sizing: border-box;
-    width: 100%;
-    height: auto;
-
-    /* height: 18dp; */
-    margin: 0;
-    border-width: $border-width-thickness;
-    border-color: #000;
-    background-color: #fff;
-    font-size: 15dp;
-
-    /* padding: 0 5dp; */
-    line-height: 1;
-    decorator: none;
-
-    /* vertical-align: center; */
-}
-
-select {
-    // display: inline-block;
-    // /* width: 175dp; */
-    // /* height: 37dp; */
-    // /* height: auto; */
-    // text-align: left;
-    // box-sizing:border-box;
-    // /* padding: 4dp; */
-    // vertical-align: center;
-    // padding: 4dp;
-    // border-radius: 5dp;
-    // background-color: rgb(120, 120, 120);
-    // width: 100%;
-}
-// select {
-//     @extend %body;
-//     display: flex;
-//     align-items: center;
-//     justify-content: flex-start;
-//     box-sizing: border-box;
-//     padding: space(16);
-//     flex: 1 1 100%;
-//     // width: auto;
-//     height: space(1000);
-//     border-radius: $border-radius-lg;
-//     background-color: $color-white-a20;
-// }
-
-// select selectvalue {
-//     height: auto;
-//     /* padding: 4dp; */
-//     /* margin-right: 30dp; */
-//     /* height: 25dp; */
-//     /* padding: 4dp; */
-//     /* decorator: image(selectvalue) */
-// }
-
-// select:hover selectvalue {
-//     /* margin-right: 30dp; */
-//     /* height: 25dp; */
-//     /* padding: 4dp; */
-//     background-color: rgb(150, 150, 150);
-//     /* decorator: image(selectvalue) */
-// }
-
-// select selectarrow {
-//     /* width: 30dp; */
-//     /* height: 37dp; */
-//     /* decorator: image(selectarrow) */
-//     /* background-color: black; */
-//     /* appearance: none; */
-// }
-
-// select:hover selectarrow {
-//     /* decorator: image(selectarrow-hover) */
-// }
-
-// select:active selectarrow,
-// select selectarrow:checked {
-//     /* decorator: image(selectarrow-active) */
-// }
-
-// select selectbox {
-//     /* margin-left: 1dp; */
-//     /* margin-top: -7dp; */
-//     /* margin-bottom: -10dp; */
-//     /* width: 162dp; */
-//     /* padding: 1dp 4dp 4dp 4dp */
-// }
-
-// select selectbox,
-// tbody {
-//     background-color: rgb(120,120,120);
-//     /* decorator: tiled-box(selectbox-tl, selectbox-t, selectbox-tr, selectbox-l, selectbox-c, auto, selectbox-bl, selectbox-b, selectbox-br) */
-// }
-
-// select selectbox option {
-//     width: auto;
-//     background-color: rgb(120, 120, 120)
-// }
-
-// select selectbox option:nth-child(even),
-// tr:nth-child(even) {
-//     background-color: rgb(100, 100, 100)
-// }
-
-// select selectbox option:checked {
-//     font-weight:bold;
-//     color:rgb(255,255,255);
-// }
-
-// select selectbox option:hover {
-//     background: rgb(150,150,150)
-// }
-
-input.radio {
-    flex: 0;
-    width:0dp;
-    nav-up:auto;
-    nav-right:auto;
-    nav-down:auto;
-    nav-left:auto;
-    tab-index:auto;
-    focus:auto;
-}
-
-input.checkbox {
-    width: space(20);
-    height: space(20);
-    nav-up:auto;
-    nav-right:auto;
-    nav-down:auto;
-    nav-left:auto;
-    tab-index:auto;
-    focus:auto;
-}

assets/scss/styles/globals/_scrollbars.scss

@@ -1,52 +0,0 @@
-@use 'sass:math';
-
-$scrollbar-width: 12;
-
-@mixin _set-scroll-size($size-key) {
-    #{$size-key}: space($scrollbar-width);
-    
-    slidertrack {
-        #{$size-key}: space($scrollbar-width);
-    }
-    
-    sliderbar {
-        #{$size-key}: space($scrollbar-width);
-    }
-}
-
-scrollbarvertical,scrollbarhorizontal {
-    margin: 0;
-    border: 0;
-    
-    slidertrack {
-        background: $color-primary-l;
-        opacity: 0.05;
-    }
-    
-    sliderbar {
-        border-radius: space(math.div($scrollbar-width, 2) - 1);
-        background: $color-primary-l;
-        opacity: 0.1;
-
-        &:hover:not(:active) {
-            opacity: 0.2;
-        }
-
-        &:active {
-            opacity: 0.3;
-        }
-    }
-    
-    sliderarrowdec, sliderarrowinc {
-        width: 0;
-        height: 0;
-    }
-}
-
-scrollbarvertical {
-    @include _set-scroll-size(width);
-}
-
-scrollbarhorizontal {
-    @include _set-scroll-size(height);
-}

assets/scss/styles/mixins/_helpers.scss

@@ -1,39 +0,0 @@
-
-%nav-vert {
-    nav-up: auto;
-    nav-down: auto;
-}
-
-%nav-horiz {
-    nav-right: auto;
-    nav-left: auto;
-}
-
-%nav-dir {
-    @extend %nav-vert;
-    @extend %nav-horiz;
-}
-
-%nav-foc {
-    focus: auto;
-    tab-index: auto;
-}
-
-%nav-all {
-    @extend %nav-dir;
-    @extend %nav-foc;
-}
-
-@mixin set-svgs-color($col) {
-    svg {
-        image-color: $col;
-    }
-}
-
-/*
-@include set-color(COLOR);
-*/
-@mixin set-color($col) {
-    @include set-svgs-color($col);
-    color: $col;
-}

assets/scss/styles/mixins/_transitions.scss

@@ -1,36 +0,0 @@
-
-/*
-@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

@@ -1,83 +0,0 @@
-
-$font-stack: 'Suplexmentary Comic NC';
-
-@mixin set-font-sizing($sz, $spacing) {
-    // font-family: $font-stack;
-    $sz-add: $sz + 4;
-    font-size: space($sz-add);
-    letter-spacing: space($sz-add * $spacing);
-    line-height: space($sz-add);
-}
-
-%header-1 {
-    @include set-font-sizing(64, 0.07);
-    font-style: normal;
-	font-weight: 700;
-}
-
-%header-2 {
-    @include set-font-sizing(48, 0.07);
-    font-style: normal;
-	font-weight: 700;
-}
-
-%header-3 {
-    @include set-font-sizing(32, 0.07);
-    font-style: normal;
-	font-weight: 700;
-}
-
-%label-lg {
-    @include set-font-sizing(32, 0.11);
-    font-style: normal;
-	font-weight: 700;
-}
-
-%label-md {
-    @include set-font-sizing(24, 0.11);
-    font-style: normal;
-	font-weight: 700;
-}
-
-%label-sm {
-    @include set-font-sizing(16, 0.14);
-    font-style: normal;
-	font-weight: 700;
-    text-transform: uppercase;
-}
-
-%label-xs {
-    @include set-font-sizing(14, 0.14);
-    font-style: normal;
-	font-weight: 400;
-}
-
-%body {
-    @include set-font-sizing(16, 0.0);
-    font-style: normal;
-	font-weight: 400;
-}
-
-%prompt-font-lg {
-    font-family: promptfont;
-    font-size: space(56);
-    font-style: normal;
-    font-weight: 400;
-    line-height: space(56);
-}
-
-%prompt-font {
-    font-family: promptfont;
-    font-size: space(40);
-    font-style: normal;
-    font-weight: 400;
-    line-height: space(40);
-}
-
-%prompt-font-sm {
-    font-family: promptfont;
-    font-size: space(32);
-    font-style: normal;
-    font-weight: 400;
-    line-height: space(32);
-}

assets/scss/styles/pages/_pages.scss

@@ -1 +0,0 @@
-@import "./config/config";

assets/scss/styles/pages/config/_config.scss

@@ -1 +0,0 @@
-@import "./debug";

assets/scss/styles/pages/config/debug.scss

@@ -1,178 +0,0 @@
-
-.config-debug {
-    display: block;
-    position: relative;
-    width: 100%;
-    max-height: 100%;
-    padding: space(8);
-}
-
-.config-debug__scroll {
-    display: block;
-    position: relative;
-    width: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-}
-
-.config-debug-option {
-    @include set-color($color-text-dim);
-    @include trans-colors-svg;
-    @include border-bottom($color-border-soft);
-    display: block;
-    position: relative;
-    flex-direction: column;
-    width: 100%;
-    height: auto;
-    padding: space(12) space(4);
-    background-color: rgba(0, 0, 0, 0);
-
-    &:focus:not(:disabled, [disabled]),
-    &:focus-visible:not(:disabled, [disabled]),
-    &:hover:not(:disabled, [disabled]) {
-        @include set-color($color-text);
-        background-color: $color-bg-overlay;
-    }
-
-    &:disabled, &[disabled] {
-        opacity: 0.5;
-    }
-
-    .icon-button {
-        margin-left: space(8);
-    }
-}
-
-.config-debug__option-split {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.config-debug-option__label {
-    @extend %label-md;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: space(4) space(16) space(12);
-    width: auto;
-    height: auto;
-    white-space: nowrap;
-}
-
-.config-debug__option-controls {
-    display: block;
-    position: relative;
-    flex: 1 1 auto;
-    height: auto;
-    width: auto;
-    max-width: space(800);
-    padding: 0 space(12);
-}
-
-.config-debug__option-trigger {
-    flex: 1 1 auto;
-}
-
-.config-debug__select-wrapper {
-    display: flex;
-    position: relative;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    flex: 1 1 100%;
-    width: auto;
-    max-width: space(800);
-    height: auto;
-    padding: space(4);
-
-    .config-debug__select-label {
-        @extend %label-sm;
-        padding-right: space(16);
-        flex: auto;
-        width: space(196);
-
-        > div {
-            display: inline;
-            width: auto;
-            height: auto;
-        }
-    }
-
-    input {
-        @extend %body;
-        @extend %nav-all;
-        display: block;
-        position: relative;
-        box-sizing: border-box;
-        padding: 0;
-        flex: 1 1 100%;
-        width: auto;
-        height: space(20);
-        margin: auto 0;
-    }
-
-    select {
-        @extend %body;
-        @extend %nav-all;
-        @include trans-colors-border;
-        @include border($color-white-a50);
-        display: block;
-        position: relative;
-        box-sizing: border-box;
-        padding: 0;
-        flex: 1 1 100%;
-        width: auto;
-        height: space(48);
-        border-radius: $border-radius-md;
-        background-color: $color-white-a5;
-        cursor: pointer;
-
-        align-items: center;
-        justify-content: flex-start;
-        padding: space(14);
-
-        &:hover, &:focus {
-            @include border($color-white-a80);
-            background-color: $color-white-a20;
-        }
-
-        selectvalue {
-            display: inline;
-            margin: auto 0;
-            height: auto;
-        }
-
-        selectbox {
-            @include border($color-white-a80);
-            background-color: $color-background-3;
-            padding: space(4) 0;
-            margin-top: space(2);
-            border-radius: $border-radius-md;
-            
-            option {
-                @extend %nav-all;
-                @include trans-colors;
-                padding: space(8) space(12);
-                background-color: $color-transparent;
-                color: $color-text-dim;
-                font-weight: 400;
-
-                &:hover, &:focus {
-                    background-color: $color-white-a20;
-                }
-
-                &:hover:not(:checked) {
-                    cursor: pointer;
-                }
-
-                &:checked {
-                    color: $color-white;
-                    background-color: $color-white-a5;
-                }
-            }
-        }
-    }
-}

assets/scss/styles/vars/_animations.scss

@@ -1,4 +0,0 @@
-
-$focus-anim: blue-pulse-with-border 0.75s infinite;
-$focus-anim-border: blue-pulse 0.75s infinite;
-$focus-anim-bg: blue-pulse-background 0.75s infinite;

assets/scss/styles/vars/_borders.scss

@@ -1,42 +0,0 @@
-
-$border-radius-sm: 8dp;
-$border-radius-md: 12dp;
-// modals/pages
-$border-radius-lg: 16dp;
-
-$border-radius-modal: $border-radius-lg;
-
-$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) {
-    border-width: $border-width-thickness;
-    border-color: $col;
-}
-
-@mixin border-top($col: $color-border) {
-    border-top-width: $border-width-thickness;
-    border-top-color: $col;
-}
-
-@mixin border-bottom($col: $color-border) {
-    border-bottom-width: $border-width-thickness;
-    border-bottom-color: $col;
-}
-
-@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/_colors.scss

@@ -1,83 +0,0 @@
-/* stylelint-disable color-no-hex, color-hex-length */
-
-$color-background-1: Background1;
-$color-background-2: Background2;
-$color-background-3: Background3;
-$color-bg-overlay: BGOverlay;
-$color-modal-overlay: ModalOverlay;
-$color-bg-shadow: BGShadow;
-$color-bg-shadow-2: BGShadow2;
-$color-text: Text;
-$color-text-active: TextActive;
-$color-text-dim: TextDim;
-$color-text-inactive: TextInactive;
-$color-text-a5: TextA5;
-$color-text-a20: TextA20;
-$color-text-a30: TextA30;
-$color-text-a50: TextA50;
-$color-text-a80: TextA80;
-$color-primary: Primary;
-$color-primary-l: PrimaryL;
-$color-primary-d: PrimaryD;
-$color-primary-a5: PrimaryA5;
-$color-primary-a20: PrimaryA20;
-$color-primary-a30: PrimaryA30;
-$color-primary-a50: PrimaryA50;
-$color-primary-a80: PrimaryA80;
-$color-secondary: Secondary;
-$color-secondary-l: SecondaryL;
-$color-secondary-d: SecondaryD;
-$color-secondary-a5: SecondaryA5;
-$color-secondary-a20: SecondaryA20;
-$color-secondary-a30: SecondaryA30;
-$color-secondary-a50: SecondaryA50;
-$color-secondary-a80: SecondaryA80;
-$color-warning: Warning;
-$color-warning-l: WarningL;
-$color-warning-d: WarningD;
-$color-warning-a5: WarningA5;
-$color-warning-a20: WarningA20;
-$color-warning-a30: WarningA30;
-$color-warning-a50: WarningA50;
-$color-warning-a80: WarningA80;
-$color-danger: Danger;
-$color-danger-l: DangerL;
-$color-danger-d: DangerD;
-$color-danger-a5: DangerA5;
-$color-danger-a20: DangerA20;
-$color-danger-a30: DangerA30;
-$color-danger-a50: DangerA50;
-$color-danger-a80: DangerA80;
-$color-success: Success;
-$color-success-l: SuccessL;
-$color-success-d: SuccessD;
-$color-success-a5: SuccessA5;
-$color-success-a20: SuccessA20;
-$color-success-a30: SuccessA30;
-$color-success-a50: SuccessA50;
-$color-success-a80: SuccessA80;
-$color-border: Border;
-$color-border-soft: BorderSoft;
-$color-border-hard: BorderHard;
-$color-border-solid: BorderSolid;
-$color-transparent: Transparent;
-$color-a: A;
-$color-a-l: AL;
-$color-a-d: AD;
-$color-a-a5: AA5;
-$color-a-a20: AA20;
-$color-a-a30: AA30;
-$color-a-a50: AA50;
-$color-a-a80: AA80;
-$color-white: White;
-$color-white-a5: WhiteA5;
-$color-white-a20: WhiteA20;
-$color-white-a30: WhiteA30;
-$color-white-a50: WhiteA50;
-$color-white-a80: WhiteA80;
-$color-bw-05: BW05;
-$color-bw-10: BW10;
-$color-bw-25: BW25;
-$color-bw-50: BW50;
-$color-bw-75: BW75;
-$color-bw-90: BW90;

assets/scss/styles/vars/_gradients.scss

@@ -1,9 +0,0 @@
-
-// Not supported yet, need to use decorator: gradient atm
-// $primary-lr-fade: linear-gradient(90deg, rgba($color-primary-l, 0.08) 0%, rgba($color-primary-l, 0.00) 100%);
-// $primary-rl-fade: linear-gradient(90deg, rgba($color-primary-l, 0.00) 0%, rgba($color-primary-l, 0.08) 100%);
-
-// $primary-lr-fade: horizontal-gradient(#{$color-primary-d}14 #{$color-primary-l}00);
-// $primary-rl-fade: horizontal-gradient(#{$color-primary-d}00 #{$color-primary-l}14);
-$primary-lr-fade: horizontal-gradient(#ff000014 #ff000000);
-$primary-rl-fade: horizontal-gradient(#ff000000 #ff000014);

assets/scss/styles/vars/_spacing.scss

@@ -1,7 +0,0 @@
-@use 'sass:math';
-
-// $page-margin: 32;
-$page-margin: 64;
-$base-height: 1080;
-$base-modal-height: $base-height - ($page-margin * 2);
-$base-modal-max-width: math.div($base-modal-height * 16, 9);

assets/scss/styles/vars/_transitions.scss

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

flatpak/.gitignore

@@ -0,0 +1,4 @@
+.flatpak-builder
+builddir
+repo
+*.flatpak

flatpak/README.md

@@ -0,0 +1,15 @@
+Before building the Flatpak, you must build the patches on the root directory first. **The LLVM Extension for freedesktop does not include the MIPS compiler and will fail to build the patches inside the flatpak**.
+```sh
+make -C patches CC=clang LD=ld.lld
+```
+
+Build
+```sh
+flatpak-builder --force-clean --user --install-deps-from=flathub --repo=repo --install builddir io.github.banjorecomp.banjorecomp.json
+```
+
+Bundle
+```sh
+flatpak build-bundle repo io.github.banjorecomp.banjorecomp.flatpak io.github.banjorecomp.banjorecomp --runtime-repo=https://flathub.org/repo/flathub.flatpakrepo
+```
+

flatpak/io.github.banjorecomp.banjorecomp.desktop

@@ -0,0 +1,8 @@
+[Desktop Entry]
+Name=Banjo: Recompiled
+Exec=/app/bin/BanjoRecompiled
+Type=Application
+Icon=io.github.banjorecomp.banjorecomp
+Categories=Game;
+Comment=Static recompilation of Banjo-Kazooie for PC.
+MimeType=x-scheme-handler/banjorecomp

flatpak/io.github.banjorecomp.banjorecomp.json

@@ -0,0 +1,62 @@
+{
+  "id": "io.github.banjorecomp.banjorecomp",
+  "runtime": "org.freedesktop.Platform",
+  "runtime-version": "25.08",
+  "sdk": "org.freedesktop.Sdk",
+  "sdk-extensions" : [ "org.freedesktop.Sdk.Extension.llvm20" ],
+  "finish-args": [
+    "--share=network",
+    "--socket=wayland",
+    "--socket=fallback-x11",
+    "--socket=pulseaudio",
+    "--device=all",
+    "--filesystem=host",
+    "--filesystem=/media",
+    "--filesystem=/run/media",
+    "--filesystem=/mnt"
+  ],
+  "modules": [
+    {
+      "name": "BanjoRecompiled",
+      "buildsystem": "simple",
+      "build-commands": [
+        "cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_C_COMPILER=clang -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S lib/N64Recomp -B lib/N64Recomp/cmake-build",
+        "cmake --build lib/N64Recomp/cmake-build --config Release --target N64Recomp --parallel",
+        "cmake --build lib/N64Recomp/cmake-build --config Release --target RSPRecomp --parallel",
+        "cp lib/N64Recomp/cmake-build/N64Recomp N64Recomp",
+        "cp lib/N64Recomp/cmake-build/RSPRecomp RSPRecomp",
+        "./N64Recomp banjo.us.rev0.toml",
+        "./RSPRecomp n_aspMain.us.rev0.toml",
+        "cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_C_COMPILER=clang -DCMAKE_MAKE_PROGRAM=ninja -DPATCHES_C_COMPILER=clang -DPATCHES_LD=ld.lld -DRECOMP_FLATPAK=ON -G Ninja -S . -B cmake-build",
+        "cmake --build cmake-build --config Release --target BanjoRecompiled --parallel",
+        "rm -rf assets/scss",
+        "mkdir -p /app/bin",
+        "cp cmake-build/BanjoRecompiled /app/bin/BanjoRecompiled",
+        "cp recompcontrollerdb.txt /app/bin/recompcontrollerdb.txt",
+        "cp -R assets /app/bin/assets",
+        "install -Dm644 icons/app.png /app/share/icons/hicolor/512x512/apps/${FLATPAK_ID}.png",
+        "install -Dm644 flatpak/io.github.banjorecomp.banjorecomp.metainfo.xml /app/share/metainfo/${FLATPAK_ID}.metainfo.xml",
+        "install -Dm644 flatpak/io.github.banjorecomp.banjorecomp.desktop /app/share/applications/${FLATPAK_ID}.desktop"
+      ],
+      "sources": [
+        {
+          "type": "git",
+          "url": "https://github.com/N64Recomp/N64Recomp.git",
+          "commit": "2b6f05688de2abc7d86da5b4a89b84c2c6acbabe",
+          "dest": "lib/N64Recomp"
+        },
+        {
+          "type": "dir",
+          "path": "../"
+        }
+      ],
+      "build-options": {
+        "append-path": "/usr/lib/sdk/llvm20/bin",
+        "prepend-ld-library-path": "/usr/lib/sdk/llvm20/lib",
+        "build-args": [
+          "--share=network"
+        ]
+      }
+    }
+  ]
+}

flatpak/io.github.banjorecomp.banjorecomp.metainfo.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop-application">
+  <id>io.github.banjorecomp.banjorecomp</id>
+  
+  <name>Banjo: Recompiled</name>
+  <summary>Static recompilation of Banjo-Kazooie for PC.</summary>
+  
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>GPL-3.0+</project_license>
+  
+  <supports>
+    <control>pointing</control>
+    <control>keyboard</control>
+    <control>touch</control>
+    <control>gamepad</control>
+  </supports>
+  
+  <description>
+    <p>
+      Banjo: Recompiled is a project that uses N64: Recompiled to statically recompile Banjo-Kazoie into a native port with many new features and enhancements. This project uses RT64 as the rendering engine to provide some of these enhancements.
+
+      The original game is required to run this project.
+
+      https://github.com/BanjoRecomp/BanjoRecomp
+    </p>
+  </description>
+  
+  <launchable type="desktop-id">io.github.banjorecomp.banjorecomp.desktop</launchable>
+</component>

icons/README.md

@@ -0,0 +1,18 @@
+When making icons for Windows, it is important to generate the multiple ICO files on different sizes and pack them into one single ICO file.
+
+Using a tool such as `icomake` is recommended for this: https://github.com/tringi/icomake
+
+The recommended workflow is to progressively downscale the icon into the following sizes and export them from a tool that supports exporting to ICO:
+
+- 256.ico, 256x256 
+- 128.ico, 128x128
+- 64.ico, 64x64
+- 32.ico, 32x32
+- 16.ico, 16x16
+
+Once these are ready, `icomake` can pack these into one icon with the following command:
+```
+.\icomake.exe app.ico 16.ico 32.ico 64.ico 128.ico 256.ico
+```
+
+If done correctly, Windows will now pick the icon with the correct size on the title bar, the taskbar and as a shortcut.

icons/app.rc

@@ -0,0 +1,2 @@
+1 ICON "appb.ico"
+2 ICON "appk.ico"

include/banjo_config.h

@@ -2,53 +2,57 @@
 #define __BANJO_CONFIG_H__
 
 #include <filesystem>
+#include <string>
 #include <string_view>
-#include "ultramodern/config.hpp"
-#include "recomp_input.h"
+
+#include "json/json.hpp"
 
 namespace banjo {
-    constexpr std::u8string_view program_id = u8"BanjoRecompiled";
-    constexpr std::string_view program_name = "Banjo: Recompiled";
+    inline const std::u8string program_id = u8"BanjoRecompiled";
+    inline const std::string program_name = "Banjo: Recompiled";
+
+    namespace configkeys {
+        namespace general {
+            inline const std::string note_saving_mode = "note_saving_mode";
+            inline const std::string camera_invert_mode = "camera_invert_mode";
+            inline const std::string analog_cam_mode = "analog_cam_mode";
+            inline const std::string third_person_camera_invert_mode = "third_person_camera_invert_mode";
+            inline const std::string flying_and_swimming_invert_mode = "flying_and_swimming_invert_mode";
+            inline const std::string first_person_invert_mode = "first_person_invert_mode";
+            inline const std::string analog_camera_sensitivity = "analog_camera_sensitivity";
+        }
+
+        namespace sound {
+            inline const std::string bgm_volume = "bgm_volume";
+        }
+
+        namespace graphics {
+            inline const std::string cutscene_aspect_ratio_mode = "cutscene_aspect_ratio_mode";
+        }
+    }
 
     // TODO: Move loading configs to the runtime once we have a way to allow per-project customization.
-    void load_config();
-    void save_config();
-    
-    void reset_input_bindings();
-    void reset_cont_input_bindings();
-    void reset_kb_input_bindings();
-    void reset_single_input_binding(recomp::InputDevice device, recomp::GameInput input);
+    void init_config();
 
-    std::filesystem::path get_app_folder_path();
-    
-    bool get_debug_mode_enabled();
-    void set_debug_mode_enabled(bool enabled);
-    
     enum class CameraInvertMode {
         InvertNone,
         InvertX,
         InvertY,
-        InvertBoth,
-        OptionCount
+        InvertBoth
     };
 
-    NLOHMANN_JSON_SERIALIZE_ENUM(banjo::CameraInvertMode, {
-        {banjo::CameraInvertMode::InvertNone, "InvertNone"},
-        {banjo::CameraInvertMode::InvertX, "InvertX"},
-        {banjo::CameraInvertMode::InvertY, "InvertY"},
-        {banjo::CameraInvertMode::InvertBoth, "InvertBoth"}
-    });
-
     CameraInvertMode get_camera_invert_mode();
-    void set_camera_invert_mode(CameraInvertMode mode);
 
-    CameraInvertMode get_analog_camera_invert_mode();
-    void set_analog_camera_invert_mode(CameraInvertMode mode);
+    CameraInvertMode get_third_person_camera_mode();
+
+    CameraInvertMode get_flying_and_swimming_invert_mode();
+
+    CameraInvertMode get_first_person_invert_mode();
 
     enum class AnalogCamMode {
         On,
         Off,
-		OptionCount
+        OptionCount
     };
 
     NLOHMANN_JSON_SERIALIZE_ENUM(banjo::AnalogCamMode, {
@@ -57,7 +61,30 @@ namespace banjo {
     });
 
     AnalogCamMode get_analog_cam_mode();
-    void set_analog_cam_mode(AnalogCamMode mode);
+
+    uint32_t get_analog_cam_sensitivity();
+
+    enum class NoteSavingMode {
+        On,
+        Off,
+        OptionCount
+    };
+
+    NLOHMANN_JSON_SERIALIZE_ENUM(banjo::NoteSavingMode, {
+        {banjo::NoteSavingMode::On, "On"},
+        {banjo::NoteSavingMode::Off, "Off"}
+    });
+
+    NoteSavingMode get_note_saving_mode();
+
+    enum class CutsceneAspectRatioMode {
+        Original,
+        Clamp16x9,
+        Full,
+        OptionCount
+    };
+
+    CutsceneAspectRatioMode get_cutscene_aspect_ratio_mode();
 
     void open_quit_game_prompt();
 };

include/banjo_launcher.h

@@ -0,0 +1,16 @@
+#ifndef __BANJO_LAUNCHER_H__
+#define __BANJO_LAUNCHER_H__
+
+#include "recompui/recompui.h"
+
+namespace banjo {
+    void launcher_animation_setup(recompui::LauncherMenu *menu);
+    void launcher_animation_update(recompui::LauncherMenu *menu);
+
+    constexpr float launcher_options_right_position_start = 96.0f;
+    constexpr float launcher_options_right_position_end = 96.0f + 24.0f;
+    constexpr float launcher_options_top_offset = 96.0f;
+    constexpr float launcher_options_title_offset = 120.0f;
+}
+
+#endif

include/banjo_render.h

@@ -1,61 +0,0 @@
-#ifndef __BANJO_RENDER_H__
-#define __BANJO_RENDER_H__
-
-#include <unordered_set>
-#include <filesystem>
-
-#include "common/rt64_user_configuration.h"
-#include "ultramodern/renderer_context.hpp"
-#include "librecomp/mods.hpp"
-
-namespace RT64 {
-    struct Application;
-}
-
-namespace banjo {
-    namespace renderer {
-        inline const std::string special_option_texture_pack_enabled = "_recomp_texture_pack_enabled";
-
-        class RT64Context final : public ultramodern::renderer::RendererContext {
-        public:
-            ~RT64Context() override;
-            RT64Context(uint8_t *rdram, ultramodern::renderer::WindowHandle window_handle, bool developer_mode);
-
-            bool valid() override { return static_cast<bool>(app); }
-
-            bool update_config(const ultramodern::renderer::GraphicsConfig &old_config, const ultramodern::renderer::GraphicsConfig &new_config) override;
-
-            void enable_instant_present() override;
-            void send_dl(const OSTask *task) override;
-            void update_screen() override;
-            void shutdown() override;
-            uint32_t get_display_framerate() const override;
-            float get_resolution_scale() const override;
-
-        private:
-            std::unique_ptr<RT64::Application> app;
-            std::unordered_set<std::string> enabled_texture_packs;
-            std::unordered_set<std::string> secondary_disabled_texture_packs;
-
-            void check_texture_pack_actions();
-        };
-
-        std::unique_ptr<ultramodern::renderer::RendererContext> create_render_context(uint8_t *rdram, ultramodern::renderer::WindowHandle window_handle, bool developer_mode);
-
-        RT64::UserConfiguration::Antialiasing RT64MaxMSAA();
-        bool RT64SamplePositionsSupported();
-        bool RT64HighPrecisionFBEnabled();
-
-        void trigger_texture_pack_update();
-        void enable_texture_pack(const recomp::mods::ModContext& context, const recomp::mods::ModHandle& mod);
-        void disable_texture_pack(const recomp::mods::ModHandle& mod);
-        void secondary_enable_texture_pack(const std::string& mod_id);
-        void secondary_disable_texture_pack(const std::string& mod_id);
-
-        // Texture pack enable option. Must be an enum with two options.
-        // The first option is treated as disabled and the second option is treated as enabled.
-        bool is_texture_pack_enable_config_option(const recomp::mods::ConfigOption& option, bool show_errors);
-    }
-}
-
-#endif

include/banjo_sound.h

@@ -2,10 +2,6 @@
 #define __BANJO_SOUND_H__
 
 namespace banjo {
-    void reset_sound_settings();
-    void set_main_volume(int volume);
-    int get_main_volume();
-    void set_bgm_volume(int volume);
     int get_bgm_volume();
 }
 

include/recomp_input.h

@@ -1,202 +0,0 @@
-#ifndef __RECOMP_INPUT_H__
-#define __RECOMP_INPUT_H__
-
-#include <cstdint>
-#include <variant>
-#include <vector>
-#include <type_traits>
-#include <span>
-#include <string>
-#include <string_view>
-
-#include "ultramodern/input.hpp"
-
-#include "json/json.hpp"
-
-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.
-    // TODO refactor this to allow projects to rename these, or get rid of the readable name and leave that up to individual projects to map.
-    #define DEFINE_N64_BUTTON_INPUTS() \
-        DEFINE_INPUT(A, 0x8000, "A") \
-        DEFINE_INPUT(B, 0x4000, "B") \
-        DEFINE_INPUT(Z, 0x2000, "Z") \
-        DEFINE_INPUT(START, 0x1000, "Start") \
-        DEFINE_INPUT(L, 0x0020, "L") \
-        DEFINE_INPUT(R, 0x0010, "R") \
-        DEFINE_INPUT(C_UP, 0x0008, "C Up") \
-        DEFINE_INPUT(C_LEFT, 0x0002, "C Left") \
-        DEFINE_INPUT(C_DOWN, 0x0004, "C Down") \
-        DEFINE_INPUT(C_RIGHT, 0x0001, "C Right") \
-        DEFINE_INPUT(DPAD_UP, 0x0800, "D Pad Down") \
-        DEFINE_INPUT(DPAD_RIGHT, 0x0100, "D-Pad Down") \
-        DEFINE_INPUT(DPAD_DOWN, 0x0400, "D-Pad Down") \
-        DEFINE_INPUT(DPAD_LEFT, 0x0200, "D-Pad Down")
-
-    #define DEFINE_N64_AXIS_INPUTS() \
-        DEFINE_INPUT(Y_AXIS_POS, 0, "Up") \
-        DEFINE_INPUT(Y_AXIS_NEG, 0, "Down") \
-        DEFINE_INPUT(X_AXIS_NEG, 0, "Left") \
-        DEFINE_INPUT(X_AXIS_POS, 0, "Right") \
-
-    #define DEFINE_RECOMP_UI_INPUTS() \
-        DEFINE_INPUT(TOGGLE_MENU, 0, "Toggle Menu") \
-        DEFINE_INPUT(ACCEPT_MENU, 0, "Accept (Menu)") \
-        DEFINE_INPUT(APPLY_MENU, 0, "Apply (Menu)")
-
-    #define DEFINE_ALL_INPUTS() \
-        DEFINE_N64_BUTTON_INPUTS() \
-        DEFINE_N64_AXIS_INPUTS() \
-        DEFINE_RECOMP_UI_INPUTS()
-
-    // Enum containing every recomp input.
-    #define DEFINE_INPUT(name, value, readable) name,
-    enum class GameInput {
-        DEFINE_ALL_INPUTS()
-
-        COUNT,
-        N64_BUTTON_START = A,
-        N64_BUTTON_COUNT = C_RIGHT - N64_BUTTON_START + 1,
-        N64_AXIS_START = X_AXIS_NEG,
-        N64_AXIS_COUNT = Y_AXIS_POS - N64_AXIS_START + 1,
-    };
-    #undef DEFINE_INPUT
-
-    struct InputField {
-        uint32_t input_type;
-        int32_t input_id;
-        std::string to_string() const;
-        auto operator<=>(const InputField& rhs) const = default;
-    };
-
-    void poll_inputs();
-    float get_input_analog(const InputField& field);
-    float get_input_analog(const std::span<const recomp::InputField> fields);
-    bool get_input_digital(const InputField& field);
-    bool get_input_digital(const std::span<const recomp::InputField> fields);
-    void get_gyro_deltas(float* x, float* y);
-    void get_mouse_deltas(float* x, float* y);
-    void get_right_analog(float* x, float* y);
-
-    enum class InputDevice {
-        Controller,
-        Keyboard,
-        COUNT
-    };
-
-    void start_scanning_input(InputDevice device);
-    void stop_scanning_input();
-    void finish_scanning_input(InputField scanned_field);
-    void cancel_scanning_input();
-    void config_menu_set_cont_or_kb(bool cont_interacted);
-    InputField get_scanned_input();
-    int get_scanned_input_index();
-    
-    struct DefaultN64Mappings {
-        std::vector<InputField> a;
-        std::vector<InputField> b;
-        std::vector<InputField> l;
-        std::vector<InputField> r;
-        std::vector<InputField> z;
-        std::vector<InputField> start;
-
-        std::vector<InputField> c_left;
-        std::vector<InputField> c_right;
-        std::vector<InputField> c_up;
-        std::vector<InputField> c_down;
-
-        std::vector<InputField> dpad_left;
-        std::vector<InputField> dpad_right;
-        std::vector<InputField> dpad_up;
-        std::vector<InputField> dpad_down;
-
-        std::vector<InputField> analog_left;
-        std::vector<InputField> analog_right;
-        std::vector<InputField> analog_up;
-        std::vector<InputField> analog_down;
-
-        std::vector<InputField> toggle_menu;
-        std::vector<InputField> accept_menu;
-        std::vector<InputField> apply_menu;
-    };
-
-    inline const std::vector<InputField>& get_default_mapping_for_input(const DefaultN64Mappings& defaults, const GameInput input) {
-        static const std::vector<InputField> empty_input_field{};
-        switch (input) {
-            case GameInput::A: return defaults.a;
-            case GameInput::B: return defaults.b;
-            case GameInput::L: return defaults.l;
-            case GameInput::R: return defaults.r;
-            case GameInput::Z: return defaults.z;
-            case GameInput::START: return defaults.start;
-            case GameInput::C_LEFT: return defaults.c_left;
-            case GameInput::C_RIGHT: return defaults.c_right;
-            case GameInput::C_UP: return defaults.c_up;
-            case GameInput::C_DOWN: return defaults.c_down;
-            case GameInput::DPAD_LEFT: return defaults.dpad_left;
-            case GameInput::DPAD_RIGHT: return defaults.dpad_right;
-            case GameInput::DPAD_UP: return defaults.dpad_up;
-            case GameInput::DPAD_DOWN: return defaults.dpad_down;
-            case GameInput::X_AXIS_NEG: return defaults.analog_left;
-            case GameInput::X_AXIS_POS: return defaults.analog_right;
-            case GameInput::Y_AXIS_POS: return defaults.analog_up;
-            case GameInput::Y_AXIS_NEG: return defaults.analog_down;
-            case GameInput::TOGGLE_MENU: return defaults.toggle_menu;
-            case GameInput::ACCEPT_MENU: return defaults.accept_menu;
-            case GameInput::APPLY_MENU: return defaults.apply_menu;
-            default: return empty_input_field;
-        }
-    }
-
-    extern const DefaultN64Mappings default_n64_keyboard_mappings;
-    extern const DefaultN64Mappings default_n64_controller_mappings;
-
-    constexpr size_t bindings_per_input = 2;
-
-    size_t get_num_inputs();
-    const std::string& get_input_name(GameInput input);
-    const std::string& get_input_enum_name(GameInput input);
-    GameInput get_input_from_enum_name(const std::string_view name);
-    InputField& get_input_binding(GameInput input, size_t binding_index, InputDevice device);
-    void set_input_binding(GameInput input, size_t binding_index, InputDevice device, InputField value);
-
-    bool get_n64_input(int controller_num, uint16_t* buttons_out, float* x_out, float* y_out);
-    void set_rumble(int controller_num, bool);
-    void update_rumble();
-    void handle_events();
-
-    ultramodern::input::connected_device_info_t get_connected_device_info(int controller_num);
-    
-    // Rumble strength ranges from 0 to 100.
-    int get_rumble_strength();
-    void set_rumble_strength(int strength);
-    
-    // Gyro and mouse sensitivities range from 0 to 100.
-    int get_gyro_sensitivity();
-    int get_mouse_sensitivity();
-    int get_joystick_deadzone();
-    void set_gyro_sensitivity(int strength);
-    void set_mouse_sensitivity(int strength);
-    void set_joystick_deadzone(int strength);
-    void apply_joystick_deadzone(float x_in, float y_in, float* x_out, float* y_out);
-    void set_right_analog_suppressed(bool suppressed);
-
-    enum class BackgroundInputMode {
-        On,
-        Off,
-		OptionCount
-    };
-
-    NLOHMANN_JSON_SERIALIZE_ENUM(recomp::BackgroundInputMode, {
-        {recomp::BackgroundInputMode::On, "On"},
-        {recomp::BackgroundInputMode::Off, "Off"}
-    });
-
-    BackgroundInputMode get_background_input_mode();
-    void set_background_input_mode(BackgroundInputMode mode);
-
-    bool game_input_disabled();
-    bool all_input_disabled();
-}
-
-#endif

include/recomp_ui.h

@@ -1,138 +0,0 @@
-#ifndef __RECOMP_UI__
-#define __RECOMP_UI__
-
-#include <memory>
-#include <string>
-#include <string_view>
-#include <list>
-
-// TODO move this file into src/ui
-
-#include "SDL.h"
-#include "RmlUi/Core.h"
-
-#include "../src/ui/util/hsv.h"
-#include "../src/ui/util/bem.h"
-#include "../src/ui/elements/ui_button.h"
-#include "../src/ui/elements/ui_theme.h"
-
-#include "../src/ui/core/ui_context.h"
-
-namespace Rml {
-    class ElementDocument;
-    class EventListenerInstancer;
-    class Context;
-    class Event;
-}
-
-namespace recompui {
-    class UiEventListenerInstancer;
-
-    // TODO remove this once the UI has been ported over to the new system.
-    class MenuController {
-    public:
-        virtual ~MenuController() {}
-        virtual void load_document() = 0;
-        virtual void register_events(UiEventListenerInstancer& listener) = 0;
-        virtual void make_bindings(Rml::Context* context) = 0;
-    };
-
-    std::unique_ptr<MenuController> create_launcher_menu();
-    std::unique_ptr<MenuController> create_config_menu();
-
-    using event_handler_t = void(const std::string& param, Rml::Event&);
-
-    void queue_event(const SDL_Event& event);
-    bool try_deque_event(SDL_Event& out);
-
-    std::unique_ptr<UiEventListenerInstancer> make_event_listener_instancer();
-    void register_event(UiEventListenerInstancer& listener, const std::string& name, event_handler_t* handler);
-
-    void show_context(ContextId context, std::string_view param);
-    void hide_context(ContextId context);
-    void hide_all_contexts();
-    bool is_context_shown(ContextId context);
-    bool is_context_capturing_input();
-    bool is_context_capturing_mouse();
-    bool is_any_context_shown();
-    ContextId try_close_current_context();
-
-    ContextId get_launcher_context_id();
-    ContextId get_config_context_id();
-    ContextId get_config_sub_menu_context_id();
-
-    enum class ConfigTab {
-        General,
-        Controls,
-        Graphics,
-        Sound,
-        Mods,
-        Debug,
-    };
-
-    void set_config_tab(ConfigTab tab);
-    int config_tab_to_index(ConfigTab tab);
-    Rml::ElementTabSet* get_config_tabset();
-    Rml::Element* get_mod_tab();
-    void set_config_tabset_mod_nav();
-    void focus_mod_configure_button();
-
-    void init_styling(const std::filesystem::path& rcss_file);
-    void init_prompt_context();
-    void open_choice_prompt(
-        const std::string& header_text,
-        const std::string& content_text,
-        const std::string& confirm_label_text,
-        const std::string& cancel_label_text,
-        std::function<void()> confirm_action,
-        std::function<void()> cancel_action,
-        ButtonStyle confirm_variant = ButtonStyle::Success,
-        ButtonStyle cancel_variant = ButtonStyle::Danger,
-        bool focus_on_cancel = true,
-        const std::string& return_element_id = ""
-    );
-    void open_info_prompt(
-        const std::string& header_text,
-        const std::string& content_text,
-        const std::string& okay_label_text,
-        std::function<void()> okay_action,
-        ButtonStyle okay_variant = ButtonStyle::Danger,
-        const std::string& return_element_id = ""
-    );
-    void open_notification(
-        const std::string& header_text,
-        const std::string& content_text,
-        const std::string& return_element_id = ""
-    );
-    void close_prompt();
-    bool is_prompt_open();
-    void update_mod_list(bool scan_mods = true);
-    void process_game_started();
-
-    void apply_color_hack();
-    void get_window_size(int& width, int& height);
-    void set_cursor_visible(bool visible);
-    void update_supported_options();
-    void toggle_fullscreen();
-
-    bool get_cont_active(void);
-    void set_cont_active(bool active);
-    void activate_mouse();
-
-    void message_box(const char* msg);
-
-    void set_render_hooks();
-
-    Rml::ElementPtr create_custom_element(Rml::Element* parent, std::string tag);
-    Rml::ElementDocument* load_document(const std::filesystem::path& path);
-    Rml::ElementDocument* create_empty_document();
-    Rml::Element* get_child_by_tag(Rml::Element* parent, const std::string& tag);
-
-    void queue_image_from_bytes_rgba32(const std::string &src, const std::vector<char> &bytes, uint32_t width, uint32_t height);
-    void queue_image_from_bytes_file(const std::string &src, const std::vector<char> &bytes);
-    void release_image(const std::string &src);
-
-    void drop_files(const std::list<std::filesystem::path> &file_list);
-}
-
-#endif

lib/FindFreetype.cmake

@@ -1,9 +0,0 @@
-set(FREETYPE_INCLUDE_DIRS ${CMAKE_SOURCE_DIR}/lib/freetype-windows-binaries/include)
-set(FREETYPE_LIBRARIES "${CMAKE_SOURCE_DIR}/lib/freetype-windows-binaries/release static/vs2015-2022/win64/freetype.lib")
-add_library(Freetype::Freetype STATIC IMPORTED)
-set_target_properties(Freetype::Freetype PROPERTIES
-	IMPORTED_LOCATION ${FREETYPE_LIBRARIES}
-)
-target_include_directories(Freetype::Freetype INTERFACE
-	${FREETYPE_INCLUDE_DIRS}
-)

lib/GamepadMotionHelpers/.gitignore

@@ -1,32 +0,0 @@
-# Prerequisites
-*.d
-
-# Compiled Object files
-*.slo
-*.lo
-*.o
-*.obj
-
-# Precompiled Headers
-*.gch
-*.pch
-
-# Compiled Dynamic libraries
-*.so
-*.dylib
-*.dll
-
-# Fortran module files
-*.mod
-*.smod
-
-# Compiled Static libraries
-*.lai
-*.la
-*.a
-*.lib
-
-# Executables
-*.exe
-*.out
-*.app

lib/GamepadMotionHelpers/CMakeLists.txt

@@ -1,11 +0,0 @@
-cmake_minimum_required(VERSION 3.8)
-
-project(GamepadMotionHelpers LANGUAGES CXX)
-
-add_library(${PROJECT_NAME} INTERFACE)
-add_library(${PROJECT_NAME}::${PROJECT_NAME} ALIAS ${PROJECT_NAME})
-target_include_directories(${PROJECT_NAME}
-        INTERFACE
-            $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}>
-            $<INSTALL_INTERFACE:include>)
-		

lib/GamepadMotionHelpers/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020-2023 Julian "Jibb" Smart
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

lib/GamepadMotionHelpers/README.md

@@ -1,76 +0,0 @@
-# GamepadMotionHelpers
-GamepadMotionHelpers is a lightweight header-only library for sensor fusion, gyro calibration, etc. BYO input library (eg [SDL2](https://github.com/libsdl-org/SDL)).
-
-## Units
-Convert your gyro units into **degrees per second** and accelerometer units to **g-force** (1 g = 9.8 m/s^2). You don't have to use these units in your application, but convert to these units when writing to GamepadMotionHelpers and convert back when reading from it. Your input reader might prefer radians per second and metres per second squared, but the datasheets for every IMU I've seen talk about degrees per second and g-force.
-
-## Coordinate Space
-This library uses a Y-up coordinate system. While Z-up is (only slightly) preferable for many games, PlayStation controllers use Y-up, and have set the standard for input libraries like [SDL2](https://github.com/libsdl-org/SDL) and [JSL](https://github.com/JibbSmart/JoyShockLibrary). These libraries convert inputs from other controller types to the same space used by PlayStation's DualShock 4 and DualSense, so that's what's used here.
-
-## Basic Use
-Include the GamepadMotion.hpp file in your C++ project. That's it! Everything you need is in that file, and its only dependency is ```<math.h>```.
-
-For each controller with gyro (and optionally accelerometer), create a ```GamepadMotion``` object. At regular intervals, whether when a new report comes in from the controller or when polling the controller's state, you should call ```ProcessMotion(...)```. This is when you tell your GamepadMotion object the latest gyro (in degrees per second) and accelerometer (in g-force) inputs. You'll also give it the time since the last update for this controller (in seconds).
-
-ProcessMotion takes these inputs, updates some internal values, and then you can use any of the following to read its current state:
-- ```GetCalibratedGyro(float& x, float& y, float& z)``` - Get the controller's angular velocity in degrees per second. This is just the raw gyro you gave it minus the gyro's bias as determined by your calibration settings (more on that below).
-- ```GetGravity(float& x, float& y, float& z)``` - Get the gravity direction in the controller's local space. When the controller is still on a flat surface it'll be approximately (0, -1, 0). The controller can't detect the gravity direction when it's in freefall or being shaken around, but it can make a pretty good guess if its gyro is correctly calibrated and then make further corrections when the controller is still again.
-- ```GetProcessedAcceleration(float& x, float& y, float& z)``` - Get the controller's current acceleration in g-force with gravity removed. Raw accelerometer input includes gravity -- it is only (0, 0, 0) when the controller is in freefall. However, using the gravity direction as calculated for GetGravity, it can remove that component and detect how you're shaking the controller about. This function gives you that acceleration vector with the gravity removed.
-- ```GetOrientation(float& w, float& x, float& y, float& z)``` - Get the controller's orientation. Gyro and accelerometer input are combined to give a good estimate of the controller's orientation.
-
-Additional helper functions are available for taking gravity into account and returning a "world space" or "player space" rotation in two axes. Bear in mind that the **X** and **Y** set by these functions is still around the controller's axes. This means **Y** is the *horizontal* part of the rotation, and **X** is the vertical part. To convert to a mouse-like input, you'll treat the **Y** as the horizontal or yaw input and **X** as the vertical or pitch input. This might be unintuitive, but since it's also true of the "local space" angular velocities obtained from GetCalibratedGyro, this makes it simple to let the user choose between *local space*, *world space*, and *player space* in your game or application by just swapping GetCalibratedGyro for these functions depending on that selection:
-- ```GetWorldSpaceGyro(float& x, float& y, const float sideReductionThreshold = 0.125f)``` - Get the controller's angular velocity in *world space* as described on GyroWiki in the [player space article here](http://gyrowiki.jibbsmart.com/blog:player-space-gyro-and-alternatives-explained#toc6). Yaw input will be derived from motion around the gravity axis, and pitch input from an appropriate pitch axis calculated from the controller's orientation with respect to the gravity axis. Any errors in the calculated gravity axis (though likely very small) will be taken on by the calculated world space gyro rotation, making it slightly less robust than using calibrated gyro directly ("local space" gyro) or using *player space* gyro below. More info in the linked article.
-- ```GetPlayerSpaceGyro(float& x, float& y, const float yawRelaxFactor = 1.41f)``` - Get the controller's angular velocity in *player space* as described on GyroWiki in the [player space article here](http://gyrowiki.jibbsmart.com/blog:player-space-gyro-and-alternatives-explained#toc7). Yaw input will be derived from motion approximately around the gravity axis, without any impact from errors in the gravity calculation. Pitch is just local pitch. It is robust, accommodates players who are used to both local space and world space gyro, while taking on most of the advantages of each. It is proven in popular games and is an ideal default for players using a standalone controller. For handheld (where the screen is part of the controller, such as mobile, Switch, or Steam Deck) local space (using the calibrated gyro input directly) may be preferable. More info in the linked article.
-
-If you want to plug in the gyro and gravity values yourself (perhaps you're using an externally calculated gravity), you can use ```CalculateWorldSpaceGyro``` and ```CalculatePlayerSpaceGyro``` instead. Make sure you use this GamepadMotionHelpers' coordinate space, units, and gravity is normalized, since those are all assumed for these functions.
-
-## Sensor Fusion
-Combining multiple types of sensor like this to get a better picture of the controller's state is called "sensor fusion". Moment-to-moment changes in orientation are detected using the gyro, but that only gives local angular velocity and needs to be correctly calibrated. Errors can accumulate over time. The gravity vector as detected by the accelerometer is used to make corrections to the relevant components of the controller's orientation.
-
-But this cannot be used to correct the controller's orientation around the gravity vector (the **yaw** axis). If you're using the controller's absolute orientation for some reason, this "yaw drift" may need to be accounted for somehow. Some devices also have a magnetometer (compass) to counter yaw drift, but since popular game controllers don't have a magnetometer, I haven't tried it myself. In future, if I get such a device, I'd like to add the option for GamepadMotionHelpers to accept magnetometer input and account for it when calculating values for the above functions.
-
-## Gyro Calibration
-Modern gyroscopes often need calibration. This is like how a [weighing scale](https://en.wikipedia.org/wiki/Weighing_scale) can need calibration to tell it what 'zero' is. Like a weighing scale, a correctly calibrated gyroscope will give an accurate reading. If you're using the gyro input as a mouse, which is the simplest application of a controller's gyro, you can find essential reading on [GyroWiki here](http://gyrowiki.jibbsmart.com/blog:good-gyro-controls-part-1:the-gyro-is-a-mouse).
-
-Calibration just means having the controller sit still and remembering the average reported angular velocity in each axis. This is the gyro's "bias". In GamepadMotionHelpers, I call our best guess at the controller's bias the "calibration offset". GamepadMotionHelpers has some options to help with calibrating:
-
-At any time, you can begin manually calibrating a controller by calling ```StartContinuousCalibration()```. This will start recording the average angular velocity and apply it immediately to any subsequent **GetGalibratedGyro(...)** call. At any time you can ```PauseContinuousCalibration()``` to no longer add current values to the average angular velocity being recorded. You can ```ResetContinousCalibration()``` to remove the recorded average before starting over with **StartContinuousCalibration** again.
-
-You can read the stored calibration values using ```GetCalibrationOffset(float& xOffset, float& yOffset, float& zOffset)```. You can manually set the calibration offset yourself with ```SetCalibrationOffset(float xOffset, float yOffset, float zOffset, int weight)```. This will override all stored values. The **weight** argument at the end determines how strongly these values should be considered over time if Continuous Calibration is still active (new values are still being added to the average). Each new sample has a weight of 1, so if you **SetCalibrationOffset** with a weight of 10, it'll have the weight of 10 samples when calculating the average. If you're not continuing to add samples (Continuous Calibration is not active), the weight will be meaningless. Setting this manually is unusual, so don't worry about it too much if that sounds complicated.
-
-Most games don't ask the user to calibrate the gyro themselves. They have built-in automatic calibration, which I like to call "auto-calibration". There's no such thing as a "good enough" auto-calibration solution -- at least not with only gyro and accelerometer. Every game that has an auto-calibration solution would be made better for more serious players with the option to manually calibrate their gyro, so I urge you to provide players the option to do the same in your game. Having said that, auto-calibration is a useful option for casual players, and you may choose to have it enabled in your game by default.
-
-So GamepadMotionHelpers provides some auto-calibration options. You can call ```SetCalibrationMode(CalibrationMode)``` on each GamepadMotion instance with the following options:
-- ```CalibrationMode::Manual``` - No auto-calibration. This is the default.
-- ```CalibrationMode::Stillness``` - Automatically try to detect when the controller is being held still and update the calibration offset accordingly.
-- ```CalibrationMode::SensorFusion``` - Calculate an angular velocity from changes in the gravity direction as detected by the accelerometer. If these are steady enough, use them to make corrections to the calibration offset. This will only apply to relevant axes.
-
-Many players are already aware of the shortcomings of trying to automatically detect stillness to automatically calibrate the gyro. Whether on Switch, PlayStation, or using PlayStation controllers on PC, players have tried to track a slow or distant target only to have the aimer suddenly stop moving! The game or the platform has **misinterpreted their slow and steady input as the controller being held still**, and they've incorrectly recalibrated accordingly. Players *hate it* when this happens.
-
-**This is why it's important to let players manually calibrate their gyro** if they want to.
-
-Auto-calibration is used so widely in console games that it's speculated that game developers may not have the option to disable it on these platforms. If this is the case, GamepadMotionHelpers offers a big advantage over those platforms: you can disable it and enable it at any time.
-
-You, the game developer, can have your game tell if the player is tracking a distant or slow-moving target. You can tell if the player's aimer is moving towards a visible target or roughly following the movement of one. When it is, maybe disabling the auto-calibration (```SetCalibrationMode(CalibrationMode::Manual)```) could be the difference between good and bad auto-calibration. I don't know if the GamepadMotionHelpers auto-calibration functions are better or worse than their Switch and PlayStation counterparts generally, but by letting you take the game's context into account, you may be able to offer players a way better experience without them having to manually calibrate.
-
-But still give them the option to calibrate manually, please :)
-
-The **SensorFusion** calibration mode has shortcomings of its own. It's much harder to accidentally trick the game into incorrectly calibrating, but the angular velocity calculated from the accelerometer moment-to-moment is generally much less precise. Leaving the controller still, you'll notice the calibrated gyro moving slightly up and down over time. So while the **Stillness** mode is characterised by good behaviour occasionally punctuated by frustrating errors, the **SensorFusion** mode will tend to be more consistently not-quite-right without being terrible.
-
-Secondly, this library currently only combines accelerometer and gyro, so the **SensorFusion** auto-calibration cannot correct the gyro in all axes at the same time. The **SensorFusion**-only mode will be more useful in future when magnetometer input is supported, which can account for the axes that the accelerometer can't.
-
-Both auto-calibration modes can be combined by passing ```CalibrationMode::Stillness | CalibrationMode::SensorFusion``` to **SetCalibrationMode**. In this case, it'll use **Stillness** auto-calibration, but it'll adjust the calibration offset based on any angular velocity implied by changes in the accelerometer input. This tends to give better results than just using **Stillness** or **SensorFusion** on their own.
-
-If you aren't sure what to choose, I'd suggest using the combined ```CalibrationMode::Stillness | CalibrationMode::SensorFusion``` when auto calibration is enabled, but also allowing the player to manually calibrate.
-
-**TODO** This is a clunky way to let the user set up what is obviously the best solution. Maybe I should just call it "hybrid" or something and be done with it?
-
-Auto-calibration can also be used to communicate manual calibration to the player. ```GetAutoCalibrationIsSteady()``` will tell you whether GamepadMotionHelpers thinks the controller is currently being held steady (if auto-calibration is enabled). ```GetAutoCalibrationConfidence()``` will tell you how confident GamepadMotionHelpers is that it has a good calibration value from auto-calibration, from 0-1. Higher confidence means that new calibration changes will be applied more gradually. You can use these functions to detect when a controller needs to be calibrated, prompt the player to put their controller down, detect when they have put their controller down, and show progress for calibration (default 1 second once it starts). You can also override the confidence yourself (```SetAutoCalibrationConfidence()```), and resetting calibration will reset confidence to 0. How quickly confidence grows as well as other calibration settings can be customised in **GamepadMotionSettings**.
-
-## In the Wild
-GamepadMotionHelpers is currently used in:
-- [JoyShockMapper](https://github.com/Electronicks/JoyShockMapper)
-- [JoyShockLibrary](https://github.com/JibbSmart/JoyShockLibrary)
-- JoyShockOverlay
-
-If you know of any other games or applications using GamepadMotionHelpers, please let me know!