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);
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.