Compare commits

..

No commits in common. "44d62c54e9dc31a765619c4eea8f43c6beb22e5a" and "cdeb8b7479f27c1ca3058860eb97f1f647b9ecfd" have entirely different histories.

5 changed files with 32 additions and 59 deletions

3
api.js
View file

@ -10,8 +10,7 @@ const constants = JSON.parse(fs.readFileSync(path.join(__dirname, "constants.jso
var lastPong = 0 var lastPong = 0
module.exports = { module.exports = {
"lanyard": undefined, "lanyard": constants.fallbackLanyard,
"socials": undefined,
"connected": false, "connected": false,
"lastLanyardUpdate": Date.now(), "lastLanyardUpdate": Date.now(),

View file

@ -71,28 +71,20 @@ 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 totalTime = Math.round((activity.timestamps.end - activity.timestamps.start) / 1000) var currentPercent = (Date.now() - activity.timestamps.start) / (activity.timestamps.end - activity.timestamps.start) * 100
return ` return `
<div class="durationBarStuff"> <br>
<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> <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="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} > div { .lengthBar${index} > span {
animation-name: songSlider${index}; animation-name: songSlider${index};
animation-duration: ${totalTime}s; animation-duration: ${timeLeft}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: 0%; width: ${currentPercent}%;
} }
100% { 100% {
width: 100%; width: 100%;
@ -102,12 +94,12 @@ module.exports = {
` `
} else { } else {
return ` return `
<p class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</p> <span class="timeEstimate" data-start="${activity.timestamps.start}">${gameTimeFormatter((Date.now() - activity.timestamps.start))}</span>
` `
} }
} else if (activity.timestamps.end) { } else if (activity.timestamps.end) {
return ` return `
<p><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
` `
} }
} }
@ -123,7 +115,7 @@ module.exports = {
activity.assets = { "large_text": "", "small_text": "" } activity.assets = { "large_text": "", "small_text": "" }
} }
var text1 = onlyIfExists("<span style='font-size: 1.3rem;'>" + makeCompat(activity.song) + "</span>", activity.song) || activity.details var text1 = onlyIfExists("<br><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)
@ -131,13 +123,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)}
<div> <p style="text-align: left; font-size: 1.15rem;">
<p style="font-size: 1.6rem;">${activity.name}</p> <span style="font-size: 1.6rem;">${activity.name}</span>
${onlyIfExists("<p>" + text1 + "</p>", text1)} ${onlyIfExists("<br>" + text1, text1)}
${onlyIfExists("<p>" + makeCompat(text2) + "</p>", text2)} ${onlyIfExists("<br>" + makeCompat(text2), text2)}
${onlyIfExists("<p>" + makeCompat(text3) + "</p>", text3)} ${onlyIfExists("<br>" + makeCompat(text3), text3)}
${onlyIfExists(activityTime(), activityTime())} ${onlyIfExists("<br>" + activityTime(), activityTime())}
</div> </p>
</div> </div>
` `
} }

View file

@ -30,16 +30,6 @@ 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")))

View file

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

View file

@ -214,23 +214,16 @@ br {
/* max-height: 200px; */ /* max-height: 200px; */
} }
.activity>div>p { .activity>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: 1px 0px; padding: 3px;
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;
@ -279,14 +272,15 @@ li {
.lengthBar { .lengthBar {
background-color: rgb(50, 40, 60); background-color: rgb(50, 40, 60);
flex-grow: 1; display: block;
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;
border-radius: 6px; float: left;
transform: translateY(7px);
border-radius: 5px;
} }
.textBlock { .textBlock {
@ -303,7 +297,7 @@ span {
color: inherit color: inherit
} }
.lengthBar>div { .lengthBar>span {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -355,12 +349,10 @@ underline {
text-decoration: underline; text-decoration: underline;
} }
.durationBarStuff { .durationBarFormatter {
display: flex; float: right;
flex-grow: 1;
} }
.durationBarStuff > p { .evil {
font-size: 1.15rem; display: none;
padding: 0;
} }