Merge pull request 'Allow multiple games per region in Custom genlocke' (#34) from develop into main

Reviewed-on: #34

.beans/nuzlocke-tracker-na3s--allow-multiple-games-per-region-in-custom-genlocke.md

@@ -0,0 +1,11 @@
+---
+# nuzlocke-tracker-na3s
+title: Allow multiple games per region in Custom genlocke
+status: completed
+type: feature
+priority: normal
+created_at: 2026-03-17T12:29:57Z
+updated_at: 2026-03-17T12:32:05Z
+---
+
+Users want to run multiple games from the same region in a genlocke (e.g., Black + Black 2 in Unova). Change availableRegions computation so custom mode shows all regions, and add a subtle indicator for already-used regions in AddLegDropdown.

frontend/src/pages/NewGenlocke.tsx

@@ -111,8 +111,14 @@ export function NewGenlocke() {
   const enabledRuleCount = RULE_DEFINITIONS.filter((r) => nuzlockeRules[r.key]).length
   const totalRuleCount = RULE_DEFINITIONS.length
 
-  // Regions not yet used in legs (for "add leg" picker)
+  // In custom mode, show all regions (allow multiple legs per region).
-  const availableRegions = regions?.filter((r) => !legs.some((l) => l.region === r.name)) ?? []
+  // In preset modes, filter out regions already used.
+  const availableRegions =
+    preset === 'custom'
+      ? regions ?? []
+      : regions?.filter((r) => !legs.some((l) => l.region === r.name)) ?? []
+
+  const usedRegionNames = new Set(legs.map((l) => l.region))
 
   return (
     <div className="max-w-4xl mx-auto p-8">
@@ -225,7 +231,11 @@ export function NewGenlocke() {
           {/* Add leg button */}
           {preset === 'custom' && availableRegions.length > 0 && (
             <div className="mt-4">
-              <AddLegDropdown regions={availableRegions} onAdd={handleAddLeg} />
+              <AddLegDropdown
+                regions={availableRegions}
+                usedRegionNames={usedRegionNames}
+                onAdd={handleAddLeg}
+              />
             </div>
           )}
 
@@ -551,9 +561,11 @@ function LegRow({
 
 function AddLegDropdown({
   regions,
+  usedRegionNames,
   onAdd,
 }: {
   regions: Region[]
+  usedRegionNames?: Set<string>
   onAdd: (region: Region) => void
 }) {
   const [open, setOpen] = useState(false)
@@ -583,19 +595,28 @@ function AddLegDropdown({
     <div className="bg-surface-1 rounded-lg shadow p-3">
       <div className="text-sm font-medium text-text-secondary mb-2">Select a region to add</div>
       <div className="flex flex-wrap gap-2">
-        {regions.map((region) => (
+        {regions.map((region) => {
-          <button
+          const alreadyUsed = usedRegionNames?.has(region.name)
-            key={region.name}
+          return (
-            type="button"
+            <button
-            onClick={() => {
+              key={region.name}
-              onAdd(region)
+              type="button"
-              setOpen(false)
+              onClick={() => {
-            }}
+                onAdd(region)
-            className="px-3 py-1.5 rounded-md text-sm bg-surface-2 text-text-primary hover:bg-surface-3 transition-colors"
+                setOpen(false)
-          >
+              }}
-            {region.name.charAt(0).toUpperCase() + region.name.slice(1)}
+              className="px-3 py-1.5 rounded-md text-sm bg-surface-2 text-text-primary hover:bg-surface-3 transition-colors flex items-center gap-1.5"
-          </button>
+            >
-        ))}
+              {region.name.charAt(0).toUpperCase() + region.name.slice(1)}
+              {alreadyUsed && (
+                <span
+                  className="w-1.5 h-1.5 rounded-full bg-accent-400 inline-block"
+                  title="Already added"
+                />
+              )}
+            </button>
+          )
+        })}
         <button
           type="button"
           onClick={() => setOpen(false)}

renovate.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}