Remove requireAsset duplication and centralize css module lookups

requireAsset was copy-pasted identically across cards.ts, item.ts, and
monsters.ts; moved it into vite.ts alongside the other glob helpers.
The css[key] ?? '' workaround for noUncheckedIndexedAccess was also
repeated ad hoc across ~10 components; added cx()/cssClass() in
helpers/css.ts to centralize the safe lookup.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GzLmUWBV6CUEVjoDuTZkAF

Author: nicklemmon

src/components/animated-deck.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react'
 import { motion, AnimatePresence } from 'motion/react'
-import { clsx } from 'clsx'
 import { EmptyDeck } from './empty-deck'
 import css from './deck.module.css'
 
@@ -25,7 +24,7 @@ export function AnimatedDeck({ children }: AnimatedDeckProps) {
   })
 
   return (
-    <div className={clsx({ [css['deck'] ?? '']: true })} data-testid="animated-deck-container">
+    <div className={css['deck']} data-testid="animated-deck-container">
       {childArray.length === 0 && <EmptyDeck />}
       <AnimatePresence>
         {childArray.map((child, index) => {

src/components/button.tsx

@@ -1,4 +1,4 @@
-import { clsx } from 'clsx'
+import { cx } from '../helpers/css'
 import css from './button.module.css'
 
 /** Re-usable button component */
@@ -12,10 +12,11 @@ export function Button({
   variant?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'unstyled'
 } & React.ComponentPropsWithRef<'button'>) {
   const withClsx = (root: string, className?: string) => {
-    return clsx(
+    return cx(
+      css,
       {
-        [css[root] ?? '']: true,
-        [css[variant] ?? '']: true,
+        [root]: true,
+        [variant]: true,
       },
       className,
     )

src/components/card.tsx

@@ -1,8 +1,8 @@
-import { clsx } from 'clsx'
 import { useState, type MouseEvent } from 'react'
 import type { Card } from '../types/cards'
 import cardBackImg from '../images/card-back.webp'
 import swordIcon from '../images/sword.webp'
+import { cx } from '../helpers/css'
 import { StatsRow, StatIcon, StatVal } from './stats'
 import css from './card.module.css'
 
@@ -27,20 +27,21 @@ export function Card({
   const [isHovering, setIsHovering] = useState(false)
 
   const withClsx = (rootClass: string | undefined, additionalClassName?: string | undefined) => {
-    return clsx(
+    return cx(
+      css,
       {
-        [rootClass ?? '']: true,
-        [css['disabled'] ?? '']: status === 'disabled',
-        [css['in-play'] ?? '']: status === 'in-play',
-        [css['idle'] ?? '']: status === 'idle',
-        [css['face-down'] ?? '']: orientation === 'face-down',
-        [css['face-up'] ?? '']: orientation === 'face-up',
-        [css['stacked'] ?? '']: isStacked === true,
-        [css['rarity-0'] ?? '']: rarity === 0,
-        [css['rarity-1'] ?? '']: rarity === 1,
-        [css['rarity-2'] ?? '']: rarity === 2,
-        [css['rarity-3'] ?? '']: rarity === 3,
+        disabled: status === 'disabled',
+        'in-play': status === 'in-play',
+        idle: status === 'idle',
+        'face-down': orientation === 'face-down',
+        'face-up': orientation === 'face-up',
+        stacked: isStacked === true,
+        'rarity-0': rarity === 0,
+        'rarity-1': rarity === 1,
+        'rarity-2': rarity === 2,
+        'rarity-3': rarity === 3,
       },
+      rootClass,
       additionalClassName,
     )
   }

src/components/deck.tsx

@@ -1,15 +1,10 @@
 import React from 'react'
-import { clsx } from 'clsx'
 import { EmptyDeck } from './empty-deck'
 import css from './deck.module.css'
 
 export function Deck({ children }: { children?: React.ReactNode }) {
   return (
-    <div
-      className={clsx({
-        [css['deck'] ?? '']: true,
-      })}
-    >
+    <div className={css['deck']}>
       {React.Children.count(children) === 0 ? (
         <EmptyDeck />
       ) : (

src/components/dialog.tsx

@@ -1,5 +1,5 @@
-import { clsx } from 'clsx'
 import { AnimatePresence, motion } from 'motion/react'
+import { cx } from '../helpers/css'
 import css from './dialog.module.css'
 
 export function Dialog({
@@ -11,9 +11,9 @@ export function Dialog({
   onClose?: () => void
 }) {
   const withStatusClsx = (root: string) =>
-    clsx({
-      [css[root] ?? '']: true,
-      [css['is-open'] ?? '']: open,
+    cx(css, {
+      [root]: true,
+      'is-open': open,
     })
 
   return (

src/components/feedback.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'motion/react'
-import { clsx } from 'clsx'
+import { cx } from '../helpers/css'
 import css from './feedback.module.css'
 
 const FEEDBACK_DURATION = 1.0
@@ -34,11 +34,11 @@ export function Feedback({
       {...(onAnimationComplete ? { onAnimationComplete } : {})}
     >
       <div
-        className={clsx({
-          [css['feedback-text'] ?? '']: true,
-          [css['neutral'] ?? '']: variant === 'neutral',
-          [css['negative'] ?? '']: variant === 'negative',
-          [css['positive'] ?? '']: variant === 'positive',
+        className={cx(css, {
+          'feedback-text': true,
+          neutral: variant === 'neutral',
+          negative: variant === 'negative',
+          positive: variant === 'positive',
         })}
       >
         {variant === 'positive' && '+'}

src/components/item-shop-card.tsx

@@ -1,6 +1,6 @@
-import { clsx } from 'clsx'
 import { AnimatePresence, motion } from 'motion/react'
 import type { Card as CardType } from '../types/cards'
+import { cx } from '../helpers/css'
 import { PriceStatsRow } from './price-stats-row'
 import { Card } from './card'
 import css from './item-shop-card.module.css'
@@ -20,13 +20,14 @@ export function ItemShopCard({
   const disabled = shopStatus === 'unaffordable' || shopStatus === 'purchased'
 
   const withClsx = (rootClass: string | undefined, className?: string | undefined) => {
-    return clsx(
+    return cx(
+      css,
       {
-        [rootClass ?? '']: true,
-        [css['purchased'] ?? '']: shopStatus === 'purchased',
-        [css['unaffordable'] ?? '']: shopStatus === 'unaffordable',
-        [css['affordable'] ?? '']: shopStatus === 'affordable',
+        purchased: shopStatus === 'purchased',
+        unaffordable: shopStatus === 'unaffordable',
+        affordable: shopStatus === 'affordable',
       },
+      rootClass,
       className,
     )
   }

src/components/item-shop-item.tsx

@@ -1,5 +1,5 @@
-import { clsx } from 'clsx'
 import { AnimatePresence, motion } from 'motion/react'
+import { cx } from '../helpers/css'
 import { PriceStatsRow } from './price-stats-row'
 import type { Item } from '../types/items'
 import css from './item-shop-item.module.css'
@@ -20,12 +20,13 @@ export function ItemShopItem({
   className?: string | undefined
 }) {
   const withClsx = (rootClass: string | undefined, className?: string | undefined) => {
-    return clsx(
+    return cx(
+      css,
       {
-        [rootClass ?? '']: true,
-        [css['unaffordable'] ?? '']: shopStatus === 'unaffordable',
-        [css['affordable'] ?? '']: shopStatus === 'affordable',
+        unaffordable: shopStatus === 'unaffordable',
+        affordable: shopStatus === 'affordable',
       },
+      rootClass,
       className,
     )
   }

src/components/stack.tsx

@@ -1,15 +1,16 @@
 import { clsx } from 'clsx'
 import type { Spacing } from '../types/tokens'
+import { cssClass } from '../helpers/css'
 import css from './stack.module.css'
 
 const ALIGN_PROP_VALS = ['left', 'right', 'center'] as const
 
 type AlignProp = (typeof ALIGN_PROP_VALS)[number]
 
 const ALIGN_CLASS_MAP: Record<AlignProp, string> = {
-  left: css['left'] ?? '',
-  right: css['right'] ?? '',
-  center: css['center'] ?? '',
+  left: cssClass(css, 'left'),
+  right: cssClass(css, 'right'),
+  center: cssClass(css, 'center'),
 }
 
 export function Stack({

src/helpers/cards.ts

@@ -1,5 +1,6 @@
 import type { Card } from '../types/cards'
 import { getSound } from './get-sound'
+import { requireAsset } from './vite'
 
 /** Defines a card config. */
 export function defineCard(config: Omit<Card, 'id' | 'artwork' | 'sfx'>) {
@@ -18,13 +19,6 @@ export function requireCard(id: string, deck: readonly Card[]): Card {
   return card
 }
 
-/** Gets a required asset. Throws when the asset is missing. */
-function requireAsset(assets: Record<string, string | undefined>, path: string): string {
-  const asset = assets[path]
-  if (!asset) throw new Error(`Missing required asset: ${path}`)
-  return asset
-}
-
 const CARD_CONFIG_MODULES = import.meta.glob<Omit<Card, 'id' | 'artwork' | 'sfx'>>(
   '../cards/**/config.ts',
   {