Skip to content

AI feedback regarding src/_includes/game-stats.njk #492

Description

@BaseMax

high
The logic for rendering achievement badges has inconsistent indentation and a visibility bug on desktop screens.

Indentation: The added lines (119, 124, 132) use inconsistent spacing (4 and 12 spaces) compared to the 2-space standard used in the rest of the file.
Visibility Bug: The badgeContainer element in the HTML includes the sm:flex utility. In Tailwind CSS, media query utilities (like sm:flex) have higher specificity than base utilities (like hidden). Consequently, badgeContainer.classList.toggle("hidden", true) will fail to hide the element on screens wider than the sm breakpoint because display: flex will override display: none.
To fix this while maintaining the responsive behavior (hidden on mobile, flex on desktop if badges exist), you should toggle the sm:flex class instead of hidden.

  badgeContainer.innerHTML = "";
  var earned = {};
  try { earned = JSON.parse(localStorage.getItem("gameAchievements") || "{}"); } catch (_) {}
  var icons = { first_blood: "🩸", code_wizard: "🧙", duelist: "⚔️" };
  var labels = { first_blood: "First Blood", code_wizard: "Code Wizard", duelist: "Duelist" };
  var badgeCount = 0;
  Object.keys(icons).forEach(function (id) {
    if (earned[id]) {
      var badge = document.createElement("span");
      badge.title = labels[id];
      badge.className = "text-sm cursor-help";
      badge.textContent = icons[id];
      badgeContainer.appendChild(badge);
      badgeCount += 1;
    }
  });
  badgeContainer.classList.toggle("sm:flex", badgeCount > 0);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status
    To do

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions