Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Allow deselecting a chosen problem card by clicking it again

Abierto Apto para principiantes
  • ¿Algo no está bien?
#392 4 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@woohsin ya está trabajando en esto.

Desde el 21/10/2026.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
68/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
rust
Área
frontend

Línea de trabajo

Empieza por el código de la página de inicio que muestra la sección «Elige un problema específico en su lugar» y gestiona los clics en las tarjetas de problemas. Sigue cómo se guarda el problema seleccionado y cómo se elige el problema recomendado por defecto. Desactiva la selección actual con un segundo clic y mantén abierta la sección; estará hecho cuando seleccionar una tarjeta y volver a hacer clic en ella restablezca el problema predeterminado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Here is the detailed analysis of the current lobby selection flow and the consolidated proposal based on web/app.js.

1. Current Implementation Analysis

  • Event Listener & State (web/app.js:246-254):
    In web/app.js, cards are derived from [data-problem] buttons and initialized with mark(card.button, false). Clicking a card executes:

    for (const card of cards) {
  card.button.addEventListener("click", () => {
    manualProblem = true;
    setProblem(card);
    setDuration(suggestedDuration(new Set([card.difficulty])));
    nodes.recommendation.textContent = `Selected problem: ${title(card)}.`;
  });
}

  • The Issue:
    The listener unconditionally sets manualProblem = true, updates problem = card, marks the button via mark(card.button, true) inside setProblem(), and updates the recommendation prompt. It does not check whether manualProblem && problem === card. Clicking the active card re-applies the manual override.

  • Fallback Behavior:
    recommend(note = "", mode = "recommend") returns early without updating recommendation elements whenever manualProblem is active. Currently, the only way a candidate can revert to the automatic recommendation engine is by clicking #random-problem (nodes.randomProblem), which resets manualProblem = false and calls recommend("", "random"), or by reloading the page.

2. Consolidated Proposal

  1. Toggle Selection on Card Click:
    Update the click handler in web/app.js to inspect whether the clicked card is already active (manualProblem && problem === card):

    • When selecting a new card: Preserve the current behavior (manualProblem = true, setProblem(card), update duration, and set nodes.recommendation.textContent).

    • When clicking the currently selected card: Toggle it off by resetting manualProblem = false, clearing the card mark via mark(card.button, false), clearing or resetting problem = null, and invoking recommend() to restore the default overdue/unseen recommendation and lobby controls.

    for (const card of cards) {
  card.button.addEventListener("click", () => {
    if (manualProblem && problem === card) {
      manualProblem = false;
      mark(card.button, false);
      problem = null;
      recommend();
      return;
    }
    manualProblem = true;
    setProblem(card);
    setDuration(suggestedDuration(new Set([card.difficulty])));
    nodes.recommendation.textContent = `Selected problem: ${title(card)}.`;
  });
}

  2. Orthogonality with #394:
    Issue #394 moves details.problem-picker below the setup panels and adjusts .lobby .problem-grid in web/styles.css. Because card event binding in web/app.js queries [data-problem] buttons directly and operates on problem and manualProblem state flags, this toggle logic does not depend on DOM hierarchy or CSS layout, making it completely orthogonal to and forward-compatible with #394.

3. Test Plan

Add browser-level Playwright tests in tests/browser/lobby.test.js:

  1. Verify clicking a .problem-card applies .selected, sets aria-pressed="true", and displays "Selected problem: ..." in nodes.recommendation.

  2. Verify clicking the same active card removes .selected, resets aria-pressed="false", clears manualProblem, and restores the default recommendation prompt.

  3. Verify launching an interview after deselecting proceeds with the recommended practice problem without an explicit ?problem= query parameter.

Lenguaje dominante
Rust
Estrellas
177
Forks
100
Merge medio
1 d 9 h
PR fusionados (30 d)
151

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de sysprog21/codetrial

Todos los issues de sysprog21/codetrial

Issues similares

Más issues de Rust

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.