No support for scrolling?
rayzorben opened this issue · 5 comments
Basically, I have this
<body>
<x-box>
<x-box id="console" vertical>
<x-box id="history"></x-box>
<x-box id="viewport"></x-box>
</x-box>
<x-box id="notification-box" vertical></x-box>
</x-box>
</body>
When history+viewport overflows, it adds a scroll bar on the right as desired.
I use var viewport = document.getElementById('viewport');
and from that I set an event handler:
viewport.addEventListener('scroll', function() {
console.log ("scrolling");
clearTimeout(timeout);
timeout = setTimeout(() => {
if (viewport.scrollTop + viewport.clientHeight < viewport.scrollHeight - 1) {
// User has scrolled and is not at the bottom
userScrolling = true;
} else {
// User has scrolled back to the bottom
userScrolling = false;
}
}, 100);
});
This event never seems to fire now, and viewport.scrollTop, viewport.clientHeight and viewport.scrollHeight are all undefined
Could you please provide a link to a complete test case? In your example all elements are empty and thus non-scrollable.
Sorry, all content is added dynamically, but here you go.
<body>
<x-box>
<x-box id="console" vertical="">
<x-box id="history"><span class="line block"></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">░██▒░
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">░▒▓████▓</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">░</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">▒███████▓▓██▓▓</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-30 ansi-bg-40">█ ░▒▓███████
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40"> ░▒▓████▓▓▒░</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">░██▒░</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-30 ansi-bg-40">▓
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">▓▓████▓▓▓▓▓▓▓▓▒░
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-30 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">██▓▓▓█▓▓▓█████▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-30 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">███████████████
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-30 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">████ █</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒</span><span class="ansi-fg-30 ansi-bg-40">███ </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-30 ansi-bg-40">████</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-30 ansi-bg-40">███</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒</span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-30 ansi-bg-40">█ </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">███</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-30 ansi-bg-40">██</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">░</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">█▓</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">▓</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">█</span><span class="ansi-fg-32 ansi-bg-40">▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">██</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-32 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">░▓█████▒██▓██▓▓██████████████▓▓█████</span><span class="ansi-fg-32-bright ansi-bg-40">▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="cursor-forward"> </span><span class="ansi-fg-32-bright ansi-bg-40">▒▒▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-30 ansi-bg-40">░███████▓███████████▓███████▓▓▓█</span><span class="ansi-fg-32 ansi-bg-40">▒▒▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31-bright ansi-bg-40"> </span><span class="ansi-fg-30 ansi-bg-40"> </span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31-bright ansi-bg-40"> </span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-34 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31-bright ansi-bg-40"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-33-bright ansi-bg-40">█</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-37 ansi-bg-40">╔═══════════════════════════════╗
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-30 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-37 ansi-bg-40">║ Based on GreaterMUD and TGS ║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40"> ║ by Vitoc.</span><span class="cursor-forward"> </span><span class="ansi-fg-37 ansi-bg-40">║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="cursor-forward"> </span><span class="ansi-fg-37 ansi-bg-40">║</span><span class="cursor-forward"> </span><span class="ansi-fg-37 ansi-bg-40">║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40">║ For bug reports, suggestions ║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="cursor-forward"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40">║ comments, etc. send email to: ║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒</span><span class="ansi-fg-37 ansi-bg-40">║ </span><span class="ansi-fg-36-bright ansi-bg-40">help@paramud.com</span><span class="cursor-forward"> </span><span class="ansi-fg-37 ansi-bg-40">║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-30 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒</span><span class="ansi-fg-37 ansi-bg-40">║</span><span class="cursor-forward"> </span><span class="ansi-fg-37 ansi-bg-40">║
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-30 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-37 ansi-bg-40">╚═══════════════════════════════╝
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒</span><span class="ansi-fg-30 ansi-bg-40">▒</span><span class="ansi-fg-31 ansi-bg-40"> </span><span class="ansi-fg-35 ansi-bg-40">▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-36 ansi-bg-40">▒▒▒▒▒▒▒▒▒▒▒▒▒▒</span><span class="ansi-fg-34 ansi-bg-40">▒</span><span class="ansi-fg-35 ansi-bg-40">▒▒
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35 ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37 ansi-bg-40">Welcome to the official Paradigm server!
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37 ansi-bg-40">Please enter your username or "new": soul
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37 ansi-bg-40">Please enter your password: </span><span id="player-command" class="block player-command">********
</span></span><span class="line block"><span></span><span class="ansi-fg-37 ansi-bg-40">Welcome back, soul!
</span></span><span class="line block"><span></span><span class="ansi-fg-37 ansi-bg-40">
</span></span><span class="line block"><span></span><span class="ansi-fg-33-bright ansi-bg-40">Main Menu
</span></span><span class="line block"><span></span><span class="ansi-fg-32-bright ansi-bg-40">---------
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31-bright ansi-bg-40">P </span><span class="ansi-fg-32-bright ansi-bg-40">: </span><span class="ansi-fg-33-bright ansi-bg-40">Paradigm
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-33-bright ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-31-bright ansi-bg-40">X </span><span class="ansi-fg-32-bright ansi-bg-40">: </span><span class="ansi-fg-33-bright ansi-bg-40">Exit
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-33-bright ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-33-bright ansi-bg-40">Please enter your selection: p
</span></span><span class="line block prompt"></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40">Realms:
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> 1) GreaterMUD - TEST
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40">Please select a realm: </span><span id="player-command" class="block player-command">1
</span></span><span class="line block prompt"></span><span class="line block prompt"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> P A R A D I G M </span><span class="ansi-fg-33-bright ansi-bg-40">v1.0.0.0 (Feb 18 1923 6:55:17)
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37 ansi-bg-40">{ A New Era of MUD }
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35-bright ansi-bg-40">*ANSI RECOMMENDED*
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-35-bright ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">E</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Enter the Realm
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">H</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Help
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">C</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Game Counts
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">T</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Topten Adventurers
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">G</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Topten Gangs
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">W</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Who's in the Realm
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37-bright ansi-bg-40">X</span><span class="ansi-fg-30-bright ansi-bg-40">] . </span><span class="ansi-fg-37 ansi-bg-40">Exit Game
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-37 ansi-bg-40">
</span></span><span class="line block prompt"><span></span><span class="ansi-fg-30-bright ansi-bg-40">[</span><span class="ansi-fg-37 ansi-bg-40">PARADIGM</span><span class="ansi-fg-30-bright ansi-bg-40">]</span><span class="ansi-fg-37 ansi-bg-40">: </span><span id="player-command" class="block player-command">enter
</span></span><span class="line block"><span></span><span class="ansi-fg-36-bright ansi-bg-40">Docks
</span></span><span class="line block"><span></span><span class="ansi-fg-32 ansi-bg-40">Obvious exits: north, south, east, west
</span></span><span class="line block status-line"><span></span><span class="ansi-fg-36 ansi-bg-40">[HP=</span><span class="ansi-fg-36-bright ansi-bg-40">23</span><span class="ansi-fg-36 ansi-bg-40">]:</span><span id="player-command" class="block player-command">status
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Name: </span><span class="ansi-fg-36 ansi-bg-40">Soul </span><span class="ansi-fg-32 ansi-bg-40">Lives/CP: </span><span class="ansi-fg-36 ansi-bg-40"> 9/100
</span></span></x-box>
<x-box id="viewport"><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Race: </span><span class="ansi-fg-36 ansi-bg-40">Nekojin </span><span class="ansi-fg-32 ansi-bg-40">Exp: </span><span class="ansi-fg-36 ansi-bg-40">0 </span><span class="ansi-fg-32 ansi-bg-40">Perception: </span><span class="ansi-fg-36 ansi-bg-40"> 51
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Class: </span><span class="ansi-fg-36 ansi-bg-40">Mystic </span><span class="ansi-fg-32 ansi-bg-40">Level: </span><span class="ansi-fg-36 ansi-bg-40">1 </span><span class="ansi-fg-32 ansi-bg-40">Stealth: </span><span class="ansi-fg-36 ansi-bg-40"> 60
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Hits: </span><span class="ansi-fg-36 ansi-bg-40"> 23/23 </span><span class="ansi-fg-32 ansi-bg-40">Armour Class: </span><span class="ansi-fg-36 ansi-bg-40"> 0/0 </span><span class="ansi-fg-32 ansi-bg-40">Thievery: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-36 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">Traps: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40"> Picklocks: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Strength: </span><span class="ansi-fg-36 ansi-bg-40">40 </span><span class="ansi-fg-32 ansi-bg-40">Agility: </span><span class="ansi-fg-36 ansi-bg-40">60 </span><span class="ansi-fg-32 ansi-bg-40">Tracking: </span><span class="ansi-fg-36 ansi-bg-40"> 25
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Intellect: </span><span class="ansi-fg-36 ansi-bg-40">40 </span><span class="ansi-fg-32 ansi-bg-40">Health: </span><span class="ansi-fg-36 ansi-bg-40">30 </span><span class="ansi-fg-32 ansi-bg-40">Martial Arts: </span><span class="ansi-fg-36 ansi-bg-40"> 53
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Willpower: </span><span class="ansi-fg-36 ansi-bg-40">30 </span><span class="ansi-fg-32 ansi-bg-40">Charm: </span><span class="ansi-fg-36 ansi-bg-40">50 </span><span class="ansi-fg-32 ansi-bg-40">MagicRes: </span><span class="ansi-fg-36 ansi-bg-40"> 32
</span></span><span class="line block who"><span></span><span class="ansi-fg-36 ansi-bg-40">[HP=</span><span class="ansi-fg-36-bright ansi-bg-40">23</span><span class="ansi-fg-36 ansi-bg-40">]:sc
</span></span><span class="line block who"><span></span><span class="ansi-fg-33-bright ansi-bg-40"> Current Adventurers
</span></span><span class="line block who"><span></span><span class="ansi-fg-30-bright ansi-bg-40"> ===================
</span></span><span class="line block who"><span></span><span class="ansi-fg-30-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-36 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">Boondock Saint - </span><span class="ansi-fg-35 ansi-bg-40">Apprentice</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Botman Setstatlin - </span><span class="ansi-fg-35 ansi-bg-40">Apprentice</span><span class="ansi-fg-37-bright ansi-bg-40"> M
</span></span><span class="line block who"><span></span><span class="ansi-fg-33-bright ansi-bg-40"> Villain </span><span class="ansi-fg-32 ansi-bg-40">Cancer - </span><span class="ansi-fg-35 ansi-bg-40">Master Hunter</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-33 ansi-bg-40">Criminal </span><span class="ansi-fg-32 ansi-bg-40">Eric McLeod - </span><span class="ansi-fg-35 ansi-bg-40">Revenant</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-36 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">Ermias - </span><span class="ansi-fg-35 ansi-bg-40">Apprentice</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Greater Mudder - </span><span class="ansi-fg-35 ansi-bg-40">Apprentice</span><span class="ansi-fg-37-bright ansi-bg-40"> M
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Madrick X - </span><span class="ansi-fg-35 ansi-bg-40">Lama</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Poop - </span><span class="ansi-fg-35 ansi-bg-40">Disenchanter</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Rhalin Ballin - </span><span class="ansi-fg-35 ansi-bg-40">Canon</span><span class="ansi-fg-37-bright ansi-bg-40"> M
</span></span><span class="line block who"><span></span><span class="ansi-fg-36 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">Soul - </span><span class="ansi-fg-35 ansi-bg-40">Apprentice</span><span class="ansi-fg-37-bright ansi-bg-40">
</span></span><span class="line block who"><span></span><span class="ansi-fg-37-bright ansi-bg-40"> Good </span><span class="ansi-fg-32 ansi-bg-40">Winterhawk Testalot - </span><span class="ansi-fg-35 ansi-bg-40">Sword of Justice</span><span class="ansi-fg-37-bright ansi-bg-40"> S
</span></span><span></span><span id="player-command" class="block player-command">
</span><span class="line block"><span></span><span class="ansi-fg-36 ansi-bg-40">[HP=</span><span class="ansi-fg-36-bright ansi-bg-40">23</span><span class="ansi-fg-36 ansi-bg-40">]:s</span><span id="player-command" class="block player-command">t</span><span class="ansi-fg-36 ansi-bg-40">
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Name: </span><span class="ansi-fg-36 ansi-bg-40">Soul </span><span class="ansi-fg-32 ansi-bg-40">Lives/CP: </span><span class="ansi-fg-36 ansi-bg-40"> 9/100
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Race: </span><span class="ansi-fg-36 ansi-bg-40">Nekojin </span><span class="ansi-fg-32 ansi-bg-40">Exp: </span><span class="ansi-fg-36 ansi-bg-40">0 </span><span class="ansi-fg-32 ansi-bg-40">Perception: </span><span class="ansi-fg-36 ansi-bg-40"> 51
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Class: </span><span class="ansi-fg-36 ansi-bg-40">Mystic </span><span class="ansi-fg-32 ansi-bg-40">Level: </span><span class="ansi-fg-36 ansi-bg-40">1 </span><span class="ansi-fg-32 ansi-bg-40">Stealth: </span><span class="ansi-fg-36 ansi-bg-40"> 60
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Hits: </span><span class="ansi-fg-36 ansi-bg-40"> 23/23 </span><span class="ansi-fg-32 ansi-bg-40">Armour Class: </span><span class="ansi-fg-36 ansi-bg-40"> 0/0 </span><span class="ansi-fg-32 ansi-bg-40">Thievery: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-36 ansi-bg-40"> </span><span class="ansi-fg-32 ansi-bg-40">Traps: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40"> Picklocks: </span><span class="ansi-fg-36 ansi-bg-40"> 0
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Strength: </span><span class="ansi-fg-36 ansi-bg-40">40 </span><span class="ansi-fg-32 ansi-bg-40">Agility: </span><span class="ansi-fg-36 ansi-bg-40">60 </span><span class="ansi-fg-32 ansi-bg-40">Tracking: </span><span class="ansi-fg-36 ansi-bg-40"> 25
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Intellect: </span><span class="ansi-fg-36 ansi-bg-40">40 </span><span class="ansi-fg-32 ansi-bg-40">Health: </span><span class="ansi-fg-36 ansi-bg-40">30 </span><span class="ansi-fg-32 ansi-bg-40">Martial Arts: </span><span class="ansi-fg-36 ansi-bg-40"> 53
</span></span><span class="line block status"><span></span><span class="ansi-fg-32 ansi-bg-40">Willpower: </span><span class="ansi-fg-36 ansi-bg-40">30 </span><span class="ansi-fg-32 ansi-bg-40">Charm: </span><span class="ansi-fg-36 ansi-bg-40">50 </span><span class="ansi-fg-32 ansi-bg-40">MagicRes: </span><span class="ansi-fg-36 ansi-bg-40"> 32
</span></span><span class="line block status-line"><span></span><span class="ansi-fg-36 ansi-bg-40">[HP=</span><span class="ansi-fg-36-bright ansi-bg-40">23</span><span class="ansi-fg-36 ansi-bg-40">]:</span></span><span id="cursor"></span></x-box>
</x-box>
<x-box id="notification-box" vertical=""></x-box>
</x-box>
</body>
Same for console
all being 0 and the event never fires for scrolling. Using
So viewport.scrollTop
, viewport.clientHeight
and viewport.scrollHeight
are 0
rather than undefined
? I think this means you have some problem with your CSS stylings. You should adjust the width/height/overflow/display of the "viewport" element.
You are right, I likely am doing something wrong. I apologize for saying undefined
as I was inches from sleep last night.
Can you point me to a working example of how x-box is being used? Maybe I can use that as a reference.
There is really nothing special about <x-box>
. It is is a generic container element like <div>
and <span>
, but with different default stylings, i.e.
<div>
is styled as a block element (display: block;
)<span>
is styled as an inline element (display: inline;
)<x-box>
is styled as a flex container element (display: flex
)
I can't see all the stylings applied, so I can't tell for sure what is causing the #viewport element to be non-scrollable.
Since the #viewport element seems to contain tabular data, you should use <table>
instead of <x-box>
with <span>
s. The #history element seems to contains ASCII art, so you should use <pre style="font-family: monospace;">
instead of <x-box>
.