Educational Codeforces Roundをやっていきたい話

この記事はカレーのちぴょこりんクラスタ Advent Calendar 2018 - Adventar のために書いたものです。

ぴょこりんクラスタ新人です。よろしくおねがいします。

はじめに

競技プログラミング(以降、競プロ）ってあるじゃないですか。
自分は競プロを細々と続けてるんですけど、

学生当時最大手だったサイト TopCoder の衰退
周囲レベルの高騰
時間とれない

あたりの理由で、最近はあまり思ったように活動できてない自覚があります。

せっかくアドベントカレンダー書くんだし、12月を通して少し修行しようと思いまして。
知り合いのレッドコーダー*1にお勧めされた、Educational Codeforces Roundをやっていきたい気分になりました。

Educational Codeforces Roundというのは Dashboard - Educational Codeforces Round 1 - Codeforces などのことで、
教育的な問題の詰め合わせらしいです。
リンクはRound1ですが、現時点ではRound 55まで存在しています。

しかし、やっていきたい気持ちになったものの、
漫然とやるだけだと達成感が足りないので、やっていきを高める必要があります。

本題

Educational Codeforces Roundの解いたものがわかるような進捗可視化ツールを作りました。

github.com

デモ

起動が遅かったりマウス操作が雑で所定のオンマウスになった絵がとれてなかったりしますが。大体これで察して欲しい。

雑な説明

仕様

何かstartしたらブラウザが開いて問題一覧が表示される
解けたか解けてないか未着手かで色分けがされる（誤答投げまくった時用にaccept数/submit数も表示させといた)
問題番号をクリックしたら所定の問題リンクへと飛ぶ

これだけ。

実装

codeforcesが各種情報取得APIを提供している*2ので、
それをnodejsでたたけるライブラリ*3をつかいます。

コンテスト情報からEducational Codeforces Roundsと言う名前のあるコンテストを取ってきておいて、
別途、問題情報と解答投稿情報から各問題が解けたか解けないかの情報を作っておいて、
後者を前者でフィルタしつつ、Reactでよしなに表示するだけです。

コンテストページを探すのは地味に面倒*4なので、これだけでもあると便利だと思います。

こぼれ話

本当は点数順に並び替えもやりたかったけどEducational Roundの問題には点数が設定されてなかった為断念しました。
ReactはじめてなのでTutorial触りつつ雰囲気で書いたんですが、動くものができるのはやっぱり楽しいですね。
ちなみにReactにしたのは、自分がこれまでに触ったことのない＆それなりに流行ってそうなもの、という理由。
今回使ってみた感想としては、Webページをパーツごとに定義しながら組み立てていく感じは割と好みかも知れない。

しかし、いざ表示させてみると明らかなんですが、
Educational Round、2018/12/05時点で、55コンテスト*大体6問以上なので、330問以上はあるんですよね。。

…

………

………………

………………………………