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;
|
||||
musicId: number;
|
||||
level: number;
|
||||
userPlayDate: string;
|
||||
trackNo: number;
|
||||
vsRank: number;
|
||||
achievement: number;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
letter-spacing: 0.2em
|
||||
margin-top: 0
|
||||
opacity: 0.9
|
||||
|
||||
|
||||
.btn-group
|
||||
display: flex
|
||||
gap: 8px
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
Promise.all([
|
||||
getMaimai("GetUserRatingApi", {userId}),
|
||||
getMaimaiAllMusic().then(it => it.json())
|
||||
getMaimaiAllMusic()
|
||||
]).then(([rating, music]) => {
|
||||
data = rating
|
||||
musicInfo = music
|
||||
|
|
@ -37,7 +37,8 @@
|
|||
|
||||
music.note = music.notes[x.level]
|
||||
const mult = getMult(x.achievement)
|
||||
return {...x,
|
||||
return {
|
||||
...x,
|
||||
music: music,
|
||||
calc: (mult[1] as number) * music.note.lv,
|
||||
rank: mult[2]
|
||||
|
|
@ -69,7 +70,9 @@
|
|||
<div class="rating-cards">
|
||||
{#each section.data as rating}
|
||||
<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">
|
||||
<span class="name">{rating.music.name}</span>
|
||||
|
|
@ -79,7 +82,9 @@
|
|||
</span>
|
||||
<span>{rating.calc.toFixed(1)}</span>
|
||||
</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>
|
||||
{/each}
|
||||
|
|
@ -89,111 +94,106 @@
|
|||
</main>
|
||||
|
||||
<style lang="sass">
|
||||
.rating-cards
|
||||
display: grid
|
||||
gap: 2rem
|
||||
width: 100%
|
||||
.rating-cards
|
||||
display: grid
|
||||
gap: 2rem
|
||||
width: 100%
|
||||
|
||||
// Fill as many columns as possible
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
||||
// Fill as many columns as possible
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
||||
|
||||
// Center the cards
|
||||
justify-items: center
|
||||
align-items: center
|
||||
// Center the cards
|
||||
justify-items: center
|
||||
align-items: center
|
||||
|
||||
// Style each card
|
||||
> div
|
||||
$border-radius: 20px
|
||||
width: 200px
|
||||
height: 200px
|
||||
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)
|
||||
// Style each card
|
||||
> div
|
||||
$border-radius: 20px
|
||||
width: 200px
|
||||
height: 200px
|
||||
border-radius: $border-radius
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
text-align: left
|
||||
position: relative
|
||||
|
||||
> span
|
||||
// Disable text wrapping, max 2 lines
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
// Difficulty border
|
||||
border: 5px solid var(--lv-color)
|
||||
|
||||
.name
|
||||
font-size: 1.2em
|
||||
font-weight: bold
|
||||
img
|
||||
object-fit: cover
|
||||
pointer-events: none
|
||||
|
||||
.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.cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: calc($border-radius - 3px)
|
||||
|
||||
img.ver
|
||||
height: 45px
|
||||
left: -20px
|
||||
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
|
||||
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>
|
||||
|
|
@ -34,6 +34,9 @@
|
|||
console.log(trend)
|
||||
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}})}
|
||||
localStorage.setItem("tmp-user-details", JSON.stringify(d))
|
||||
renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
|
||||
|
|
@ -161,8 +164,11 @@
|
|||
<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="">
|
||||
<div class="info">
|
||||
<span class="name">{r.name}</span>
|
||||
<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-text">{("" + getMult(r.achievement)[2]).replace("p", "+")}</span>
|
||||
<span class="rank-num">{(r.achievement / 10000).toFixed(2)}%</span>
|
||||
|
|
@ -351,7 +357,7 @@ $gap: 20px
|
|||
flex-direction: column
|
||||
gap: 0
|
||||
|
||||
span
|
||||
.rank-text
|
||||
text-align: left
|
||||
|
||||
.rank-S
|
||||
|
|
@ -366,6 +372,13 @@ $gap: 20px
|
|||
.rank-B
|
||||
color: #6ba6ff
|
||||
|
||||
.lv
|
||||
background: var(--lv-color)
|
||||
padding: 0 6px
|
||||
border-radius: 10px
|
||||
opacity: 0.8
|
||||
margin-right: 10px
|
||||
|
||||
span
|
||||
display: inline-block
|
||||
text-align: right
|
||||
|
|
|
|||
|
|
@ -6,4 +6,13 @@ $c-bg: #242424
|
|||
|
||||
$nav-height: 4rem
|
||||
$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