@karabella/vue-goban

@karabella/vue-goban

Vue 3 компоненты для игры Го.

Пакет находится в стадии разработки, возможны сильные изменения.

Установка

npm install @karabella/vue-goban

Использование

Плагин (глобальная регистрация)

// main.js
import { createApp }    from 'vue';
import App              from './App.vue';
import GobanPlugin    from '@karabella/vue-goban';
import '@karabella/vue-goban/styles';

createApp(App)
  .use(GobanPlugin)
  .mount('#app');

<template>
  <Goban />
  <GoGameInfo />
  <GoMovesTree />
  <GoControlPanel />
  <GoComments />
</template>

Локальная регистрация

<script setup>
import {
  Goban,
  GameInfo,
  MovesTree,
  ControlPanel,
  Comments,
  useGoGame,
} from '@karabella/vue-goban';
import '@karabella/vue-goban/styles';
</script>

<template>
  <div class="app">
    <Goban />
    <GameInfo />
    <MovesTree />
    <ControlPanel />
    <Comments />
  </div>
</template>

Только ядро (без компонентов)

import { useGoGame, GoEngine, SGFParser } from '@karabella/vue-goban';

const { state, placeStone, pass, undo } = useGoGame();

Пользовательский компонент с ядром

<script setup>
import { useGoGame } from '@karabella/vue-goban';

const { state, placeStone, currentColorName } = useGoGame();
</script>

<template>
  <div>Ход: {{ currentColorName }}</div>
  <div>Ходов сыграно: {{ state.currentNode.moveNumber }}</div>
</template>

API

useGoGame()

Компоненты

Опции плагина

app.use(GobanPlugin, {
  prefix: 'Go',  // Goban, GoGameInfo, GoMovesTree, ...
})