ゲーム（仮称）_最初の画面
最初の画面の処理実装
ログイン→パーティとするメンバーの選択とか
とりあえず早く操作させたいので、初めから→冒険のパーティ選択→あらすじ少し→街にやってきた、という感じにしよう
軽く絵を描いて雰囲気を掴んだ。
vueのテンプレートを考えよう
忘れてるので思い出せ
ページ全てのベースは、backend/resources/js/components/RPG/App.vueである
24.10.15
RPGで使っているvue-routerの役割を完全に忘れたので思い出そう
router.jsに対応するルーティングとそのルート名の命名、使うコンポーネントを記載する
コンポーネントは新しく作ったなら、importを忘れずに
戦闘画面の階層イメージ
App.vue
router-viewでBattle.vueを出している
その中のサブステータス(battleStatus=encountとか)で、Battle.vueの表示を調整している感じ
思い出した
画面のレイアウト
Beginning.vueはどうだろう？サブステータスは3段階
あらすじを軽く記載
どの職業の冒険者を3人登録するか、その画面
モーダルで確定させる
その3名で冒険が始まる....!みたいな画面
https://scrapbox.io/files/670e8324211a6f001cdef6d8.jpeg
登録画面だけ少し異色。これもサブステータスで条件分けしよう。
同じように職業IDや名前を配列で持たせて決定させる
流れを決める
はじめから
押すことでセーブデータを作成
URL直打ちで叩いた時、すでにセーブデータに紐づくパーティメンバーが設定されている場合はmenuにリダイレクト
ステータスの七角形
clip-pathを使うが、動的にする場合超難しそう
ベースでそれっぽい物を置いておくのが良い。
参考
キャラ選択画面
コマンドのように選択したロールのID, 名前を配列に入れて行けば良い
IDとか静的に管理しちゃってもいいけど、どうしようか
どっちがいいんだろう？
まあ動的にしとこうか。
プロローグ画面の「進む」を選択した時にロールの各情報を取ってくる
最速で選択すると動作が間に合わないことがある。軽い情報なので、ログインチェック時点で取得してしまおう
現在のロールのindexを操作できるようにする
した
説明書き、インデックスに沿ったパラメータを出す
出した
配列に情報を格納していき、postする
名前とロールの情報を格納していく
battle側はどういった実装になっていたかおさらい
battleCommandSetup()でまずセットアップ
if (this.currentPartyMemberIndex <= 2)の時だけコマンド選択画面に回す。3人分
else=全員の情報がすでに格納されているので、次の処理に。
コマンド選択画面
computedで...mapState(['selectedCommands']),と定義してstore.jsから呼び出し
コマンドをclickしたときの関数で、引数として選択したコマンドの値を渡す
現在のパーティメンバーIDとコマンドをdispatchする
this.$store.dispatch('setSelectedCommand', { partyId: currentMember.id, command });として、
現在のindexをインクリメントして再びバトルセットアップに。
this.$store.dispatch('incrementPartyMemberIndex');
なので、role側も
まずはロールセットアップ
次のロール配列を入れていけば良さそうだ。
ロールセットアップ
確認モーダル表示時、xボタンや灰色の画面を押すと画面が戻る
困る。YESかNOかで決めさせたい。
これでできた。
選択したロールは画面に出さないようにする
→を押した時、現在の画面のロールIDが選択中の配列のロールIDに含まれていたらインクリメントさせることにした。
複数登録されていたら難しかった
do...whileを使えば解決した
code:js
console.log('adjusttDisplayRoleIndex(): + increment -----------------------');
do {
this.$store.dispatch('incrementCurrentDisplayRoleIndex');
do
記述したコードが必ず実行される
while
()
条件。trueならdo部分がもう一度実行される。falseなら終わり。
code:js
isRoleAlreadySelected(roleId) {
return this.selectedRoleInformations.some(selected => selected.roleId === roleId);
},
some
some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。配列は変更しません。
this.selectedRoleInformationsの各要素をselectedとして取り出す
selected.roleIdが引数のroleIdと一致した時点でtrueを返す
つまり配列内に画面上のroleIdがあったらもう1回doの処理をするということ。
こういう関数があることとかはコード書きまくらないと気づかないよなーというひとりごと
beginningの設定条件を整える
ログインチェックと同時にrpg_roleの情報も取りたい。
OK
postしたデータをrpg_partiesに登録する
色々バックエンドでバリデーションをかけた。エラーの内容を画面に出したい。
冒険開始だ！みたいなメッセージを作る
作った
タイトル画面を調整
いつでもデータを消したり新規作成したりしたい
データを削除する
savedata以外にも消すものがある。パーティや習得したスキル情報、所持アイテムなど...
関連データを全て消す方法はないだろうか。
modelにboot()を定義するのが基本らしい。
CRUDの動作時に走るメソッドを書くことができる
デリートされた時、関連するロジックを一緒に消すようにする感じ。
紐づくデータ
battle_state
parties
party_learned_skill
savedata_has_item
なるほど
中間テーブルの値を解除したい
detach()がいい
todo