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 "🤩";
+}

wwwroot/styles.css

@@ -185,7 +185,8 @@ button.ghost {
 }
 
 .vote-controls { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 8px; }
-.score { font-weight: 700; }
+.score { font-weight: 700; min-width: 36px; text-align: center; }
+.score-emoji { font-size: 18px; }
 
 .results-grid .game-card { border-color: #2563eb44; }
 
@@ -193,25 +194,25 @@ button.ghost {
 input[type="range"].full-slider {
   -webkit-appearance: none;
   width: 100%;
-  height: 14px;
+  height: 20px;
   border-radius: 999px;
-  background: linear-gradient(90deg, #1d4ed8, #22c55e);
+  background: linear-gradient(90deg, #d81d4e, #d8c552, #22c55e);
   outline: none;
   box-shadow: inset 0 0 0 1px #1f2937, 0 4px 12px rgba(0,0,0,0.25);
 }
 input[type="range"].full-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 22px;
-  height: 22px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background: #e5e7eb;
   border: 2px solid #0f172a;
   box-shadow: 0 4px 10px rgba(0,0,0,0.35);
 }
 input[type="range"].full-slider::-moz-range-thumb {
-  width: 22px;
-  height: 22px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background: #e5e7eb;
   border: 2px solid #0f172a;
@@ -224,7 +225,7 @@ input[type="range"].full-slider::-moz-range-track {
   border: 1px solid #1f2937;
 }
 
-.score { font-weight: 700; min-width: 36px; text-align: center; }
+.score { font-weight: 700; min-width: 36px; font-size: 24px; text-align: center; }
 
 .hidden { display: none !important; }