DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init socket.io over websocket & nodejs server

This commit is contained in:
songyih 2020-01-12 14:01:31 -08:00
parent b64a2093c7
commit 812eaf6dce
5 changed files with 785 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -9,7 +9,8 @@
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
"react-scripts": "3.3.0",
"socket.io-client": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",

23
server/index.js Normal file
View File

@ -0,0 +1,23 @@
const express = require("express");
const cors = require("cors");
const app = express();
const port = process.env.PORT || 10080;
app.use(cors());
app.use(express.json());
const server = app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
})
const socket = require("socket.io");
const io = socket(server);
io.on("connection", socket => {
console.log("successfully connected");
socket.on("getMessage", message => {
console.log(message);
socket.emit("getMessage", message);
})
})

2
src/App.js
View File

@ -3,7 +3,7 @@ import DoudizhuGameBoard from './components/GameBoard';
function App() {
return (
<div style={{width: "640px", height: "360px"}}>
<div style={{width: "960px", height: "540px"}}>
<DoudizhuGameBoard/>
</div>
);

882
src/components/GameBoard/index.js
View File

File diff suppressed because it is too large Load Diff

182
src/components/GameBoard/index.scss
View File

@ -1,94 +1,126 @@
@import "cards.css";
.played-card-area {
font-size: 10px;
}
#left-player {
position: absolute;
width: 280px;
height: 130px;
background-color: blue;
left: 0px;
top: 10px;
font-size: 10px;
.player-info {
font-size: 16px;
width: 130px;
height: 100%;
background-color: green;
}
.player-hand-up {
position: absolute;
top: 0px;
margin-left: 130px;
width: 150px;
}
left: 0px;
top: 10px;
.player-hand-down {
position: absolute;
top: 50px;
margin-left: 130px;
width: 150px;
}
.player-main-area {
width: 280px;
height: 130px;
background-color: blue;
font-size: 10px;
.player-info {
font-size: 16px;
width: 130px;
height: 100%;
background-color: green;
}
.player-hand-up {
position: absolute;
top: 0px;
margin-left: 130px;
width: 150px;
}
.player-hand-down {
position: absolute;
top: 50px;
margin-left: 130px;
width: 150px;
}
}
.played-card-area {
position: relative;
left: 100px;
top: 20px;
}
}
#right-player {
position: absolute;
width: 280px;
height: 130px;
background-color: blue;
right: 0px;
top: 10px;
font-size: 10px;
.player-info {
float: right;
font-size: 16px;
width: 130px;
height: 100%;
background-color: green;
}
.player-hand-up {
position: absolute;
top: 0px;
margin-right: 130px;
width: 150px;
}
right: 0px;
top: 10px;
.player-hand-down {
position: absolute;
top: 50px;
margin-right: 130px;
width: 150px;
}
.player-main-area {
width: 280px;
height: 130px;
background-color: blue;
font-size: 10px;
.player-info {
float: right;
font-size: 16px;
width: 130px;
height: 100%;
background-color: green;
}
.player-hand-up {
position: absolute;
top: 0px;
margin-right: 130px;
width: 150px;
}
.player-hand-down {
position: absolute;
top: 50px;
margin-right: 130px;
width: 150px;
}
}
.played-card-area {
position: relative;
right: 100px;
top: 20px;
}
}
#bottom-player {
position: absolute;
width: 580px;
height: 130px;
background-color: blue;
left: 50%;
margin-left: -290px;
bottom: 0px;
.player-info {
width: 130px;
height: 100%;
background-color: green;
}
.player-hand {
position: absolute;
top: 0px;
margin-left: 130px;
width: 450px;
}
bottom: 0px;
left: 50%;
margin-left: -290px;
.player-main-area {
width: 580px;
height: 130px;
background-color: blue;
position: relative;
.player-info {
width: 130px;
height: 100%;
background-color: green;
}
.player-hand {
position: absolute;
top: 0px;
margin-left: 130px;
width: 450px;
}
}
.played-card-area {
position: relative;
//right: 100px;
//top: 20px;
}
}
.playingCards {
a.card.selected {
bottom: 1em;
}
a.card.selected {
bottom: 1em;
}
}