From 44d62c54e9dc31a765619c4eea8f43c6beb22e5a Mon Sep 17 00:00:00 2001
From: bingus_violet <violet@violets-purgatory.dev>
Date: Fri, 22 Nov 2024 17:04:39 -0600
Subject: [PATCH] New bar

---
 overcomplicatedStatuses.js | 40 +++++++++++++++++++++++---------------
 static/js/timeFormatter.js | 10 ++++++++++
 static/noScript.css        |  4 ++--
 static/style.css           | 34 +++++++++++++++++++-------------
 4 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/overcomplicatedStatuses.js b/overcomplicatedStatuses.js
index d9601b6..d635e60 100644
--- a/overcomplicatedStatuses.js
+++ b/overcomplicatedStatuses.js
@@ -71,20 +71,28 @@ module.exports = {
                         if (activity.timestamps.start) {
                             if (activity.timestamps.end) {
                                 var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000)
-                                var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
+                                var totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000)
                                 return `
-                                <br>
-                                <span><span class="lengthBar lengthBar${index}"><span></span></span><span class="durationBarFormatter" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}"><span class="scriptEnabled">${timeFormatter((Date.now() - activity.timestamps.start))}/</span>${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</span></span>
+                                <div class="durationBarStuff">
+                                    <p style="padding-right: 4px;" 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></div>
+                                    </div>
+                                     <p style="padding-left: 4px;" class="playTimeEnd" data-start="${activity.timestamps.start}" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - activity.timestamps.start))}</p>
+                                </div>
                                     <style>
-                                        .lengthBar${index} > span {
+                                        .lengthBar${index} > div {
                                             animation-name: songSlider${index};
-                                            animation-duration: ${timeLeft}s;
+                                            animation-duration: ${totalTime}s;
+                                            animation-delay: ${timeLeft - totalTime}s;
                                             animation-timing-function: linear;
+                                            animation-iteration-count: infinite;
+
                                         }
 
                                         @keyframes songSlider${index} {
                                             0% {
-                                                width: ${currentPercent}%;
+                                                width: 0%;
                                             }
                                             100% {
                                                 width: 100%;
@@ -94,12 +102,12 @@ module.exports = {
                                 `
                             } else {
                                 return `
-                                <span class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</span>
+                                <p class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</p>
                                 `
                             }
                         } else if (activity.timestamps.end) {
                             return `
-                            <span class="endEstimate" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - Date.now()))}</span> left
+                            <p><span class="endEstimate" data-end="${activity.timestamps.end}">${timeFormatter((activity.timestamps.end - Date.now()))}</span> left</p>
                             `
                         }
                     }
@@ -115,7 +123,7 @@ module.exports = {
                         activity.assets = { "large_text": "", "small_text": "" }
                     }
 
-                    var text1 = onlyIfExists("<br><span style='font-size: 1.3rem;'>" + makeCompat(activity.song) + "</span>", activity.song) || activity.details
+                    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)
 
@@ -123,13 +131,13 @@ module.exports = {
                         <div class="chip activity grid-child">
                             <img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}">
                             ${onlyIfExists(`<img class="smallimg" src="${get_img(activity, "small_image")}" title="${activity.assets.small_text}">`, activity.assets.small_image)}
-                            <p style="text-align: left; font-size: 1.15rem;">
-                                <span style="font-size: 1.6rem;">${activity.name}</span>
-                                ${onlyIfExists("<br>" + text1, text1)}
-                                ${onlyIfExists("<br>" + makeCompat(text2), text2)}
-                                ${onlyIfExists("<br>" + makeCompat(text3), text3)}
-                                ${onlyIfExists("<br>" + activityTime(), activityTime())}
-                            </p>
+                            <div>
+                                <p style="font-size: 1.6rem;">${activity.name}</p>
+                                ${onlyIfExists("<p>" + text1 + "</p>", text1)}
+                                ${onlyIfExists("<p>" + makeCompat(text2) + "</p>", text2)}
+                                ${onlyIfExists("<p>" + makeCompat(text3) + "</p>", text3)}
+                                ${onlyIfExists(activityTime(), activityTime())}
+                            </div>
                         </div>
                     `
                 }
diff --git a/static/js/timeFormatter.js b/static/js/timeFormatter.js
index 024d509..ebbd793 100644
--- a/static/js/timeFormatter.js
+++ b/static/js/timeFormatter.js
@@ -30,6 +30,16 @@ function secondLoop() {
         item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}/${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
     })
 
+    $(".playTimeStart").each((_, item) => {
+        item = $(item)
+        item.text(`${timeFormatter((Math.min(Date.now(), item.attr("data-end")) - item.attr("data-start")))}`)
+    })
+
+    $(".playTimeEnd").each((_, item) => {
+        item = $(item)
+        item.text(`${timeFormatter((item.attr("data-end") - item.attr("data-start")))}`)
+    })
+
     $(".timeEstimate").each((_, item) => {
         item = $(item)
         item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))
diff --git a/static/noScript.css b/static/noScript.css
index 5cea8ad..6dfe26f 100644
--- a/static/noScript.css
+++ b/static/noScript.css
@@ -16,6 +16,6 @@
     width: calc(100% - 65px);
 }
 
-.durationBarFormatter {
-    width: 55px;
+.durationBarStuff {
+    padding-left: 6px;
 }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index fed12d4..cb245d6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -214,16 +214,23 @@ br {
     /* max-height: 200px; */
 }
 
-.activity>p {
-    width: 100%;
+.activity>div>p {
     max-height: 100%;
+    text-align: left;
     overflow-wrap: anywhere;
     text-overflow: ellipsis;
-    padding: 3px;
+    padding: 1px 0px;
     line-height: 1.5rem;
+    font-size: 1.15rem;
     align-self: center;
 }
 
+.activity>div {
+    align-self: center;
+    padding: 1px 3px;
+    width: 100%;
+}
+
 .activity>img {
     width: 40%;
     aspect-ratio: 1/1;
@@ -272,15 +279,14 @@ li {
 
 .lengthBar {
     background-color: rgb(50, 40, 60);
-    display: block;
-    width: calc(100% - 110px);
+    flex-grow: 1;
     margin: auto;
     height: 12px;
+    /* justify-content: center; */
+    /* align-items: center; */
     padding: 0;
     overflow: hidden;
-    float: left;
-    transform: translateY(7px);
-    border-radius: 5px;
+    border-radius: 6px;
 }
 
 .textBlock {
@@ -297,7 +303,7 @@ span {
     color: inherit
 }
 
-.lengthBar>span {
+.lengthBar>div {
     margin: 0;
     padding: 0;
     width: 100%;
@@ -349,10 +355,12 @@ underline {
     text-decoration: underline;
 }
 
-.durationBarFormatter {
-    float: right;
+.durationBarStuff {
+    display: flex;
+    flex-grow: 1;
 }
 
-.evil {
-    display: none;
+.durationBarStuff > p {
+    font-size: 1.15rem;
+    padding: 0;
 }
\ No newline at end of file