xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add emoji feedback to vote sliders

Browse Source
This commit is contained in:
Frank Tovar
2026-01-29 02:24:29 +01:00
parent 9084958502
commit 993212ae1e
2 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
wwwroot/app.js
View File

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

17
wwwroot/styles.css
View File

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