gobang/src/views/Checkerboard.js

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 ( room.status === 0 ) {
      console.log( "棋盘未开始呢!!" )
      return
    }
    if (value === 0) {
      data[x][y] = room.status
      socket.send(JSON.stringify({
          instruct: POINT,
          data:data
      }))
      if ( userStatus !== 0 ) {
        win(x, y, table)
      }
    } else {
      console.log("此处已经落子了")
    }
  }
  const win = function(x, y, table){
    //横向
    if( getXValue(x, y, table) ) {
      console.log( userStatus === 1 ? "黑方赢了" : "白方赢了" )
      setGameStatus(0)
    }
    //纵向
    if( getYValue(x, y, table) ) {
      console.log( userStatus === 1 ? "黑方赢了" : "白方赢了" )
      setGameStatus(0)
    }
    //斜向
    if ( getXyValue(x, y, table) ) {
      console.log( userStatus === 1 ? "黑方赢了" : "白方赢了" )
      setGameStatus(0)
    }
  }
  const getXValue = function(x, y, table){
    //向左遍历
    let n = 0
    for (let i = y; i < table[x].length; i++) {
      if (table[x][i] === userStatus) {
        n++;
      } else if (table[x][i] === 0){
        break
      } else {
        n=0
      }
    }
    if ( n >= 5 ) return true
    //向右遍历
    n = 0
    for (let i = y; i > 0; i--) {
      if (table[x][i] === userStatus) {
        n++;
      } else if (table[x][i] === 0){
        break
      } else {
        n=0
      }
    }
    if ( n >= 5 ) return true
    return false
  }
  const getYValue = function(x, y, table){
    //从点击点向上遍历
    let n = 0
    const rTable = Object.keys(table).reverse();
    for (const key in rTable) {
      if ( constant[rTable[key]] <=  constant[x] ) {
        if ( table[rTable[key]][y] === userStatus ) {
          n++
        } else if ( table[rTable[key]][y] === 0 ) {
          break
        } else {
          n=0
        }
      }
    }
    if ( n >= 5 ) return true
    //从点击点向下遍历
    n=0
    for (const key in table) {
      if (Object.hasOwnProperty.call(table, key)) {
        if ( constant[key] >=  constant[x] ) {
          if ( table[key][y] === userStatus ) {
            n++
          } else if ( table[key][y] === 0 ) {
            break
          } else {
            n=0
          }
        }
      }
    }
    if ( n >= 5 ) return true
    return false
  }
  const getXyValue = function(x, y, table){
    //向左上角遍历
    let n = 0 , flag = false, k = y+1
    const tableKey = Object.keys(table).reverse();
    for (let i = 0; i < 14; i++) {
      if ( tableKey[i] === x ) {
        flag = true
      }
      if ( flag === false ) continue
      k--
      if ( table[tableKey[i]][k] === userStatus ) {
        n++
      } else if (table[tableKey[i]][k] === 0) {
        break;
      } else {
        n=0
      }
    }
    if ( n >= 5 ) return true
    
    //向左下角遍历
    n = 0 ;  k = y-1; flag = false; 
    const rTableKey = Object.keys(table)
    for (let i = 0; i < table[x].length; i++ ) {
      if ( rTableKey[i] === x ) {
        flag = true
      }
      if ( flag === false ) continue
      k++
      if ( table[rTableKey[i]][k] === userStatus ) {
        n++
      } else if (table[rTableKey[i]][k] === 0) {
        break;
      } else {
        n=0
      }
    }
    if ( n >= 5 ) return true
    return false
  }
  return (
    <div className='body'>
      <Navigation updateTable={updateTable} gameStatus={setGameStatus} status={userStatus} />
      <div className='center'>
        <div className='checkerboard'>
          <div className='board' >
            {Object.keys(table).map((x) => {
              return (
                <div key={x} className='board-grid'>
                  {table[x].map((value, y) => {
                    return (
                      <div
                        onClick={() => {
                          goBangTouchEvent(x, y, value)
                        }}
                        onTouchEnd={() => {
                          goBangTouchEvent(x, y, value)
                        }}
                        className={(() => {
                          switch (value) {
                            case 0: return 'board-item'
                            case 1: return 'black board-item'
                            case 2: return 'white board-item'
                            default: return 'board-item'
                          }
                        })()}
                        key={y}
                      >
                      </div>
                    )
                  })}
                </div>
              )
            })}
          </div>
          <div className='bj' >
            {(() => {
              const ret = bgline[0].map((x) => {
                return (
                  <div key={x} className='bj-grid'>
                    {
                      bgline[1].map((y) => {
                        return (
                          <div key={y} className={(() => {
                            let ret = 'bj-item'
                            if (x === 'n') {
                              ret += ' bj-bottom'
                            }
                            if (y === '14') {
                              ret += ' bj-right'
                            }
                            return ret
                          })()}>
                            {x === 'x' && y !== '0' ? <span className='xline'>{y}</span> : ''}
                            {y === '0' && x !== 'x' ? <span className='yline'>{x}</span> : ''}
                          </div>
                        )
                      })
                    }
                  </div>
                )
              })
              return ret
            })()}
          </div>
        </div>
      </div>
    </div>
  )
}
export default Checkerboard