diff --git a/wwwroot/app.js b/wwwroot/app.js index d69eeca..0e1ad51 100644 --- a/wwwroot/app.js +++ b/wwwroot/app.js @@ -185,7 +185,8 @@ function renderVotes() { footer.className = "vote-controls"; footer.innerHTML = ` - ${current}`; + ${current} + ${scoreToEmoji(current)}`; 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 "🤩"; +} diff --git a/wwwroot/styles.css b/wwwroot/styles.css index 8e7ed73..11d2287 100644 --- a/wwwroot/styles.css +++ b/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; }