Web で動くパネルルーレット
某所で、並んだパネルからアイテムが選ばれるルーレットがほしいみたいな話があったので、練習に軽く作ってみた。
桃鉄の目的地みたいな表示をする。
実物
機能
- ルーレット
- ボタンクリックでルーレット開始/停止
- すべて表示
- 選ばれるアイテムを一時的にすべて表示する
- アイテム変更
- リスト内を編集してルーレットのアイテムを変更
- 背景変更
- ローカルの画像を読み込ませて背景として設定
- 全画面モード
- ルーレットをクリックで全画面に変更
- 全画面中はルーレットクリックで開始/停止
- 端末の全画面じゃなくてブラウザの全画面
つかったもの
Vite
本番用ビルド、開発用サーバ、環境構築に利用。超便利。
デプロイ先が GithubPages なのでちょっとだけコンフィグをいじった。
GithubPages はリポジトリ名のパスにファイルが置かれる。
Vite のデフォルト設定だと、ルートに置かれることが前提になっているのでbase設定を追加。
TypeScript
Web 開発やるならこれ
Vite の CLI で設定できるものをほぼそのまま利用
たまにこの型どうなってんだ？はあるけど、React-Redux で色々してた頃ほど大変じゃない
React
Web なのでとりあえず React でやった。
が、ルーレットアプリなんだから別にこれでやる必要はなかった。
ReactKonva
ルーレットのグラフィックを表現する Canvas エレメントの制御のために利用。
React の世界の中で Canvas を扱える。
軽く Canvas を使うくらいならこれで良いけど、最初からPixi.jsやPhaserを使ったほうが楽だったかも
use-timer
ルーレットの点滅の表現のために利用。
タイマーで 0.1 秒ごとにコールバックさせて、ステートを更新することで点滅させている
just
ユーティリティ。lodash は中身がそこそこ複雑だけど、just は 1 機能 1 ソースで見やすくて好き
gh-pages
gh-pages -d distだけで Vite の生成物を GithubPages で公開できる。楽ちん
GithubPages
デプロイ先。パスが固定になるので、Vite の設定に注意が必要。
また、ReactRouter もそのパスを基準に動作するように調整する必要がある。
他に、ルート以外への直アクセス時に 404 になるので、対策が必要(まだやってない)
問題点
TypeScript + MUI + ReactKonva の構成で開発中、アニメーションを強化しようとして、
ReactSpring を追加したところ、ReactKonvaのコンポーネントが使えなくなった。
たぶん発生したのはこれ
すこし書いてある方法ではわたしは調整できず、ReactSpring を諦めた。
最初から React 使わずやったほうが絶対良かった気がする。
ReactKonva のみだと、Animation 機能に Easing がない。
(直線的なアニメーションじゃなくて、時間軸で曲線的な動きをさせることできれいなアニメーションにするやつ)
まだやってない機能
- 4x3 以外のレイアウト、アイテム数変更
- アイテム枠線変更
- キーボード操作
- 効果音