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;
text-indent: 0.25em;
background-color: #000000;
max-width: 100%;
margin: 1em 0 0 0;
box-sizing: border-box;
min-width: 3em;
}
.poem input:focus {
border-color: #FFFFFF;
@@ -94,12 +93,13 @@
text-shadow: 0.08333em 0.08333em #2A2A2A;
}
.poem-controls {
display: flexbox;
max-width: 100%;
display: flex;
flex-direction: row;
margin: 1em 0 0 0;
}
.icon {
height: 1em;
vertical-align: middle;
image-rendering: pixelated;
padding: 10px;
}
@@ -121,8 +121,9 @@
the max width is 256 pixels
with a 12px font, that's a 256px max width
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;
overflow-wrap: anywhere;
}
@@ -187,6 +188,11 @@
setInterval(updateObfuscatedText, 50);
});
function emToPx(rem) {
const poem = document.getElementById("poem");
return rem * parseFloat(getComputedStyle(poem).fontSize);
}
function toggleMusic() {
const audio = document.getElementById("music-audio");
const button = document.getElementById("music-icon");
@@ -194,7 +200,7 @@
audio.play();
audio.classList.add("playing");
button.classList.add("playing");
startAutoScroll(0, scrollMaxY, 411);
startAutoScroll(emToPx(0.5) * 20 / 12);
}
else {
audio.pause();
@@ -207,17 +213,16 @@
let scrollAnimationHandle = null;
function startAutoScroll(topY, bottomY, seconds) {
function startAutoScroll(speed) {
stopAutoScroll();
const startY = window.scrollY;
const startProgress = startY / bottomY;
const startTime = performance.now() - (startProgress * seconds * 1000);
function step(currentTime) {
const startTime = performance.now();
function step() {
const currentTime = performance.now();
const elapsed = (currentTime - startTime) / 1000;
const progress = elapsed / seconds;
const newY = startY + (bottomY - startY) * progress;
const newY = Math.min(startY + (elapsed * speed), window.scrollMaxY);
window.scrollTo({ top: newY });
if (progress < 1) {
if (newY < window.scrollMaxY) {
scrollAnimationHandle = requestAnimationFrame(step);
}
}
@@ -230,9 +235,8 @@
}
}
["wheel", "touchstart", "keydown", "mousedown"].forEach(event => {
window.addEventListener(event, stopAutoScroll, { passive: true });
});
window.addEventListener("wheel", stopAutoScroll, { passive: true });
window.addEventListener("touchmove", stopAutoScroll, { passive: true });
</script>
<script type="x-shader/x-fragment" id="end-portal-vsh">
attribute vec2 a_position;
@@ -382,7 +386,7 @@
<canvas id="background" class="overlay"></canvas>
<div class="vignette overlay"></div>
<div class="poem-box">
<div class="poem">
<div id="poem" class="poem">
<div class="poem-controls">
<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>