Merge pull request #175 from ddbogdanov/multiplayer

Multiplayer support.

docs/board-props.md

@@ -149,3 +149,34 @@ The board should then look like this:
 max-width: 90%;
 }
 </style>
+
+## Configure the board for multiplayer
+
+The board can accept a player-color prop to denote the color that the corresponding client should be allowed to play. Moves from a players opponent can be applied to the board with the `BoardApi`'s `move` method - the turns will switch once the `move` method is called with a valid sen string. If no value is provided, turns will switch locally.
+
+```vue [TypeScript]
+<script setup lang="ts">
+import { TheChessboard, type BoardConfig, type BoardApi } from 'vue3-chessboard';
+import 'vue3-chessboard/style.css';
+
+const boardConfig: BoardConfig = {
+  coordinates: false,
+  autoCastle: false,
+  orientation: 'black',
+};
+const boardAPI = ref<BoardApi>();
+// Client will only be able to play white pieces.
+const playerColor: 'white' | 'black' | 'both' | undefined = 'white'; 
+
+// Recieve move from socket/server/etc here.
+function onRecieveMove(move: string) {
+  boardAPI.value?.move(move)
+}
+</script>
+
+<template>
+  <TheChessboard :board-config="boardConfig" 
+                 :player-color="playerColor"
+  />
+</template>
+```

src/App.vue

@@ -8,11 +8,13 @@ const boardConfig: BoardConfig = {
   coordinates: true,
   autoCastle: false,
 };
+const playerColor: 'white' | 'black' | 'both' | undefined = undefined;
 </script>
 
 <template>
   <TheChessboard
     :board-config="boardConfig"
+    :player-color="playerColor"
     @board-created="(api) => (boardAPI = api)"
   />
 </template>

src/classes/BoardApi.ts

@@ -71,7 +71,8 @@ export class BoardApi {
     this.board.set({ fen: this.game.fen() });
     this.board.state.turnColor = shortToLongColor(this.game.turn());
 
-    this.board.state.movable.color = this.board.state.turnColor;
+    this.board.state.movable.color =
+      this.boardState.playerColor || this.board.state.turnColor;
     this.board.state.movable.dests = possibleMoves(this.game);
     this.board.state.check = undefined;
 
@@ -227,7 +228,8 @@ export class BoardApi {
 
     this.board.state.movable.dests = possibleMoves(this.game);
     this.board.state.turnColor = shortToLongColor(this.game.turn());
-    this.board.state.movable.color = this.board.state.turnColor;
+    this.board.state.movable.color =
+      this.boardState.playerColor || this.board.state.turnColor;
     this.board.state.lastMove = [m.from, m.to];
 
     if (this.boardState.showThreats) {
@@ -421,7 +423,8 @@ export class BoardApi {
   private updateGameState(): void {
     this.board.set({ fen: this.game.fen() });
     this.board.state.turnColor = shortToLongColor(this.game.turn());
-    this.board.state.movable.color = this.board.state.turnColor;
+    this.board.state.movable.color =
+      this.boardState.playerColor || this.board.state.turnColor;
     this.board.state.movable.dests = possibleMoves(this.game);
     emitBoardEvents(this.game, this.board, this.emit);
   }

src/components/TheChessboard.vue

@@ -15,7 +15,7 @@ import { defaultBoardConfig } from '@/helper/DefaultConfig';
 import { emitBoardEvents } from '@/helper/EmitEvents';
 import type { Api } from 'chessground/api';
 import type { Key } from 'chessground/types';
-import type { BoardConfig } from '@/typings/BoardConfig';
+import type { BoardConfig, MoveableColor } from '@/typings/BoardConfig';
 import type {
   Promotion,
   SquareKey,
@@ -31,6 +31,10 @@ const props = defineProps({
     type: Object as PropType<BoardConfig>,
     default: defaultBoardConfig,
   },
+  playerColor: {
+    type: [String, undefined] as PropType<MoveableColor>,
+    default: null,
+  },
 });
 
 const emit = defineEmits<{
@@ -52,6 +56,7 @@ const boardState = ref<BoardState>({
   showThreats: false,
   boardConfig: {},
   openPromotionDialog: false,
+  playerColor: props.playerColor,
 });
 
 onMounted(() => {
@@ -65,12 +70,19 @@ onMounted(() => {
     boardState.value.boardConfig = defaultBoardConfig;
   }
 
+  if (props.playerColor) {
+    boardState.value.boardConfig.movable = {
+      color: props.playerColor,
+      dests: possibleMoves(game),
+    };
+  }
+
   if (props.boardConfig.fen) {
     game.load(props.boardConfig.fen);
     boardState.value.boardConfig.turnColor = shortToLongColor(game.turn());
     boardState.value.boardConfig.check = game.inCheck();
     boardState.value.boardConfig.movable = {
-      color: boardState.value.boardConfig.turnColor,
+      color: props.playerColor || boardState.value.boardConfig.turnColor,
       dests: possibleMoves(game),
     };
   }
@@ -125,7 +137,7 @@ function changeTurn(): (orig: Key, dest: Key) => Promise<void> {
       fen: game.fen(),
       turnColor: board.state.turnColor,
       movable: {
-        color: board.state.turnColor,
+        color: props.playerColor || board.state.turnColor,
         dests: possibleMoves(game),
       },
     });

src/typings/BoardConfig.ts

@@ -1,6 +1,8 @@
 import type * as cg from 'chessground/types';
 import type { DrawShape, DrawBrushes } from 'chessground/draw';
 
+export type MoveableColor = 'white' | 'black' | 'both' | undefined;
+
 // interface for the board config \
 // extends the chessground config interface \
 // https://github.com/lichess-org/chessground/blob/master/src/config.ts

src/typings/Chessboard.ts

@@ -1,7 +1,7 @@
 import type BoardApi from '@/classes/BoardApi';
 import type { Move, Square } from 'chess.js';
 import type { Key } from 'chessground/types';
-import type { BoardConfig } from './BoardConfig';
+import type { BoardConfig, MoveableColor } from './BoardConfig';
 
 export interface possibleMoves {
   [key: string]: {
@@ -51,6 +51,7 @@ export interface BoardState {
   boardConfig: BoardConfig;
   showThreats: boolean;
   openPromotionDialog: boolean;
+  playerColor: MoveableColor;
 }
 
 export interface PromotionEvent {