59 lines
2.2 KiB
Markdown
59 lines
2.2 KiB
Markdown
---
|
|
id: "0090"
|
|
title: "kanban: Seleccionar Aleatorio en columna con animacion de ruleta"
|
|
status: pendiente
|
|
type: feature
|
|
domain:
|
|
- kanban
|
|
scope: multi-app
|
|
priority: media
|
|
depends: []
|
|
blocks: []
|
|
related: []
|
|
created: 2026-05-17
|
|
updated: 2026-05-17
|
|
tags: []
|
|
---
|
|
|
|
## Problema
|
|
|
|
Cuando hay muchas cards en una columna, elegir cual abordar "al azar" es ruido cognitivo. Necesitamos boton "Seleccionar Aleatorio" que respete los filtros activos y excluya cards bloqueadas.
|
|
|
|
## Solucion
|
|
|
|
### Frontend (puro, sin backend)
|
|
|
|
- `KanbanColumn` menu contextual: nueva entrada "Seleccionar Aleatorio" (`IconDice5`), `data-test="column-random-pick"`. Deshabilitada cuando `cards.filter(c => !c.locked).length === 0`.
|
|
- Prop `onPickRandom(columnId)` propagada desde `KanbanColumn` a `App.tsx`.
|
|
- `App.tsx` handler `handlePickRandom`:
|
|
- Lee cards del column id via `cardsByColumn` (ya respeta los filtros).
|
|
- Excluye `card.locked === true`.
|
|
- Si `length === 0`: notificacion warning.
|
|
- Si `length === 1`: scroll + flash verde directo.
|
|
- Si `length > 1`: ruleta animada.
|
|
- Ruleta:
|
|
- Seleccion criptografica con `crypto.getRandomValues`.
|
|
- Cycle: 2 vueltas completas + offset hasta la ganadora.
|
|
- Decay temporal cubic: 50ms inicial -> 220ms final (efecto desacelerar).
|
|
- CSS class `.kanban-roulette-active` aplicada a la card en curso, `scrollIntoView` automatico para seguirla.
|
|
- Al final: `.kanban-roulette-winner` con pulso verde (~1.6s).
|
|
- CSS en `src/styles/roulette.css`, importado desde `main.tsx`.
|
|
|
|
### Tests
|
|
|
|
- Verificacion manual: probar en columna con varias cards, con y sin filtros activos, con cards bloqueadas. Comportamiento esperado: solo unlocked-and-filtered participan.
|
|
- E2E Playwright queda fuera de scope automatizado por timing visual y por necesitar cards reales en una columna concreta.
|
|
|
|
## Criterios de aceptacion
|
|
|
|
- [ ] Menu contextual "Seleccionar Aleatorio" en cada columna.
|
|
- [ ] Cards bloqueadas excluidas siempre.
|
|
- [ ] Si hay filtro activo, solo cards visibles participan.
|
|
- [ ] Animacion ruleta visible, no se queda colgada.
|
|
- [ ] Ganadora final con flash verde + scroll a su posicion.
|
|
|
|
## Rama / commits
|
|
|
|
- Rama: `issue/0090-kanban-column-random-pick`
|
|
- Merge `--no-ff` a master.
|