I Made a Minecraft Server Status Widget

[Freedbot]

This is a clean but informative Minecraft server status "widget" using https://mcsrvstat.us/ that I agonized on making for quite a while. It can display one or several different servers in the same widget. The information displayed depends on the minecraft server.properties settings. The default settings will work fine, but Public servers often hide the player list. Also, without setting 'enable-query=true', the player name list will be incomplete above some number I can't find (15 maybe?).
Instructions:

1. Dump this in your conf.yml inside whichever section you like.
2. Choose some square image (will be resized to 128x128 if it isn't already that size).
3. put that in your "item-icons" directory
4. name it mc-down.png (alternatively change the file name to match in the javascript section)
5. at the very bottom find the 2 examples of the same function popMcsrvWidget('yourmcserveraddress','nonstandardport');
6. delete or add copies of that function for the number of servers you want listed.
7. fill in the addresses (domain or IP) of the servers, and the port if it isn't the default '25565'.

Features:

• CSS Flexbox styling to reflow well even in randomly sized sections or even on a phone with heavy zoom.
• The text uses the theme variables for color. Example is using the Argon theme.
• The domain name will do a scrolling marquee bounce effect if it's too long for the section.
• The motd display supports full HTML formatting/coloring etc.
• The user list will display up to 4 lines of users before cutting off with a '...'.

Issues:

• I am not a programmer. Expect suboptimal code.
• The marquee effect only applies on load/refresh. If you resize your window , it will just cut off.
• I feel like Dashy ought to have the capability to query the server itself rather than relying on a separately hosted API... dunno.
• This is not using Vue. I couldn't figure it out. Upside is that after removing the Dashy theme variables, this could be dropped in anything.
• Formatting might? break if you have multiple instances of this widget unless you change the 'mcsrv-widget' ID that's at the start of each section to something unique per widget instance.
• Information updating will break if you have multiple instances for the exact same server and port, and you're a monster if you want this anyway.

If anyone can help resolve the issues and/or get a proper widget implementation of this put in Dashy, then please let me know. Otherwise, use this as you like.
widgets: - type: embed options: css: >- #mcsrv-widget{ .pop-mcsrv{ color:var(--item-text-color); display: flex; flex-flow: row wrap; justify-content: center; .server-icon{height: 128px; width: 128px; margin-right:10px;} .server-text { min-width: 0; flex: 0 1 58%; overflow:hidden; } .server-ip, .colored {color:var(--primary);} .server-ip {margin: -5px 0 0 0; } .animate{ display: inline-block; position: relative; animation: leftright 4s infinite alternate ease-in-out; } .player-gap{ margin: 5px 0 2px 0; .mc-version{ margin-left: 50px;}}.player-list{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align:justify;}}} @keyframes leftright { 0%, 20% {transform: translateX(0%); left: 0%;} 80%, 100% { transform: translateX(-100%);left: 100%;}} html: <div id="mcsrv-widget"></div> script: >- function popMcsrvWidget(serverIp,serverPort = '25565'){let serverIdent = serverIp+':'+serverPort;document.getElementById('mcsrv-widget').insertAdjacentHTML('beforeend','<div id="'+serverIdent+'" class="pop-mcsrv"><img class="server-icon" src="/item-icons/mc-down.png"/><div class="server-text"><h1 class="server-ip">'+serverIp+'</h1><div class="server-motd"></div><div class="player-gap"><span class="player-count">Not</span> <span class="colored">Online</span> <span class="mc-version"></span></div><div class="player-list"></div></div></div>');let serverBlock = document.getElementById(serverIdent); let longTitle = serverBlock.querySelector('h1'); if (longTitle.offsetWidth < longTitle.scrollWidth) {longTitle.classList.add('animate');} fetch('https://api.mcsrvstat.us/2/'+serverIdent).then(response => response.json()).then(data => handleServerStatus(data));function handleServerStatus(data){if(!data.online){console.log(data.online);return false;}else {serverBlock.querySelector('.server-icon').src = data.icon;serverBlock.querySelector('.server-motd').innerHTML = data.motd.html; serverBlock.querySelector('.player-count').innerHTML = data.players.online;serverBlock.querySelector('.mc-version').innerHTML = '<span class="colored">MC: </span>'+data.version; serverBlock.querySelector('.player-list').innerHTML = data.players.list.join(' ');}}}popMcsrvWidget('fake_mcserver.com');popMcsrvWidget('fake_mcserver2.com','28898');