最新の息抜き進捗

このような感じでコンポーネントの切り分けとロジック組みが進んだ。
散歩後の追い込みがかなり良かった。
早く昼間に気持ちよく散歩できる気候になってくれると良いんだけど。

<script setup>
import BtnRound from "../components/parts/btnRound.vue";
import BtnSquare from "../components/parts/btnSquare.vue";
import ProgressBar from "../components/parts/progressbar.vue";
import Hint from "../components/parts/hint.vue";
import Wave from "../components/parts/wave.vue";
import Settings from "../components/settings.vue";

const Scene = ["top", "setting", "answer", "check", "result"];
const QuizData = [];
let _scene = Scene[1];
let _setting = { lang_before: "", lang_after: "", questions: 0, choices: false, region: [] };
let _playing = { current: 1, question: 0, choices: [0, 1, 2, 3] };

function isFillSetting() {
  // settingに不備がないかチェックする
  if (aaa) {
    // 問題があれば、その部分にスクロールして赤くする
  } else {
    // 問題なければQuizDataをロードする
    load_data(_setting);
  }
}
function load_data() {
  // 標準apiで言語ごとのjsonを取ってくる（axiosじゃないやつ）
  // regionでフィルタしてQuizDataに渡す
  create_quiz(_setting.questions, _data); // _data要る？
}

function choice_quiz() {
  // questionsの数だけ図鑑番号を配列にする
  // choicesがtrueなら配列に四択の図鑑番号も入れる
}

function create_quiz() {
  // choice_quizの配列をもとにQuizDataから問題をロードし、_playingに返す。
}
</script>

<template>
  <template v-if="_scene === 'top'">
    <div class="top">
      <div class="container">
        <div class="top--logo"><img src="@/img/logo.png" alt="PokeNameLingo" width="330" height="237" /></div>
        <div class="top--txt">【非公式】<span>- ポケモン名前翻訳クイズ -</span></div>
        <BtnRound class="top--btn">Start</BtnRound>
      </div>
    </div>
    <Wave></Wave>
  </template>
  <template v-if="_scene === 'setting'">
    <Settings></Settings>
    <BtnSquare>Play</BtnSquare>
  </template>
  <template v-if="_scene === 'answer'">
    <ProgressBar></ProgressBar>
    <Hint>
      <template v-slot:kind>Type</template>
      <template v-slot:text>テキスト</template>
    </Hint>
    <BtnSquare>Check</BtnSquare>
  </template>
  <template v-if="_scene === 'check'">
    <ProgressBar></ProgressBar>
    <div class="check"></div>
    <BtnSquare>Next</BtnSquare>
  </template>
  <template v-if="_scene === 'result'">
    <div class="result">
      <h1 class="result--ttl">Result</h1>
      <div class="result--score"></div>
      <BtnRound>Share</BtnRound>
      <Settings></Settings>
      <BtnRound>Restart</BtnRound>
    </div>
    <Wave></Wave>
  </template>
</template>

ボタンに機能を持たせたい関係で、階層が深くならないようにしている。
そのため、少し行儀が悪いかなと思いつつ、シーンを指定してif文で切り替えることにした。
定石がわからないけど、GitHubを普段から回遊してる人はこういうのに詳しそう。
ぼくもTwitter見てる時間を全部GitHub見る時間に変えたい。気持ちだけはある。

データ管理に関してはZennでちらっとスクラップを作ったけど別にTwitterで良かった。
結論としては、図鑑番号さえ指定してしまえば全件走査が必要ないから、言語ごとにjsonを作って置いておくのが効率が良さそう。
とは言ってもロードに時間がかかるだろうから、ロードアニメーションは用意しておきたいところ。

そういえばGitHub Copilotみたいな拡張機能が便利らしいから、AIのサポートも入れてみたいな。
今回のは特に難しい処理も無いから程よく使えそう。
やりたいことが順番待ちになっているから、どんどん消化していきたい。