Skip to content

N
Neos
Commit 010ac313 authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

update login page

parent 86ee4f20
Hide whitespace changes
Inline Side-by-side
Showing with 575 additions and 38 deletions
package-lock.json
View file @ 010ac313
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"sass": "^1.58.0",
"typescript": "^4.8.4", "typescript": "^4.8.4",
"vite": "^3.1.0" "vite": "^3.1.0"
} }
...@@ -10694,6 +10695,12 @@ ...@@ -10694,6 +10695,12 @@
"url": "https://opencollective.com/immer" "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": { "node_modules/import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
...@@ -22720,6 +22727,23 @@ ...@@ -22720,6 +22727,23 @@
"node": ">=0.10.0" "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": { "node_modules/sass-loader": {
"version": "7.1.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
...@@ -22801,6 +22825,91 @@ ...@@ -22801,6 +22825,91 @@
"node": ">=0.10.0" "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": { "node_modules/sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
...@@ -34744,6 +34853,12 @@ ...@@ -34744,6 +34853,12 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
"integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==" "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": { "import-cwd": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
...@@ -44054,6 +44169,78 @@ ...@@ -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": { "sass-loader": {
"version": "7.1.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
src/styles/_commom.scss 0 → 100644
View file @ 010ac313
.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 0 → 100644
View file @ 010ac313
//=========================================================
// 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 0 → 100644
View file @ 010ac313
#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/styles/_sign-in.scss 0 → 100644
View file @ 010ac313
//=========================================================
// 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/styles/core.scss 0 → 100644
View file @ 010ac313
@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
"commom",
// "alerts",
"header",
"login-form",
"sign-in";
// "loading";
* {
box-sizing: border-box;
&:before,
&:after {
box-sizing: border-box;
}
}
body {
background: #2c3338;
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
View file @ 010ac313
...@@ -6,15 +6,16 @@ ...@@ -6,15 +6,16 @@
* passWd: 房间密码。 * passWd: 房间密码。
* *
* */ * */
import { Input } from "antd";
import React, { useState, ChangeEvent } from "react"; import React, { useState, ChangeEvent } from "react";
import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import "../css/JoinRoom.css"; import "../styles/core.scss";
import { Input, Button } from "antd";
export default function JoinRoom() { export default function JoinRoom() {
const [player, setPlayer] = useState(""); const [player, setPlayer] = useState("");
const [passWd, setPasswd] = useState(""); const [passWd, setPasswd] = useState("");
const [ip, setIp] = useState(""); const [ip, setIp] = useState("");
const navigate = useNavigate();
let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => { let handlePlayerChange = (event: ChangeEvent<HTMLInputElement>) => {
setPlayer(event.target.value); setPlayer(event.target.value);
...@@ -27,39 +28,57 @@ export default function JoinRoom() { ...@@ -27,39 +28,57 @@ export default function JoinRoom() {
}; };
return ( return (
<div className="login_div"> <div className="container">
<p className="login_p"> <div id="login">
<Input <form
type="text" className="login-form"
style={{ width: "20%" }} onSubmit={() => navigate(`/${player}/${passWd}/${ip}`)}
placeholder="player" >
value={player} <span className="fa fa-user"></span>
onChange={handlePlayerChange} <Input
/> autoFocus
</p> type="text"
<p className="login_p"> placeholder="Player Name"
<Input value={player}
type="text" onChange={handlePlayerChange}
style={{ width: "20%" }} required
placeholder="ip" />
value={ip} <span className="fa fa-user"></span>
onChange={handleIpChange} <Input
/> type="text"
</p> placeholder="Ip And Port"
<p className="login_p"> value={ip}
<Input onChange={handleIpChange}
type="text" required
style={{ width: "20%" }} />
placeholder="passwd" <span className="fa fa-lock"></span>
value={passWd} <Input
onChange={handlePasswdChange} type="password"
/> autoCorrect="off"
</p> placeholder="Room Password"
<p className="login_p"> value={passWd}
<Button> onChange={handlePasswdChange}
<Link to={{ pathname: `/${player}/${passWd}/${ip}` }}>join</Link> required
</Button> />
</p> <Input type="submit" value="Enter Room" />
</form>
</div>
<div className="sign-in__actions clearfix">
<ul>
<li>
<a onClick={() => {}} className="link link-github"></a>
</li>
<li>
<a onClick={() => {}} className="link link-google"></a>
</li>
<li>
<a onClick={() => {}} className="link link-twitter"></a>
</li>
<li>
<a onClick={() => {}} className="link link-facebook"></a>
</li>
</ul>
</div>
</div> </div>
); );
} }
src/ui/Mora.tsx
View file @ 010ac313
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
import React from "react"; import React from "react";
import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper"; import { sendHandResult, sendTpResult } from "../api/ocgcore/ocgHelper";
import "../css/Mora.css";
import { useAppSelector } from "../hook"; import { useAppSelector } from "../hook";
import { import {
selectHandSelectAble, selectHandSelectAble,
......
src/ui/WaitRoom.tsx
View file @ 010ac313
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { fetchDeck } from "../api/deck"; import { fetchDeck } from "../api/deck";
import "../css/WaitRoom.css";
import { useAppSelector } from "../hook"; import { useAppSelector } from "../hook";
import { selectJoined } from "../reducers/joinSlice"; import { selectJoined } from "../reducers/joinSlice";
import { selectChat } from "../reducers/chatSlice"; import { selectChat } from "../reducers/chatSlice";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment