mirror of https://github.com/hykilpikonna/AquaDX
103 lines
2.7 KiB
Svelte
103 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { Route, Router } from "svelte-routing";
|
|
import Welcome from "./pages/Welcome.svelte";
|
|
import MaimaiRating from "./pages/MaimaiRating.svelte";
|
|
import UserHome from "./pages/UserHome.svelte";
|
|
import Home from "./pages/Home.svelte";
|
|
import Ranking from "./pages/Ranking.svelte";
|
|
import { USER } from "./libs/sdk";
|
|
import type { AquaNetUser } from "./libs/generalTypes";
|
|
import Settings from "./pages/User/Settings.svelte";
|
|
import { pfp } from "./libs/ui"
|
|
|
|
console.log(`%c
|
|
┏━┓ ┳━┓━┓┏━
|
|
┣━┫┏━┓┓ ┏┏━┓┃ ┃ ┣┫
|
|
┛ ┗┗━┫┗━┻┗━┻┻━┛━┛┗━
|
|
┗ v${APP_VERSION}`, `
|
|
background: linear-gradient(-45deg, rgba(18,194,233,1) 0%, rgba(196,113,237,1) 50%, rgba(246,79,89,1) 100%);
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;`)
|
|
|
|
export let url = "";
|
|
let me: AquaNetUser
|
|
|
|
if (USER.isLoggedIn()) USER.me().then(m => me = m).catch(e => console.error(e))
|
|
|
|
let path = window.location.pathname;
|
|
</script>
|
|
|
|
<nav>
|
|
{#if path !== "/"}
|
|
<a class="logo" href={USER.isLoggedIn() ? "/home" : "/"}>
|
|
<img src="/assets/icons/android-chrome-192x192.png" alt="AquaDX"/>
|
|
<span>AquaNet</span>
|
|
</a>
|
|
{/if}
|
|
<a href="/home">home</a>
|
|
<div on:click={() => alert("Coming soon!")} on:keydown={e => e.key === "Enter" && alert("Coming soon!")}
|
|
role="button" tabindex="0">maps</div>
|
|
<a href="/ranking">rankings</a>
|
|
{#if me}
|
|
<a href="/u/{me.username}">
|
|
<img alt="profile" class="pfp" use:pfp={me}/>
|
|
</a>
|
|
{/if}
|
|
</nav>
|
|
|
|
<Router {url}>
|
|
<Route path="/" component={Welcome} />
|
|
<Route path="/home" component={Home} />
|
|
<Route path="/ranking" component={Ranking} />
|
|
<Route path="/ranking/:game" component={Ranking} />
|
|
<Route path="/u/:username" component={UserHome} />
|
|
<Route path="/u/:username/:game" component={UserHome} />
|
|
<Route path="/u/:username/:game/rating" component={MaimaiRating} />
|
|
<Route path="/settings" component={Settings} />
|
|
</Router>
|
|
|
|
<style lang="sass">
|
|
@import "vars"
|
|
|
|
nav
|
|
display: flex
|
|
justify-content: flex-end
|
|
align-items: center
|
|
gap: 32px
|
|
height: $nav-height
|
|
|
|
padding: 0 48px
|
|
|
|
z-index: 10
|
|
position: relative
|
|
|
|
img
|
|
width: 1.5rem
|
|
height: 1.5rem
|
|
border-radius: 50%
|
|
object-fit: cover
|
|
|
|
.pfp
|
|
width: 2rem
|
|
height: 2rem
|
|
|
|
.logo
|
|
display: flex
|
|
align-items: center
|
|
gap: 8px
|
|
font-weight: bold
|
|
color: $c-main
|
|
letter-spacing: 0.2em
|
|
flex: 1
|
|
|
|
@media (max-width: $w-mobile)
|
|
> span
|
|
display: none
|
|
|
|
@media (max-width: $w-mobile)
|
|
justify-content: center
|
|
|
|
</style>
|