taic-dev / pokequiz

ポケモンのクイズアプリです。

PokeQuiz 〜ポケクイズ〜

https://poke-quiz-psi.vercel.app/

Description

ポケモンのクイズを遊べるWEBアプリです。
なまえのクイズ、タイプのクイズ、しんかのクイズとさまざまなクイズをプレイすることが可能です。
※タイプのクイズ、しんかのクイズは開発中です…
また、世代に絞って出題することができるため、自分の好きな世代のクイズにカスタマイズできます。

Features

• 出題機能
• 合否機能

Requirement

• typescript v4.9.5
• node.js v18.14.6
• react v18.2.0
• next v13.2.3,

Usage

1. 遊びたいクイズを選択（※現在は なまえのクイズ のみ遊べます）
2. ルール説明 + 出題範囲の設定
3. 出題の解答を行う（全10問）
4. 最後に答え合わせ

How to install & Start-up

$ git clone [email protected]:taic-dev/PokeQuiz.git
$ cd PokeQuiz/
$ npm install
$ npm run build
$ npm run start

Author

taic-dev

pokequiz's Issues

トップページのデザインの変更

・トップページの作成
　上から下にポケモンの画像がスクロールする画面

StoryBook導入

ディレクトリ構成の変更

レスポンシブ対応

• トップページ
• 説明内容
• 名前のクイズ

トップページの作成

【トップページの作成】
・フォントはファミコンのフォントを使用
・ボタンなどはMUIを使用
・レイアウトは以下を予定

初級者向けのクイズページ_リファクタリング

・型定義がうまくできていないところを修正する

初級者向けクイズ 出題の範囲を指定できるようにする

・現状
出題の範囲を指定できない。
1~1000

・改善案
地方ごとに問題の出題範囲を絞ることができるようにする。

• カントー地方
• ジョウト地方
• ホウエン地方
  など

初級者向けのクイズページの作成

[fix]問題の出題範囲 1項目は選択必須にする

現状

• 問題の出題範囲を全て選択無しでゲームスタートをするとbugる

やること

• 出題範囲を1項目は選択必須にする

Next.jsのバージョンアップ

最新版にアップグレードする

タイプのクイズ作成

やること

• クイズの説明ページ作成
  　- 名前のクイズを参考に作成
• クイズページ作成
  　- PokeAPIからポケモンのタイプの情報を取得
• 答え合わせのページ作成

PWAの導入

やること

• next-pwaを使用してPWA化をする
• 各デバイスで動作確認

ファビコンの設定

出題範囲の受け渡しをReduxで管理する

DescriptionName.tsx
↓
ReduxのStoreで管理、受け渡し
↓
QuizName.tsxで受け取り

ランダムの数値を重複しないようにする

やること

• トップのランダム画像
• 問題の内容

Comming Soonページを作成する

やること

• Comming Soonの文字をFamiconで設定
• 周りにアンノーンを動かすようにする

説明ページの作成

初級、中級、上級の説明ページの作成

回答フォームの入力制限をする

やること

• カタカナのみの入力を許可する

SNS拡散ボタンの作成

やること

• Twitterの拡散ボタン

デザイン

• ポップアップ表示
  　- 拡散ボタンとTOPへ戻るボタンの作成