const en = 'He wants to be independent of his parents.'
const RootComponent = {
  data () { return {
    origin: en,
    text: setData(),    //初期設定
    p: [],              //何番目まで答えたかの位置
    showBackward: true, //「戻る」ボタンの表示・非表示
    message: ''         //メッセージの本文
  }},
  template: `
    <p>{{origin}}</p>
    <p>
      <span v-for="word in text.words">
        {{word+" "}}
      </span>
    </p>
    <div>
      <button
        v-for="(option, index) in text.opt"
        v-show="text.optShow[index]"
        @click="input(index)">
        {{option}}
      </button>
      <button v-show="showBackward" @click="backward">戻る</button>
    </div>
    <div>{{message}}</div>`,
  methods: {
    input(index) {
      this.text.optShow[index] = false;  //押されたボタンを非表示に
      //マスクされた部分を選択肢から選んだ単語に置き換える
      this.text.words[this.text.mask[this.p.length]] = this.text.opt[index];
      this.text.record.push(index);   //押されたボタンの番号を記録
      //選択肢の文字列と本文の文字列が一致すれば正解
      if(this.text.optMask[index] == this.text.mask[this.p.length]) { 
        this.p.push('correct');   //正解なら配列にcorrectを加える
      } else { 
        this.p.push('incorrect'); //不正解なら配列にincorrectを加える
      }
      //終了時
      if(this.p.length == this.text.mask.length) {
        this.showBackward = false;  //「戻る」ボタンを非表示にする
        //配列のすべての要素がcorrectであるかどうかを調べる
        if(this.p.every(value => value == 'correct')) {
          this.message = 'すべて正解です。';
        } else {
          this.message = '誤りがあります。';
        }
      }
    },
    backward() {
      if(this.p.length > 0) {
        this.p.pop();   //配列の最後の要素を削除して一つ戻る
        //入力された単語を下線に戻す
        this.text.words[this.text.mask[this.p.length]] = ' ____ ';
        //ボタンを再度表示する
        this.text.optShow[this.text.record.pop()] = true;
      }
    }
  }
}
function setData() {
  let obj = {
    words: en.split(' '),   //本文を単語ごとに分割
    record: [],             //ボタンを押した順番の記録
    mask: [],               //マスクする単語の位置
    opt: [],                //選択肢の文字列
    optMask: [],            //選択肢が表す単語の位置
    optShow: []             //ボタンの表示・非表示
  }
  let n = Array.from(Array(obj.words.length).keys()); //連番の配列
  //シャッフル
  for(let i = 0; i < 100; i++) {
    let a = Math.floor(Math.random() * n.length);
    let b = Math.floor(Math.random() * n.length);
    [n[a], n[b]] = [n[b], n[a]];
  }
  //マスクする単語数：１語＋全体の２５％
  let amount = 1 + Math.round(obj.words.length * 0.25);
  //マスクする単語数にしたがって設定を行う
  for(let i = 0; i < amount; i++) {
    obj.mask.push(n[i]);            //マスクする単語の位置を追加
    obj.opt.push(obj.words[n[i]]);  //選択肢の文字列を追加
    obj.optMask.push(n[i]);         //選択肢が表す単語の位置を追加
    obj.optShow.push('true');       //ボタンの表示を追加
  }
  obj.mask.sort((a, b) => a - b);　//昇順に並べ替え
  //マスクされた単語を下線に置き換える
  for(let i = 0; i < obj.opt.length; i++) {
    obj.words[obj.mask[i]] = ' ____ ';
  }
  return obj;
}
const app = Vue.createApp(RootComponent);
app.mount('#root');