Minor time bar changes, no longer loops

constants.json

@@ -97,7 +97,8 @@
             "words": [
                 "Teto T",
                 "Teto",
-                "Kasane"
+                "Kasane",
+                "重音テト"
             ],
             "color": "#d5738d",
             "caseInsensitive": true
@@ -220,7 +221,8 @@
 
                 "Miku M",
                 "Miku",
-                "Hatsune"
+                "Hatsune",
+                "初音ミク"
             ],
             "color": "rgb(0, 255, 255)"
         },

overcomplicatedStatuses.js

@@ -70,26 +70,32 @@ module.exports = {
                     if (activity.timestamps) {
                         if (activity.timestamps.start) {
                             if (activity.timestamps.end) {
-                                var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
+                                var timeLeft = ((activity.timestamps.end - Date.now()) / 1000)
-                                var totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000)
+                                var totalTime = ((activity.timestamps.end - activity.timestamps.start) / 1000)
                                 return `
-                                <div class="durationBarStuff">
+                                    <div class="durationBarStuff">
-                                    <p style="padding-left: 0;" class="playTimeStart scriptEnabled" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}</p>
+                                        <p style="padding-left: 0;" class="playTimeStart scriptEnabled" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((Date.now() - activity.timestamps.start))}</p>
-                                    <div class="lengthBar lengthBar${index}">
+                                        <div class="lengthBar lengthBar${index}">
-                                        <div></div>
+                                            <div></div>
+                                        </div>
+                                        <p class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
                                     </div>
-                                     <p class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
-                                </div>
                                     <style>
                                         .lengthBar${index} > div {
                                             animation-name: songSlider${index};
                                             animation-duration: ${totalTime}s;
-                                            animation-delay: ${timeLeft - totalTime}s;
+                                            animation-delay: ${timeLeft - totalTime - 1}s;
                                             animation-timing-function: linear;
-                                            animation-iteration-count: infinite;
 
                                         }
 
+                                        #activity${index} {
+                                            animation-name: hide;
+                                            animation-delay: ${timeLeft}s;
+                                            animation-fill-mode: forwards;
+                                            animation-timing-function: step-end;
+                                        }
+
                                         @keyframes songSlider${index} {
                                             0% {
                                                 width: 0%;
@@ -125,10 +131,10 @@ module.exports = {
 
                     var text1 = onlyIfExists("<span style='font-size: 1.3rem;'>" + makeCompat(activity.song) + "</span>", activity.song) || activity.details
                     var text2 = onlyIfExists("By: " + activity.artist, activity.artist) || activity.state
-                    var text3 = onlyIfExists("On: " + activity.album, activity.album != activity.song && activity.album)
+                    var text3 = onlyIfExists("On: " + activity.album, activity.album && !activity.song.includes(activity.album))
 
                     addedHTML += `
-                        <div class="chip activity grid-child">
+                        <div class="chip activity grid-child" id="activity${index}">
                             <img src="${get_img(activity)}" ${onlyIfExists(`title="${activity.assets.large_text}"`, activity.assets.large_text)}>
                             ${onlyIfExists(`<img class="smallimg" src="${get_img(activity, "small_image")}" ${onlyIfExists(`title="${activity.assets.small_text}"`, activity.assets.small_text)}>`, activity.assets.small_image)}
                             <div>

pageUpdater.js

@@ -146,23 +146,34 @@ function highlighter(json, full = true, linkParent = false) {
                         var termKey = "{TERM" + index + "}"
                         var termProps = dict
                         while (element.content.includes(termKey)) {
-                            var endRegex = " "
+                            var endCharacters = [" ", "&"]
 
                             var termIndex = element.content.indexOf(termKey)
 
-                            var spanEnd = element.content.indexOf(endRegex, termIndex)
+                            var spanEnd = element.content.length
 
-                            if (spanEnd == -1) {
+                            endCharacters.forEach((char) => {
-                                spanEnd = element.content.length
+                                var end = element.content.indexOf(char, termIndex)
-                            }
                                 
-                            var spanStart = element.content.substring(0, termIndex).lastIndexOf(endRegex) + 1
+                                if (end < spanEnd && end != -1) {
+                                    spanEnd = end
+                                }
+                            })
+
+                            var spanStart = 0
+
+                            endCharacters.forEach((char) => {
+                                var start = element.content.substring(0, termIndex).lastIndexOf(char) + 1
+                                if (spanStart < start) {
+                                    spanStart = start
+                                }
+                            })
 
                             // if (highTable[index] == "ULTRAKILL") {
                             //     console.log(startContent, " ---- ", endContent)
                             // }
 
-                            var startContent = element.content.substring(spanStart - 1, termIndex)
+                            var startContent = element.content.substring(spanStart, termIndex)
                             var endContent = element.content.substring(termIndex + termKey.length, spanEnd)
 
                             if (startContent.includes("(") && !endContent.includes(")")) {
@@ -555,7 +566,7 @@ api.events.on("lanyardUpdate", async () => {
     }
 
     var status = api.lanyard.custom_status
-    if (status.emoji.id) {
+    if (status && status.emoji && status.emoji.id) {
         if (status.emoji.animated) {
             var emoji = Buffer.from(await (await fetch(`https://cdn.discordapp.com/emojis/${status.emoji.id}.gif?quality=lossless`)).arrayBuffer())
         } else {

static/index.html

@@ -90,12 +90,11 @@
         <a href="https://pds.violets-purgatory.dev" class="chip">Bluesky: <span class="noHighlight">pds.violets-purgatory.dev</span></a>
         <a href="https://sharkey.violets-purgatory.dev" class="chip">Fedi (Sharkey): <span class="noHighlight">sharkey.violets-purgatory.dev</span></a>
         <br>
-        <p>Feel free to DM me anywhere (Discord & Fedi are best) for an invite! Do understand though, <b>my instances are not stable!<br></b>
+        <p>Feel free to DM me anywhere (Discord & Fedi are best) for an invite! Do understand though, <b>my instances are <underline>not stable!</underline><br></b>
-        <underline>By using my services, you are confirming you understand that there are risks of data loss, downtime, and bugs!!!</underline></p>
         <hr>
 
         <h1>Socials</h1>
-        <p>Here's some of the sites you can find me on! Check the full <a href="./socials/">socials</a> page for more details & links.</p>
+        <p><b> Check the full <a href="./socials/">socials</a> page for more details & links.</b></p>
         {SOCIALS}
         <br>
 

static/js/lanyardSocket.js

@@ -68,6 +68,7 @@ function socketeer() {
 
             var discFetch = await (await fetch("/discHTML")).text()
             $("#activityHtml").html(discFetch)
+            $(".activity").css("animation-name", "none")
         } else if (data.op == 3) {
             lastPong = Date.now()
         } else {

static/style.css

@@ -364,3 +364,13 @@ underline {
     font-size: 1.15rem;
     padding: 0 4px;
 }
+
+@keyframes hide {
+    to {
+        flex: 0 0 0%;
+        height: 0px;
+        position: fixed;
+        visibility: hidden;
+        display: none;
+    }
+}