試合結果詳細の実装

これまで合計スコアのみの表示だった試合結果を、内訳まで表示するページを実装しました。

スコアボード実装小話

野球のスコアボードは後攻だけ色々なパターンがあって面倒なのです。例えば、試合を3イニングで打ち切った場合、

• 先攻の勝利
• 後攻が3回裏の攻撃を行ってサヨナラ勝ち
• 後攻が3回裏の攻撃を行わず勝ち
  この３パターンが必要となります。
  今回は、3,4,5回打ち切りのパターンを用意しました。
  あまり4回打ち切りはないのですが。

Reactを使って書いています。スコアボードをコンポーネント化したので、データをpropsで渡しています。
3-5回の後攻のスコアボードの要素が状況によって変わるので、
要素を変えてDOMの配列にpushしています。

let last_team_score = []
        if(this.props.game.last_run > this.props.game.first_run){
            if(this.props.game.bottom_3rd === null){
                //3回終了、後攻X
                last_team_score.push(<td>X</td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>)
            }else if(this.props.game.bottom_3rd !== null && this.props.game.top_4th === null){
                //3回終了、後攻サヨナラ勝ち
                last_team_score.push(<td>{this.props.game.bottom_3rd}x</td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>)   
            }else if(this.props.game.bottom_4th === null){
                //4回終了、後攻X
                last_team_score.push(<td>{this.props.game.bottom_3rd}</td>)
                last_team_score.push(<td>X</td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>)
            }else if(this.props.game.bottom_4th !== null && this.props.game.top_5th === null){
                //4回終了、後攻サヨナラ勝ち
                last_team_score.push(<td>{this.props.game.bottom_3rd}</td>)
                last_team_score.push(<td>{this.props.game.bottom_4th}x</td>)
                last_team_score.push(<td></td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>) 
            }else if(this.props.game.bottom_5th === null){
                //5回終了、後攻X
                last_team_score.push(<td>{this.props.game.bottom_3rd}</td>)
                last_team_score.push(<td>{this.props.game.bottom_4th}</td>)
                last_team_score.push(<td>X</td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>) 
            }else{
                //5回終了、後攻サヨナラ勝ち
                last_team_score.push(<td>{this.props.game.bottom_3rd}</td>)
                last_team_score.push(<td>{this.props.game.bottom_4th}</td>)
                last_team_score.push(<td>{this.props.game.bottom_5th}x</td>)
                last_team_score.push(<td>{this.props.game.last_run}</td>)    
            }
        }else{
            //先攻勝利
            last_team_score.push(<td>{this.props.game.bottom_3rd}</td>)
            last_team_score.push(<td>{this.props.game.bottom_4th}</td>)
            last_team_score.push(<td>{this.props.game.bottom_5th}</td>)
            last_team_score.push(<td>{this.props.game.last_run}</td>)
        }