１０％の確率でドオーしか表示されないポケモン生成サイトを作った
PokeAPIを使って10%の確率でドオーしか表示されないポケモン生成サイトを作成。
目次
背景
PokeAPI を使ってみた一心から始まり、ポケモンをランダムに 6 匹表示するサイトを考え始めた。
作成中にランダムでポケモンを表示していると、あまりにもドオーが可愛すぎたので一定の確率でドオーしか表示されないポケモン生成サイトにすることにした。
可愛くないですか？？？
目的
- PokeAPI を使ってみる
- Next.js の勉強を軽くしたので、AppRouter を使用して API を叩く
- なんちゃってレスポンシブデザインを実現する
できたもの
poketter(https://poketter.vercel.app/)
GitHub - Suntory-Y-Water/poketter: ポケモンSVで内定しているポケモンをランダムで6匹表示する
ポケモンSVで内定しているポケモンをランダムで6匹表示する. Contribute to Suntory-Y-Water/poketter development by creating an account on GitHub.
感想と考慮したところ
ポケモンSVで内定しているポケモンに絞った
なにかのバグで ランダムでポケモン育成してみようぜ!!! みたいなことが起きたとき、内定しているポケモンだと決めるのが楽かなと思った。
最新の DLC(12 月配信)には対応できていませんが、一個前の DLC には対応できています。
10%でドオーは光る
10%引いたあと更に 10%引くと嬉しくなりますね！！！！
画面デザインとレスポンシブデザイン
画面の色や UI については事前に Figma で設計をしました。
検討当初のボタンがそのまま入っていたりしますが..。
ボタンの色や背景色、カラーコードなどはピカチュウ大先生を連想しながら coolors で見つけて実装しました。
Coolors - The super fast color palettes generator!
Generate or browse beautiful color combinations for your designs.
最後に
本当はドオーしか出なかったときにアニメーションをつけようと思ったけど、画面負荷が高くなるとのいい感じのアニメーションが思いつかなかったのでボツになりました。
またなにか思いついたら作ります。
おわり。