feature/boss-sprites-and-badges (#22)

Reviewed-on: TheFurya/nuzlocke-tracker#22
Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>

frontend/src/components/admin/BossBattleFormModal.tsx

@@ -1,11 +1,12 @@
 import { type FormEvent, useState } from 'react'
 import { FormModal } from './FormModal'
-import type { BossBattle, Route } from '../../types/game'
+import type { BossBattle, Game, Route } from '../../types/game'
 import type { CreateBossBattleInput, UpdateBossBattleInput } from '../../types/admin'
 
 interface BossBattleFormModalProps {
   boss?: BossBattle
   routes: Route[]
+  games?: Game[]
   nextOrder: number
   onSubmit: (data: CreateBossBattleInput | UpdateBossBattleInput) => void
   onClose: () => void
@@ -35,6 +36,7 @@ const BOSS_TYPES = [
 export function BossBattleFormModal({
   boss,
   routes,
+  games,
   nextOrder,
   onSubmit,
   onClose,
@@ -54,6 +56,7 @@ export function BossBattleFormModal({
   const [location, setLocation] = useState(boss?.location ?? '')
   const [section, setSection] = useState(boss?.section ?? '')
   const [spriteUrl, setSpriteUrl] = useState(boss?.spriteUrl ?? '')
+  const [gameId, setGameId] = useState(String(boss?.gameId ?? ''))
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault()
@@ -69,6 +72,7 @@ export function BossBattleFormModal({
       location,
       section: section || null,
       spriteUrl: spriteUrl || null,
+      gameId: gameId ? Number(gameId) : null,
     })
   }
 
@@ -173,15 +177,34 @@ export function BossBattleFormModal({
         </div>
       </div>
 
-      <div>
-        <label className="block text-sm font-medium mb-1">Section</label>
-        <input
-          type="text"
-          value={section}
-          onChange={(e) => setSection(e.target.value)}
-          placeholder="e.g. Main Story, Endgame"
-          className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
-        />
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Section</label>
+          <input
+            type="text"
+            value={section}
+            onChange={(e) => setSection(e.target.value)}
+            placeholder="e.g. Main Story, Endgame"
+            className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+          />
+        </div>
+        {games && games.length > 1 && (
+          <div>
+            <label className="block text-sm font-medium mb-1">Game (version exclusive)</label>
+            <select
+              value={gameId}
+              onChange={(e) => setGameId(e.target.value)}
+              className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
+            >
+              <option value="">All games</option>
+              {games.map((g) => (
+                <option key={g.id} value={g.id}>
+                  {g.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
       </div>
 
       <div>