Add type restriction rule (monolocke)

Adds allowedTypes: string[] to NuzlockeRules. When set, the encounter
selector hides non-matching Pokemon and the routes endpoint filters out
routes with no matching encounters, so only eligible locations appear.

Type picker UI in RulesConfiguration; active restriction shown in
RuleBadges. Backend accepts allowed_types query param and joins through
RouteEncounter.pokemon to filter by type.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/EncounterModal.tsx

@@ -43,6 +43,7 @@ interface EncounterModalProps {
   isPending: boolean
   useAllPokemon?: boolean | undefined
   staticClause?: boolean | undefined
+  allowedTypes?: string[] | undefined
 }
 
 const statusOptions: {
@@ -201,6 +202,7 @@ export function EncounterModal({
   isPending,
   useAllPokemon,
   staticClause = true,
+  allowedTypes,
 }: EncounterModalProps) {
   const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(
     useAllPokemon ? null : route.id,
@@ -267,8 +269,10 @@ export function EncounterModal({
     [routePokemon]
   )
 
-  const filteredPokemon = routePokemon?.filter((rp) =>
-    rp.pokemon.name.toLowerCase().includes(search.toLowerCase())
+  const filteredPokemon = routePokemon?.filter(
+    (rp) =>
+      rp.pokemon.name.toLowerCase().includes(search.toLowerCase()) &&
+      (!allowedTypes?.length || rp.pokemon.types.some((t) => allowedTypes.includes(t)))
   )
 
   const groupedPokemon = useMemo(
@@ -446,9 +450,13 @@ export function EncounterModal({
                     }
                     onClick={() => {
                       if (routePokemon) {
-                        const eligible = staticClause
-                          ? routePokemon
-                          : routePokemon.filter((rp) => rp.encounterMethod !== 'static')
+                        const eligible = routePokemon
+                          .filter((rp) => staticClause || rp.encounterMethod !== 'static')
+                          .filter(
+                            (rp) =>
+                              !allowedTypes?.length ||
+                              rp.pokemon.types.some((t) => allowedTypes.includes(t))
+                          )
                         setSelectedPokemon(pickRandomPokemon(eligible, dupedPokemonIds))
                       }
                     }}

frontend/src/components/RuleBadges.tsx

@@ -1,5 +1,6 @@
 import type { NuzlockeRules } from '../types'
 import { RULE_DEFINITIONS } from '../types/rules'
+import { TypeBadge } from './TypeBadge'
 
 interface RuleBadgesProps {
   rules: NuzlockeRules
@@ -7,8 +8,9 @@ interface RuleBadgesProps {
 
 export function RuleBadges({ rules }: RuleBadgesProps) {
   const enabledRules = RULE_DEFINITIONS.filter((def) => rules[def.key])
+  const allowedTypes = rules.allowedTypes ?? []
 
-  if (enabledRules.length === 0) {
+  if (enabledRules.length === 0 && allowedTypes.length === 0) {
     return <span className="text-sm text-text-tertiary">No rules enabled</span>
   }
 
@@ -29,6 +31,17 @@ export function RuleBadges({ rules }: RuleBadgesProps) {
           {def.name}
         </span>
       ))}
+      {allowedTypes.length > 0 && (
+        <span
+          title={`Type restriction: ${allowedTypes.map((t) => t.charAt(0).toUpperCase() + t.slice(1)).join(', ')}`}
+          className="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-700 flex items-center gap-1"
+        >
+          <span>Type Restriction</span>
+          {allowedTypes.map((t) => (
+            <TypeBadge key={t} type={t} size="sm" />
+          ))}
+        </span>
+      )}
     </div>
   )
 }

frontend/src/components/RulesConfiguration.tsx

@@ -1,6 +1,28 @@
 import type { NuzlockeRules } from '../types/rules'
 import { RULE_DEFINITIONS, DEFAULT_RULES } from '../types/rules'
 import { RuleToggle } from './RuleToggle'
+import { TypeBadge } from './TypeBadge'
+
+const POKEMON_TYPES = [
+  'bug',
+  'dark',
+  'dragon',
+  'electric',
+  'fairy',
+  'fighting',
+  'fire',
+  'flying',
+  'ghost',
+  'grass',
+  'ground',
+  'ice',
+  'normal',
+  'poison',
+  'psychic',
+  'rock',
+  'steel',
+  'water',
+] as const
 
 interface RulesConfigurationProps {
   rules: NuzlockeRules
@@ -31,8 +53,18 @@ export function RulesConfiguration({
     onReset?.()
   }
 
-  const enabledCount = visibleRules.filter((r) => rules[r.key]).length
-  const totalCount = visibleRules.length
+  const allowedTypes = rules.allowedTypes ?? []
+
+  const toggleType = (type: string) => {
+    const next = allowedTypes.includes(type)
+      ? allowedTypes.filter((t) => t !== type)
+      : [...allowedTypes, type]
+    onChange({ ...rules, allowedTypes: next })
+  }
+
+  const enabledCount =
+    visibleRules.filter((r) => rules[r.key]).length + (allowedTypes.length > 0 ? 1 : 0)
+  const totalCount = visibleRules.length + 1 // +1 for type restriction
 
   return (
     <div className="space-y-6">
@@ -111,6 +143,44 @@ export function RulesConfiguration({
           ))}
         </div>
       </div>
+
+      <div className="bg-surface-1 rounded-lg shadow">
+        <div className="px-4 py-3 border-b border-border-default">
+          <h3 className="text-lg font-medium text-text-primary">Type Restriction</h3>
+          <p className="text-sm text-text-tertiary">
+            Monolocke and variants. Select allowed types — a Pokémon qualifies if it shares at least
+            one type. Leave all deselected to disable.
+          </p>
+        </div>
+        <div className="px-4 py-4">
+          <div className="flex flex-wrap gap-2">
+            {POKEMON_TYPES.map((type) => (
+              <button
+                key={type}
+                type="button"
+                onClick={() => toggleType(type)}
+                title={type.charAt(0).toUpperCase() + type.slice(1)}
+                className={`p-1.5 rounded-lg border-2 transition-colors ${
+                  allowedTypes.includes(type)
+                    ? 'border-accent-400 bg-accent-900/20'
+                    : 'border-transparent opacity-40 hover:opacity-70'
+                }`}
+              >
+                <TypeBadge type={type} size="md" />
+              </button>
+            ))}
+          </div>
+          {allowedTypes.length > 0 && (
+            <button
+              type="button"
+              onClick={() => onChange({ ...rules, allowedTypes: [] })}
+              className="mt-3 text-xs text-text-tertiary hover:text-text-secondary"
+            >
+              Clear selection
+            </button>
+          )}
+        </div>
+      </div>
     </div>
   )
 }