chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve feedback readability under dark overlay

Browse Source
This commit is contained in:
chris 2025-11-20 09:18:17 -05:00
parent ea5b13bf1a
commit 850b6ab774
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app.js
View File

@ -257,7 +257,7 @@
} }
castPatronus(); castPatronus();
feedback.style.color = 'green'; feedback.style.color = '#7cff9a';
feedback.innerText = `Expecto Patronum! (+${goldGain} G)`; feedback.innerText = `Expecto Patronum! (+${goldGain} G)`;
if (allFactsMastered(state.levelIndex) && state.levelIndex < CURRICULUM.length - 1) { if (allFactsMastered(state.levelIndex) && state.levelIndex < CURRICULUM.length - 1) {
@ -293,10 +293,10 @@
document.getElementById('answer-display').innerText = ""; document.getElementById('answer-display').innerText = "";
if (game.attempts >= 3) { if (game.attempts >= 3) {
feedback.style.color = '#740001'; feedback.style.color = '#ffb0b0';
feedback.innerText = `Answer is ${game.currentFact.ans}.`; feedback.innerText = `Answer is ${game.currentFact.ans}.`;
} else { } else {
feedback.style.color = '#740001'; feedback.style.color = '#ffb0b0';
feedback.innerText = "Count the stars..."; feedback.innerText = "Count the stars...";
drawHintGrid(game.currentFact.n1, game.currentFact.n2); drawHintGrid(game.currentFact.n1, game.currentFact.n2);
} }

9
style.css
View File

@ -312,7 +312,14 @@
} }
.card-container .key-btn.key-clear:active { background: #f1c232; } .card-container .key-btn.key-clear:active { background: #f1c232; }
.feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; } .feedback {
height: 20px; margin: 5px 0; font-weight: bold; font-size: 1rem;
color: #fffdf2;
text-shadow:
0 0 calc(4px + 10px * var(--focus-glow)) rgba(255, 245, 230, calc(0.4 + 0.45 * var(--focus-glow))),
0 0 calc(8px + 16px * var(--focus-glow)) rgba(0, 0, 0, 0.55);
-webkit-text-stroke: 0.5px rgba(0,0,0,0.35);
}
.quick-consumables { .quick-consumables {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));