Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Allow deselecting a chosen problem card by clicking it again

未关闭 适合新手
  • 哪里不对？
#392 4 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

@woohsin 已经在做这个了。

开始于 2026年10月21日。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
68/100
Issue 类型
功能
描述清晰度
描述清楚
活跃度
活跃
技术栈
rust
领域
frontend

调研方向

从负责渲染“改为选择一个具体问题”部分并处理问题卡片点击的落地页代码开始。追踪所选问题的存储方式，以及默认推荐问题的选择方式。第二次点击时取消当前选择，同时保持该部分展开；选择一张卡片后再次点击它即可恢复默认状态时，任务就完成了。

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
Rust
星标
177
派生
100
平均合并
1 天 9 小时
30 天内合并 PR
151

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

sysprog21/codetrial 的其他 Issue

查看 sysprog21/codetrial 的全部 Issue

相似的 Issue

更多 Rust Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。