LoLTierTable を作り直して公開しました

League of Legends のチャンピオンでティア表とマトリクス図を作れるツール、LoLTierTable を公開した。全部作り直している。

なぜ作り直したか

正直に言うと、初版は去年の10月あたりで飽きて放置していた。

引っ張り出したきっかけはこのサイトのほうで、tukiguti.com を作るときに「ポートフォリオとして出せるものって何かあったっけ」と過去に作ったものを漁った。そこで出てきたのがこれだった。中身をリファクタリングして、デザインも整え直せば見せられるものになりそうだと思った。

あとは単純に、ソロランクでダイヤに行ったので、そのへんも込みで改めて何かネタにしたくなったというのもある。

久しぶりに開いてみたら、同じ役割のコンポーネントがいくつも並んでいた。チャンピオン一覧を描くものが6種類、マトリクスを描くものが3種類。どれが生きているのか自分でも分からない状態で、全体では86ファイル・約8000行。これは部分的に直すより作り直した方が早いと判断した。

決めたこと

1つ目、デザインを少しちゃんと作り直す。 初版は機能から先に作って見た目が後付けだったので、今回は先に画面を固めてから実装に入った。

2つ目、綺麗に作れそうなものだけ作る。 初版には4象限モードなど手を広げた部分があったが、一旦それは畳んだ。ティア表とマトリクスの2つに絞っている。

3つ目、とりあえず使いやすいを目指す。 分かりやすい例が画面のスクロールで、初版はチャンピオンの一覧がページの一番下にあって、並べるたびに上下を往復する必要があった。今回はヘッダーとサイドバーを固定して、一覧とメイン領域がそれぞれ内側でスクロールする形にしてある。

作ったもの

ティア表は、S/A/B/C/D の段にドラッグで並べる。段の名前も色も並び順も変えられるし、段そのものを増減できる。並べる前の候補を置いておく場所も用意した。

マトリクスは2軸のグリッドに自由配置する。軸の名前は書き換えられるし、ラベルの位置も動かせる。同じチャンピオンを複数置けるので、「同じキャラでもレーンによって難易度が違う」みたいな比較もできる。

作った図はPNG画像で保存できる。SNSに貼ることを考えると、ここが無いとツールとして成立しない。あとURLでも共有できる。図の状態をURLの中に圧縮して埋め込んでいるので、サーバーにデータを保存していない。リンクを開いた人はそのまま編集できる。

技術的な話

React + TypeScript + Vite、ドラッグは dnd-kit、ホスティングは Cloudflare Pages。

チャンピオンのアイコンと情報はリポジトリに置かず、ビルド時に Riot の Data Dragon から取得している。173体で約5MBあるので、リポジトリに抱えたくなかった。取得は1.6秒で終わるのでビルド時間にもほぼ影響しない。

書き出し機能では詰まった。html2canvas がoklch表記の色を解釈できず、撮影しようとすると即エラーになる。このアプリの配色は全部oklchで書いてあったので全滅だった。撮影の直前だけ色指定を差し替えて、終わったら戻す、という回避で通した。

これから

パッチが変わったら設定ファイルの数字を書き換えるだけでチャンピオンが更新される作りにしてある。新チャンピオンが増えたらレーンのプリセットも足していく。

触ってみて気になるところがあれば教えてください。