優勝ラインシミュレーター作りました。

急遽クソアプリ2 Advent Calendar 2019の1日目に参加することになりました。

計算を自動化するスプレッドシートを作っていて、やっぱりReactで書いた方が動的にスタイル変更できるしいいじゃない！と思って作りました。

どんなアプリ？

試合数、チームの成績をもとにリーグ戦の優勝ラインをシミュレーションします。勝率と勝ち点方式に対応しています。

制作期間

2019/12/01～
突貫で最低限の機能だけ作ったので今回はUIに凝っていないです。

URL

https://championship.netlify.com

工夫したところ

結果のテーブルヘッダを固定してスクロールできるようにしています。元々<table>タグで書いていたのですが、固定しようとすると横幅が一致しない問題が出てきたので<div>タグで初めてテーブル書きました。

div.table_header{
  display: table-row;
}
div.table_cell{
  display: table-cell;
  border: 0.5px solid #696969;
  padding: 2px;
  min-width: 4rem;
  text-align: right;
  white-space: nowrap;
}
div.scroll{
  overflow-y: scroll;
  height: 80vh;
}

把握している課題

• UI
• 試合数全てのパターンを計算・表示しているため、試合数に大きな数字を入れるとブラウザがメモリ不足で落ちる。
  • いずれかのチームに該当する結果があるまで表示しないようにする
• チームの列入れ替え機能欲しい