Add emoji feedback to vote sliders

wwwroot/app.js

@@ -185,7 +185,8 @@ function renderVotes() {
     footer.className = "vote-controls";
     footer.innerHTML = `
       <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
-      <span class="score" id="score-${s.id}">${current}</span>`;
+      <span class="score" id="score-${s.id}">${current}</span>
+      <span class="score-emoji" id="emoji-${s.id}">${scoreToEmoji(current)}</span>`;
     li.querySelector(".card-body").appendChild(footer);
     list.appendChild(li);
   });
@@ -193,6 +194,8 @@ function renderVotes() {
     input.addEventListener("input", (e) => {
       const val = Number(e.target.value);
       $("score-" + e.target.dataset.id).textContent = val;
+      const emojiEl = $("emoji-" + e.target.dataset.id);
+      if (emojiEl) emojiEl.textContent = scoreToEmoji(val);
     });
     input.addEventListener("change", async (e) => {
       const suggestionId = Number(e.target.dataset.id);
@@ -213,9 +216,11 @@ function syncVoteScores() {
   Object.entries(votesMap).forEach(([id, score]) => {
     const slider = document.querySelector(`input[type=range][data-id="${id}"]`);
     const scoreLabel = $("score-" + id);
+    const emoji = $("emoji-" + id);
     if (slider && score != null) {
       slider.value = score;
       if (scoreLabel) scoreLabel.textContent = score;
+      if (emoji) emoji.textContent = scoreToEmoji(score);
     }
   });
 }
@@ -593,3 +598,12 @@ function normalizeSuggestionForm(formData) {
     maxPlayers: parseNum(obj.maxPlayers),
   };
 }
+
+function scoreToEmoji(score) {
+  if (score <= 1) return "😡";
+  if (score <= 3) return "😠";
+  if (score <= 5) return "😐";
+  if (score <= 7) return "🙂";
+  if (score <= 8) return "😃";
+  return "🤩";
+}