gobang/src/views/RoomList.js

import { useContext } from 'react'
import './RoomList.css'
import { ROOM } from '../Constant';
import RevMsgContext from '../provider/RevMsgContext';
import GlobalSocketContext from '../provider/GlobalSocketContext';
const enuString = {
    0 :'空位',
    1 :'落座',
    2 :'下棋中',
}
const RoomList = function () {
    const roomList = useContext(RevMsgContext)
    const socket = useContext(GlobalSocketContext)
    const comeIn = function(item){
        socket.send(JSON.stringify({
            instruct: ROOM,
            roomId: item.roomId
        }))
    }
    return (
        <>
            <div className='list'>
            <h3 className='list-title'>在线博弈五子棋</h3>
                <div className='grid-list'>
                {(() => {
                    if ( roomList ) {
                        return roomList.data.map((item) => {
                            return (<div onClick={()=>{
                                comeIn(item)
                            }} key={item.roomId} className='room-list'>
                                <div className='room-list-item' style={{
                                        border: (item.backState === 2 && item.whiteState === 2) ? 
                                        "3px solid green" : "1px solid black"}}>
                                    <span className='room-list-title'>黑方: {(()=>{
                                        if ( item.backState !== 0 ) {
                                            return item.backUsername
                                        } else {
                                            return enuString[item.backState]
                                        }
                                    })()}</span>
                                    <span className='room-list-title'>白方: {(()=>{
                                        if ( item.whiteState !== 0 ) {
                                            return item.whiteUsername
                                        } else {
                                            return enuString[item.whiteState]
                                        }
                                    })()}</span>
                                    <span className='room-list-title' >状态: {(()=>{
                                        if ( item.backState === 2 && item.whiteState === 2 ) {
                                            return "博弈中"
                                        } else if (item.backState === 0 && item.whiteState === 0 ) {
                                            return "未开始"
                                        } else if (item.backState === 1 && item.whiteState === 1 ) {
                                            return "已就位"
                                        } else if (item.backState === 0 && item.whiteState === 1 ) {
                                            return "二缺一"
                                        } else if (item.backState === 2 && item.whiteState !== 2 ) {
                                            return "待开始"
                                        } else if (item.backState !== 2 && item.whiteState === 2 ) {
                                            return "待开始"
                                        } else if (item.backState === 0 && item.whiteState === 1 ) {
                                            return "二缺一"
                                        } else {
                                            return "未知"
                                        }
                                    })()}</span>
                                </div>
                            </div> )
                        })
                    }
                })()}
                </div>
            </div>
        </>
    )
}
export default RoomList