update Start component

src/stores/accountStore.ts

+import { proxy } from "valtio";
+
+import { NeosStore } from "./shared";
+
+export interface User {
+  id: string;
+  username: string;
+  name: string;
+  email: string;
+  token: string;
+  external_id: number;
+}
+
+class AccountStore implements NeosStore {
+  user?: User;
+  login(user: User) {
+    this.user = user;
+  }
+  logout() {
+    this.user = undefined;
+  }
+  reset(): void {
+    this.user = undefined;
+  }
+}
+
+export const accountStore = proxy(new AccountStore());

src/stores/index.ts

+export * from "./accountStore";
 export * from "./cardStore";
 export * from "./chatStore";
 export * from "./joinStore";

src/ui/Start/index.scss

@@ -72,6 +72,7 @@ body * {
   background-color: transparent;
   border-style: none;
   color: rgba(255, 255, 255, .8);
+  font-family: var(--theme-font);
   font-size: 2.5em;
   font-weight: bold;
   text-shadow: 0 0 0.5em #a2162d, 0 0 0.5em #f80000d6;

src/ui/Start/index.tsx

 import "./index.scss";
 
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useConfig } from "@/config";
+import { accountStore, User } from "@/stores";
 const NeosConfig = useConfig();
 
-const Start: React.FC = () => (
+const Start: React.FC = () => {
+  const sso = new URL(location.href).searchParams.get("sso");
+  const user: User | undefined = sso ? getSSOUser(new URLSearchParams(atob(sso))) : undefined;
+  const onLogin = () => {
+    const ssoUrl = getSSOUrl(location.href);
+    window.location.href = ssoUrl;
+  };
+
+  useEffect(() => {
+    if (user) {
+      accountStore.login(user);
+      // TODO: navigate
+    }
+
+  }, [user])
+
+  return (
     <>
       <div className="mycard-header">
         <a className="mycard-logo" href="https://mycard.moe/">
@@ -28,11 +45,34 @@ const Start: React.FC = () => (
                 alt="YGO NEOS"
               />
             </h1>
-          <button>PLAY NOW!</button>
+            <button onClick={onLogin}>登陆萌卡进行游玩</button>
           </div>
         </div>
       </div>
     </>
-);
+  );
+};
+
+function getSSOUrl(callbackUrl: string): string {
+  let params = new URLSearchParams();
+  params.set("return_sso_url", callbackUrl);
+  const payload = btoa(params.toString());
+
+  const url = new URL("https://accounts.moecube.com");
+  params = url.searchParams;
+  params.set("sso", payload);
+
+  return url.toString();
+}
+
+function getSSOUser(searchParams: URLSearchParams): User {
+  const sso = {};
+  for (const [key, value] of searchParams) {
+    // @ts-ignore
+    sso[key] = value;
+  }
+
+  return sso as any;
+}
 
 export default Start;