add Start component

src/ui/Neos.tsx

@@ -3,6 +3,7 @@ import { Route, Routes } from "react-router-dom";
 
 import LazyLoad, { Loading } from "./LazyLoad";
 
+const Start = React.lazy(() => import("./Start"));
 const Match = React.lazy(() => import("./Match"));
 const WaitRoom = React.lazy(() => import("./WaitRoom"));
 const Mora = React.lazy(() => import("./Mora"));
@@ -13,6 +14,7 @@ const SSO = React.lazy(() => import("./Sso"));
 export default function () {
   return (
     <Routes>
+      <Route path="/" element={<LazyLoad lazy={<Start />} />} />
       <Route path="/match" element={<LazyLoad lazy={<Match />} />} />
       <Route
         path="/room/:player/:passWd/:ip"

src/ui/Start/index.scss

+body {
+  background: #000;
+  text-align: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+body * {
+  font-size: 1em;
+}
+
+.mycard-header {
+  position: relative;
+  z-index: 5000;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, .6);
+  border-bottom: 1px solid rgba(150, 150, 150, .2);
+  width: 100%;
+  height: 40px;
+}
+
+.mycard-header > a:first-child {
+  display: inline-block;
+  position: absolute;
+  left: 2%;
+  top: 0;
+}
+
+.wrapper {
+  background: url(/neos-assets/background-sparks.jpg) center top repeat-y;
+  position: relative;
+  animation: sparks-move 70s infinite linear;
+}
+
+.wrapper > * {
+  z-index: 20;
+}
+
+header.main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+}
+
+header.main.top {
+    padding: 22em 0 4em;
+    position: relative;
+}
+
+header.main.top.mon1::after {
+  background-image: url(/neos-assets/monster.png);
+  background-position: center -50px;
+}
+
+header.main.top::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-repeat: no-repeat;
+  // opacity: 0;
+  z-index: 1;
+  animation: mainvisual .1s ease-in-out .5s 1 normal forwards;
+}
+
+header.main.top h1 {
+  margin-bottom: 1em;
+  padding: 0 1.5em;
+  position: relative;
+  z-index: 2;
+}
+
+header.main.top .header-main p {
+  font-size: 2.5em;
+  font-weight: bold;
+  text-shadow: 0 0 0.5em #2137bd, 0 0 0.5em #2137bd;
+}
+
+@keyframes sparks-move {
+  0% {
+    background-position: center top;
+  }
+
+  100% {
+    background-position: center -1150px;
+  }
+}

src/ui/Start/index.tsx

+import "./index.scss";
+
+import React from "react";
+
+import { useConfig } from "@/config";
+const NeosConfig = useConfig();
+
+const Start: React.FC = () => (
+  <>
+    <div className="mycard-header">
+      <a className="mycard-logo" href="https://mycard.moe/">
+        <img
+          src={`${NeosConfig.assetsPath}/mycard_logo.png`}
+          alt="MyCard"
+          width={130}
+          height={40}
+        />
+      </a>
+    </div>
+    <div className="wrapper">
+      <header role="banner" className="main top mon1">
+        <div className="header-main">
+          <h1>
+            <img
+              src={`${NeosConfig.assetsPath}/neos_logo.png`}
+              width={540}
+              height={250}
+              alt="YGO NEOS"
+            />
+          </h1>
+          <p>PLAY NOW!</p>
+        </div>
+      </header>
+    </div>
+  </>
+);
+
+export default Start;