Shogi_player NPM

将棋棋譜プレイヤー

Rails で使用する例

% yarn add shogi_player

app/javascript/packs/shogi_player.js

import Vue from 'vue/dist/vue.esm'
import ShogiPlayer from 'shogi_player/src/components/ShogiPlayer.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#shogi_player_app',
    components: { "shogi_player": ShogiPlayer },
  })
})

app/views/xxx/show.html.erb

<%= javascript_pack_tag("shogi_player") %>
<%= stylesheet_pack_tag("shogi_player") %>

<div id="shogi_player_app">
  <shogi_player :kifu_body="'position startpos moves 7g7f 8c8d'" :turn_start="-1"></shogi_player>
</div>

引数

props	意味	例・補足
kifu_body	棋譜	例: position startpos	必須
turn_start	N手目	0:最初 -1:最後	オプション
keyboard_operation_flag	キーボード操作を充実させる	どこにもフォーカスしていないときでも左右が反応する	オプション
location_hash_embed_turn	URLのハッシュに手番を埋める	ブラウザがその個所を探そうとしてやや重くなるので注意	オプション

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.