From 812eaf6dce783f35427fa5359bd603627d5c6bf8 Mon Sep 17 00:00:00 2001 From: songyih Date: Sun, 12 Jan 2020 14:01:31 -0800 Subject: [PATCH] init socket.io over websocket & nodejs server --- package.json | 3 +- server/index.js | 23 + src/App.js | 2 +- src/components/GameBoard/index.js | 882 ++++++++++++++++++++-------- src/components/GameBoard/index.scss | 182 +++--- 5 files changed, 785 insertions(+), 307 deletions(-) create mode 100644 server/index.js diff --git a/package.json b/package.json index 1cfbca3..0cb3323 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..4187352 --- /dev/null +++ b/server/index.js @@ -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); + }) +}) diff --git a/src/App.js b/src/App.js index 6d0fc21..1e3cb87 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import DoudizhuGameBoard from './components/GameBoard'; function App() { return ( -
+
); diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js index d9adf3d..fd6edbc 100644 --- a/src/components/GameBoard/index.js +++ b/src/components/GameBoard/index.js @@ -1,8 +1,41 @@ -import React from 'react'; +import React, { useState, useEffect} from 'react'; import ReactDOM from 'react-dom'; +import webSocket from 'socket.io-client'; import './index.scss'; +const TestWebSocket = () => { + const [ws, setWs] = useState(null); + + const connectWebSocket = () => { + setWs(webSocket("http://localhost:10080")); + }; + + useEffect(() => { + if(ws){ + console.log('successfully connect from client'); + initWebSocket(); + } + }); + + const initWebSocket = () => { + ws.on("getMessage", message => { + console.log(message); + }) + }; + + const sendMessage = () => { + ws.emit("getMessage", "wdnmd shuangma?"); + }; + + return ( +
+ + +
+ ); +} + class DoudizhuGameBoard extends React.Component { constructor(props) { super(props); @@ -11,70 +44,137 @@ class DoudizhuGameBoard extends React.Component { render() { return ( -
+
-
- placeholder -
-
+
+
+ placeholder +
+ +
-
+
+
-
+
+
placeholder -
- -
+
-
- placeholder -
-
-
+ + + +
+
); } diff --git a/src/components/GameBoard/index.scss b/src/components/GameBoard/index.scss index 32499f2..23a920e 100644 --- a/src/components/GameBoard/index.scss +++ b/src/components/GameBoard/index.scss @@ -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; + } }