search

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
677 stars 58 forks source link

No support for scrolling? #134

Open rayzorben opened 9 months ago

rayzorben commented 9 months ago

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

jarek-foksa commented 9 months ago

Could you please provide a link to a complete test case? In your example all elements are empty and thus non-scrollable.

rayzorben commented 9 months ago

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>
image

Same for console all being 0 and the event never fires for scrolling. Using

... works fine.

jarek-foksa commented 9 months ago

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.

rayzorben commented 9 months ago

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.

jarek-foksa commented 9 months ago

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>.