初步完成功能了

src/Constant.js

@@ -1,3 +1,5 @@
 const ROOM = "room"
 const HALL = "hall"
-export  { ROOM, HALL }
+const BEGIN = "begin"
+const POINT = "point"
+export  { ROOM, HALL, BEGIN, POINT }

src/component/Navigation.js

@@ -1,16 +1,19 @@
-import { useContext } from 'react';
+import { useContext } from 'react'
 import './Navigation.css'
 import _ from 'lodash'
-import { HALL } from '../Constant';
+import { HALL, BEGIN } from '../Constant'
 import tableData from '../views/CheckerboardData'
-import GlobalSocketContext from '../provider/GlobalSocketContext';
+import GlobalSocketContext from '../provider/GlobalSocketContext'
+import RevRoomContext from '../provider/RevRoomContext'
 const tableDataTemplate = _.cloneDeep(tableData)
-const Navigation = function ({updateTable, gameStatus, status}) {
+const Navigation = function () {
+    const { room } = useContext(RevRoomContext)
     const socket = useContext(GlobalSocketContext)
     const beginGame = () => {
-        const tableDataInit = _.cloneDeep(tableDataTemplate)
-        updateTable(tableDataInit)
-        gameStatus(1)
+        socket.send(JSON.stringify({
+            instruct: BEGIN,
+            data:tableDataTemplate
+        }))
     }
     const backHall = () =>{
         socket.send(JSON.stringify({
@@ -27,35 +30,35 @@ const Navigation = function ({updateTable, gameStatus, status}) {
                     <img className='avatar' alt='' src={require("../assets/left.png")} />
                     <div className='text-box'>
                         <span className='user-text'>{(() => {
-                            switch (status) {
+                            switch (room.status) {
                                 case 0: return '未开始'
                                 case 1: return '请黑方落子'
                                 case 2: return '请白方落子'
                                 default: return '未知!'
                             }
                         })()}</span>
-                        <span className='user-text'>张三</span>
+                        <span className='user-text'>{room.backUsername}</span>
                     </div>
                 </div>
                 <div className='nav-item'>
                     <button onClick={beginGame}
-                        disabled={status === 0 ? false : true}
+                        disabled={room.status === 0 ? false : true}
                         className='beginGame'>{(() => {
-                            return status === 0 ? '开始游戏' : '游戏进行中'
+                            return room.status === 0 ? '开始游戏' : '游戏进行中'
                         })()} </button>
                 </div>
                 <div className='nav-item'>
                     <img className='avatar right-avatar' alt='' src={require("../assets/right.png")} />
                     <div className='text-box'>
                         <span className='user-text'>{(() => {
-                            switch (status) {
+                            switch (room.status) {
                                 case 0: return '未开始'
                                 case 1: return '请黑方落子'
                                 case 2: return '请白方落子'
                                 default: return '未知情况'
                             }
                         })()}</span>
-                        <span className='user-text'>李四</span>
+                        <span className='user-text'>{room.whiteUsername}</span>
                     </div>
                 </div>
             </div>

src/views/Checkerboard.js

@@ -1,28 +1,34 @@
-import { useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import './Checkerboard.css'
+import { POINT } from '../Constant';
 import tableData from './CheckerboardData'
 import Navigation from '../component/Navigation'
+import RevRoomContext from '../provider/RevRoomContext';
+import GlobalSocketContext from '../provider/GlobalSocketContext';
 const bgline = [
   ["x", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n"],
   ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"]
 ];
 const constant = {a:1, b:2, c:3, d:4, e:5, f:6, g:7, h:8, i:9, j:10, k:11, l:12, m:13, n:14}
 const Checkerboard = function () {
+  const { room, data } = useContext(RevRoomContext)
+  const socket = useContext(GlobalSocketContext)
   const [table, updateTable] = useState(tableData)
   const [userStatus, setGameStatus] = useState(0)
+  useEffect(()=>{
+    updateTable(data)
+  }, [data])
   const goBangTouchEvent = function (x, y, value) {
-    if ( userStatus === 0 ) {
+    if ( room.status === 0 ) {
       console.log( "棋盘未开始呢!!" )
       return
     }
     if (value === 0) {
-      table[x][y] = userStatus
-      updateTable({ ...table })
-      switch (userStatus) {
-        case 1: setGameStatus(2); break;
-        case 2: setGameStatus(1); break;
-        default: setGameStatus(0)
-      }
+      data[x][y] = room.status
+      socket.send(JSON.stringify({
+          instruct: POINT,
+          data:data
+      }))
       if ( userStatus !== 0 ) {
         win(x, y, table)
       }