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

Place dementor overlay under UI by nesting in card

Browse Source
This commit is contained in:
chris 2025-11-20 08:41:39 -05:00
parent d300660d4f
commit e1bb4c336e
2 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app.js
View File

@ -88,7 +88,11 @@
// --- INIT --- // --- INIT ---
function init() { function init() {
loadData(); loadData();
window.addEventListener('resize', positionDementorOverlay); const card = document.getElementById('main-card');
const overlay = document.getElementById('dementor-overlay');
if (card && overlay && overlay.parentElement !== card) {
card.prepend(overlay);
}
if (!state.studentName) { if (!state.studentName) {
const hashName = window.location.hash.substring(1); const hashName = window.location.hash.substring(1);
@ -654,7 +658,6 @@
const step = 0.02; const step = 0.02;
if (game.timeTurnerCharges > 0) speed = 600; if (game.timeTurnerCharges > 0) speed = 600;
positionDementorOverlay();
dementor.interval = setInterval(() => { dementor.interval = setInterval(() => {
if (!game.active) return; if (!game.active) return;
if (dementor.progress < 1) { if (dementor.progress < 1) {
@ -665,7 +668,6 @@
function updateDementorVisuals() { function updateDementorVisuals() {
const overlay = document.getElementById('dementor-overlay'); const overlay = document.getElementById('dementor-overlay');
positionDementorOverlay();
const p = dementor.progress > 1 ? 1 : dementor.progress; const p = dementor.progress > 1 ? 1 : dementor.progress;
const opacity = 0.08 + (p * 0.35); const opacity = 0.08 + (p * 0.35);
const size = 14 + (p * 22); // start at edges, creep inward const size = 14 + (p * 22); // start at edges, creep inward
@ -718,17 +720,6 @@
return gradients.join(','); return gradients.join(',');
} }
function positionDementorOverlay() {
const overlay = document.getElementById('dementor-overlay');
const card = document.getElementById('main-card');
if (!overlay || !card) return;
const rect = card.getBoundingClientRect();
overlay.style.setProperty('--overlay-left', `${rect.left}px`);
overlay.style.setProperty('--overlay-top', `${rect.top}px`);
overlay.style.setProperty('--overlay-width', `${rect.width}px`);
overlay.style.setProperty('--overlay-height', `${rect.height}px`);
}
function castPatronus() { function castPatronus() {
clearInterval(dementor.interval); clearInterval(dementor.interval);
const overlay = document.getElementById('dementor-overlay'); const overlay = document.getElementById('dementor-overlay');

11
style.css
View File

@ -118,13 +118,10 @@
/* --- DEMENTOR --- */ /* --- DEMENTOR --- */
#dementor-overlay { #dementor-overlay {
position: fixed; position: absolute;
left: var(--overlay-left, 0); inset: 0;
top: var(--overlay-top, 0);
width: var(--overlay-width, 100vw);
height: var(--overlay-height, 100vh);
pointer-events: none; pointer-events: none;
z-index: 120; z-index: 0;
--circle-size: 12%; --circle-size: 12%;
--circle-strength: 0.25; --circle-strength: 0.25;
--circle-blur: 0px; --circle-blur: 0px;
@ -135,6 +132,8 @@
mix-blend-mode: multiply; mix-blend-mode: multiply;
transition: opacity 0.4s ease, filter 0.4s ease; transition: opacity 0.4s ease, filter 0.4s ease;
} }
/* keep content above overlay inside card */
.card-container > *:not(#dementor-overlay) { position: relative; z-index: 1; }
.patronus-flash { background: radial-gradient(circle, white 0%, transparent 100%) !important; opacity: 0.8 !important; } .patronus-flash { background: radial-gradient(circle, white 0%, transparent 100%) !important; opacity: 0.8 !important; }
/* Snitch layer */ /* Snitch layer */