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 ---
function init() {
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) {
const hashName = window.location.hash.substring(1);
@ -654,7 +658,6 @@
const step = 0.02;
if (game.timeTurnerCharges > 0) speed = 600;
positionDementorOverlay();
dementor.interval = setInterval(() => {
if (!game.active) return;
if (dementor.progress < 1) {
@ -665,7 +668,6 @@
function updateDementorVisuals() {
const overlay = document.getElementById('dementor-overlay');
positionDementorOverlay();
const p = dementor.progress > 1 ? 1 : dementor.progress;
const opacity = 0.08 + (p * 0.35);
const size = 14 + (p * 22); // start at edges, creep inward
@ -718,17 +720,6 @@
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() {
clearInterval(dementor.interval);
const overlay = document.getElementById('dementor-overlay');

11
style.css
View File

@ -118,13 +118,10 @@
/* --- DEMENTOR --- */
#dementor-overlay {
position: fixed;
left: var(--overlay-left, 0);
top: var(--overlay-top, 0);
width: var(--overlay-width, 100vw);
height: var(--overlay-height, 100vh);
position: absolute;
inset: 0;
pointer-events: none;
z-index: 120;
z-index: 0;
--circle-size: 12%;
--circle-strength: 0.25;
--circle-blur: 0px;
@ -135,6 +132,8 @@
mix-blend-mode: multiply;
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; }
/* Snitch layer */