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>
28 lines
1.7 KiB
Markdown
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 |