whim-client-vueの概要

バージョンがv1.2.10以上であることを確認してください

3つの大きな役割があります。

これらは$whimプロパティ及び、グローバルmixinによって提供されています。

目次

whim-client-vueの読み込み

以下のコードで読み込みます。

import whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";

Vue.use(whimClientVue);

このうちcssの読み込みは whimUserWindowClass で読み込まれるclassに対応したcssが記述されています。

import "whim-client-vue/dist/whim-client-vue.css";

whim-client-vueに対してoptionを渡すことができます。

Vue.use(whimClientVue, {
  sound: {
    move: {
      src: require("@/assets/move.mp3"),
      volume: 0.1
    }
  }
});

渡せるoptionは以下の通りです。

interface InstallOptions {
  store?: any; // Vuexのstoreを独自に使いたい場合
  sound?: { // アプリ上で音を再生する場合
    [key: string]: {
      src: string;
      volume?: number;
    };
  };
  targetOrigin?: string; // 通常の場合使用しません
}

このうちsoundに関しては sound(type) に詳しい説明が書かれています。

$whimプロパティ

Vueインスタンスのプロトタイプに$whimプロパティが追加されます。 これは、this.$whimで呼び出すことができます。$whimには4つのプロパティと3つのメソッドが存在します。

非推奨のメソッドのAPIの詳細に関してはv1.1を参照してください。

プロパティ

Vueインスタンスのプロトタイプに$whimプロパティが追加されます。

型に関する情報は下部に記載しています。

コード 説明
$whim.users [User] ルームに入っているユーザー一覧
$whim.room Room Room Object
$whim.accessUser User 現在アクセスしているUser
$whim.state State ゲームの状態
$whim.orientation string 画面の縦向き(portrait)or横向き(landscape)

Room型

key 詳細
id String そのroomのユニークなid。英数字で構成される。

User型

key 詳細
id String ユーザーのユニークなID。
name String ユーザーが設定した名前。
timestamp Date ユーザがルームに参加した時間
positionNumber Number ユーザーが画面上で位置している場所。左上から時計回りに1,2,3,4,5,6,7,8と割り振られる。
entry Boolean ユーザーがプレイの途中から入ったかどうか。途中から入った場合trueが割り当てられる。
left Boolean ユーザーがプレイの途中で抜けたかどうか。途中で抜けた場合trueが割り当てられる。

なおpositionNumberは入室順に振られています。

State型

この型はObjectで表現されますが、ゲームに必要な情報に応じて任意に使用可能です。 この型は、そのroomに参加しているユーザーに対して常に同期されます。 また、プロパティとして空配列や空オブジェクトを挿入することはできません。

じゃんけんの場合以下のようにユーザーIDと紐付けてそのユーザーが出した手を把握することが考えられます。

{
  userIdXXX: "rock",
  userIdYYY: "paper"
}

メソッド

ここでは ゲーム情報を変更し、そのルームに入っている各ユーザーに同期するためのAPIを提供しています。

コード 説明
$whim.assignState(data) ゲーム情報の差分更新
$whim.resetState(data) ゲーム情報の全更新

いずれのメソッドに関しても、ゲーム情報の変更には時間のラグが存在することに気をつけてください。更新を行ったプレイヤーには同期的に反映されますが、他のプレイヤーに対しては平均して1秒未満のタイムラグが発生します。

assignState

v1.1よりネストしたオブジェクトも扱えるように更新されました。 ゲーム情報の差分更新を行います。

じゃんけんの場合以下のようにユーザーIDと紐付けてそのユーザーが出した手を登録することが考えられます。

console.log(this.$whim.state)
// {
//   userIdXXX: "rock",
// }

this.$whim.assignState({userIdYYY: "paper"})

console.log(this.$whim.state)
// {
//   userIdXXX: "rock",
//   userIdYYY: "paper"
// }

dataにネストされたObjectを指定することもできます。

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "rock",
//   },
// }

this.$whim.assignState({'userIdYYY': {show: "paper", changed: true}})

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "paper",
//     changed: true
//   },
// }

引数にわたすdataは、既存のstateとマージされます。

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "rock",
//   },
// }

this.$whim.assignState({userIdXXX: {changed: true}})

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "rock",
//     changed: true
//   },
// }

また、一部の削除するにはnullを指定します。

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "rock",
//     changed: true
//   },
//   userIdYYY: {
//     show: "paper",
//     changed: false
//   },
// }

this.$whim.assignState({userIdYYY: null})

console.log(this.$whim.state)
// {
//   userIdXXX: {
//     show: "rock",
//     changed: true
//   }
// }
配列

配列内の一部を更新することもできます。このとき、keyはindex番号で指定します。

console.log(this.$whim.state)

// { 
//   a: [
//     1,
//     2,
//     { 
//       b: 1,
//       c: 2
//     }
//   ]
// }

this.$whim.assignState({ a: { 2: { b: 0 }}})

console.log(this.$whim.state)
// { 
//   a: [
//     1,
//     2,
//     { 
//       b: 0,
//       c: 2
//     }
//   ]
// }

配列の追加、削除には再代入する必要があります。

console.log(this.$whim.state)

// { 
//   a: [
//     1,
//     2
//   ]
// }

const arrayA = this.$whim.state.a
arrayA.push(3)
this.$whim.assignState({ a: arrayA })

console.log(this.$whim.state)
// { 
//   a: [
//     1,
//     2,
//     3
//   ]
// }

resetState

stateの情報を削除します。引数はオプショナルです。引数を渡すと、その値に初期化されます。ゲームのはじめから機能等に有用です。

console.log(this.$whim.state)
// {
//   phase: "result"
//   userIdXXX: "paper"
// }

this.$whim.resetState({phase: "start"})

console.log(this.$whim.state)
// {
//   phase: "start"
// }

this.$whim.resetState()

console.log(this.$whim.state)
// {}

sound(type)

音を再生します。このメソッドを設定したら、プレイヤー全員に音が再生されます。 このメソッドを使う前に必ず、音源ファイルをwhim-client-vueを登録するときに設定してください。 また、音再生には state内の whimClientSounds が使用されます。

// 音源ファイルをwhimClientVue呼び出し時にオプションで渡す
Vue.use(whimClientVue, {
  sound: {
    move: {
      src: require("@/assets/move.mp3"),
      volume: 0.1
    },
    draw: {
      src: require("@/assets/draw.mp3"),
      volume: 0.2
    }
  }
});

// プレイヤー全員で再生
this.$whim.sound("draw")

mixinされる機能

以下の2つがmixinされます。

これらはともに、引数にuser型を取り、そのuserの位置情報を示すclassを付与します。

whimUserWindowClass

vueのテンプレート上で、classにwhimUserWindowClassを追加することで、その要素をuserに重ねることができます。

<template>
  <Player
    v-for="user in $whim.users"
    :key="user.id"
    :class="whimUserWindowClass(user)"
    :displayUser="user"
  />
</template>

この例では users のそれぞれに対し、Playerコンポーネントを作成しています。 このとき、:class="whimUserWindowClass(user)"を用いることで、styleが自動的に適用され、そのコンポーネントがuser上に重なります。

whimPositionClass

これはあるユーザーが、画面のどの辺に接しているかを返します。これは、ユーザーの位置によって配置を変えたい(ex. 画面の外側に配置されるようにしたい)といった場合に有用です。

PC画面(横画面)で4人プレイしているとき

console.log(user.positionNumber) // 2
console.log(this.whimPositionClass(user)) // ['top', 'bottom']

モバイル画面(縦画面)で5人プレイしているとき

console.log(user.positionNumber) // 3
console.log(this.whimPositionClass(user)) // ['left']

実際には、コンポーネントやdiv要素にclassとして付与することになるでしょう。

<template>
  <div :class="whimPositionClass(user)">
     pt
  </div>  
</template>
<script>
export default {
  name: "point",
  props: ["user","point"]
}
</scipt>
<style scoped>
.left {
  left: 5%;
}
.right:not(.left) {
  right: 5%;
}
.top {
  top: 5%;
}
.bottom:not(.top) {
  bottom: 5%;
}
</style>

目次ページに戻る

目次へ