whim-client-vueの概要

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

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

目次

$whimプロパティ

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

プロパティ

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

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

コード 説明
$whim.users [User] ルームに入っているユーザー一覧
$whim.room Room Room Object
$whim.accessUser User 現在アクセスしているUser
$whim.state State ゲームの状態

Room型

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

User型

key 詳細
id String ユーザーのユニークなID。
name String ユーザーが設定した名前。
timestamp Date ユーザがルームに参加した時間
postionNumber Number ユーザーが画面上で位置している場所。Z字上に1,2,3,4,5,6,7,8と割り振られる。

State型

この型はObjectで表現されますが、ゲームに必要な情報に応じて任意に使用可能です。

この型は、そのroomに参加しているユーザーに対して常に同期されます。

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

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

メソッド

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

コード 引数 説明
$whim.assignState(Object) Object ゲーム情報を追記更新、
存在しないキーの場合:追記
存在するキーの場合:更新
$whim.replaceState(Object) Object ゲーム情報を渡されたObjectにすべて変える
$whim.deleteState()   ゲーム情報を空にする

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

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

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

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

また、ゲームのはじめから機能はdeleteStateを使うことで実現できます。

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

this.$whim.deleteState()

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

mixinされる機能

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

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

whimUserWindowClass

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

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

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

whimPositionClass

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

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

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

モバイル画面(縦画面)で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: 50px;
}
</style>

目次ページに戻る

目次へ