[220415] 빙고게임 완성하기 - 02

클릭하면 X -> O 순서대로 찍히게 하기

한번 클릭한 곳은 다시 클릭해도 O/X가 바뀌지 않게 하기

<div id="root"></div>
<script type="text/babel">
    // Square
    // Board
    // Game

    class Square extends React.Component{
        render(){
            //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
            return(
                <button className="square"
                        onClick={ ()=>{ this.props.onClick() } }
                >
                    {this.props.value}
                </button>
            )
        }
    }

    class Board extends React.Component{
        state = {
            // square:[null,null,null,null,null,null,null,null,null]
            squares : Array(9).fill(null),
            xIsNext:true,
        }

        handleClick = (i) => {
            const squares = [...this.state.squares]
            console.log(squares[i])
            if(squares[i] != null){
                return
            }

            squares[i] = this.state.xIsNext ? 'X' : 'O'
            this.setState({
                squares,
                xIsNext:!this.state.xIsNext
            })
        }

        renderSquare = (i) => {
            return <Square 
                        onClick={ () => { this.handleClick(i) } }
                        value = {this.state.squares[i]}
                    />
        }

        render(){
            const {renderSquare} = this
            return(
                <div>
                    <div className="status"></div>

                    <div className="board-row">
                        {renderSquare(0)}
                        {renderSquare(1)}
                        {renderSquare(2)}
                    </div>
                    <div className="board-row">
                        {renderSquare(3)}
                        {renderSquare(4)}
                        {renderSquare(5)}
                    </div>
                    <div className="board-row">
                        {renderSquare(6)}
                        {renderSquare(7)}
                        {renderSquare(8)}
                    </div>

                </div>
            )
        }
    }

    class Game extends React.Component{
        render(){
            return(
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Game />
        ,document.querySelector('#root')
    )
</script>

 

 

 

 

클릭한 곳의 배열과 빙고조건을 충족시키는지 출력

//Square 컴포넌트 위에 작성
const calcuateWinner = (squares) => {
    const lines = [
            [0,1,2],
            [3,4,5],
            [6,7,8],
            [2,4,6],
            [0,4,8],
            [0,3,6],
            [1,4,7],
            [2,5,8],
        ]
    for(let i=0; i<lines.length; i++){
        const [a,b,c] = lines[i] //[]0,1,2
        console.log(a,b,c) //0,1,2
        console.log(squares[a],squares[b],squares[c])
    }
}

 

 

 

빙고게임 완성본

<div id="root"></div>
<script type="text/babel">
    const calcuateWinner = (squares) => {
        const lines = [
                [0,1,2],
                [3,4,5],
                [6,7,8],
                [2,4,6],
                [0,4,8],
                [0,3,6],
                [1,4,7],
                [2,5,8],
            ]
        for(let i=0; i<lines.length; i++){
            const [a,b,c] = lines[i] //[]0,1,2
            // console.log(a,b,c) //0,1,2
            // console.log(squares[a],squares[b],squares[c])

            if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]){
                return squares[a]
                //squares[a]!=null을 줄여서 squares[a]이 됨
            }
        }

        return null
    }



    class Square extends React.Component{
        render(){
            //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
            return(
                <button className="square"
                        onClick={ ()=>{ this.props.onClick() } }
                >
                    {this.props.value}
                </button>
            )
        }
    }

    class Board extends React.Component{
        state = {
            // square:[null,null,null,null,null,null,null,null,null]
            squares : Array(9).fill(null),
            xIsNext:true,
        }

        handleClick = (i) => {
            const squares = [...this.state.squares]
            // console.log(squares[i])

            if(squares[i] != null || calcuateWinner(squares) != null){
                return
            }

            const xIsNext = this.state.xIsNext

            squares[i] = this.state.xIsNext ? 'X' : 'O'
            this.setState({
                ...this.state,
                squares,
                xIsNext:!xIsNext
            })
        }

        renderSquare = (i) => {
            return <Square 
                        value = {this.state.squares[i]}
                        onClick={ () => { this.handleClick(i) } }
                    />
        }

        render(){
            const {renderSquare, state:{squares}} = this

            const winner = calcuateWinner(squares) //null, 'O', 'X'
            // console.log(winner)
            if(winner != null){
                console.log('승자가 있다')
            }else{
                console.log('승자가 없다')
                if(this.state.xIsNext == true){
                    console.log('X')
                }else{
                    console.log('O')
                }
            }


            const status = winner != null ? `Winner : ${winner}` : `Next Player ${this.state.xIsNext ? 'X' : 'O'}`
            return(
                <div>
                    <div className="status">{status}</div>

                    <div className="board-row">
                        {renderSquare(0)}
                        {renderSquare(1)}
                        {renderSquare(2)}
                    </div>
                    <div className="board-row">
                        {renderSquare(3)}
                        {renderSquare(4)}
                        {renderSquare(5)}
                    </div>
                    <div className="board-row">
                        {renderSquare(6)}
                        {renderSquare(7)}
                        {renderSquare(8)}
                    </div>

                </div>
            )
        }
    }

    class Game extends React.Component{
        render(){
            return(
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Game />
        ,document.querySelector('#root')
    )
</script>