whim-client-vue
概要
wh.im 上でゲームの開発が簡単にできます。Vue.js用です。
whim-clientのインストール
以下のコマンドでVue.jsのプロジェクトに追加します。
$ npm install --save whim-client-vue
# or
$ yarn add whim-client-vuemain.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一覧をご覧ください。
サンプルアプリ
サンプルアプリをいくつかご用意しました。参考にしてください。
- じゃんけん
- 追加予定
開発の仕方
- リポジトリをクローン
- 本リポジトリで
yarn link - appsで
yarn link whim-client-vue - 初回&ソースコード変更のたびにyarn build
- これを自動watchする方法はありそう。