mirror of https://github.com/hykilpikonna/AquaDX
[O] Sort recent by date, display level
Azalea
parent
b925c2ef20
commit
6d4a38404c
|
|
@ -49,6 +49,7 @@ export interface MaimaiUserPlaylog {
|
||||||
id: number;
|
id: number;
|
||||||
musicId: number;
|
musicId: number;
|
||||||
level: number;
|
level: number;
|
||||||
|
userPlayDate: string;
|
||||||
trackNo: number;
|
trackNo: number;
|
||||||
vsRank: number;
|
vsRank: number;
|
||||||
achievement: number;
|
achievement: number;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
Promise.all([
|
Promise.all([
|
||||||
getMaimai("GetUserRatingApi", {userId}),
|
getMaimai("GetUserRatingApi", {userId}),
|
||||||
getMaimaiAllMusic().then(it => it.json())
|
getMaimaiAllMusic()
|
||||||
]).then(([rating, music]) => {
|
]).then(([rating, music]) => {
|
||||||
data = rating
|
data = rating
|
||||||
musicInfo = music
|
musicInfo = music
|
||||||
|
|
@ -37,7 +37,8 @@
|
||||||
|
|
||||||
music.note = music.notes[x.level]
|
music.note = music.notes[x.level]
|
||||||
const mult = getMult(x.achievement)
|
const mult = getMult(x.achievement)
|
||||||
return {...x,
|
return {
|
||||||
|
...x,
|
||||||
music: music,
|
music: music,
|
||||||
calc: (mult[1] as number) * music.note.lv,
|
calc: (mult[1] as number) * music.note.lv,
|
||||||
rank: mult[2]
|
rank: mult[2]
|
||||||
|
|
@ -69,7 +70,9 @@
|
||||||
<div class="rating-cards">
|
<div class="rating-cards">
|
||||||
{#each section.data as rating}
|
{#each section.data as rating}
|
||||||
<div class="level-{rating.level}">
|
<div class="level-{rating.level}">
|
||||||
<img class="cover" src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
|
<img class="cover"
|
||||||
|
src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`}
|
||||||
|
alt="">
|
||||||
|
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<span class="name">{rating.music.name}</span>
|
<span class="name">{rating.music.name}</span>
|
||||||
|
|
@ -79,7 +82,9 @@
|
||||||
</span>
|
</span>
|
||||||
<span>{rating.calc.toFixed(1)}</span>
|
<span>{rating.calc.toFixed(1)}</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="ver" src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`} alt="">
|
<img class="ver"
|
||||||
|
src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`}
|
||||||
|
alt="">
|
||||||
<div class="lv">{rating.music.note.lv}</div>
|
<div class="lv">{rating.music.note.lv}</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -89,111 +94,106 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
.rating-cards
|
.rating-cards
|
||||||
display: grid
|
display: grid
|
||||||
gap: 2rem
|
gap: 2rem
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
// Fill as many columns as possible
|
// Fill as many columns as possible
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
||||||
|
|
||||||
// Center the cards
|
// Center the cards
|
||||||
justify-items: center
|
justify-items: center
|
||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
// Style each card
|
// Style each card
|
||||||
> div
|
> div
|
||||||
$border-radius: 20px
|
$border-radius: 20px
|
||||||
width: 200px
|
width: 200px
|
||||||
height: 200px
|
height: 200px
|
||||||
border-radius: $border-radius
|
border-radius: $border-radius
|
||||||
|
|
||||||
display: flex
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
// Difficulty border
|
|
||||||
border: 5px solid var(--lv-color, #60aaff)
|
|
||||||
&.level-1
|
|
||||||
--lv-color: #aaff60
|
|
||||||
&.level-2
|
|
||||||
--lv-color: #f25353
|
|
||||||
&.level-3
|
|
||||||
--lv-color: #e881ff
|
|
||||||
|
|
||||||
img
|
|
||||||
object-fit: cover
|
|
||||||
pointer-events: none
|
|
||||||
|
|
||||||
img.cover
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
border-radius: calc($border-radius - 3px)
|
|
||||||
|
|
||||||
img.ver
|
|
||||||
position: absolute
|
|
||||||
top: -20px
|
|
||||||
left: -30px
|
|
||||||
height: 50px
|
|
||||||
|
|
||||||
// Information
|
|
||||||
.detail
|
|
||||||
position: absolute
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
padding: 10px
|
|
||||||
background: rgba(0, 0, 0, 0.5)
|
|
||||||
border-radius: 0 0 calc($border-radius - 3px) calc($border-radius - 3px)
|
|
||||||
|
|
||||||
// Blur
|
|
||||||
backdrop-filter: blur(3px)
|
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
position: relative
|
||||||
text-align: left
|
|
||||||
|
|
||||||
> span
|
// Difficulty border
|
||||||
// Disable text wrapping, max 2 lines
|
border: 5px solid var(--lv-color)
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
.name
|
img
|
||||||
font-size: 1.2em
|
object-fit: cover
|
||||||
font-weight: bold
|
pointer-events: none
|
||||||
|
|
||||||
.rating
|
img.cover
|
||||||
display: flex
|
width: 100%
|
||||||
img
|
height: 100%
|
||||||
height: 1.5em
|
border-radius: calc($border-radius - 3px)
|
||||||
|
|
||||||
.lv
|
|
||||||
position: absolute
|
|
||||||
bottom: 0
|
|
||||||
right: 0
|
|
||||||
padding: 5px 10px
|
|
||||||
background: var(--lv-color)
|
|
||||||
// Top left border radius
|
|
||||||
border-radius: 10px 0
|
|
||||||
|
|
||||||
font-size: 1.3em
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content: "Lv"
|
|
||||||
font-size: 0.8em
|
|
||||||
|
|
||||||
// Mobile
|
|
||||||
@media (max-width: 500px)
|
|
||||||
margin-left: -1rem
|
|
||||||
margin-right: -1rem
|
|
||||||
width: calc(100% + 2rem)
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
|
|
||||||
font-size: 0.8em
|
|
||||||
> div
|
|
||||||
width: 150px
|
|
||||||
height: 150px
|
|
||||||
|
|
||||||
img.ver
|
img.ver
|
||||||
height: 45px
|
position: absolute
|
||||||
left: -20px
|
top: -20px
|
||||||
|
left: -30px
|
||||||
|
height: 50px
|
||||||
|
|
||||||
|
// Information
|
||||||
|
.detail
|
||||||
|
position: absolute
|
||||||
|
bottom: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
padding: 10px
|
||||||
|
background: rgba(0, 0, 0, 0.5)
|
||||||
|
border-radius: 0 0 calc($border-radius - 3px) calc($border-radius - 3px)
|
||||||
|
|
||||||
|
// Blur
|
||||||
|
backdrop-filter: blur(3px)
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
> span
|
||||||
|
// Disable text wrapping, max 2 lines
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
.name
|
||||||
|
font-size: 1.2em
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
.rating
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
img
|
||||||
|
height: 1.5em
|
||||||
|
|
||||||
|
.lv
|
||||||
|
position: absolute
|
||||||
|
bottom: 0
|
||||||
|
right: 0
|
||||||
|
padding: 5px 10px
|
||||||
|
background: var(--lv-color)
|
||||||
|
// Top left border radius
|
||||||
|
border-radius: 10px 0
|
||||||
|
|
||||||
|
font-size: 1.3em
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: "Lv"
|
||||||
|
font-size: 0.8em
|
||||||
|
|
||||||
|
// Mobile
|
||||||
|
@media (max-width: 500px)
|
||||||
|
margin-left: -1rem
|
||||||
|
margin-right: -1rem
|
||||||
|
width: calc(100% + 2rem)
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
|
||||||
|
font-size: 0.8em
|
||||||
|
> div
|
||||||
|
width: 150px
|
||||||
|
height: 150px
|
||||||
|
|
||||||
|
img.ver
|
||||||
|
height: 45px
|
||||||
|
left: -20px
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -34,6 +34,9 @@
|
||||||
console.log(trend)
|
console.log(trend)
|
||||||
console.log(music)
|
console.log(music)
|
||||||
|
|
||||||
|
// Sort recent by date
|
||||||
|
user.recent.sort((a, b) => b.userPlayDate < a.userPlayDate ? -1 : 1)
|
||||||
|
|
||||||
d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
|
d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
|
||||||
localStorage.setItem("tmp-user-details", JSON.stringify(d))
|
localStorage.setItem("tmp-user-details", JSON.stringify(d))
|
||||||
renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
|
renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
|
||||||
|
|
@ -161,8 +164,11 @@
|
||||||
<div class={clazz({alt: i % 2 === 0})}>
|
<div class={clazz({alt: i % 2 === 0})}>
|
||||||
<img src={`${data_host}/maimai/assetbundle/jacket_s/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
|
<img src={`${data_host}/maimai/assetbundle/jacket_s/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<span class="name">{r.name}</span>
|
|
||||||
<div>
|
<div>
|
||||||
|
<span class="name">{r.name}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class={`lv level-${r.level}`}>{r.notes[r.level].lv}</span>
|
||||||
<span class={"rank-" + ("" + getMult(r.achievement)[2])[0]}>
|
<span class={"rank-" + ("" + getMult(r.achievement)[2])[0]}>
|
||||||
<span class="rank-text">{("" + getMult(r.achievement)[2]).replace("p", "+")}</span>
|
<span class="rank-text">{("" + getMult(r.achievement)[2]).replace("p", "+")}</span>
|
||||||
<span class="rank-num">{(r.achievement / 10000).toFixed(2)}%</span>
|
<span class="rank-num">{(r.achievement / 10000).toFixed(2)}%</span>
|
||||||
|
|
@ -351,7 +357,7 @@ $gap: 20px
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
gap: 0
|
gap: 0
|
||||||
|
|
||||||
span
|
.rank-text
|
||||||
text-align: left
|
text-align: left
|
||||||
|
|
||||||
.rank-S
|
.rank-S
|
||||||
|
|
@ -366,6 +372,13 @@ $gap: 20px
|
||||||
.rank-B
|
.rank-B
|
||||||
color: #6ba6ff
|
color: #6ba6ff
|
||||||
|
|
||||||
|
.lv
|
||||||
|
background: var(--lv-color)
|
||||||
|
padding: 0 6px
|
||||||
|
border-radius: 10px
|
||||||
|
opacity: 0.8
|
||||||
|
margin-right: 10px
|
||||||
|
|
||||||
span
|
span
|
||||||
display: inline-block
|
display: inline-block
|
||||||
text-align: right
|
text-align: right
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,12 @@ $c-bg: #242424
|
||||||
$nav-height: 4rem
|
$nav-height: 4rem
|
||||||
$w-mobile: 560px
|
$w-mobile: 560px
|
||||||
$w-max: 900px
|
$w-max: 900px
|
||||||
|
|
||||||
|
.level-0
|
||||||
|
--lv-color: #6ED43E
|
||||||
|
.level-1
|
||||||
|
--lv-color: #F7B807
|
||||||
|
.level-2
|
||||||
|
--lv-color: #FF828D
|
||||||
|
.level-3
|
||||||
|
--lv-color: #A051DC
|
||||||
Loading…
Reference in New Issue