Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

New bar

Browse source
This commit is contained in:
bingus_violet 2024-11-22 17:04:39 -06:00
parent 5d8fae81f6
commit 44d62c54e9
4 changed files with 57 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
overcomplicatedStatuses.js
View file

@ -71,20 +71,28 @@ module.exports = {
if (activity.timestamps.start) { if (activity.timestamps.start) {
if (activity.timestamps.end) { if (activity.timestamps.end) {
var timeLeft = Math.round((activity.timestamps.end - Date.now()) / 1000) 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 ` return `
<br> <div class="durationBarStuff">
<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> <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> <style>
.lengthBar${index} > span { .lengthBar${index} > div {
animation-name: songSlider${index}; animation-name: songSlider${index};
animation-duration: ${timeLeft}s; animation-duration: ${totalTime}s;
animation-delay: ${timeLeft - totalTime}s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite;
} }
@keyframes songSlider${index} { @keyframes songSlider${index} {
0% { 0% {
width: ${currentPercent}%; width: 0%;
} }
100% { 100% {
width: 100%; width: 100%;
@ -94,12 +102,12 @@ module.exports = {
` `
} else { } else {
return ` 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) { } else if (activity.timestamps.end) {
return ` 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": "" } 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 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 && activity.album)
@ -123,13 +131,13 @@ module.exports = {
<div class="chip activity grid-child"> <div class="chip activity grid-child">
<img src="${get_img(activity)}" title="${activity.assets.large_text || activity.assets.small_text}"> <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)} ${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;"> <div>
<span style="font-size: 1.6rem;">${activity.name}</span> <p style="font-size: 1.6rem;">${activity.name}</p>
${onlyIfExists("<br>" + text1, text1)} ${onlyIfExists("<p>" + text1 + "</p>", text1)}
${onlyIfExists("<br>" + makeCompat(text2), text2)} ${onlyIfExists("<p>" + makeCompat(text2) + "</p>", text2)}
${onlyIfExists("<br>" + makeCompat(text3), text3)} ${onlyIfExists("<p>" + makeCompat(text3) + "</p>", text3)}
${onlyIfExists("<br>" + activityTime(), activityTime())} ${onlyIfExists(activityTime(), activityTime())}
</p> </div>
</div> </div>
` `
} }

10
static/js/timeFormatter.js
View file

@ -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")))}`) 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) => { $(".timeEstimate").each((_, item) => {
item = $(item) item = $(item)
item.text(gameTimeFormatter(Date.now() - item.attr("data-start"))) item.text(gameTimeFormatter(Date.now() - item.attr("data-start")))

4
static/noScript.css
View file

@ -16,6 +16,6 @@
width: calc(100% - 65px); width: calc(100% - 65px);
} }
.durationBarFormatter { .durationBarStuff {
width: 55px; padding-left: 6px;
} }

34
static/style.css
View file

@ -214,16 +214,23 @@ br {
/* max-height: 200px; */ /* max-height: 200px; */
} }
.activity>p { .activity>div>p {
width: 100%;
max-height: 100%; max-height: 100%;
text-align: left;
overflow-wrap: anywhere; overflow-wrap: anywhere;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 3px; padding: 1px 0px;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 1.15rem;
align-self: center; align-self: center;
} }
.activity>div {
align-self: center;
padding: 1px 3px;
width: 100%;
}
.activity>img { .activity>img {
width: 40%; width: 40%;
aspect-ratio: 1/1; aspect-ratio: 1/1;
@ -272,15 +279,14 @@ li {
.lengthBar { .lengthBar {
background-color: rgb(50, 40, 60); background-color: rgb(50, 40, 60);
display: block; flex-grow: 1;
width: calc(100% - 110px);
margin: auto; margin: auto;
height: 12px; height: 12px;
/* justify-content: center; */
/* align-items: center; */
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
float: left; border-radius: 6px;
transform: translateY(7px);
border-radius: 5px;
} }
.textBlock { .textBlock {
@ -297,7 +303,7 @@ span {
color: inherit color: inherit
} }
.lengthBar>span { .lengthBar>div {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -349,10 +355,12 @@ underline {
text-decoration: underline; text-decoration: underline;
} }
.durationBarFormatter { .durationBarStuff {
float: right; display: flex;
flex-grow: 1;
} }
.evil { .durationBarStuff > p {
display: none; font-size: 1.15rem;
padding: 0;
} }