Cookies_Github_mirror/AquaDX
4
0
Fork 1
mirror of https://github.com/MewoLab/AquaDX.git synced 2026-02-04 22:47:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[S] Style UserHome

Browse Source
This commit is contained in:
Azalea
2024-02-12 02:04:25 -05:00
parent 7e198bd7a1
commit 3804db142f
1 changed files with 116 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
AquaNet/src/pages/UserHome.svelte
View File

@@ -39,107 +39,112 @@
{#if d !== null} {#if d !== null}
<div class="user-pfp"> <div class="user-pfp">
<img src={`${data_host}/maimai/assetbundle/icon/${d.user.iconId.toString().padStart(6, "0")}.png`} alt="" class="pfp"> <img src={`${data_host}/maimai/assetbundle/icon/${d.user.iconId.toString().padStart(6, "0")}.png`} alt="" class="pfp">
<h1>{d.user.name}</h1> <h2>{d.user.name}</h2>
</div> </div>
<div class="scoring-info"> <div>
<div class="chart"> <h2>Scoring Statistics</h2>
<div class="info-top"> <div class="scoring-info">
<div class="rating"> <div class="chart">
<span>DX Rating</span> <div class="info-top">
<span>{d.user.rating.toLocaleString()}</span> <div class="rating">
<span>DX Rating</span>
<span>{d.user.rating.toLocaleString()}</span>
</div>
<div class="rank">
<span>Server Rank</span>
<span>#{d.user.serverRank.toLocaleString()}</span>
</div>
</div> </div>
<div class="rank"> <div class="trend">
<span>Server Rank</span> <Line data={{
<span>#{d.user.serverRank.toLocaleString()}</span> datasets: [
{
label: 'Rating',
data: d.trend.map(it => {return {x: Date.parse(it.date), y: it.rating}}),
borderColor: '#646cff',
tension: 0.1,
// TODO: Set X axis span to 3 months
}
]
}} options={CHARTJS_OPT} />
</div>
<div class="info-bottom">
{#each d.user.ranks as r}
<div>
<span>{r.name}</span>
<span>{r.count}</span>
</div>
{/each}
</div> </div>
</div> </div>
<div class="trend"> <div class="other-info">
<Line data={{ <div class="accuracy">
datasets: [ <span>Accuracy</span>
{ <span>{(d.user.accuracy / 10000).toFixed(2)}%</span>
label: 'Rating', </div>
data: d.trend.map(it => {return {x: Date.parse(it.date), y: it.rating}}),
borderColor: '#646cff',
tension: 0.1,
// TODO: Set X axis span to 3 months <div class="max-combo">
} <span>Max Combo</span>
] <span>{d.user.maxCombo}</span>
}} options={CHARTJS_OPT} /> </div>
<div class="full-combo">
<span>Full Combo</span>
<span>{d.user.fullCombo}</span>
</div>
<div class="all-perfect">
<span>All Perfect</span>
<span>{d.user.allPerfect}</span>
</div>
<div class="total-dx-score">
<span>DX Score</span>
<span>{d.user.totalDxScore.toLocaleString()}</span>
</div>
</div> </div>
</div>
</div>
<div>
<h2>Play Activity</h2>
<div class="activity-info">
<div id="cal-heatmap" bind:this={calElement} />
<div class="info-bottom"> <div class="info-bottom">
{#each d.user.ranks as r} <div class="plays">
<div> <span>Plays</span>
<span>{r.name}</span> <span>{d.user.plays}</span>
<span>{r.count}</span> </div>
</div>
{/each}
</div>
</div>
<div class="other-info"> <div class="time">
<div class="accuracy"> <span>Play Time</span>
<span>Accuracy</span> <span>{(d.user.totalPlayTime / 60 / 60).toFixed(1)} hr</span>
<span>{(d.user.accuracy / 10000).toFixed(2)}%</span> </div>
</div>
<div class="max-combo"> <div class="first-play">
<span>Max Combo</span> <span>First Seen</span>
<span>{d.user.maxCombo}</span> <span>{moment(d.user.joined).format("YYYY-MM-DD")}</span>
</div> </div>
<div class="full-combo"> <div class="last-play">
<span>Full Combo</span> <span>Last Seen</span>
<span>{d.user.fullCombo}</span> <span>{moment(d.user.lastSeen).format("YYYY-MM-DD")}</span>
</div> </div>
<div class="all-perfect"> <div class="last-version">
<span>All Perfect</span> <span>Last Version</span>
<span>{d.user.allPerfect}</span> <span>{d.user.lastVersion}</span>
</div> </div>
<div class="total-dx-score">
<span>DX Score</span>
<span>{d.user.totalDxScore.toLocaleString()}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="activity-info">
<div id="cal-heatmap" bind:this={calElement} />
<div class="info-bottom">
<div class="plays">
<span>Plays</span>
<span>{d.user.plays}</span>
</div>
<div class="time">
<span>Play Time</span>
<span>{d.user.totalPlayTime}</span>
</div>
<div class="first-play">
<span>Joined</span>
<span>{moment(d.user.joined).format("YYYY-MM-DD HH:mm:ss")}</span>
</div>
<div class="last-play">
<span>Last Seen</span>
<span>{moment(d.user.lastSeen).format("YYYY-MM-DD HH:mm:ss")}</span>
</div>
<div class="last-version">
<span>Last Version</span>
<span>{d.user.lastVersion}</span>
</div>
</div>
</div>
{:else} {:else}
<p>Loading...</p> <p>Loading...</p>
{/if} {/if}
@@ -148,11 +153,28 @@
<style lang="sass"> <style lang="sass">
@import "../vars" @import "../vars"
$gap: 20px
#user-home #user-home
display: flex display: flex
flex-direction: column flex-direction: column
gap: 20px gap: $gap
padding: 0 32px margin: 100px 32px 0
padding: 0 32px 32px
height: 100%
background-color: rgba(black, 0.2)
border-radius: 16px
.user-pfp
display: flex
align-items: flex-end
gap: $gap
margin-top: -40px
h2
font-size: 2rem
margin: 0
.pfp .pfp
width: 100px width: 100px
@@ -162,7 +184,7 @@
.info-bottom, .info-top, .other-info .info-bottom, .info-top, .other-info
display: flex display: flex
gap: 20px gap: $gap
> div > div
display: flex display: flex
@@ -181,25 +203,29 @@
.scoring-info .scoring-info
display: flex display: flex
gap: 20px gap: $gap
max-height: 250px max-height: 250px
.chart .chart
flex: 1 flex: 0 1 790px
display: flex display: flex
flex-direction: column flex-direction: column
.other-info .other-info
flex: 0 0 100px flex: 1 0 100px
flex-direction: column flex-direction: column
gap: 0 gap: 0
justify-content: space-between justify-content: space-between
.trend .trend
height: 300px height: 300px
width: 100% width: 100%
max-width: 790px
.activity-info
display: flex
flex-direction: column
gap: $gap
</style> </style>