naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor streak modal to overlay native React component on transparent celebration canvas iframe

Browse Source
This commit is contained in:
ectasy663
2026-07-10 13:30:33 +05:30
parent 79dde09304
commit c0642ad6f3
3 changed files with 160 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/streak-animation.html
View File

@@ -153,6 +153,20 @@
.stage.play .count{animation:none; opacity:1; transform:none}
.stage.play.tier3 .scene,.stage.play.tier3 .flash{animation:none}
}
body {
background: transparent !important;
}
body.sad {
background: transparent !important;
}
body::after {
display: none !important;
}
#stage, .hint {
display: none !important;
}
</style>
<canvas id="fw"></canvas>
@@ -169,13 +183,16 @@
<div class="caption" id="caption">GROWTH SCORE</div>
</div>
<div class="panel" style="background: transparent; box-shadow: none;">
<button class="replay" id="enter-workspace" style="width: 100%; height: 56px; font-size: 1.125rem; background: #00F0FF; color: black; box-shadow: 0 0 20px -3px #00F0FF; text-transform: none; border-radius: 12px; margin-top: 16px;">Enter Workspace</button>
<div class="panel">
<label for="num">Number</label>
<input id="num" type="text" inputmode="numeric" value="2,026" aria-label="Target number">
<input id="cap" class="cap" type="text" value="GROWTH SCORE" aria-label="Caption" maxlength="16">
<button class="replay" id="replay">Replay</button>
</div>
</div>
<div class="hint" style="position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:11">
under 5 = sad · higher = bigger celebration
</div>
<script>
const stage=document.getElementById('stage');
@@ -336,9 +353,8 @@
function play(){
clearTimeout(countTimer); clearTimeout(moodTimer); cancelAnimationFrame(countRAF); stopFw();
const target=parseTarget();
const sad = target === 0;
const sad = target<5;
const t = sad ? 0 : Math.min(1, Math.log10(Math.max(target,5)/5)/3); // 5→0 … 5000+→1
// set mood + intensity
@@ -351,8 +367,7 @@
stage.style.setProperty('--halo-w',(160+t*70).toFixed(0)+'%');
}
capEl.textContent= sad ? "START YOUR STREAK!" : "DAY STREAK ACTIVE";
capEl.textContent=(capInput.value||'').trim();
numEl.textContent='0';
void stage.offsetWidth; stage.classList.add('play');
@@ -363,11 +378,8 @@
countTimer=setTimeout(()=>countUp(target), 2750);
}
const enterBtn = document.getElementById('enter-workspace');
enterBtn.addEventListener('click', () => {
window.parent.postMessage('close-streak-modal', '*');
});
replay.addEventListener('click', play);
numInput.addEventListener('keydown', e=>{ if(e.key==='Enter') play(); });
capInput.addEventListener('keydown', e=>{ if(e.key==='Enter') play(); });
window.addEventListener('load', ()=>setTimeout(play,180));
</script>