直近の試合結果で引分が表示できないバグ修正

チームメンバー打撃成績に詳細項目追加

チームページにチーム通算成績表示を追加

あまり進捗が芳しくないですが、昼休みに少しだけ進めました。

• 通算勝敗タブを新たに追加。
• 通算成績表示

コンテンツ

URL: https://jcblscore-react.netlify.com/

(1)トップページ

メニュー的な位置づけのページです。

• (2)試合結果一覧
• (3)最新のスタッツ
• (4)全期間通算成績
• (5)選手一覧
• 日本カラーボール野球連盟(外部ページです)

(2)試合結果一覧

各シーズン(半年ごと)の試合結果がアコーディオンメニュー形式で配置されています。

(3)最新のスタッツ

チーム順位

• 赤枠・・・(7)チームページへ

チーム順位以外

• 青枠・・・(8)選手ページへ

(4)全期間通算成績

(3)最新のスタッツとレイアウトがほぼ同じなので説明を割愛します。

(5)選手一覧

• 赤枠・・・(7)チームページへ
• 青枠・・・選手名・チーム名をフィルタリングできるフォームです
• 緑枠・・・(8)選手ページへ

(6)日別試合結果

• 赤枠・・・(7)チームページへ
• 青枠・・・(8)選手ページへ
• 緑枠・・・(あれば)youtubeへのリンク

(7)チームページ

実装予定で未実装のもの

• (6)日付へのリンク
• 勝ち投手・負け投手の(8)選手ページへのリンク
• チームメンバー打撃成績・投球成績

(8)選手ページ

概要

横スクロールバーをカスタマイズ

まだしっくり来てはいないのですが、横スクロールバーを目立たせるよう実装を変えました。スマホだと自己主張に乏しすぎて困る。

謎の余白ができていたのを修正

タブを入れ子構造にしていたころの名残がCSSの修正によって出てきていました。

試合結果レイアウト修正

チーム名ブロック内改行

チームアイコン表示

チーム名をdivで括ってブロックの中で改行するようにしました。
スコアにチームアイコンを表示するようにしました。

OneSignalを用いたWEBプッシュの実装

横スクロールするテーブルの余白調整

youtubeの埋め込みを廃止

あまり需要がなかったのと動画の読み込みでユーザにストレスがかかりそうだったのでリンクにしました。

試合結果からチームページへのリンク

リファクタリング

見た目にはあまり影響はないのですが、react-bootstrap-tableをいくつも使っていて同じ項目を表示しているのに実装が違う、という問題を解消しました。
レビューをいただいていた点の大部分を修正できたかなと思います。
ソースを統一したので全期間通算成績→チームページ、選手個人ページへのリンクも動作しています。

• 残りタスク

概要

動作イメージ(GIF)

スマホでも横スクロールバーを常に表示

スクロールバーをCSSでカスタマイズして、スクロール中以外でも表示するようにしました。

シーズンセレクタの装飾

あまり目立たないのでセレクタ(プルダウン)を装飾してみました。
プルダウンしたときの失敗感。。。

トップページのコンテンツ実装

長らく試合結果一覧をデフォルトのトップページにしていましたが、
メニューの内容をトップページのコンテンツにしました。