trystan/trystkelly.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scroll improvements

Browse Source
This commit is contained in:
tryashtar
2026-04-10 16:26:01 -06:00
parent a6d7804321
commit 2d0ec35924
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
http/poem.html
+21 -17
View File
@@ -71,9 +71,8 @@
padding: 0.25em 0em 0.333em 0; padding: 0.25em 0em 0.333em 0;
text-indent: 0.25em; text-indent: 0.25em;
background-color: #000000; background-color: #000000;
max-width: 100%;
margin: 1em 0 0 0;
box-sizing: border-box; box-sizing: border-box;
min-width: 3em;
} }
.poem input:focus { .poem input:focus {
border-color: #FFFFFF; border-color: #FFFFFF;
@@ -94,12 +93,13 @@
text-shadow: 0.08333em 0.08333em #2A2A2A; text-shadow: 0.08333em 0.08333em #2A2A2A;
} }
.poem-controls { .poem-controls {
display: flexbox; max-width: 100%;
display: flex;
flex-direction: row; flex-direction: row;
margin: 1em 0 0 0;
} }
.icon { .icon {
height: 1em; height: 1em;
vertical-align: middle;
image-rendering: pixelated; image-rendering: pixelated;
padding: 10px; padding: 10px;
} }
@@ -121,8 +121,9 @@
the max width is 256 pixels the max width is 256 pixels
with a 12px font, that's a 256px max width with a 12px font, that's a 256px max width
so 256/12 = 21.333em so 256/12 = 21.333em
that result seems to wrap some too early, so it's bumped up slightly to match the game
*/ */
max-width: 21.333em; max-width: 21.35em;
margin: 0 1em 0 1em; margin: 0 1em 0 1em;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@@ -187,6 +188,11 @@
setInterval(updateObfuscatedText, 50); setInterval(updateObfuscatedText, 50);
}); });
function emToPx(rem) {
const poem = document.getElementById("poem");
return rem * parseFloat(getComputedStyle(poem).fontSize);
}
function toggleMusic() { function toggleMusic() {
const audio = document.getElementById("music-audio"); const audio = document.getElementById("music-audio");
const button = document.getElementById("music-icon"); const button = document.getElementById("music-icon");
@@ -194,7 +200,7 @@
audio.play(); audio.play();
audio.classList.add("playing"); audio.classList.add("playing");
button.classList.add("playing"); button.classList.add("playing");
startAutoScroll(0, scrollMaxY, 411); startAutoScroll(emToPx(0.5) * 20 / 12);
} }
else { else {
audio.pause(); audio.pause();
@@ -207,17 +213,16 @@
let scrollAnimationHandle = null; let scrollAnimationHandle = null;
function startAutoScroll(topY, bottomY, seconds) { function startAutoScroll(speed) {
stopAutoScroll(); stopAutoScroll();
const startY = window.scrollY; const startY = window.scrollY;
const startProgress = startY / bottomY; const startTime = performance.now();
const startTime = performance.now() - (startProgress * seconds * 1000); function step() {
function step(currentTime) { const currentTime = performance.now();
const elapsed = (currentTime - startTime) / 1000; const elapsed = (currentTime - startTime) / 1000;
const progress = elapsed / seconds; const newY = Math.min(startY + (elapsed * speed), window.scrollMaxY);
const newY = startY + (bottomY - startY) * progress;
window.scrollTo({ top: newY }); window.scrollTo({ top: newY });
if (progress < 1) { if (newY < window.scrollMaxY) {
scrollAnimationHandle = requestAnimationFrame(step); scrollAnimationHandle = requestAnimationFrame(step);
} }
} }
@@ -230,9 +235,8 @@
} }
} }
["wheel", "touchstart", "keydown", "mousedown"].forEach(event => { window.addEventListener("wheel", stopAutoScroll, { passive: true });
window.addEventListener(event, stopAutoScroll, { passive: true }); window.addEventListener("touchmove", stopAutoScroll, { passive: true });
});
</script> </script>
<script type="x-shader/x-fragment" id="end-portal-vsh"> <script type="x-shader/x-fragment" id="end-portal-vsh">
attribute vec2 a_position; attribute vec2 a_position;
@@ -382,7 +386,7 @@
<canvas id="background" class="overlay"></canvas> <canvas id="background" class="overlay"></canvas>
<div class="vignette overlay"></div> <div class="vignette overlay"></div>
<div class="poem-box"> <div class="poem-box">
<div class="poem"> <div id="poem" class="poem">
<div class="poem-controls"> <div class="poem-controls">
<input type="text" id="playername" class="white" placeholder="player name" maxlength="64" size="16" oninput="updatePlayerName()" /> <input type="text" id="playername" class="white" placeholder="player name" maxlength="64" size="16" oninput="updatePlayerName()" />
<a onclick="toggleMusic()"><img id="music-icon" class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAALElEQVR42mOAgc3/J/0H0UgCGahCm4GcQGQBiCzRAp//A41EFsj4H/gfZiAAXXUYtS3tm1IAAAAASUVORK5CYII=" /></a> <a onclick="toggleMusic()"><img id="music-icon" class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAALElEQVR42mOAgc3/J/0H0UgCGahCm4GcQGQBiCzRAp//A41EFsj4H/gfZiAAXXUYtS3tm1IAAAAASUVORK5CYII=" /></a>