最新のスタッツへの直接アクセスが多い当サービスですが、トップページのコンテンツを充実させて刷新しました。

最近の試合結果リスト

直近の3試合を表示して試合結果詳細への導線をつけました。

API側変更

トップページにアクセスした際に「最新のスタッツ」APIを呼び出す仕様に変更し、APIで返す情報を増やす対応を行いました。

ピックアップ動画

youtubeに上げている試合動画をランダムで表示するように実装しました。

フロント側実装

試合IDとyoutubeの動画IDとの紐づけはソース上でこのようなプロパティを記述して直接更新しています。

export const youtubeConfig=
{
  //17-11-25
  "248":"1vBgiQhGW3E",
  "249":"hnF0JpGWzrk",
  "250":"QucROoxDudg",

一旦全てのキーを取得して配列に格納した後、Math.random()で乱数を生成して該当する配列のインデックスに格納されている動画を表示します。

スタッツサマリー

スタッツでTOP10を表示している項目を上位3人に絞って表示しています。
display:flexを駆使したのに文字の改行で項目の表示にずれが...orz
全部tableだと味気ないと思ったのですが。

作っているサービス

https://jcblscore-react.netlify.com/
ぜひ感想やご意見・フィードバックをお寄せください。