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

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")))}`)
})
$(".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")))

4
static/noScript.css
View file

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

34
static/style.css
View file

@ -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;
}