駒台の表示ロジック

本章からゲームロジックで必要になる関数を作っていきます。

駒台に獲得した駒を表示する関数を作ります。

ComKomadai.vueに駒ラベルを表示するかを決めるshowKomaLabelという関数を作ります。
関数はmethodsで定義します。

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["komaList", "comKomadai", "comPoint"])
  },
  methods: {  // 以下追加
    showKomaLabel(komaIndex) {
      if (this.comKomadai.includes(komaIndex)) {
        return this.komaList[komaIndex].label
      } else {
        return null
      }
    }
  }
}
</script>  

引数のkomaIndexはfuやkinなどの値が渡ってくる想定です。
this.comKomadaiはstore.jsのstateで定義したcomKomadaiです。

まだ作成していませんが、Comが駒を獲得したらcomKomadaiにfuやkinなどが追加されます。
例えばcomKomadaiが["fu", "kin"]だとしたら、showKomaLabel("fu")の戻り値は歩で、showKomaLabel("kaku")の戻り値はnullとなります。

これをテンプレートで所定の駒の位置で引数を渡せば表示ロジックが出来上がります。

<tbody>
  <tr>
    <td>{{ showKomaLabel("kaku") }}</td>
    <td>{{ showKomaLabel("kin") }}</td>
    <td>{{ showKomaLabel("gin") }}</td>
  </tr>
  <tr>
    <td>{{ showKomaLabel("keima") }}</td>
    <td>{{ showKomaLabel("kyosha") }}</td>
    <td>{{ showKomaLabel("fu") }}</td>
  </tr>
</tbody>

comKomadaiはまだ空の配列なので駒台には何も表示されません。
試しにstore.jsのcomKomadaiを["fu"]にすると、歩が表示されるのが確認できます。

PlayerKomadai.vueにもshowKomaLabelを作ります。

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["komaList", "playerKomadai", "playerPoint"])
  },
  methods: {  // 以下追加
    showKomaLabel(komaIndex) {
      if (this.playerKomadai.includes(komaIndex)) {
        return this.komaList[komaIndex].label
      }
    }
  }
}
</script>

Comとの違いはincludesの対象になる配列がplayerKomadaiになっただけです。
ComKomadai.vueと同じshowKomaLabelという関数名でも別のコンポーネントなので問題ありません。

Comと同じようにテンプレートで使用します。

<tbody>
  <tr>
    <td>{{ showKomaLabel("fu") }}</td>
    <td>{{ showKomaLabel("kyosha") }}</td>
    <td>{{ showKomaLabel("keima") }}</td>
  </tr>
  <tr>
    <td>{{ showKomaLabel("gin") }}</td>
    <td>{{ showKomaLabel("kin") }}</td>
    <td>{{ showKomaLabel("kaku") }}</td>
  </tr>
</tbody>

駒をコンポーネント化

次は選択する駒の表示部分を改良します。

ゲームが進んでいくと一度使ったコマは使えませんので、薄く表示しています。

これを実装していきたいのですが、その前に駒をコンポーネントにします。
ShogiPoker.vueが肥大化しそうなので適度にコンポーネントを作ると都合が良いです。

ComKoma.vueを作成します。

<template>
  <td :class="getKomaClass()">{{ koma.label }}</td>
</template>

<script>
import { mapState } from "vuex"
export default {
  props: {
    komaIndex: {
      type: String,
      required: true
    },
    koma: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapState(["comSelectable"])
  },
  methods: {
    getKomaClass() {
      if (!this.comSelectable.includes(this.komaIndex)) {
        return "unselectable"
      }
    }
  }
}
</script>

<style scoped>
td {
  transform: rotate(0.5turn);
  -webkit-transform: rotate(0.5turn);
}
.unselectable {
  opacity: 0.4;
}
</style>

getKomaClassというメソッドでcomSelectableに含まれていなければ、unselectableをクラスにつけています。
unselectableにopacity: 0.4;を付ければ選択できない駒を薄く表示することができます。
tdにtransformで逆さに表示するスタイルもここで当てています。

propsは親コンポーネントから渡ってくるプロパティです。
https://jp.vuejs.org/v2/guide/components-props.html

ComKoma.vueをShogiPoker.vueで読み込みます。

<script>
import { mapState } from "vuex"
import GameRule from "./GameRule"
import ComKomadai from "./ComKomadai"
import PlayerKomadai from "./PlayerKomadai"
import ResetBtn from "./ResetBtn"
import ComKoma from "./ComKoma"  // 追加

export default {
  components: {
    GameRule,
    ComKomadai,
    PlayerKomadai,
    ResetBtn,
    ComKoma  // 追加
  },

...
</script>

Comの駒表示する部分をコンポーネントを使って書き換えます。

<div class="shogi-ban">
  <table>
    <tbody>
      <tr class="com-row">
        <com-koma
          v-for="(koma, index) in this.komaList"
          :key="index"
          :koma-index="index"
          :koma="koma"
        />
      </tr>

コンポーネントに対してもv-forは使えます。
追加されたkoma-indexとkomaがComKoma.vueにあるpropsに渡されます。

渡す側はkoma-indexのようにケバブケースで、受け取る側はkomaIndexのようにキャメルケースで書くことが推奨されています。

props: {
  komaIndex: {
    type: String,
    required: true
  },
  koma: {
    type: Object,
    required: true
  }
},

propsには型をtypeで指定したり、requiredで必須かどうかを定めることができます。

続いてPlayerの駒もコンポーネントにしていきます。

<template>
  <td :class="getKomaClass()">{{ koma.label }}</td>
</template>

<script>
import { mapState } from "vuex"
export default {
  props: {
    komaIndex: {
      type: String,
      required: true
    },
    koma: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapState(["playerSelectable"])
  },
  methods: {
    getKomaClass() {
      if (!this.playerSelectable.includes(this.komaIndex)) {
        return "unselectable"
      }
    }
  }
}
</script>

<style scoped>
td:not(.unselectable) {
  cursor: pointer;
}

td:hover,
.unselectable {
  opacity: 0.4;
}
</style>

ほぼCom側と同じです。
Playerは駒を実際に選択できるので、ホバーした時にスタイルを当てています。

ShogiPoker.vueでPlayerKomaを使います。

<script>
import { mapState } from "vuex"
import GameRule from "./GameRule"
import ComKomadai from "./ComKomadai"
import PlayerKomadai from "./PlayerKomadai"
import ResetBtn from "./ResetBtn"
import ComKoma from "./ComKoma"
import PlayerKoma from "./PlayerKoma"  // 追加

export default {
  components: {
    GameRule,
    ComKomadai,
    PlayerKomadai,
    ResetBtn,
    ComKoma,
    PlayerKoma  // 追加
  },
...
</script>

      <tr class="player-row">
        <player-koma
          v-for="(koma, index) in this.komaList"
          :key="index"
          :koma-index="index"
          :koma="koma"
        />
      </tr>
    </tbody>
  </table>
</div>

ここまでのコードはこちらにあります。