Change to 1.0.1

* Add always high poly model as deprecated mod.

* Add modern runtime with deprecated mods support.

* Update RecompFrontend for deprecated mod support.

* Switch deprecated mod.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,45 @@
+---
+name: Bug report
+about: Report a bug in the project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Do not report issues with mods on this page. Please report them on the repo for the mods themselves.
+
+## If you have a crash on startup, please make sure your graphics drivers are up to date before submitting a bug report.
+
+**What is your GPU driver version? Old drivers, particularly on Nvidia, are known to cause crashes on boot. If you are on Nvidia and the game is crashing on boot, please update to a recent driver version before opening an issue.**
+
+**Have you checked whether this issue is vanilla behavior? In other words, does it occur on original hardware?**
+
+**Were you playing with intended mechanics, or using glitches? If it's the latter, which glitches?**
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. etc.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+Please attach a screenshot of the bug.
+
+**Desktop (please complete the following information):**
+ - OS: [Windows 10, Windows 11, Linux distro]
+ - Version: [e.g. 1.0.0]
+ - CPU: [e.g. Intel Core ..., AMD Ryzen ..., etc.]
+ - GPU: [e.g. NVIDIA GeForce .../Radeon RX .../Intel UHD .../etc.]
+ - GPU driver: [e.g Nvidia driver 545.XX, AMD driver 24.X.X, etc]
+
+**Mods Installed**
+List the mods you had installed and enabled when you encountered the error.
+
+**Additional context**
+Add any other context about the problem here.

.github/linux/BanjoRecompiled.desktop

@@ -0,0 +1,9 @@
+[Desktop Entry]
+Name=BanjoRecompiled
+Type=Application
+Terminal=false
+Icon=BanjoRecompiled
+Exec=BanjoRecompiled
+GenericName=BanjoRecompiled
+Categories=Game;
+

.github/macos/Info.plist.in

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>CFBundleName</key>
+    <string>${MACOSX_BUNDLE_BUNDLE_NAME}</string>
+    <key>CFBundleIdentifier</key>
+    <string>${MACOSX_BUNDLE_GUI_IDENTIFIER}</string>
+    <key>CFBundleVersion</key>
+    <string>${MACOSX_BUNDLE_BUNDLE_VERSION}</string>
+    <key>CFBundleShortVersionString</key>
+    <string>${MACOSX_BUNDLE_SHORT_VERSION_STRING}</string>
+    <key>CFBundleExecutable</key>
+    <string>BanjoRecompiled</string>
+    <key>CFBundleIconFile</key>
+    <string>${MACOSX_BUNDLE_ICON_FILE}</string>
+    <key>LSApplicationCategoryType</key>
+    <string>public.app-category.games</string>
+    <key>CFBundlePackageType</key>
+    <string>APPL</string>
+    <key>LSMinimumSystemVersion</key>
+    <string>11</string>
+    <key>GCSupportsGameMode</key>
+    <true/>
+</dict>
+</plist>

.github/macos/apple_bundle.cmake

@@ -0,0 +1,87 @@
+# Define the path to the entitlements file
+set(ENTITLEMENTS_FILE ${CMAKE_SOURCE_DIR}/.github/macos/entitlements.plist)
+
+# Set bundle properties
+set_target_properties(BanjoRecompiled PROPERTIES
+        MACOSX_BUNDLE TRUE
+        MACOSX_BUNDLE_BUNDLE_NAME "BanjoRecompiled"
+        MACOSX_BUNDLE_GUI_IDENTIFIER "com.github.Banjorecompiled"
+        MACOSX_BUNDLE_BUNDLE_VERSION "1.0"
+        MACOSX_BUNDLE_SHORT_VERSION_STRING "1.0"
+        MACOSX_BUNDLE_ICON_FILE "AppIcon.icns"
+        MACOSX_BUNDLE_INFO_PLIST ${CMAKE_BINARY_DIR}/Info.plist
+        XCODE_ATTRIBUTE_CODE_SIGN_IDENTITY "-"
+        XCODE_ATTRIBUTE_CODE_SIGN_ENTITLEMENTS ${ENTITLEMENTS_FILE}
+)
+
+# Create icon files for macOS bundle
+set(ICON_SOURCE ${CMAKE_SOURCE_DIR}/icons/app.png)
+set(ICONSET_DIR ${CMAKE_BINARY_DIR}/AppIcon.iconset)
+set(ICNS_FILE ${CMAKE_BINARY_DIR}/resources/AppIcon.icns)
+
+# Create iconset directory and add PNG file
+add_custom_command(
+        OUTPUT ${ICONSET_DIR}
+        COMMAND ${CMAKE_COMMAND} -E make_directory ${ICONSET_DIR}
+        COMMAND ${CMAKE_COMMAND} -E copy ${ICON_SOURCE} ${ICONSET_DIR}/icon_512x512.png
+        COMMAND ${CMAKE_COMMAND} -E copy ${ICON_SOURCE} ${ICONSET_DIR}/icon_512x512@2x.png
+        COMMAND touch ${ICONSET_DIR}
+        COMMENT "Creating iconset directory and copying PNG file"
+)
+
+# Convert iconset to icns
+add_custom_command(
+        OUTPUT ${ICNS_FILE}
+        DEPENDS ${ICONSET_DIR}
+        COMMAND iconutil -c icns ${ICONSET_DIR} -o ${ICNS_FILE}
+        COMMENT "Converting iconset to icns"
+)
+
+# Custom target to ensure icns creation
+add_custom_target(create_icns ALL DEPENDS ${ICNS_FILE})
+
+# Set source file properties for the resulting icns file
+set_source_files_properties(${ICNS_FILE} PROPERTIES
+        MACOSX_PACKAGE_LOCATION "Resources"
+)
+
+# Add the icns file to the executable target
+target_sources(BanjoRecompiled PRIVATE ${ICNS_FILE})
+
+# Ensure BanjoRecompiled depends on create_icns
+add_dependencies(BanjoRecompiled create_icns)
+
+# Configure Info.plist
+configure_file(${CMAKE_SOURCE_DIR}/.github/macos/Info.plist.in ${CMAKE_BINARY_DIR}/Info.plist @ONLY)
+
+# Install the app bundle
+install(TARGETS BanjoRecompiled BUNDLE DESTINATION .)
+
+# Ensure the entitlements file exists
+if(NOT EXISTS ${ENTITLEMENTS_FILE})
+    message(FATAL_ERROR "Entitlements file not found at ${ENTITLEMENTS_FILE}")
+endif()
+
+# Post-build steps for macOS bundle
+add_custom_command(TARGET BanjoRecompiled POST_BUILD
+    # Copy and fix frameworks first
+    COMMAND ${CMAKE_COMMAND} -D CMAKE_BUILD_TYPE=$<CONFIG> -D CMAKE_GENERATOR=${CMAKE_GENERATOR} -P ${CMAKE_SOURCE_DIR}/.github/macos/fixup_bundle.cmake
+
+    # Copy all resources
+    COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_SOURCE_DIR}/assets ${CMAKE_BINARY_DIR}/temp_assets
+    COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_BINARY_DIR}/temp_assets/scss
+    COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_BINARY_DIR}/temp_assets $<TARGET_BUNDLE_DIR:BanjoRecompiled>/Contents/Resources/assets
+    COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_BINARY_DIR}/temp_assets
+
+    # Copy controller database
+    COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_SOURCE_DIR}/recompcontrollerdb.txt $<TARGET_BUNDLE_DIR:BanjoRecompiled>/Contents/Resources/
+
+    # Set RPATH
+    COMMAND install_name_tool -add_rpath "@executable_path/../Frameworks/" $<TARGET_BUNDLE_DIR:BanjoRecompiled>/Contents/MacOS/BanjoRecompiled
+
+    # Sign the bundle
+    COMMAND codesign --verbose=4 --options=runtime --no-strict --sign - --entitlements ${ENTITLEMENTS_FILE} --deep --force $<TARGET_BUNDLE_DIR:BanjoRecompiled>
+
+    COMMENT "Performing post-build steps for macOS bundle"
+    VERBATIM
+)

.github/macos/entitlements.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.security.cs.allow-jit</key>
+	<true/>
+	<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+	<true/>
+	<key>com.apple.security.cs.disable-executable-page-protection</key>
+	<true/>
+	<key>com.apple.security.cs.disable-library-validation</key>
+	<true/>
+</dict>
+</plist>

.github/macos/fixup_bundle.cmake

@@ -0,0 +1,44 @@
+include(BundleUtilities)
+
+# Check for pkgx installation
+find_program(PKGX_EXECUTABLE pkgx)
+
+# Xcode generator puts the build type in the build directory
+set(BUILD_PREFIX "")
+if (CMAKE_GENERATOR STREQUAL "Xcode")
+    set(BUILD_PREFIX "${CMAKE_BUILD_TYPE}/")
+endif()
+
+# Use generator expressions to get the absolute path to the bundle
+set(APPS "${BUILD_PREFIX}BanjoRecompiled.app/Contents/MacOS/BanjoRecompiled")
+
+# Set up framework search paths
+set(DIRS "${BUILD_PREFIX}BanjoRecompiled.app/Contents/Frameworks")
+
+# Detect if we're using pkgx
+if(PKGX_EXECUTABLE)
+    message(STATUS "pkgx detected, adding pkgx directories to framework search path")
+    list(APPEND DIRS "$ENV{HOME}/.pkgx/")
+endif()
+
+# Convert all paths to absolute paths
+file(REAL_PATH ${APPS} APPS)
+
+set(RESOLVED_DIRS "")
+foreach(DIR IN LISTS DIRS)
+    # Handle home directory expansion
+    string(REPLACE "~" "$ENV{HOME}" DIR "${DIR}")
+    # Convert to absolute path, but don't fail if directory doesn't exist
+    if(EXISTS "${DIR}")
+        file(REAL_PATH "${DIR}" RESOLVED_DIR)
+        list(APPEND RESOLVED_DIRS "${RESOLVED_DIR}")
+    endif()
+endforeach()
+
+# Debug output
+message(STATUS "Bundle fixup paths:")
+message(STATUS "  App: ${APPS}")
+message(STATUS "  Search dirs: ${RESOLVED_DIRS}")
+
+# Fix up the bundle
+fixup_bundle("${APPS}" "" "${RESOLVED_DIRS}")

.github/macos/ld64

@@ -0,0 +1,73 @@
+#!/usr/bin/python3
+"""
+Custom ld64 wrapper for macOS
+
+This script wraps the standard macOS linker (/usr/bin/ld) to modify executable memory
+protection flags in the resulting Mach-O binary. It works in three stages:
+
+1. First, it passes through all arguments to the regular macOS linker to create the binary
+2. Then, it parses command line arguments to identify output file and segment protection flags
+3. Finally, it modifies the output binary's Mach-O headers to ensure segments (particularly __TEXT)
+   have the maximum protection flags (rwx) we specify, even if the default macOS linker would restrict them
+
+This is necessary because macOS restricts writable+executable memory by default,
+but certain applications need this capability for dynamic code generation or JIT compilation.
+
+Usage: Same as the standard ld64 linker, with the added benefit that -segprot options
+will have their max_prot values properly preserved in the output binary.
+"""
+
+import sys
+import subprocess
+from itertools import takewhile
+from macholib import MachO, ptypes
+
+def parse_rwx(text):
+    return ('r' in text and 1) | ('w' in text and 2) | ('x' in text and 4)
+
+def apply_maxprots(path, maxprots):
+    mach = MachO.MachO(path)
+    header = mach.headers[0]
+    offset = ptypes.sizeof(header.mach_header)
+
+    for cload, ccmd, cdata in header.commands:
+        if not hasattr(ccmd, 'segname'):
+            break
+
+        if hasattr(ccmd.segname, 'to_str'):
+            segname = ccmd.segname.to_str().decode('utf-8').strip('\0')
+        else:
+            segname = ccmd.segname.decode('utf-8').strip('\0')
+
+        if segname in maxprots and ccmd.maxprot != maxprots[segname]:
+            fields = list(takewhile(lambda field: field[0] != 'maxprot', cload._fields_ + ccmd._fields_))
+            index = offset + sum(ptypes.sizeof(typ) for _, typ in fields)
+
+            with open(path, 'r+b') as fh:
+                fh.seek(index)
+                fh.write(bytes([maxprots[segname]]))
+
+        offset += cload.cmdsize
+
+try:
+    subprocess.check_call(['/usr/bin/ld'] + sys.argv[1:])
+except subprocess.CalledProcessError as ex:
+    sys.exit(ex.returncode)
+
+output_file = 'a.out'
+segprots = {'__TEXT': parse_rwx('rwx')}  # maxprot = rwx
+
+i = 1
+while i < len(sys.argv):
+    if sys.argv[i] == '-o' and i + 1 < len(sys.argv):
+        output_file = sys.argv[i + 1]
+        i += 2
+    elif sys.argv[i] == '-segprot' and i + 3 < len(sys.argv):
+        segment = sys.argv[i + 1]
+        maxprot = sys.argv[i + 2]
+        segprots[segment] = parse_rwx(maxprot)
+        i += 4
+    else:
+        i += 1
+
+apply_maxprots(output_file, segprots)

.github/macos/macports.yaml

@@ -0,0 +1,16 @@
+version: '2.10.6'
+prefix: '/opt/local'
+variants:
+  select:
+    - aqua
+    - metal
+  deselect: x11
+ports:
+  - name: libiconv
+    select: universal
+  - name: libsdl2
+    select: universal
+  - name: freetype
+    select: universal
+  - name: clang-18
+  - name: llvm-18

.github/workflows/update-pr-artifacts.yml

@@ -0,0 +1,64 @@
+name: update-pr-artifacts
+on:
+  workflow_run:
+    workflows: [validate-external, validate-internal]
+    types:
+      - completed
+jobs:
+  update-pr-artifacts:
+    runs-on: ubuntu-latest
+    if: (github.event.workflow_run.event == 'pull_request' || github.event.workflow_run.event == 'pull_request_target') && github.event.workflow_run.conclusion == 'success'
+    name: Update PR Artifacts
+    steps:
+      - name: Get PR Number
+        id: pr-number
+        uses: actions/github-script@v6
+        with:
+          result-encoding: string
+          script: |
+            const { owner, repo } = context.repo;
+            
+            const findPRNumber = async () => {
+              const pulls = await github.rest.pulls.list({ owner, repo });
+              for await (const { data } of github.paginate.iterator(pulls)) {
+                for (const pull of data) {
+                  if (pull.head.sha === '${{ github.event.workflow_run.head_sha }}' && pull.user.id === ${{ github.event.sender.id }}) {
+                    return pull.number;
+                  }
+                }
+              }
+
+              return null;
+            };
+
+            const prNumber = await findPRNumber();
+            if (!prNumber) {
+              core.error(`No matching pull request found`);
+            } else {
+              return prNumber;
+            }
+      - name: Create Artifacts Content
+        id: artifacts-content
+        uses: actions/github-script@v6
+        with:
+          result-encoding: string
+          script: |
+            const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: context.payload.workflow_run.id,
+            });
+            
+            const nightlyLinks = artifacts.data.artifacts.reduce((acc, item) => {
+              acc += `- [${item.name}.zip](https://nightly.link/${context.repo.owner}/${context.repo.repo}/actions/artifacts/${item.id}.zip)\n`;
+              return acc;
+            }, '### Build Artifacts\n');
+      
+            return nightlyLinks;
+      - name: Update PR Description
+        uses: garrettjoecox/pr-section@3.1.0
+        with:
+            section-name: 'artifacts'
+            repo-token: '${{ secrets.GITHUB_TOKEN }}'
+            pr-number: ${{ steps.pr-number.outputs.result }}
+            section-value: '${{ steps.artifacts-content.outputs.result }}'

.github/workflows/validate-external.yml

@@ -0,0 +1,19 @@
+name: validate-external
+on:
+  pull_request_target:
+    types: [opened, synchronize]
+jobs:
+  authorize:
+    if: github.repository != github.event.pull_request.head.repo.full_name
+    environment:
+      ${{ github.event_name == 'pull_request_target' &&
+      github.event.pull_request.head.repo.full_name != github.repository &&
+      'external' || 'internal' }}
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo ✓
+  build:
+    needs: authorize
+    uses: ./.github/workflows/validate.yml
+    secrets:
+      ZRE_REPO_WITH_PAT: ${{ secrets.ZRE_REPO_WITH_PAT }}

.github/workflows/validate-internal.yml

@@ -0,0 +1,12 @@
+name: validate-internal
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize]
+jobs:
+  build:
+    if: github.event_name == 'push' || github.repository == github.event.pull_request.head.repo.full_name
+    uses: ./.github/workflows/validate.yml
+    secrets: inherit

.github/workflows/validate.yml

@@ -0,0 +1,411 @@
+name: validate
+on:
+  workflow_call:
+    inputs:
+      SDL2_VERSION:
+        type: string
+        required: false
+        default: '2.30.3'
+      N64RECOMP_COMMIT:
+        type: string
+        required: false
+        default: '2b6f05688de2abc7d86da5b4a89b84c2c6acbabe'
+    secrets:
+      SECRET_NAME:
+        required: true
+      SECRET_TOKEN:
+        required: true
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  build-linux:
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        type: [ Debug, Release ]
+        os: [ ubuntu-22.04 ]
+    name: ubuntu-22.04 (x64, ${{ matrix.type }}, Native)
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          submodules: recursive
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2
+        with:
+          key: ${{ matrix.os }}-banjo-ccache-${{ matrix.type }}-x64-${{ inputs.N64RECOMP_COMMIT }}
+      - name: Get extra dependencies
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ secrets.SECRET_NAME }}
+          token: ${{ secrets.SECRET_TOKEN }}
+          path: extra
+      - name: Install Linux Dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y ninja-build libgtk-3-dev lld llvm clang-15 libfuse2
+          
+          # Install SDL2
+          echo ::group::install SDL2
+
+          # Enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+
+          wget https://github.com/libsdl-org/SDL/releases/download/release-${{ inputs.SDL2_VERSION }}/SDL2-${{ inputs.SDL2_VERSION }}.tar.gz
+          tar -xzf SDL2-${{ inputs.SDL2_VERSION }}.tar.gz
+          cd SDL2-${{ inputs.SDL2_VERSION }}
+          ./configure
+          make -j 10
+          sudo make install
+          sudo cp -av /usr/local/lib/libSDL* /lib/x86_64-linux-gnu/
+          echo ::endgroup::
+      - name: Build N64Recomp & RSPRecomp
+        run: |
+          git clone https://github.com/Mr-Wiseguy/N64Recomp.git --recurse-submodules N64RecompSource
+          cd N64RecompSource
+          git checkout ${{ inputs.N64RECOMP_COMMIT }}
+          git submodule update --init --recursive
+          
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          # Build N64Recomp & RSPRecomp
+          cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_CXX_COMPILER=g++-11 -DCMAKE_C_COMPILER=gcc-11 -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build
+          cmake --build cmake-build --config Release --target N64RecompCLI -j $(nproc)
+          cmake --build cmake-build --config Release --target RSPRecomp -j $(nproc)
+          
+          # Copy N64Recomp & RSPRecomp to root directory
+          cp cmake-build/N64Recomp ..
+          cp cmake-build/RSPRecomp ..
+      - name: Run N64Recomp & RSPRecomp
+        run: |
+          # Copy extra dependencies to root directory
+          cp extra/* .
+          
+          ./N64Recomp banjo.us.rev0.toml
+          ./RSPRecomp n_aspMain.us.rev0.toml
+      - name: Build BanjoRecomp
+        run: |-
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          cmake -DCMAKE_BUILD_TYPE=${{ matrix.type }} -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_CXX_COMPILER=clang++-15 -DCMAKE_C_COMPILER=clang-15 -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build -DPATCHES_C_COMPILER=clang-15 -DPATCHES_LD=ld.lld-15
+          cmake --build cmake-build --config ${{ matrix.type }} --target BanjoRecompiled -j $(nproc)
+      - name: Prepare Archive
+        run: |
+          mv cmake-build/BanjoRecompiled BanjoRecompiled
+          tar -czf BanjoRecompiled.tar.gz BanjoRecompiled assets/ recompcontrollerdb.txt
+      - name: Archive BanjoRecomp
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-${{ runner.os }}-X64-${{ matrix.type }}
+          path: BanjoRecompiled.tar.gz
+  build-linux-arm64:
+    runs-on: ubuntu-22.04-arm
+    strategy:
+      matrix:
+        type: [ Debug, Release ]
+        os: [ ubuntu-22.04 ]
+    name: ${{ matrix.os }} (arm64, ${{ matrix.type }}, Native)
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          submodules: recursive
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2
+        with:
+          key: ${{ matrix.os }}-banjo-ccache-${{ matrix.type }}-arm64-${{ inputs.N64RECOMP_COMMIT }}
+      - name: Install Linux Dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y ninja-build libgtk-3-dev lld llvm clang-15 libfuse2
+          
+          # Install SDL2
+          echo ::group::install SDL2
+
+          # Enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+
+          wget https://github.com/libsdl-org/SDL/releases/download/release-${{ inputs.SDL2_VERSION }}/SDL2-${{ inputs.SDL2_VERSION }}.tar.gz
+          tar -xzf SDL2-${{ inputs.SDL2_VERSION }}.tar.gz
+          cd SDL2-${{ inputs.SDL2_VERSION }}
+          ./configure
+          make -j 10
+          sudo make install
+          sudo cp -av /usr/local/lib/libSDL* /lib/aarch64-linux-gnu/
+          echo ::endgroup::
+      - name: Get extra dependencies
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ secrets.SECRET_NAME }}
+          token: ${{ secrets.SECRET_TOKEN }}
+          path: extra
+      - name: Build N64Recomp & RSPRecomp
+        run: |
+          git clone https://github.com/Mr-Wiseguy/N64Recomp.git --recurse-submodules N64RecompSource
+          cd N64RecompSource
+          git checkout ${{ inputs.N64RECOMP_COMMIT }}
+          git submodule update --init --recursive
+          
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          # Build N64Recomp & RSPRecomp
+          cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_CXX_COMPILER=g++-11 -DCMAKE_C_COMPILER=gcc-11 -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build
+          cmake --build cmake-build --config Release --target N64RecompCLI -j $(nproc)
+          cmake --build cmake-build --config Release --target RSPRecomp -j $(nproc)
+          
+          # Copy N64Recomp & RSPRecomp to root directory
+          cp cmake-build/N64Recomp ..
+          cp cmake-build/RSPRecomp ..
+      - name: Run N64Recomp & RSPRecomp
+        run: |
+          # Copy extra dependencies to root directory
+          cp extra/* .
+          
+          ./N64Recomp banjo.us.rev0.toml
+          ./RSPRecomp n_aspMain.us.rev0.toml
+      - name: Build BanjoRecomp
+        run: |-
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          cmake -DCMAKE_BUILD_TYPE=${{ matrix.type }} -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_CXX_COMPILER=clang++-15 -DCMAKE_C_COMPILER=clang-15 -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build
+          cmake --build cmake-build --config ${{ matrix.type }} --target BanjoRecompiled -j $(nproc)
+      - name: Prepare Archive
+        run: |
+          mv cmake-build/BanjoRecompiled BanjoRecompiled
+          tar -czf BanjoRecompiled.tar.gz BanjoRecompiled assets/ recompcontrollerdb.txt
+      - name: Archive BanjoRecomp
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-${{ runner.os }}-ARM64-${{ matrix.type }}
+          path: BanjoRecompiled.tar.gz
+  build-linux-flatpak:
+    runs-on: ubuntu-latest
+    env:
+      FLATPAK_ID: io.github.banjorecomp.banjorecomp
+      FREEDESKTOP_VERSION: 25.08
+      LLVM_VERSION: 20
+    strategy:
+      matrix:
+        type: [ Debug, Release ]
+        os: [ ubuntu-latest ]
+    name: ${{ matrix.os }} (x64, ${{ matrix.type }}, Flatpak)
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          submodules: recursive
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2
+        with:
+          key: ${{ matrix.os }}-banjo-ccache-${{ matrix.type }}-x64-${{ inputs.N64RECOMP_COMMIT }}
+      - name: Install Linux Dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y flatpak-builder ccache lld
+
+      - name: Get extra dependencies
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ secrets.SECRET_NAME }}
+          token: ${{ secrets.SECRET_TOKEN }}
+          path: extra
+
+      - name: Prepare Flatpak
+        run: |
+          flatpak --user remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
+          flatpak --user install -y flathub org.freedesktop.Sdk//${{ env.FREEDESKTOP_VERSION }}
+          flatpak --user install -y flathub org.freedesktop.Sdk.Extension.llvm${{ env.LLVM_VERSION }}//${{ env.FREEDESKTOP_VERSION }}
+
+      - name: Build BanjoRecomp
+        run: |-
+          cp extra/* .
+          export CCACHE_DIR=/tmp/ccache
+          git config --global protocol.file.allow always
+          make -C patches CC=clang LD=ld.lld
+          flatpak-builder --user --force-clean --install-deps-from=flathub --repo=repo --ccache builddir ./flatpak/${{ env.FLATPAK_ID }}.json
+          flatpak build-bundle repo ./${{ env.FLATPAK_ID }}.flatpak ${{ env.FLATPAK_ID }} --runtime-repo=https://flathub.org/repo/flathub.flatpakrepo
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-Flatpak-X64-${{ matrix.type }}
+          path: ./${{ env.FLATPAK_ID }}.flatpak
+  build-windows:
+    runs-on: windows-latest
+    strategy:
+      matrix:
+        type: [ Debug, RelWithDebInfo ]
+    name: windows (${{ matrix.type }})
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          submodules: recursive
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2
+        with:
+          key: ${{ runner.os }}-banjo-ccache-${{ matrix.type }}
+      - name: Install Windows Dependencies
+        run: |
+          choco install ninja
+          Remove-Item -Path "C:\ProgramData\Chocolatey\bin\ccache.exe" -Force -ErrorAction SilentlyContinue
+      - name: Download portable LLVM
+        run: |
+          $ProgressPreference = 'SilentlyContinue'
+          Invoke-WebRequest -Uri "https://github.com/llvm/llvm-project/releases/download/llvmorg-19.1.3/LLVM-19.1.3-Windows-X64.tar.xz" -OutFile "LLVM.tar.xz"
+          New-Item -ItemType Directory -Path portable-llvm > $null
+          7z x LLVM.tar.xz
+          7z x LLVM.tar -oportable-llvm
+      - name: Configure Developer Command Prompt
+        uses: ilammy/msvc-dev-cmd@v1
+      - name: Get extra dependencies
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ secrets.SECRET_NAME }}
+          token: ${{ secrets.SECRET_TOKEN }}
+          path: extra
+      - name: Build N64Recomp & RSPRecomp
+        run: |
+          git clone https://github.com/Mr-Wiseguy/N64Recomp.git --recurse-submodules N64RecompSource
+          cd N64RecompSource
+          git checkout ${{ inputs.N64RECOMP_COMMIT }}
+          git submodule update --init --recursive
+
+          # enable ccache
+          set $env:PATH="$env:USERPROFILE/.cargo/bin;$env:PATH"
+          $cpuCores = (Get-CimInstance -ClassName Win32_Processor).NumberOfLogicalProcessors
+
+          cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build
+          cmake --build cmake-build --config Release --target N64RecompCLI -j $cpuCores
+          cmake --build cmake-build --config Release --target RSPRecomp -j $cpuCores
+
+          # Copy N64Recomp & RSPRecomp to root directory
+          cp cmake-build/N64Recomp.exe ..
+          cp cmake-build/RSPRecomp.exe ..
+      - name: Run N64Recomp & RSPRecomp
+        run: |
+          # Copy extra dependencies to root directory
+          cp extra/* .
+
+          ./N64Recomp banjo.us.rev0.toml
+          ./RSPRecomp n_aspMain.us.rev0.toml
+      - name: Build BanjoRecomp
+        run: |-
+          # enable ccache
+          set $env:PATH="$env:USERPROFILE/.cargo/bin;$env:PATH"
+          $cpuCores = (Get-CimInstance -ClassName Win32_Processor).NumberOfLogicalProcessors
+
+          # remove LLVM from PATH so it doesn't overshadow the one provided by VS
+          $env:PATH = ($env:PATH -split ';' | Where-Object { $_ -ne 'C:\Program Files\LLVM\bin' }) -join ';'
+
+          cmake -DCMAKE_BUILD_TYPE=${{ matrix.type }} -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_CXX_COMPILER=clang-cl -DCMAKE_C_COMPILER=clang-cl -DCMAKE_MAKE_PROGRAM=ninja -DPATCHES_C_COMPILER="..\portable-llvm\LLVM-19.1.3-Windows-X64\bin\clang" -DPATCHES_LD="..\portable-llvm\LLVM-19.1.3-Windows-X64\bin\ld.lld" -G Ninja -S . -B cmake-build -DCMAKE_CXX_FLAGS="-Xclang -fexceptions -Xclang -fcxx-exceptions"
+          cmake --build cmake-build --config ${{ matrix.type }} --target BanjoRecompiled -j $cpuCores
+        env:
+          SDL2_VERSION: ${{ inputs.SDL2_VERSION }}
+      - name: Prepare Archive
+        run: |
+          Move-Item -Path "cmake-build/BanjoRecompiled.exe" -Destination "BanjoRecompiled.exe"
+          Move-Item -Path "cmake-build/dxcompiler.dll" -Destination "dxcompiler.dll"
+          Move-Item -Path "cmake-build/dxil.dll" -Destination "dxil.dll"
+          Move-Item -Path "cmake-build/SDL2.dll" -Destination "SDL2.dll"
+          Move-Item -Path "cmake-build/BanjoRecompiled.pdb" -Destination "BanjoRecompiled.pdb"
+      - name: Archive BanjoRecomp
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-${{ runner.os }}-${{ matrix.type }}
+          path: |
+            BanjoRecompiled.exe
+            dxcompiler.dll
+            dxil.dll
+            SDL2.dll
+            assets/
+            recompcontrollerdb.txt
+      - name: Archive Debug Files
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-PDB-${{ matrix.type }}
+          path: |
+            BanjoRecompiled.pdb
+  build-macos:
+    runs-on: macos-14
+    strategy:
+      matrix:
+        type: [ Debug, Release ]
+    name: macos (x64, arm64, ${{ matrix.type }})
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          submodules: recursive
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1.2
+        with:
+          key: ${{ runner.os }}-banjo-ccache-${{ matrix.type }}
+      - name: Homebrew Setup
+        run: |
+          brew install ninja
+          brew uninstall --ignore-dependencies libpng freetype
+      - name: MacPorts Setup
+        uses: melusina-org/setup-macports@v1
+        id: 'macports'
+        with:
+          parameters: '.github/macos/macports.yaml'
+      - name: Get extra dependencies
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ secrets.SECRET_NAME }}
+          token: ${{ secrets.SECRET_TOKEN }}
+          path: extra
+      - name: Build N64Recomp & RSPRecomp
+        run: |
+          git clone https://github.com/Mr-Wiseguy/N64Recomp.git --recurse-submodules N64RecompSource
+          cd N64RecompSource
+          git checkout ${{ inputs.N64RECOMP_COMMIT }}
+          git submodule update --init --recursive
+          
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          # Build N64Recomp & RSPRecomp
+          cmake -DCMAKE_BUILD_TYPE=Release -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build
+          cmake --build cmake-build --config Release --target N64Recomp -j $(sysctl -n hw.ncpu)
+          cmake --build cmake-build --config Release --target RSPRecomp -j $(sysctl -n hw.ncpu)
+          
+          # Copy N64Recomp & RSPRecomp to root directory
+          cp cmake-build/N64Recomp ..
+          cp cmake-build/RSPRecomp ..
+      - name: Run N64Recomp & RSPRecomp
+        run: |
+          # Copy extra dependencies to root directory
+          cp extra/* .
+          
+          ./N64Recomp banjo.us.rev0.toml
+          ./RSPRecomp n_aspMain.us.rev0.toml
+      - name: Build BanjoRecomp
+        run: |-
+          # enable ccache
+          export PATH="/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH"
+          
+          cmake -DCMAKE_BUILD_TYPE=${{ matrix.type }} -DCMAKE_CXX_COMPILER_LAUNCHER=ccache -DCMAKE_C_COMPILER_LAUNCHER=ccache -DCMAKE_MAKE_PROGRAM=ninja -G Ninja -S . -B cmake-build \
+          -DPATCHES_LD=/opt/local/bin/ld.lld-mp-18 -DCMAKE_AR=/opt/local/bin/llvm-ar-mp-18 -DPATCHES_C_COMPILER=/opt/local/bin/clang-mp-18 \
+          -DCMAKE_OSX_ARCHITECTURES="x86_64;arm64"
+          cmake --build cmake-build --config ${{ matrix.type }} --target BanjoRecompiled -j $(sysctl -n hw.ncpu)
+      - name: Prepare Archive
+        run: |
+          mv cmake-build/BanjoRecompiled.app BanjoRecompiled.app
+          zip -r -y BanjoRecompiled.zip BanjoRecompiled.app
+      - name: Archive BanjoRecomp
+        uses: actions/upload-artifact@v4
+        with:
+          name: BanjoRecompiled-${{ runner.os }}-${{ matrix.type }}
+          path: BanjoRecompiled.zip

.gitignore

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

.gitmodules

@@ -1,24 +1,15 @@
 [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
-[submodule "lib/slot_map"]
-	path = lib/slot_map
-	url = https://github.com/SergeyMakeev/slot_map
 [submodule "lib/bk-decomp"]
 	path = lib/bk-decomp
 	url = https://gitlab.com/banjo.decomp/banjo-kazooie
 [submodule "BanjoRecompSyms"]
 	path = BanjoRecompSyms
 	url = https://github.com/BanjoRecomp/BanjoRecompSyms
+[submodule "lib/RecompFrontend"]
+	path = lib/RecompFrontend
+	url = https://github.com/N64Recomp/RecompFrontend

BUILDING.md

@@ -0,0 +1,74 @@
+# Building Guide
+
+This guide will help you build the project on your local machine. The process will require you to provide a decompressed ROM of the US version of the game.
+
+These steps cover: decompressing the ROM, running the recompiler and finally building the project.
+
+## 1. Clone the BanjoRecomp Repository
+This project makes use of submodules so you will need to clone the repository with the `--recurse-submodules` flag.
+
+```bash
+git clone --recurse-submodules
+# if you forgot to clone with --recurse-submodules
+# cd /path/to/cloned/repo && git submodule update --init --recursive
+```
+
+## 2. Install Dependencies
+
+### Linux
+For Linux the instructions for Ubuntu are provided, but you can find the equivalent packages for your preferred distro.
+
+```bash
+# For Ubuntu, simply run:
+sudo apt-get install cmake ninja-build libsdl2-dev libgtk-3-dev lld llvm clang
+```
+
+### Windows
+You will need to install [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/).
+In the setup process you'll need to select the following options and tools for installation:
+- Desktop development with C++
+- C++ Clang Compiler for Windows
+- C++ CMake tools for Windows
+
+The other tool necessary will be `make` which can be installe via [Chocolatey](https://chocolatey.org/):
+```bash
+choco install make
+```
+
+## 3. Decompressing the target ROM
+You will need to decompress the NTSC-U 1.0 N64 Banjo-Kazooie ROM (sha1: d6133ace5afaa0882cf214cf88daba39e266c078) before running the recompiler.
+
+The most straightforward way to do this is to set up the [Banjo-Kazooie decompilation](https://gitlab.com/banjo.decomp/banjo-kazooie), which will decompress the ROM when building. Alternatively, you can run the [bk_rom_compressor tool](https://github.com/MittenzHugg/bk_rom_compressor) directly, which is what the decompilation uses to decompress the ROM.
+
+Regardless of which method you use, copy the decompressed ROM to the root of the BanjoRecomp repository with this filename:
+- `banjo.us.v10.decompressed.z64`
+
+## 4. Generating the C code
+
+Now that you have the required files, you must build [N64Recomp](https://github.com/N64Recomp/N64Recomp) and run it to generate the C code to be compiled. The building instructions can be found [here](https://github.com/N64Recomp/N64Recomp?tab=readme-ov-file#building). That will build the executables: `N64Recomp` and `RSPRecomp` which you should copy to the root of the BanjoRecomp repository.
+
+After that, go back to the repository root, and run the following commands:
+```bash
+./N64Recomp banjo.us.rev0.toml
+./RSPRecomp n_aspMain.us.rev0.toml
+```
+
+## 5. Building the Project
+
+Finally, you can build the project! :rocket:
+
+On Windows, you can open the repository folder with Visual Studio, and you'll be able to `[build / run / debug]` the project from there.
+
+If you prefer the command line or you're on a Unix platform you can build the project using CMake:
+
+```bash
+cmake -S . -B build-cmake -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_C_COMPILER=clang -G Ninja -DCMAKE_BUILD_TYPE=Release # or Debug if you want to debug
+cmake --build build-cmake --target BanjoRecompiled -j$(nproc) --config Release # or Debug
+```
+
+## 6. Success
+
+Voilà! You should now have a `BanjoRecompiled` executable in the build directory! If you used Visual Studio this will be `out/build/x64-[Configuration]` and if you used the provided CMake commands then this will be `build-cmake`. You will need to run the executable out of the root folder of this project or copy the assets folder to the build folder to run it.
+
+> [!IMPORTANT]
+> In the game itself, you should be using a standard ROM, not the decompressed one.

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,84 +140,48 @@ 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
-    ${CMAKE_SOURCE_DIR}/src/game/recomp_actor_api.cpp
+    ${CMAKE_SOURCE_DIR}/src/game/recomp_extension_api.cpp
     ${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/N64ModernRuntime/thirdparty/sse2neon
     ${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/freetype-windows-binaries/include
+    ${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/rt64/src/contrib/nativefiledialog-extended/src/include
-    ${CMAKE_SOURCE_DIR}/lib/slot_map/slot_map
-    ${CMAKE_BINARY_DIR}/shaders
+    ${CMAKE_SOURCE_DIR}/lib/SlotMap
     ${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,12 +241,12 @@ 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_link_libraries(BanjoRecompiled PRIVATE SDL2)
+    target_sources(BanjoRecompiled PRIVATE ${CMAKE_SOURCE_DIR}/icons/app.rc)
+    target_link_libraries(BanjoRecompiled PRIVATE SDL2 Winmm.lib)
 endif()
 
 if (APPLE)
@@ -310,15 +266,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 +298,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 +330,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")

README.md

@@ -0,0 +1,133 @@
+# Banjo: Recompiled
+Banjo: Recompiled is a project that uses [N64: Recompiled](https://github.com/N64Recomp/N64Recomp) to **statically recompile** Banjo-Kazooie into a native port with many new features, enhancements, and extensive mod support. This project uses [RT64](https://github.com/rt64/rt64) as the rendering engine to provide graphical enhancements.
+
+### [Check out the latest release here](https://github.com/BanjoRecomp/BanjoRecomp/releases/latest).
+
+Join the [N64: Recompiled Community Discord](https://discord.gg/AWZThJ4dPf) to discuss this and other N64: Recompiled projects!
+
+[![Discord Invitation](https://discordapp.com/api/guilds/1374083583739826328/widget.png?style=banner2 'N64 Recomp')](https://discord.gg/AWZThJ4dPf)
+
+### **This repository and its releases do not contain game assets. The original game is required to build or run this project.**
+
+## Table of Contents
+* [System Requirements](#system-requirements)
+* [Features](#features)
+  * [Plug and Play](#plug-and-play)
+  * [Fully Intact N64 Effects](#fully-intact-n64-effects)
+  * [Faithful Audio](#faithful-audio)
+  * [Easy-to-Use Menus](#easy-to-use-menus)
+  * [High Framerate Support](#high-framerate-support)
+  * [Widescreen and Ultrawide Support](#widescreen-and-ultrawide-support)
+  * [Mod Support](#mod-support)
+  * [Dual Analog Camera](#dual-analog-camera)
+  * [Note Saving](#note-saving)
+  * [Low Input Lag](#low-input-lag)
+  * [Instant Load Times](#instant-load-times)
+  * [Linux and Steam Deck Support](#linux-and-steam-deck-support)
+* [Planned Features](#planned-features)
+* [FAQ](#faq)
+* [Known Issues](#known-issues)
+* [Building](#building)
+* [Libraries Used and Projects Referenced](#libraries-used-and-projects-referenced)
+
+## System Requirements
+A GPU supporting Direct3D 12.0 (Shader Model 6), Vulkan 1.2, or Metal Argument Buffers Tier 2 support is required to run this project. The oldest GPUs that should be supported for each vendor are:
+* GeForce GT 630
+* Radeon HD 7750 (the one from 2012, not to be confused with the RX 7000 series) and newer
+* Intel HD 510 (Skylake)
+* A Mac with Apple Silicon or an Intel 7th Gen CPU with MacOS 13.0+
+
+On x86-64 PCs, a CPU supporting the SSE4.1 instruction set is also required (Intel Core 2 Penryn series or AMD Bulldozer and newer). ARM64 builds will work on any ARM64 CPU.
+
+If you have issues with crashes on startup, make sure your graphics drivers are fully up to date. 
+
+## Features
+
+#### Plug and Play
+Simply provide your copy of the North American 1.0 version of the game in the main menu and start playing! This project will automatically load assets from the provided copy, so there is no need to go through a separate extraction step or build the game yourself.
+
+#### Fully Intact N64 Effects
+All advanced graphical effects, such as the jigsaw puzzle screen transition and Bottles' Moving Picture Game are fully intact and have been adapted for widescreen and high framerates. Fine details such as the game's original mipmapping preserved with a high degree of accuracy.
+
+#### Faithful Audio
+Music and sounds are perfectly faithful to the original N64 version of game, with all audio processing intact and no popping or stuttering. Scenes that synchronize audio to visuals have their timings corrected to ensure they remain synchronized as they did on original hardware.
+
+#### Easy-to-Use Menus
+Gameplay settings, graphics settings, input mappings, and audio settings can all be configured with the in-game config menu. The menus can all be used with mouse, controller, or keyboard for maximum convenience.
+
+#### High Framerate Support
+Play at any framerate you want thanks to functionality provided by RT64! Game objects and terrain, texture scrolling, screen effects, and all HUD elements are all rendered at high framerates. By default, this project is configured to run at your monitor's refresh rate. You can also play at the original framerate of the game if you prefer. **Changing framerate has no effect on gameplay.**
+
+**Note**: External framerate limiters (such as the NVIDIA Control Panel) are known to potentially cause problems, so if you notice any stuttering then turn them off and use the manual framerate slider in the in-game graphics menu instead.
+
+#### Widescreen and Ultrawide Support
+Any aspect ratio is supported, with all effects modded to work correctly in widescreen. The HUD can also be positioned at 16:9 when using ultrawide aspect ratios if preferred. Game models have been extended where necessary to ensure cutscenes work correctly in 16:9 aspect ratio. Cutscenes can also be optionally pillarboxed to 16:9 or the game's original aspect ratio to hide any details that weren't meant to be visible.
+
+#### Mod Support
+Install community made mods and texture packs! Mods can change any part of the game, including adding completely new features and content. You can install mods by simply dragging the mod files onto the game window before starting the game or by clicking the **Install Mods** button in the mod menu. Mods can be toggled in the mod menu, and some mods can be configured there as well.
+
+Many mods are available on the project's Thunderstore page: https://thunderstore.io/c/banjo-recompiled/. The Thunderstore mod manager/r2modman is not required or supported, so simply download the mods directly from the website.
+
+If you're interested in making mods for this project, check out [the mod template](https://github.com/BanjoRecomp/BKRecompModTemplate) and [the modding documentation](https://hackmd.io/fMDiGEJ9TBSjomuZZOgzNg). If you're interested in making texture packs, check out [the RT64 documentation](https://github.com/rt64/rt64/blob/main/TEXTURE-PACKS.md). You can also join the [N64: Recompiled Modding Discord server](https://discord.gg/Z8Nbm455D4).
+
+#### Dual Analog Camera
+Play with a dual analog control for finer camera control! When this option is enabled, the right analog stick will control the camera. Buttons mapped to the right analog stick will still work while crouching, so you can keep the C-buttons mapped to it even when this setting is enabled.
+
+#### Note Saving
+Keep your notes when leaving a level or dying like in later releases of the game!
+
+This setting can be turned off to restore the N64 version's note score mechanic. Changing this setting will only take effect when returning to Grunty's Lair or restarting the game.
+
+#### Low Input Lag
+This project has been optimized to have as little input lag as possible, making the game feel more responsive than ever!
+
+#### Instant Load Times
+Saving and loading files, going from place to place, and pausing all happen in the blink of an eye thanks to the game running natively on modern hardware.
+
+#### Linux and Steam Deck Support
+A Linux binary as well as a Flatpak is available for playing on most up-to-date distros, including on the Steam Deck.
+
+To play on Steam Deck, extract the Linux build onto your deck. Then, in desktop mode, right click the BanjoRecompiled executable file and select "Add to Steam". From there, you can return to Gaming mode and configure the controls as needed.
+
+## Planned Features
+* Ray Tracing via RT64
+
+## FAQ
+
+#### What is static recompilation?
+Static recompilation is the process of automatically translating an application from one platform to another. For more details, check out the full description of how this project's recompilation works here: [N64: Recompiled](https://github.com/Mr-Wiseguy/N64Recomp).
+
+#### How is this related to the decompilation project?
+Unlike N64 ports in the past, this project is not based on the source code provided by a decompilation of the game. This is because static recompilation bypasses the need for decompiled source code when making a port, allowing ports to be made **without source code**. However, the reverse engineering work done by the decompilation team was invaluable for providing some of the enhancements featured in this project. For this reason, the project uses headers and some functions from the decompilation project in order to make modifications to the game. Many thanks to the decompilation team for all of the hard work they've done.
+
+#### Where is the savefile stored?
+- Windows: `%LOCALAPPDATA%\BanjoRecompiled\saves`
+- Linux: `~/.config/BanjoRecompiled/saves`
+- macOS: `~/Library/Application Support/BanjoRecompiled/saves`
+
+#### How do I choose a different ROM?
+**You don't.** This project is **only** a port of Banjo-Kazooie, and it will only accept one specific ROM: the US 1.0 version of the N64 release of Banjo-Kazooie. ROMs in formats other than .z64 will be automatically converted, as long as it is the correct ROM. **This is not an emulator, and it cannot run any arbitrary ROM.**
+
+Instead, you can change the game by installing mods. See the [mod support](#mod-support) section for details.
+
+#### Can you run this project as a portable application?
+Yes, if you place a file named `portable.txt` in the same folder as the executable then this project will run in portable mode. In portable mode, the save files, config files, and mods are placed in the same folder as the executable.
+
+#### Were the duplicate Mumbo token IDs in the original game fixed?
+Yes. The incorrect Mumbo tokens now use previously unused token IDs. This won't affect mods that replace levels.
+
+#### Does note saving have the same issue as the XBLA version where it collects notes during Bottles' puzzles and prevents you from getting 100% completion?
+No. Care has been taken to ensure that notes are not saved during demos. 
+
+## Known Issues
+* Overlays such as MSI Afterburner and other software such as Wallpaper Engine can cause performance issues with this project that prevent the game from rendering correctly. Disabling such software is recommended.
+
+## Building
+Building is not required to play this project, as prebuilt binaries (which do not contain game assets) can be found in the [Releases](https://github.com/BanjoRecomp/BanjoRecomp/releases) section. Instructions on how to build this project can be found in the [BUILDING.md](BUILDING.md) file.
+
+## Libraries Used and Projects Referenced
+* [N64Recomp](https://github.com/N64Recomp/N64Recomp) for statically recompiling the game's code to run natively
+* [RT64](https://github.com/rt64/rt64) for the project's rendering engine
+* [N64ModernRuntime](https://github.com/N64Recomp/N64ModernRuntime) for replacing the original N64 runtime libraries and providing mod support
+* [RecompFrontend](https://github.com/N64Recomp/RecompFrontend) for menus and input handling
+* [Banjo-Kazooie Decompilation](https://gitlab.com/banjo.decomp/banjo-kazooie) for headers and some function definitions, used for making patches or some enhancements

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;

banjo.us.rev0.toml

@@ -4,23 +4,40 @@
 entrypoint = 0x80000400
 # Paths are relative to the location of this config file.
 output_func_path = "RecompiledFuncs"
-symbols_file_path = "BanjoRecompSyms/bk.us.rev0.syms.toml"
 rom_file_path = "banjo.us.v10.decompressed.z64"
+symbols_file_path = "BanjoRecompSyms/bk.us.rev0.syms.toml"
 # elf_path = "banjo.us.v10.elf"
+# use_mdebug = true
+# trace_mode = true
+bss_section_suffix = "_bss"
 
 manual_funcs = [
-    { name = "__n_CSPVoiceHandler", section = ".core1", vram = 0x8025E438, size = 0x684 },
+    { name = "boot___osLeoAbnormalResume", section = ".boot_bk_boot", vram = 0x800037E4, size = 0xE8 },
+    { name = "boot___osLeoResume", section = ".boot_bk_boot", vram = 0x800038CC, size = 0xEC },
+]
+
+mdebug_file_mappings = [
+    { filename = "src/TTC/ch/clam.c", input_section = ".text", output_section = ".TTC" },
+    { filename = "src/TTC/ch/blubber.c", input_section = ".text", output_section = ".TTC" },
+    { filename = "src/TTC/ch/lockup.c", input_section = ".text", output_section = ".TTC" },
+    { filename = "src/TTC/ch/treasure.c", input_section = ".text", output_section = ".TTC" },
+    { filename = "src/SM/ch/attacktutorial.c", input_section = ".text", output_section = ".SM" },
+    { filename = "src/SM/ch/vegetables.c", input_section = ".text", output_section = ".SM" },
 ]
 
 [patches]
-stubs = [
+
+ignored = [
+    "boot_n_aspMainTextStart",
+    "boot_gSPF3DEX_fifoTextStart",
+    "boot_gSPL3DEX_fifoTextStart",
 ]
 
 renamed = [
     "wmemcpy"
 ]
 
-ignored = [
+stubs = [
     # Boot segment libultra duplicates
     "boot___ll_div",
     "boot___ll_lshift",
@@ -32,7 +49,6 @@ ignored = [
     "boot___ull_divremi",
     "boot___ull_rem",
     "boot___ull_rshift",
-    "boot___osInitialize_common",
     "boot_osPiRawStartDma",
     "boot_osPiGetStatus",
     "boot___osSetSR",

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"