Files
nuzlocke-tracker/.beans/nuzlocke-tracker-5o1v--improve-encounter-method-input-in-route-encounter.md
Julian Tabel c3bbd365a9 Replace free-text encounter method input with dropdown selector
Use the predefined METHOD_ORDER/METHOD_CONFIG from EncounterMethodBadge
to populate a select dropdown with all known encounter methods plus an
"Other" option for custom values. Shows a colored badge preview on
selection. Correctly handles editing encounters with non-standard methods.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-08 20:19:16 +01:00

28 lines
1.7 KiB
Markdown

---
# nuzlocke-tracker-5o1v
title: Improve encounter method input in route encounter form
status: completed
type: feature
priority: normal
created_at: 2026-02-08T19:06:10Z
updated_at: 2026-02-08T19:17:14Z
parent: nuzlocke-tracker-iu5b
---
Replace the free-text encounter method input in the route encounter form (RouteEncounterFormModal) with a smarter selector that leverages the known encounter methods already defined in the codebase.
## Current behavior
- The encounter method field in RouteEncounterFormModal is a plain `<input type="text">` with a placeholder "e.g. Walking, Surfing, Fishing"
- Easy to introduce typos or inconsistent naming (e.g. "walking" vs "walk" vs "Grass")
- The app already has a well-defined set of encounter methods in `EncounterMethodBadge.tsx` with METHOD_CONFIG and METHOD_ORDER (starter, gift, fossil, trade, walk, headbutt, surf, rock-smash, old-rod, good-rod, super-rod)
- The backend stores this as a `String(30)` column, so it's not strictly enum-constrained
## Desired behavior
- Replace the free-text input with a dropdown/select that lists the known encounter methods from METHOD_ORDER, using the human-readable labels from getMethodLabel()
- Include an "Other" option that reveals a text input for custom methods not in the predefined list
- When editing an existing encounter, pre-select the correct method
- Consider showing the colored badge preview next to each option for visual consistency with how methods appear elsewhere in the app
## Files
- `frontend/src/components/admin/RouteEncounterFormModal.tsx` — replace the text input with new selector
- `frontend/src/components/EncounterMethodBadge.tsx` — export METHOD_CONFIG or add a helper to get the list of known methods