FGO-Calculator (Wオルタと一緒に計算)

https://fgo-damage-calculation.web.app

サービス概要

スマホアプリ 「Fate/Grand Order」で使える計算アプリ
宝具ダメージ計算、宝具NP獲得計算がメインの機能

使用画面

① トップページ

PC画面

スマホ画面

② 宝具ダメージ計算

サーヴァントの宝具ダメージを計算

PC画面

スマホ画面

宝具ダメージ 計算	結果 & セリフ画面①	結果 & セリフ画面②

③ 宝具NP獲得計算

宝具のNP獲得量を計算

PC画面

スマホ画面

固定フッターで結果をリアクティブに反映。
結果の数値に応じてセリフを変更。

宝具NP獲得 計算	ヘルプ & セリフ画面	ヘルプ & セリフ画面

使用技術

Nuxt.js × Firebase

フロントエンド

• Nuxt 2.12.2
• Vue 2.6.11
• Vuex 3.3.0
• VuexFire 3.10
• vee-validate 3.3.1
• Vuetify 2.2.27
• PWA 3.00
• dotenv 1.40
• eslint 6.8.0
• prettier 1.19.1

Firebase

• Firebase 7.14.4
  
  • Cloud Firestore
  • Hosting

インフラストラクチャー

• CircleCI

キャラクターイラスト (描いていただきました)

• ジャンヌ ・ ダルク (オルタ)
• アルトリア ・ ペンドラゴン (オルタ)

セットアップ

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.