whim-client-vue

概要

wh.im 上でゲームの開発が簡単にできます。Vue.js用です。

whim-clientのインストール

以下のコマンドでVue.jsのプロジェクトに追加します。

$ npm install --save whim-client-vue
# or
$ yarn add whim-client-vue

main.jsでのwhim-clientの読み込み

main.jsを以下のような構成にします。

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

Vue.config.productionTip = false;
Vue.use(whimClientVue);

new Vue({
  render: h => h(App)
}).$mount("#app");

1. whim-client-vueの読み込み

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

2. vueにライブラリの登録

Vue.use(whimClientVue);

whim-clientの使用例

this.$whimでVue.js上からwhimのデータの読み出し/書き込みができるようになります。

// user一覧の取り出し
this.$whim.users;

// stateの取り出し
this.$whim.state;

// stateの差分更新
this.$whim.assignState({point: 2})

// stateの全更新
this.$whim.resetState({phase: "start"})

より詳細にはAPI一覧をご覧ください。

サンプルアプリ

サンプルアプリをいくつかご用意しました。参考にしてください。

• じゃんけん
• 追加予定

開発の仕方

1. リポジトリをクローン
2. 本リポジトリでyarn link
3. appsでyarn link whim-client-vue
4. 初回&ソースコード変更のたびにyarn build

• これを自動watchする方法はありそう。