implement memorial photo viewer (#119)

* commit current progress\

will prob work on my mac ltr

* more transferring to different device

* grammar

* [F] Fix warning inconsistency

* [O] Split status overlays

* [S] Better styling

* [+] i18n

* [+] Display photos tab conditionally

---------

Co-authored-by: Azalea <22280294+hykilpikonna@users.noreply.github.com>

AquaNet/src/App.svelte

@@ -4,9 +4,10 @@
   import UserHome from "./pages/UserHome.svelte";
   import Home from "./pages/Home.svelte";
   import Ranking from "./pages/Ranking.svelte";
-  import { USER } from "./libs/sdk";
+  import { CARD, USER } from "./libs/sdk";
   import type { AquaNetUser } from "./libs/generalTypes";
   import Settings from "./pages/User/Settings.svelte";
+  import MaiPhoto from "./pages/MaiPhoto.svelte";
   import { pfp, tooltip } from "./libs/ui"
   import { ANNOUNCEMENT } from "./libs/config";
   import { t } from "./libs/i18n";
@@ -25,9 +26,18 @@
 
   export let url = "";
   let me: AquaNetUser
+  let playedMai = false
 
-  if (USER.isLoggedIn()) USER.me().then(m => me = m).catch(e => console.error(e))
+  if (USER.isLoggedIn())
+  {
+    USER.me().then(m => {
+      me = m
+      CARD.userGames(me.username).then(game => {
+        playedMai = !!game.mai2
+      })
+    }).catch(e => console.error(e))
 
+  }
   let path = window.location.pathname;
 </script>
 
@@ -44,11 +54,14 @@
     </div>
   {/if}
   <a href="/home">{t('navigation.home').toLowerCase()}</a>
-  <div on:click={() => alert("Coming soon™")} on:keydown={e => e.key === "Enter" && alert("Coming soon™")}
-       role="button" tabindex="0">{t('navigation.maps').toLowerCase()}</div>
+  <!-- <div on:click={() => alert("Coming soon™")} on:keydown={e => e.key === "Enter" && alert("Coming soon™")}
+       role="button" tabindex="0">{t('navigation.maps').toLowerCase()}</div> -->
   <a href="/ranking">{t('navigation.rankings').toLowerCase()}</a>
+  {#if playedMai}
+    <a href="/pictures">photo</a>
+  {/if}
   {#if me}
-    <a href="/u/{me.username}" use:tooltip={t('navigation.profile')}> 
+    <a href="/u/{me.username}" use:tooltip={t('navigation.profile')}>
       <img alt="profile" class="pfp" use:pfp={me}/>
     </a>
   {/if}
@@ -62,6 +75,7 @@
   <Route path="/u/:username" component={UserHome} />
   <Route path="/u/:username/:game" component={UserHome} />
   <Route path="/settings" component={Settings} />
+  <Route path="/pictures" component={MaiPhoto} />
 </Router>
 
 <style lang="sass">