add home page

neos.config.json

@@ -12,6 +12,7 @@
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
    "replayUrl":"replay.neos.moe",
    "accountUrl":"https://accounts.moecube.com",
+   "profileUrl":"https://accounts.moecube.com/profiles",
    "chainALL":false,
    "streamInterval":20,
    "startDelay":1000,

neos.config.prod.json

@@ -12,6 +12,7 @@
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
    "replayUrl":"replay.neos.moe",
    "accountUrl":"https://accounts.moecube.com",
+   "profileUrl":"https://accounts.moecube.com/profiles",
    "chainALL":false,
    "streamInterval":20,
    "startDelay":1000,

src/stores/accountStore.ts

@@ -9,6 +9,7 @@ export interface User {
   email: string;
   token: string;
   external_id: number;
+  avatar_url: string;
 }
 
 class AccountStore implements NeosStore {

src/styles/core.scss

@@ -26,6 +26,7 @@ table {
 #root {
   margin: 0 auto;
   text-align: center;
+  width: 100%
 }
 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"),
@@ -34,7 +35,7 @@ table {
 body {
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #141414;
+  background: #0f131e;
   // font: 87.5%/1.5em "Open Sans", sans-serif;
   font-size: 14px;
   display: flex;

src/ui/Home/index.module.scss

+body {
+  text-align: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.account-header {
+  position: relative;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  background: #28272d99;
+  border-bottom: 1px solid rgba(150, 150, 150, .2);
+  width: 100%;
+  height: 40px;
+
+  .header-user {
+    position: absolute;
+    right: 2%;
+    top: 0;
+    display: flex;
+    align-items: center;
+
+    img {
+      margin: 0 .5rem;
+    }
+
+    .header-user-btn {
+      color: #c9cbd0;
+    }
+
+    .sep {
+      margin: 0 .8rem;
+    }
+  }
+}
+
+.account-header > a:first-child {
+  display: inline-block;
+  position: absolute;
+  left: 2%;
+  top: 0;
+}
+
+.container {
+  position: relative;
+}

src/ui/Home/index.tsx

+import React from "react";
+import { useSnapshot } from "valtio";
+
+import { useConfig } from "@/config";
+import { accountStore } from "@/stores";
+
+import styles from "./index.module.scss";
+
+const NeosConfig = useConfig();
+
+const Home: React.FC = () => {
+  const { user } = useSnapshot(accountStore);
+
+  const onLogout = () => {}; // TODO
+
+  return (
+    <>
+      <div className={styles["account-header"]}>
+        <a href="https://mycard.moe/">
+          <img
+            src={`${NeosConfig.assetsPath}/mycard_logo.png`}
+            alt="MyCard"
+            width={130}
+            height={40}
+          />
+        </a>
+        <div className={styles["header-user"]}>
+          <img
+            src={
+              user?.avatar_url ?? `${NeosConfig.assetsPath}/default-avatar.png`
+            }
+            alt={user?.username}
+            height={40}
+          />
+          <a className={styles["header-user-btn"]} href={NeosConfig.profileUrl}>
+            个人中心
+          </a>
+          <span className={styles.sep}>|</span>
+          <a
+            className={styles["header-user-btn"]}
+            href="javascript:void(0)"
+            onClick={onLogout}
+          >
+            登出
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Home;

src/ui/Neos.tsx

@@ -10,11 +10,13 @@ const Mora = React.lazy(() => import("./Mora"));
 const NeosDuel = React.lazy(() => import("./Duel/Main"));
 const Replay = React.lazy(() => import("./Replay"));
 const SSO = React.lazy(() => import("./SSO"));
+const Home = React.lazy(() => import("./Home"));
 
 export default function () {
   return (
     <Routes>
       <Route path="/" element={<LazyLoad lazy={<Start />} />} />
+      <Route path="/home" element={<LazyLoad lazy={<Home />} />} />
       <Route path="/match" element={<LazyLoad lazy={<Match />} />} />
       <Route
         path="/room/:player/:passWd/:ip"

src/ui/SSO/index.tsx

 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import { useConfig } from "@/config";
 import { accountStore, User } from "@/stores";
@@ -14,6 +15,7 @@ const SSO: React.FC = () => {
     : undefined;
 
   const [logined, setLogined] = useState(false);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!sso) {
@@ -25,7 +27,7 @@ const SSO: React.FC = () => {
     if (user) {
       accountStore.login(user);
       setLogined(true);
-      // TODO: navigate
+      navigate("/home");
     }
   }, []);
 

src/ui/Start/index.module.scss

@@ -146,7 +146,7 @@ body * {
       width: $particleSize + px;
       height: $particleSize + px;
 
-      $startPositionY: random(10) + 80;
+      $startPositionY: random(10) + 60;
       $framesName: "move-frames" + $i;
       $moveDuration: 28000 + random(9000) + ms;