yukicon-historyを作った
はじめに
yukicoderでは隔週くらいで金曜にコンテストが開かれています。
毎回のコンテストでの自分の成績が一覧できると便利です。
yukicon-historyを使うと、各コンテストでの
- 自分の順位
- 自分の解いた問題数
などが確認できます。
Demo
説明
入力フォームに yukicoder でのユーザ名を入力して、Submitボタンを押すとコンテストの履歴が表示されます。
ハイライトされている行は参加したコンテストを表しています。
各列は
- 日付:コンテストが開催された日と開始時刻
- コンテスト:コンテスト名
- 順位:自分の順位 / コンテスト参加者数
- solved:解いた問題数 / 出題された問題数
- writers:問題作成者(スペース区切り)
を表しています。
機能
表の右上のトグルボタンを押すと、自分の参加したコンテストだけ表示・全て表示 の切り替えができます。
構成
サーバサイド
Go (2018-07-01 更新)
あらかじめyukicoderのコンテスト順位表のページをスクレイピングして、DBに入れておきます。 リクエストが来たらDBからデータを取ってきて、jsonで返しています。
フロントエンド
React+TypeScript
create-react-app my-app --scripts-version=react-scripts-ts
(https://github.com/wmonk/create-react-app-typescript]) で環境構築が終わります。
インフラ
Google Cloud Platform
railsのほうはGAE (Google App Engine) のFlexible Environmentで動いていて、フロントのほうはGS (Google Cloud Strage) にファイルを置いています。
GoのAPIサーバはGAE (Google App Engine) のStandard Environmentで動いています。(2018-07-01 更新)
おわりに
1ヶ月くらい(2018年6月末くらいまで)は動いているはずです → yukicon-history
平方分割の可視化
https://ia7ck.github.io/visualization/sqrt-decomposition/
平方分割について:セグメント木をあきらめた人のための平方分割 - くじらにっき++
上のアニメーションはこの記事のRUQ (Range Update Query) ;色の上塗りに対応しています。
SegmentTreeの可視化:遅延セグメント木の可視化 - pekempey's blog
すごいです(すごい)