Merge branch 'optimize/ui/login' into 'main'

Optimize/ui/login

See merge request mycard/Neos!100

package-lock.json

@@ -46,6 +46,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.2.1",
         "prettier": "^2.7.1",
+        "sass": "^1.58.0",
         "typescript": "^4.8.4",
         "vite": "^3.1.0"
       }
@@ -10694,6 +10695,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
+      "dev": true
+    },
     "node_modules/import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -22720,6 +22727,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sass": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
+      "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
@@ -22801,6 +22825,91 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sass/node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/sass/node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/sass/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sass/node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -34744,6 +34853,12 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
       "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
     },
+    "immutable": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
+      "dev": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -44054,6 +44169,78 @@
         }
       }
     },
+    "sass": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
+      "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+          "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+          "dev": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+          "dev": true
+        },
+        "chokidar": {
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.2",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.6.0"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "readdirp": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        }
+      }
+    },
     "sass-loader": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",

package.json

@@ -67,6 +67,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
+    "sass": "^1.58.0",
     "typescript": "^4.8.4",
     "vite": "^3.1.0"
   }

src/css/JoinRoom.css

-body {
-  margin: 0;
-  justify-content: center;
-}
-
-.login_div {
-  margin: auto;
-  padding: 10%;
-}
-
-.login_p {
-  text-align: center;
-}

src/styles/_commom.scss

+.link {
+    font-size: 24px;
+    font-family: 'FontAwesome';
+    line-height: 24px;
+    
+    &-github:before {
+        content: "\f09b";
+    }
+    &-github:hover {
+        color: #E2EEF9;
+    }
+    &-twitter:before {
+        content: "\f099";
+    }
+    &-twitter:hover {
+        color: #00ACEE;
+    }
+    &-google:before {
+         content: "\f1a0";
+    }
+    &-google:hover {
+        color: #E04006;
+    }
+    &-facebook:before {
+         content: "\f082";
+    }
+    &-facebook:hover {
+        color: #4267B2;
+    }
+}
+
+.btn {
+  outline: none;
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  transform: translate(0, 0);
+  background: transparent;
+}
+
+button {
+    overflow: visible;
+    cursor: pointer;
+}

src/styles/_header.scss

+//=========================================================
+//  Header
+//---------------------------------------------------------
+
+.header {
+  padding: 10px 0;
+  height: 60px;
+  overflow: hidden;
+  line-height: 40px;
+}
+
+
+.header__title {
+  float: left;
+  font-size: 14px;
+  font-weight: 400;
+  text-rendering: auto;
+  transform: translate(0,0);
+
+  &:before {
+    content: "\f111";
+    padding-right: 5px;
+    color: #fff;
+    font-family: 'FontAwesome';
+    line-height: 20px;
+  }
+}
+
+
+.header__actions {
+  float: right;
+  padding: 8px 0;
+  line-height: 24px;
+
+  li {
+    float: left;
+    list-style: none;
+
+    &:last-child {
+      margin-left: 12px;
+      padding-left: 12px;
+      border-left: 1px solid #333;
+    }
+
+    &:first-child {
+      border: none;
+    }
+  }
+
+  .btn {
+    display: block;
+    margin: 0;
+    color: #999;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .link {
+    display: block;
+    color: inherit;
+    font-size: 14px;
+    text-decoration: none;
+    text-rendering: auto;
+    transform: translate(0,0);
+  }
+
+
+  .link--github {
+    font-size: 24px;
+
+    &:before {
+      content: "\f09b";
+      font-family: 'FontAwesome';
+      line-height: 24px;
+    }
+    
+    &:hover {
+        color: #E2EEF9;
+    }
+  }
+}

src/styles/_login-form.scss

+#login {
+	width: 280px;
+}
+
+#login form span {
+	background-color: #363b41;
+	border-radius: 3px 0px 0px 3px;
+	color: #606468;
+	display: block;
+	float: left;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+	width: 50px;
+}
+
+#login form input {
+	height: 50px;
+}
+
+#login form input[type="text"], input[type="password"] {
+	background-color: #3b4148;
+	border-radius: 0px 3px 3px 0px;
+	color: #606468;
+	margin-bottom: 1em;
+	padding: 0 16px;
+	width: 230px;
+}
+
+#login form input[type="submit"] {
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	background-color: #ea4c88;
+	color: #eee;
+	font-weight: bold;
+	margin-bottom: 10px;
+	text-transform: uppercase;
+	width: 280px;
+}
+
+#login form input[type="submit"]:hover {
+	background-color: #d44179;
+}
+
+#login > p {
+	text-align: center;
+}
+
+#login > p span {
+	padding-left: 5px;
+}

src/css/Mora.css → src/styles/_mora.scss

-.container {
+.mora_container {
   display: flex;
   margin: auto;
   padding: 0;

src/styles/_sign-in.scss

+//=========================================================
+//  SignIn
+//---------------------------------------------------------
+
+.sign-in {
+  margin-top: 90px;
+  max-width: 300px;
+
+  &__actions {
+    margin-top: 40px;
+    li {
+      float: left;
+      list-style: none;
+      width: 25%;
+      text-align: center;
+      
+      a {
+         cursor: pointer;
+      }
+    }
+  }
+}
+
+.sign-up {
+  &__actions {
+    a{
+      color: #eee;
+      padding-right: 5px;
+    }
+    p {
+      text-align: center;
+    }
+  }
+}

src/css/WaitRoom.css → src/styles/_wait-room.scss

-.container {
+.wait_container {
   display: flex;
   margin: auto;
   padding: 0;

src/styles/core.scss

+// ref: https://github.com/jvcjunior/login-react-redux
+// thanks!
+@charset "utf-8";
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+@import 
+url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"),
+"commom",
+"header",
+"login-form",
+"sign-in",
+"wait-room",
+"mora";
+
+
+* {
+  box-sizing: border-box;
+
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+
+}
+
+body {
+  background-image: url(/assets/background.png);
+  background-size:cover;
+	color: #606468;
+  font: 87.5%/1.5em 'Open Sans', sans-serif;
+  margin: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+input {
+	border: none;
+	font-family: 'Open Sans', Arial, sans-serif;
+	font-size: 14px;
+	line-height: 1.5em;
+	padding: 0;
+	-webkit-appearance: none;
+}
+
+p {
+	line-height: 1.5em;
+}
+
+.clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+
+}
+
+.container {
+  // left: 50%;
+  // position: fixed;
+  // top: 50%;
+  // transform: translate(-50%, -50%);
+	margin: 0 auto;
+  width: 100%;
+	max-width: 300px;
+	margin-top: 200px;
+}
+
+.g-row {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1000px;
+}

src/ui/JoinRoom.tsx

@@ -6,15 +6,16 @@
  * passWd: 房间密码。
  *
  * */
+import { Input } from "antd";
 import React, { useState, ChangeEvent } from "react";
-import { Link } from "react-router-dom";
-import "../css/JoinRoom.css";
-import { Input, Button } from "antd";
+import { useNavigate } from "react-router-dom";
+import "../styles/core.scss";
 
 export default function JoinRoom() {
   const [player, setPlayer] = useState("");
   const [passWd, setPasswd] = useState("");
   const [ip, setIp] = useState("");
+  const navigate = useNavigate();
 
   let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
     setPlayer(event.target.value);
@@ -27,39 +28,71 @@ export default function JoinRoom() {
   };
 
   return (
-    <div className="login_div">
-      <p className="login_p">
-        <Input
-          type="text"
-          style={{ width: "20%" }}
-          placeholder="player"
-          value={player}
-          onChange={handlePlayerChange}
-        />
-      </p>
-      <p className="login_p">
-        <Input
-          type="text"
-          style={{ width: "20%" }}
-          placeholder="ip"
-          value={ip}
-          onChange={handleIpChange}
-        />
-      </p>
-      <p className="login_p">
-        <Input
-          type="text"
-          style={{ width: "20%" }}
-          placeholder="passwd"
-          value={passWd}
-          onChange={handlePasswdChange}
-        />
-      </p>
-      <p className="login_p">
-        <Button>
-          <Link to={{ pathname: `/${player}/${passWd}/${ip}` }}>join</Link>
-        </Button>
-      </p>
+    <div className="container">
+      <div id="login">
+        <form
+          className="login-form"
+          onSubmit={() => navigate(`/${player}/${passWd}/${ip}`)}
+        >
+          <span className="fa fa-user"></span>
+          <Input
+            autoFocus
+            type="text"
+            placeholder="Player Name"
+            value={player}
+            onChange={handlePlayerChange}
+            required
+          />
+          <span className="fa-solid fa-server"></span>
+          <Input
+            type="text"
+            placeholder="Server"
+            value={ip}
+            onChange={handleIpChange}
+            required
+          />
+          <span className="fa fa-lock"></span>
+          <Input
+            type="password"
+            autoCorrect="off"
+            placeholder="Room Password"
+            value={passWd}
+            onChange={handlePasswdChange}
+            required
+          />
+          <Input type="submit" value="Enter Room" />
+        </form>
+      </div>
+      <div className="sign-up__actions clearfix">
+        <p>
+          Don't know how to play? <a href="https://neos.doc/">Player Guide</a>
+          <span className="fa fa-arrow-right"></span>
+        </p>
+      </div>
+      <div className="sign-in__actions clearfix">
+        <ul>
+          <li>
+            <a
+              href="https://github.com/DarkNeos/neos-ts"
+              className="link link-github"
+            ></a>
+          </li>
+          <li>
+            <a
+              href="https://code.mycard.moe/mycard/Neos"
+              className="fa-brands fa-gitlab"
+            ></a>
+          </li>
+          <li>
+            <a href="https://mycard.moe/">
+              <img src="/assets/mycard.icon.png" style={{ width: "25%" }} />
+            </a>
+          </li>
+          <li>
+            <a className="fa-brands fa-discord"></a>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }

src/ui/Mora.tsx

@@ -5,7 +5,6 @@
 
 import React from "react";
 import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper";
-import "../css/Mora.css";
 import { useAppSelector } from "../hook";
 import {
   selectHandSelectAble,
@@ -19,6 +18,7 @@ import { store } from "../store";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "antd";
+import "../styles/core.scss";
 
 // TODO: 应该展示聊天信息
 export default function Mora() {
@@ -60,7 +60,7 @@ export default function Mora() {
   };
 
   return (
-    <div className="container">
+    <div className="mora_container">
       <div className="item">
         <Button disabled={!selectHandAble} onClick={handleSelectScissors}>
           scissors

src/ui/WaitRoom.tsx

@@ -5,7 +5,6 @@
 import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { fetchDeck } from "../api/deck";
-import "../css/WaitRoom.css";
 import { useAppSelector } from "../hook";
 import { selectJoined } from "../reducers/joinSlice";
 import { selectChat } from "../reducers/chatSlice";
@@ -25,6 +24,7 @@ import sqliteMiddleWare, { sqliteCmd } from "../middleware/sqlite";
 import { Button } from "antd";
 import { store } from "../store";
 import { initMeExtraDeckMeta } from "../reducers/duel/extraDeckSlice";
+import "../styles/core.scss";
 
 const READY_STATE = "ready";
 
@@ -88,7 +88,7 @@ export default function WaitRoom() {
   };
 
   return (
-    <div className="container">
+    <div className="wait_container">
       <div className="playerRegion">
         <h2>{joined ? "Room Joined!" : "Room Not Joined."}</h2>
         <p>