Multi-ingredient guessing UI/UX (TDD)

[CarlosCanet]

Description

Improve the tea guessing system to properly handle multiple ingredient selection with better UX and validation.

Current State

• TeaGuess model supports ingredients via guessedIngredients (many-to-many)
• Scoring algorithm exists in calculateIngredientsScore() (200 pts max)
• TeaGuessForm has commented-out ingredient multi-select
• Backend is ready, but frontend implementation is incomplete

Tasks

UI Implementation

• Uncomment and implement ingredient multi-select in TeaGuessForm
• Add "Add another ingredient" button for dynamic input fields
• Display selected ingredients as removable chips
• Show available ingredients from getAllIngredients() DAL
• Autocomplete/search for ingredient selection
• Visual feedback when ingredients are selected/removed
• Responsive design for mobile (stacked chips)

Form Handling

• Parse multiple ingredient-* fields from FormData
• Already implemented: getFormStringsByPrefix(formData, "ingredient") in tea-guess-service.ts
• Validate ingredient IDs exist in database
• Allow empty ingredients array (valid guess without ingredients)
• Display validation errors for invalid ingredient IDs

Integration with Scoring

• Verify calculateIngredientsScore() works with multiple ingredients
• Test scoring: 0 matches = 0 pts, partial matches = proportional, all matches = 200 pts
• Display ingredient guess results after reveal (show correct vs guessed)

Display Results

• Show guessed ingredients in TeaGuessCard after reveal
• Compare guessed ingredients with actual tea ingredients
• Visual indicator: ✓ correct, ✗ missed, + extra (guessed but not in tea)
• Display ingredient score contribution (0-200 pts)

Technical Details

Existing Infrastructure (Already Working)

// DAL - dal-tea-guess.ts
createTeaGuess(userId, dayId, guessData, points)
// guessData.ingredients: Array<string> (ingredient IDs)

// Service - tea-guess-service.ts
getFormStringsByPrefix(formData, "ingredient") // ✅ Already implemented
calculateIngredientsScore(ingredients, ingredientsGuess) // ✅ Already implemented

// Scoring algorithm
// matches = ingredients.filter(i => guessSet.has(i)).length
// score = (matches / totalIngredients) * 200

Form Pattern (Commented in TeaGuessForm.tsx)

{/* Needs implementation */}
<select name={`ingredient-${count}`}>
  <option value="">Choose ingredient</option>
  {ingredients.map(ing => (
    <option key={ing.id} value={ing.id}>{ing.name}</option>
  ))}
</select>

Proposed UX Flow

1. User sees tea without ingredients revealed
2. User clicks "Add ingredient guess" button
3. Dropdown appears with all available ingredients
4. Selected ingredient appears as chip with remove button
5. User can add up to 10 ingredients (reasonable limit)
6. Submit form → Server Action validates and scores
7. After reveal: Show "You guessed X/Y ingredients correctly"

TDD Approach

1. Write tests for multi-ingredient form parsing
2. Write tests for ingredient scoring with different scenarios
3. Write tests for result display logic
4. Implement UI components
5. Verify all tests pass

Test Scenarios

• User guesses 0 ingredients (valid, 0 pts)
• User guesses all correct ingredients (200 pts)
• User guesses partial ingredients (proportional pts)
• User guesses extra ingredients not in tea (no penalty)
• User tries to guess same ingredient twice (prevent duplicate)
• User adds and removes ingredients dynamically
• Form submission with multiple ingredients works
• Results display correctly after reveal

Security Considerations

• Validate ingredient IDs exist before connecting to guess
• Prevent injection via ingredient selection (use IDs, not names)
• Limit maximum ingredients per guess (prevent abuse)

UI/UX Improvements

• Clear visual separation between tea guess and ingredient guess
• Helpful hints: "The tea has X ingredients" (after reveal)
• Mobile-friendly: touch targets, scrollable chips
• Loading state when fetching ingredients
• Empty state: "No ingredients to guess" if tea has none

Definition of Done

• Tests written and passing
• Multi-select works smoothly
• Form submission handles multiple ingredients
• Scoring calculation is correct
• Results display shows ingredient comparison
• Mobile responsive
• No UX issues or confusion

Phase: 2.2 Guessing System
Priority: Medium
Milestone: BONUS Priority 1

Related Issues

• Depends on: Ingredient management system (Admin + User) (TDD) #73 (Ingredient management system)
• Related to: Tea guess form (Server Action) (TDD) #29 (Tea guess form - already implemented)