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

Hide hint background when empty; bold keypad numbers

Browse Source
This commit is contained in:
chris 2025-11-20 09:23:35 -05:00
parent 393d57eb7c
commit 16d4988bb8
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.js
View File

@ -782,10 +782,13 @@
function drawHintGrid(rows, cols) { function drawHintGrid(rows, cols) {
const grid = document.getElementById('hint-grid'); const grid = document.getElementById('hint-grid');
grid.innerHTML = ""; grid.innerHTML = "";
grid.classList.toggle('has-stars', false);
if (!rows || !cols) return;
grid.style.gridTemplateColumns = `repeat(${rows}, 1fr)`; // flip to spread horizontally first grid.style.gridTemplateColumns = `repeat(${rows}, 1fr)`; // flip to spread horizontally first
for (let i = 0; i < (rows * cols); i++) { for (let i = 0; i < (rows * cols); i++) {
const dot = document.createElement('div'); dot.className = 'star-dot'; grid.appendChild(dot); const dot = document.createElement('div'); dot.className = 'star-dot'; grid.appendChild(dot);
} }
grid.classList.add('has-stars');
} }
function applyXPToMastery() { function applyXPToMastery() {

8
style.css
View File

@ -287,17 +287,19 @@
#hint-grid { #hint-grid {
display: grid; justify-content: center; gap: 6px; margin: 5px auto; max-width: 220px; display: grid; justify-content: center; gap: 6px; margin: 5px auto; max-width: 220px;
padding: 8px; padding: 8px;
background: rgba(255, 253, 242, 0.12);
border: 1px solid rgba(255, 215, 0, 0.4);
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
z-index: 200; z-index: 200;
} }
#hint-grid.has-stars {
background: rgba(255, 253, 242, 0.12);
border: 1px solid rgba(255, 215, 0, 0.4);
}
.star-dot { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 18px rgba(255,215,0,0.4); animation: twinkle 1.6s infinite; } .star-dot { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 18px rgba(255,215,0,0.4); animation: twinkle 1.6s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; position: relative; z-index: 200; }
.key-btn { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); color: #fffdf2; font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer; .key-btn { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--gold); color: #fffdf2; font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; padding: 15px 0; border-radius: 5px; cursor: pointer;
text-shadow: 0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 245, 225, calc(0.4 + 0.45 * var(--focus-glow))); text-shadow: 0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 245, 225, calc(0.4 + 0.45 * var(--focus-glow)));
box-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 205, 90, calc(0.25 + 0.35 * var(--focus-glow))); box-shadow: 0 0 calc(4px + 12px * var(--focus-glow)) rgba(255, 205, 90, calc(0.25 + 0.35 * var(--focus-glow)));
-webkit-text-stroke: 1px rgba(0,0,0,0.55); -webkit-text-stroke: 1px rgba(0,0,0,0.55);