support initialMove field to have a custom move as the initial positi…

README.md

@@ -79,16 +79,17 @@ These properties are available both for chess and pgn blocks. when using in a pg
 
 These properties are only available for chess blocks.
 
-| **Property** | **Description** | **Possible values** | **Default** |
-| ------------ | ----------------------------------------- | -------------------- | ----------------------------------- |
-| **fen** | The initial position | Any valid FEN string | Initial |
-| **arrows** | Series of arrows to draw | e2->e4 d2->d4 | Empty |
-| **squares** | Series of squares to mark | e5 d5 | Empty |
-| **movable** | Force to enable/disable movement | true / false | false if FEN supplied |
-| **drawable** | Force to enable/disable drawing | true / false | false if arrows or squares supplied |
-| **lastMove** | Highlight last move | e2 e4 | Undefined |
-| **moves** | Sequence of moves to view in the position | e4 e5 Nf3 Nf6 Nxe5 | Undefined |
-| **variant** | Variant name | Chess960 | Undefined |
+| **Property** | **Description** | **Possible values** | **Default** |
+| --------------- | ------------------------------------------------ | -------------------- | ----------------------------------- |
+| **fen** | The initial position | Any valid FEN string | Initial |
+| **arrows** | Series of arrows to draw | e2->e4 d2->d4 | Empty |
+| **squares** | Series of squares to mark | e5 d5 | Empty |
+| **movable** | Force to enable/disable movement | true / false | false if FEN supplied |
+| **drawable** | Force to enable/disable drawing | true / false | false if arrows or squares supplied |
+| **lastMove** | Highlight last move | e2 e4 | Undefined |
+| **moves** | Sequence of moves to view in the position | e4 e5 Nf3 Nf6 Nxe5 | Undefined |
+| **initialMove** | Move to display in initial position. -1 for last | -1,0,1,2,3,... | 0 |
+| **variant** | Variant name | Chess960 | Undefined |
 
 ## PGN Viewer
 

src/markdown/chessGame.ts

@@ -40,6 +40,8 @@ class ChessGame {
  private buttonLastMove_: HTMLButtonElement;
 
  private initialPosition_: Position;
+ private initialDisplayPosition_: Position;
+ private initialMove_: number | undefined = undefined;
  private initialLastMove_: Key[] | undefined = undefined;
  private sanMoves_: string[] = [];
  private currentMove_ = 0;
@@ -74,7 +76,12 @@ class ChessGame {
  }
  }
 
- this.reinitializeChess_();
+ this.chess_ = (
+ this.initialDisplayPosition_ !== undefined
+ ? this.initialDisplayPosition_
+ : this.initialPosition_
+ ).clone();
+ this.currentMove_ = this.initialMove_ || 0;
  this.createMovesElement_();
  this.updateMoveButtons_();
  this.createChessBoard_(chessOptions);
@@ -117,9 +124,18 @@ class ChessGame {
  .unwrap()
  : defaultPosition(rules);
 
+ this.initialDisplayPosition_ = this.initialPosition_.clone();
  if (chessOptions.moves) {
  this.sanMoves_ = chessOptions.moves.split(/\s+/);
  this.sanMoves_ = this.sanMoves_.filter((move) => !move.match(/^\d+\./)); // remove move indices
+
+ if (chessOptions.initialMove !== undefined) {
+ const numberOfIndices = this.sanMoves_.length + 1;
+ this.initialMove_ =
+ ((chessOptions.initialMove % numberOfIndices) + numberOfIndices) %
+ numberOfIndices;
+ this.playMovesUntil_(this.initialMove_, this.initialDisplayPosition_);
+ }
  }
 
  if (chessOptions.lastMove) {
@@ -215,7 +231,7 @@ class ChessGame {
 
  private createChessBoard_(chessOptions: ChessBlockOptions) {
  const config: Config = {
- fen: makeFen(this.initialPosition_.toSetup()),
+ fen: makeFen(this.chess_.toSetup()),
  disableContextMenu: true,
  draggable: {
  enabled: false,
@@ -236,18 +252,19 @@ class ChessGame {
 
  private reinitializeChess_() {
  this.chess_ = this.initialPosition_.clone();
+ this.currentMove_ = 0;
  }
 
- private playMovesUntil_(untilMove: number) {
+ private playMovesUntil_(untilMove: number, position: Position = this.chess_) {
  let move: Move | undefined = undefined;
  for (; this.currentMove_ < untilMove; this.currentMove_++) {
- move = parseSan(this.chess_, this.sanMoves_[this.currentMove_]);
+ move = parseSan(position, this.sanMoves_[this.currentMove_]);
  if (!move) {
  // TODO: log error
  break;
  }
 
- this.chess_.play(move);
+ position.play(move);
  }
 
  return move;
@@ -304,7 +321,6 @@ class ChessGame {
 
  private goToFirstMove_() {
  this.cancelOngoingAnimation_();
- this.currentMove_ = 0;
  this.reinitializeChess_();
  this.updateBoard_();
  this.updateMoveButtons_();
@@ -418,7 +434,6 @@ class ChessGame {
  }
 
  const currentMoveTemp = this.currentMove_ - 1;
- this.currentMove_ = 0;
  this.reinitializeChess_();
  const lastMove = this.playMovesUntil_(currentMoveTemp);
 

src/markdown/chessRenderer.ts

@@ -41,6 +41,7 @@ function parseChessBlockOptions(chessElement: HTMLElement): ChessBlockOptions {
  drawable: undefined,
  lastMove: undefined,
  moves: undefined,
+ initialMove: undefined,
  variant: undefined,
  };
 
@@ -92,6 +93,11 @@ function parseChessBlockOptions(chessElement: HTMLElement): ChessBlockOptions {
  case "moves":
  options.moves = value.trim();
  break;
+ case "initialmove":
+ if (value.match(/^-?\d+/g)) {
+ options.initialMove = parseInt(value);
+ }
+ break;
  case "variant":
  options.variant = value.trim();
  break;

src/shared/index.d.ts

@@ -33,6 +33,7 @@ declare interface ChessBlockOptions {
  lastMove: string | undefined;
 
  moves: string | undefined;
+ initialMove: number | undefined;
  variant: string | undefined;
 }