feat: save input preference to db

Author: arianrhodsandlot

package.json

@@ -59,6 +59,7 @@
     "swr": "2.3.3",
     "tailwind-merge": "3.0.2",
     "tailwindcss-motion": "1.1.0",
+    "type-fest": "4.37.0",
     "waku": "0.21.23",
     "zod": "3.24.2"
   },

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import type { PartialDeep } from 'type-fest'
 import type { CoreName } from './core'
 import type { PlatformName } from './platform'
 
@@ -7,7 +8,29 @@ export type PlatformSortOrder = 'ascending' | 'descending'
 export interface Preference {
   emulator: {
     core: Partial<Record<CoreName, Record<string, string>>>
-    platform: Record<PlatformName, { core: CoreName; shader?: string }>
+    keyboardMapping: {
+      a: string
+      b: string
+      down: string
+      fastforward: string
+      l1: string
+      l2: string
+      l3: string
+      left: string
+      pause: string
+      r1: string
+      r2: string
+      r3: string
+      rewind: string
+      right: string
+      select: string
+      start: string
+      up: string
+      x: string
+      y: string
+    }
+    platform: Record<PlatformName, { core: CoreName }>
+    shader: string
   }
   ui: {
     libraryCoverType: 'boxart'
@@ -17,6 +40,8 @@ export interface Preference {
   }
 }
 
+export type PreferenceSnippet = PartialDeep<Preference>
+
 export const defaultPreference: Preference = {
   emulator: {
     core: {
@@ -28,6 +53,41 @@ export const defaultPreference: Preference = {
         mgba_skip_bios: 'ON',
       },
     },
+    /**
+    input_player1_a = "x"
+    input_player1_b = "z"
+    input_player1_down = "down"
+    input_player1_l = "q"
+    input_player1_left = "left"
+    input_player1_r = "w"
+    input_player1_right = "right"
+    input_player1_select = "rshift"
+    input_player1_start = "enter"
+    input_player1_up = "up"
+    input_player1_x = "s"
+    input_player1_y = "a"
+     */
+    keyboardMapping: {
+      a: 'x',
+      b: 'z',
+      down: 'down',
+      fastforward: 'space',
+      l1: 'q',
+      l2: '',
+      l3: '',
+      left: 'left',
+      pause: 'esc',
+      r1: 'w',
+      r2: '',
+      r3: '',
+      rewind: 'r',
+      right: 'right',
+      select: 'rshift',
+      start: 'enter',
+      up: 'up',
+      x: 's',
+      y: 'a',
+    },
     platform: {
       arcade: { core: 'fbneo' },
       atari2600: { core: 'stella2014' },

src/constants/preference.ts

@@ -1,14 +1,17 @@
 import { eq, type InferInsertModel } from 'drizzle-orm'
 import { getContextData } from 'waku/middleware/context'
 import { platforms } from '@/constants/platform.ts'
+import { defaultPreference, type PreferenceSnippet } from '@/constants/preference.ts'
 import { userPreferenceTable } from '@/databases/library/schema.ts'
 import { mergePreference } from './utils.ts'
 
 function normalize(preference) {
-  preference.ui.platforms = platforms.map(({ name }) => name).filter((name) => preference.ui.platforms.includes(name))
+  if (preference.ui?.platforms) {
+    preference.ui.platforms = platforms.map(({ name }) => name).filter((name) => preference.ui.platforms.includes(name))
+  }
 }
 
-export async function updatePreference(preference) {
+export async function updatePreference(preference: PreferenceSnippet) {
   const { currentUser, db } = getContextData()
 
   const where = eq(userPreferenceTable.user_id, currentUser.id)
@@ -20,13 +23,11 @@ export async function updatePreference(preference) {
   if (results.length > 0) {
     const [{ emulator, ui }] = results
     const newPreference: any = {}
-    if (emulator) {
-      mergePreference(emulator, preference.emulator)
-      newPreference.emulator = emulator
+    if (preference.emulator) {
+      newPreference.emulator = mergePreference(emulator, preference.emulator)
     }
-    if (ui) {
-      mergePreference(ui, preference.ui)
-      newPreference.ui = ui
+    if (preference.ui) {
+      newPreference.ui = mergePreference(ui, preference.ui)
     }
 
     normalize(newPreference)
@@ -47,5 +48,7 @@ export async function updatePreference(preference) {
       .returning(returning)
   }
 
-  return newPreferenceResults[0]
+  const updatedPreference = structuredClone(defaultPreference)
+  mergePreference(updatedPreference, newPreferenceResults[0])
+  return updatedPreference
 }

src/controllers/update-preference.ts

@@ -1,5 +1,5 @@
 import { inArray, type InferSelectModel } from 'drizzle-orm'
-import { compact, keyBy, mergeWith } from 'es-toolkit'
+import { compact, isNil, isPrimitive, keyBy, mergeWith } from 'es-toolkit'
 import { getContextData } from 'waku/middleware/context'
 import { launchboxGameTable, libretroGameTable } from '../databases/metadata/schema.ts'
 
@@ -45,9 +45,19 @@ export async function getRomsMetadata<T extends RomModelLike[]>(romResults: T) {
 }
 
 export function mergePreference(target: any, source: any) {
-  mergeWith(target, source || {}, (targetValue, sourceValue) => {
-    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+  const safeTarget = target || {}
+  mergeWith(safeTarget, source || {}, (targetValue, sourceValue) => {
+    if (isNil(sourceValue)) {
+      return targetValue
+    }
+    if (Array.isArray(sourceValue)) {
+      return sourceValue
+    }
+    if (isPrimitive(sourceValue)) {
       return sourceValue
     }
+    mergePreference(targetValue, sourceValue)
+    return targetValue
   })
+  return safeTarget
 }

src/controllers/utils.ts

@@ -0,0 +1,33 @@
+import { Code, Select } from '@radix-ui/themes'
+
+export function CoreOptions({ coreOptions }: { coreOptions: { name: string; options: string[] }[] }) {
+  return (
+    <>
+      <h3 className='flex items-center gap-2 py-2 text-lg font-semibold'>
+        <span className='icon-[mdi--wrench]' /> Options
+      </h3>
+      <div className='flex flex-col gap-2 px-6'>
+        {coreOptions.map(({ name, options }) => {
+          return (
+            <label className='flex w-fit items-center gap-4'>
+              <Code>{name}</Code>
+
+              <div>
+                <Select.Root size='3' value={options[0]}>
+                  <Select.Trigger variant='ghost' />
+                  <Select.Content>
+                    {options.map((option) => (
+                      <Select.Item key={option} value={option}>
+                        {option}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Root>
+              </div>
+            </label>
+          )
+        })}
+      </div>
+    </>
+  )
+}

src/pages/library/components/core-options.tsx

@@ -1,12 +1,13 @@
-import { Code, Select } from '@radix-ui/themes'
+import { Select } from '@radix-ui/themes'
 import { useState } from 'react'
 import { coreOptionsMap } from '@/constants/core.ts'
 import { platformMap } from '@/constants/platform.ts'
 import { getPlatformIcon } from '@/utils/rom.ts'
 import { usePreference } from '../hooks/use-preference.ts'
+import { CoreOptions } from './core-options.tsx'
 
 export function EmulatingSettings() {
-  const preference = usePreference()
+  const { preference } = usePreference()
   const [selectedPlatform, setSelectedPlatform] = useState(preference.ui.platforms?.[0])
 
   if (!preference.ui.platforms?.length) {
@@ -58,7 +59,9 @@ export function EmulatingSettings() {
               {platformMap[selectedPlatform].cores.map((core) => (
                 <Select.Item key={core} value={core}>
                   <div className='flex items-center gap-2'>
-                    <span className='icon-[mdi--jigsaw]' />
+                    <div className='flex size-6 items-center justify-center'>
+                      <span className='icon-[mdi--jigsaw] size-5' />
+                    </div>
                     {core}
                   </div>
                 </Select.Item>
@@ -68,31 +71,7 @@ export function EmulatingSettings() {
         </div>
       </label>
 
-      <h3 className='flex items-center gap-2 py-2 text-lg font-semibold'>
-        <span className='icon-[mdi--wrench]' /> Options
-      </h3>
-      <div className='flex flex-col gap-2 px-6'>
-        {coreOptions.map(({ name, options }) => {
-          return (
-            <label className='flex w-fit items-center gap-4'>
-              <Code>{name}</Code>
-
-              <div>
-                <Select.Root size='3' value={options[0]}>
-                  <Select.Trigger variant='ghost' />
-                  <Select.Content>
-                    {options.map((option) => (
-                      <Select.Item key={option} value={option}>
-                        {option}
-                      </Select.Item>
-                    ))}
-                  </Select.Content>
-                </Select.Root>
-              </div>
-            </label>
-          )
-        })}
-      </div>
+      {coreOptions.length > 0 ? <CoreOptions coreOptions={coreOptions} /> : null}
     </div>
   )
 }