mirror of
https://github.com/MewoLab/AquaDX.git
synced 2026-02-11 16:47:58 +08:00
[+] Rating screen
This commit is contained in:
Azalea
@@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
const aqua_host = "https://aquadx.hydev.org"
|
const aqua_host = 'https://aquadx.example.com'
|
||||||
const data_host = "https://aqua-data.hydev.org"
|
const data_host = 'https://aqua-data.example.com'
|
||||||
|
|
||||||
export { aqua_host, data_host }
|
export { aqua_host, data_host }
|
||||||
|
|||||||
212
AquaNet/src/pages/MaimaiRating.svelte
Normal file
212
AquaNet/src/pages/MaimaiRating.svelte
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {data_host} from "../libs/config";
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
username: "AZA☆",
|
||||||
|
rating: "701:2:19011:1006030,11528:2:23500:1006452,836:2:19910:995577,572:2:18021:997469,757:2:19507:993536,839:2:19911:1005278,606:2:18019:982216,11517:2:23014:993709,625:2:18503:993160,11408:2:22501:1005514,771:2:19511:993191,734:2:19500:989036,11479:2:23011:988050,11594:2:23503:1002051,682:2:19004:1000732,797:2:19900:982911,772:2:19511:987791,10204:2:23506:1001532,841:2:19912:992283,11565:3:23500:983334,11489:2:23000:997830,709:2:19013:986791,11469:2:23012:985848,11514:2:23014:1003829,720:2:19006:1001675,11565:2:23500:1001386,11003:3:20000:984282,11168:3:21004:983648,11588:2:23504:1000833,11410:3:22501:1000243,63:3:10000:1000119,11587:2:23504:998203,11236:2:21508:997255,375:3:14000:981309,510:2:19505:1004313",
|
||||||
|
ratingNew: "11642:2:24006:1003839,11580:3:24000:972621,11640:2:24006:985702,11633:2:24000:986507,11634:3:24000:985023,10411:2:24000:977957,11624:2:24000:966136,11578:2:24000:963522,11643:2:24006:962392,11629:3:24000:966908,11619:2:24005:939345,11640:3:24006:904054,11641:3:24006:903064,11642:3:24006:875413,11634:2:24000:922194"
|
||||||
|
}
|
||||||
|
|
||||||
|
const multTable = [
|
||||||
|
[100.5, 22.4],
|
||||||
|
[100, 21.6],
|
||||||
|
[99.5, 21.1],
|
||||||
|
[99, 20.8],
|
||||||
|
[98, 20.3],
|
||||||
|
[97, 20],
|
||||||
|
[94, 16.8],
|
||||||
|
[90, 15.2],
|
||||||
|
[80, 13.6]
|
||||||
|
]
|
||||||
|
|
||||||
|
function getMult(achievement: number) {
|
||||||
|
achievement /= 10000
|
||||||
|
for (let i = 0; i < multTable.length; i++) {
|
||||||
|
if (achievement >= multTable[i][0]) {
|
||||||
|
return multTable[i][1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse rating
|
||||||
|
function parseRatings(rating: string, musicInfo: any) {
|
||||||
|
const arr = rating.split(',').map(x => x.split(':').map(x => parseInt(x)))
|
||||||
|
return arr.map(x => {
|
||||||
|
const music = musicInfo[x[0]]
|
||||||
|
|
||||||
|
if (!music) {
|
||||||
|
console.error(`Music not found: ${x[0]}`)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
music.note = music.notes[x[1]]
|
||||||
|
return {
|
||||||
|
music: music,
|
||||||
|
musicId: x[0],
|
||||||
|
difficulty: x[1],
|
||||||
|
todo: x[2], // TODO: Figure out what this is
|
||||||
|
achievement: x[3],
|
||||||
|
calc: getMult(x[3]) * music.note.lv
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ParsedRating {
|
||||||
|
music: {
|
||||||
|
name: string,
|
||||||
|
composer: string,
|
||||||
|
bpm: number,
|
||||||
|
ver: number,
|
||||||
|
note: {
|
||||||
|
lv: number
|
||||||
|
designer: string
|
||||||
|
lv_id: number
|
||||||
|
notes: number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
musicId: number,
|
||||||
|
difficulty: number,
|
||||||
|
achievement: number,
|
||||||
|
calc: number
|
||||||
|
}
|
||||||
|
|
||||||
|
let parsedRatings: {
|
||||||
|
old: ParsedRating[],
|
||||||
|
new: ParsedRating[]
|
||||||
|
} | null = null
|
||||||
|
|
||||||
|
// Get music information from data server
|
||||||
|
fetch(`${data_host}/maimai/meta/00/all-music.json`).then(it => it.json()).then(musicInfo => {
|
||||||
|
parsedRatings = {
|
||||||
|
old: parseRatings(data.rating, musicInfo),
|
||||||
|
new: parseRatings(data.ratingNew, musicInfo)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Svelte template -->
|
||||||
|
<div>
|
||||||
|
<!-- Display all parsed ratings -->
|
||||||
|
{#if parsedRatings}
|
||||||
|
<div>
|
||||||
|
<h2>Old</h2>
|
||||||
|
<div class="rating-cards">
|
||||||
|
{#each parsedRatings.old as rating}
|
||||||
|
<div class="level-{rating.difficulty}">
|
||||||
|
<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>
|
||||||
|
<span>{(rating.achievement / 10000).toFixed(2)}%</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="">
|
||||||
|
|
||||||
|
<div class="lv">{rating.music.note.lv}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>New</h2>
|
||||||
|
<div>
|
||||||
|
{#each parsedRatings.new as rating}
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.rating-cards
|
||||||
|
display: grid
|
||||||
|
gap: 2rem
|
||||||
|
|
||||||
|
// 5 columns
|
||||||
|
grid-template-columns: repeat(5, 1fr)
|
||||||
|
|
||||||
|
// 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.cover
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
object-fit: cover
|
||||||
|
border-radius: calc($border-radius - 3px)
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
|
img.ver
|
||||||
|
position: absolute
|
||||||
|
top: -20px
|
||||||
|
left: -30px
|
||||||
|
height: 50px
|
||||||
|
object-fit: cover
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
|
// 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
|
||||||
|
//max-height: 2.4em
|
||||||
|
//line-height: 1.2em
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
.name
|
||||||
|
font-size: 1.2rem
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
.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.3rem
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: "Lv "
|
||||||
|
font-size: 0.8rem
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user