### Install Development Dependencies

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Install the necessary dependencies for developing Shogiground using pnpm.

```bash
pnpm install
```

--------------------------------

### Install Shogiground with npm

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Install the Shogiground package using npm for use in your project.

```bash
npm install --save shogiground
```

--------------------------------

### Initiate Piece Promotion

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Start the promotion process for a piece that has reached the promotion zone. This allows the player to choose a new piece type.

```javascript
function promote() {
  ground.startPromotion('5c', [
    { role: 'tokin', color: 'sente' },
    { role: 'pawn', color: 'sente' },
  ]);
}
```

--------------------------------

### Initialize Shogi Ground with Hands

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Configures the Shogi board with initial SFEN string, hand pieces, and event handlers. This setup enables draggable pieces and custom promotion logic.

```javascript
const sg = Shogiground();
const config = {
  sfen: {
    board: 'lnsgkg1nl/1r5s1/pppppp1pp/6p2/9/2P6/PP1PPPPPP/7R1/LNSGKGSNL',
    hands: 'B2r',
  },
  check: true,
  activeColor: 'sente',
  orientation: 'sente',
  draggable: {
    enabled: true,
    deleteOnDropOff: false,
    addToHandOnDropOff: false,
  },
  selectable: {
    enabled: true,
    addSparesToHand: false,
  },
  movable: {
    free: false,
    dests: new Map([
      ['3g', ['3g', '3f']]
    ]),
  },
  droppable: {
    free: false,
    dests: new Map([
      ['sente bishop', ['5e']]
    ]),
  },
  drawable: {
    forced: false,
  },
  promotion: {
    promotesTo: (role) => {
      if (role === 'bishop') return 'horse';
      if (role === 'pawn') return 'tokin';
      if (role === 'knight') return 'promotedKnight';
      if (role === 'silver') return 'promotedSilver';
      if (role === 'rook') return 'dragon';
      if (role === 'lance') return 'promotedLance';
    },
  },
  events: {
    select: (s) => {
      console.log('SELECT', s, sg.state.selected);
    },
    move: (a, b) => {
      console.log('MOVE', a, b);
    },
    pieceUnselect: (p) => {
      console.log('pieceUnselect', p);
    },
    unselect: (s) => {
      console.log('unselect', s);
    },
  },
};
console.log( 'STATUS:', ' drag:', config.draggable.enabled, ' select: ', config.selectable.enabled, );
sg.set(config);
sg.attach({
  board: document.getElementById('dirty'),
});
sg.attach({
  hands: {
    bottom: document.getElementById('hand-bottom'),
  },
});
sg.attach({
  hands: {
    top: document.getElementById('hand-top'),
  },
});
```

--------------------------------

### Initialize Shogi Ground with Custom Configuration

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d9x10.html

Configure Shogi Ground with a specific SFEN string for a 9x10 board, active color, and disable hands and selection. This setup is useful for creating custom game states or specific board layouts.

```javascript
const config = {
  sfen: { board: 'lnsgkgsnl/1r5b1/+ppppppppp/9/9/9/9/PPPP1PPPP/1B5R1/LNSGKGS+NL' },
  activeColor: 'sente',
  hands: { enabled: false },
  selectable: { enabled: false, forceSpares: false },
  highlight: { hovered: false },
  movable: {
    dests: new Map([['6g', ['6f']]]),
    events: {
      after: (orig, dest, prom, metadata) => {
        console.log('MOVEAFTER', orig, dest, prom, metadata);
      },
    },
  },
  droppable: {
    events: {
      after: (piece, key, prom, metadata) => {
        console.log('DROPAFTER', piece, key, prom, metadata);
      },
    },
  },
  events: {
    move: () => { console.log('move'); },
    drop: () => { console.log('drop'); },
    pieceUnselect: (p) => { console.log('pieceUnselect', p); },
    select: (s) => { console.log('select', s); },
    unselect: (s) => { console.log('unselect', s); },
  },
  promotion: {
    promotesTo: (role) => {
      if (role === 'bishop') return 'horse';
      if (role === 'pawn') return 'tokin';
      if (role === 'knight') return 'promotedknight';
      if (role === 'silver') return 'promotedsilver';
      if (role === 'rook') return 'dragon';
      if (role === 'lance') return 'promotedlance';
    },
    movePromotionDialog: (_orig, dest) => {
      return dest.endsWith('c') || dest.endsWith('b');
    },
    forceMovePromotion: (_orig, dest) => {
      return dest.endsWith('a');
    },
  },
};
const ground = Shogiground(config, { board: document.getElementById('dirty') });
```

--------------------------------

### Update Board and Hands with SFEN

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Resets the board and hands to a new state defined by a SFEN string. This is useful for loading different game positions or starting a new game.

```javascript
function drop() {
  sg.set({
    sfen: {
      board: 'lnsgkg1nl/1r5s1/pppppp1pp/6p2/5B3/2P6/PP1PPPPPP/7R1/LNSGKGSNL w b 6',
      hands: 'b',
    },
  });
}
```

--------------------------------

### Set Specific Pieces on the Board

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Replaces all pieces on the board with a new set defined by a Map. Allows for custom board setups or loading specific game states.

```javascript
function setPieces() {
  ground.setPieces(
    new Map([
      ['1c', { role: 'pawn', color: 'sente' }],
      ['2c', { role: 'pawn', color: 'sente' }],
      ['3c', { role: 'pawn', color: 'sente' }],
      ['4c', { role: 'pawn', color: 'sente' }],
      ['6c', { role: 'pawn', color: 'sente' }],
      ['7c', { role: 'pawn', color: 'sente' }],
      ['8c', { role: 'pawn', color: 'sente' }],
      ['9c', { role: 'gold', color: 'sente' }],
      ['1g', undefined],
      ['2g', undefined],
      ['3g', undefined],
      ['4g', undefined],
      ['6g', undefined],
      ['7g', undefined],
      ['8g', undefined],
      ['6i', undefined],
    ])
  );
}
```

--------------------------------

### Initialize ShogiBoard with Configuration

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Configure and initialize a ShogiBoard instance with custom settings like SFEN string, active color, coordinate system, and event handlers. This is the primary method for setting up a new board.

```javascript
const config = {
  sfen: { board: '1lnsgkkgsnl1/12/2r6b2/pppppppppppp/12/11p/P10P/12/PPPPPPPPPPPP/2B6R2/12/1LNSGKKGS+NL1', },
  activeColor: 'sente',
  coordinates: {
    files: 'dizhi',
    ranks: 'japanese',
  },
  hands: { enabled: false, },
  movable: {
    events: {
      after: (orig, dest, metadata) => {
        console.log(orig, dest, metadata);
      },
    },
  },
  events: {
    select: (key) => {
      console.log(key);
    },
  },
};
const ground = Shogiground(config, { board: document.getElementById('dirty') });
```

--------------------------------

### Initialize ShogiGround with Configuration

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Sets up a Shogi board with custom SFEN string, active color, and enables piece selection and movement. Handles promotion logic and custom events.

```javascript
const config = {
  sfen: { board: 'lnsgkgsnl/1r5b1/+ppppppppp/9/9/9/PPPP1PPPP/1B5R1/LNSGKGS+NL' },
  activeColor: 'sente',
  hands: { enabled: false },
  selectable: { enabled: true, forceSpares: false },
  highlight: { hovered: false },
  movable: {
    free: true,
    // dests: new Map([['6g', ['6f']]])
    events: {
      after: (orig, dest, prom, metadata) => {
        console.log('MOVEAFTER', orig, dest, prom, metadata);
      },
    },
  },
  droppable: {
    events: {
      after: (piece, key, prom, metadata) => {
        console.log('DROPAFTER', piece, key, prom, metadata);
      },
    },
  },
  drawable: { forced: false },
  events: {
    move: () => {
      console.log('move');
    },
    drop: () => {
      console.log('drop');
    },
    pieceUnselect: (p) => {
      console.log('pieceUnselect', p);
    },
    select: (s) => {
      console.log('select', s);
    },
    unselect: (s) => {
      console.log('unselect', s);
    },
  },
  promotion: {
    promotesTo: (role) => {
      if (role === 'bishop') return 'horse';
      if (role === 'pawn') return 'tokin';
      if (role === 'knight') return 'promotedknight';
      if (role === 'silver') return 'promotedsilver';
      if (role === 'rook') return 'dragon';
      if (role === 'lance') return 'promotedlance';
    },
    movePromotionDialog: (_orig, dest) => {
      return dest.endsWith('c') || dest.endsWith('b');
    },
    forceMovePromotion: (_orig, dest) => {
      return dest.endsWith('a');
    },
  },
};
const ground = Shogiground(config, { board: document.getElementById('dirty') });
```

--------------------------------

### Initialize Shogiground with ES Modules

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Import and initialize Shogiground using ES modules. Configure the board with SFEN notation.

```javascript
import { Shogiground } from 'shogiground';

const config = {
  sfen: {
    board: 'lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL',
  },
};
const ground = Shogiground(config, { board: document.body });
```

--------------------------------

### Shogiground Initialization with 5x5 Board

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d5x5.html

Initializes the Shogiground with a 5x5 board configuration using SFEN notation and enables interaction with a specific DOM element.

```javascript
const config = {
  sfen: {
    board: 'ppppp/5/5/5/PPPPP',
    hands: 'RN12P3r',
  },
  activeColor: 'sente',
  orientation: 'sente',
  hands: {
    enabled: false,
  },
};
const ground = Shogiground(config, {
  board: document.getElementById('dirty')
});
```

--------------------------------

### Build Standalone Shogiground in Watch Mode

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Build the standalone version of Shogiground in watch mode for distribution.

```bash
pnpm run dist:watch
```

--------------------------------

### Initialize Multiple Shogiground Boards

Source: https://github.com/wandererxii/shogiground/blob/master/examples/minis.html

Use this snippet to initialize multiple Shogiground instances on a page. Configure board settings like SFEN, coordinates, viewOnly, hands, and drawable. Ensure the target DOM elements exist.

```javascript
const boards = document.getElementsByClassName('board');
let start = new Date();
for (let i = 0; i < boards.length; i++) {
  Shogiground( {
    sfen: { board: 'lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL' },
    coordinates: { enabled: false },
    viewOnly: true,
    hands: { enabled: false },
    drawable: { visible: false },
  }, {
    board: boards[i]
  });
}

// log the duration (deferred by 0ms timer)
setTimeout(() => {
  let t2 = new Date() - start;
  console.log(`t2: ${t2} ms`);
}, 0);

// log the duration instantly
let t1 = new Date() - start;
console.log(`t1: ${t1} ms`);
```

--------------------------------

### Build Shogiground in Watch Mode

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Compile the Shogiground node module in watch mode for continuous development.

```bash
pnpm run compile:watch
```

--------------------------------

### Include Shogiground via CDN

Source: https://github.com/wandererxii/shogiground/blob/master/README.md

Include the Shogiground library in non-module environments by pulling the latest version from jsdelivr.

```html
<script src="https://cdn.jsdelivr.net/npm/shogiground@latest/dist/shogiground.min.js"></script>
```

--------------------------------

### Apply Auto Shapes and Square Highlights

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Demonstrates how to apply custom shapes and highlight specific squares on the board. Useful for visual cues during gameplay or analysis.

```javascript
function pieceSVG() {
  const shape = {
    orig: '5e',
    dest: '7e',
    brush: '',
    description: '+',
  };
  ground.setAutoShapes([shape]);
  ground.setSquareHighlights([{ key: '5e', className: 'orange' }]);
}
```

--------------------------------

### Select a Piece for Dropping

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Selects a specific piece (e.g., a 'pawn' of 'sente' color) to prepare for dropping it onto the board. The 'true' argument indicates that the selection should be forced.

```javascript
function sp() {
  sg.selectPiece({ role: 'pawn', color: 'sente' }, true);
}
```

--------------------------------

### Set Multiple Pieces on the Board

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Place or update multiple pieces on the board simultaneously using a Map. This is useful for setting up initial board states or modifying existing ones.

```javascript
function setPieces() {
  ground.setPieces(
    new Map([
      ['1c', { role: 'pawn', color: 'sente' }],
      ['2c', { role: 'pawn', color: 'sente' }],
      ['3c', { role: 'pawn', color: 'sente' }],
      ['4c', { role: 'pawn', color: 'sente' }],
      ['6c', { role: 'pawn', color: 'sente' }],
      ['7c', { role: 'pawn', color: 'sente' }],
      ['8c', { role: 'pawn', color: 'sente' }],
      ['9c', { role: 'gold', color: 'sente' }],
      ['1g', undefined],
      ['2g', undefined],
      ['3g', undefined],
      ['4g', undefined],
      ['6g', undefined],
      ['7g', undefined],
      ['8g', undefined],
      ['6i', undefined],
    ]),
  );
}
```

--------------------------------

### Reconfigure Board View and Drawing Options

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Update the board's configuration to set it to view-only mode and hide drawable elements. Use this to disable user interaction or specific visual features.

```javascript
function reconf() {
  ground.set({
    viewOnly: true,
    drawable: {
      visible: false,
    },
  });
}
```

--------------------------------

### Schedule Board Reconfiguration with Timeout

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Apply board reconfigurations after a specified delay. This function uses `setTimeout` to execute `reconf` after a given number of milliseconds.

```javascript
function tmout(ms) {
  setTimeout(reconf, ms);
}
```

--------------------------------

### Execute a Piece Move

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Programmatically move a piece from one square to another. This function simulates a player's move.

```javascript
function move() {
  ground.move('1g', '1e');
}
```

--------------------------------

### Change Board to 5x5 Size

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Resizes the Shogi board to a 5x5 grid using a simplified SFEN string. Useful for testing or different game variants.

```javascript
function to5x5() {
  ground.set({ sfen: { board: 'ppppp/5/5/5/PPPPP' } });
}
```

--------------------------------

### Dynamically Resize Board Based on Slider Input

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Adjust the width and height of the Shogi board dynamically in response to user interaction with a slider. This also dispatches a resize event to update the board.

```javascript
const slider = document.getElementById('myRange');
const board = document.getElementById('main-wrap');
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
  board.style.width = (450 + parseInt(this.value)).toString() + 'px';
  board.style.height = (450 + parseInt(this.value)).toString() + 'px';
  document.dispatchEvent(new Event('shogiground.resize'));
};
```

--------------------------------

### Adjust Board Size with Slider

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Dynamically resizes the Shogi board based on the value of a slider input. This allows users to adjust the board's dimensions interactively.

```javascript
const slider = document.getElementById('myRange');
const board = document.getElementById('main-wrap');
slider.oninput = function () {
  board.style.width = (450 + parseInt(this.value)).toString() + 'px';
  board.style.height = 'calc(' + (450 + parseInt(this.value)).toString() + 'px/ 11 * 12)';
};
```

--------------------------------

### Toggle Board Orientation

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Flip the Shogi board to switch between Sente (black) and Gote (white) perspectives. Call this function to change the active player's view.

```javascript
function flip() {
  ground.toggleOrientation();
}
```

--------------------------------

### Schedule Piece Visualization with Timeout

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Schedules the execution of the `pieceSVG` function after a specified delay in milliseconds. Used for delayed visual updates or animations.

```javascript
function tmout(ms) {
  setTimeout(pieceSVG, ms);
}
```

--------------------------------

### Perform a Move and Set Turn Color

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d9x10.html

Executes a piece move from one square to another and optionally sets the next player's turn. This function is useful for programmatic move execution or simulating game turns.

```javascript
function move() {
  ground.move('8h', '2b', true);
  ground.set({ turnColor: 'gote' });
}
```

--------------------------------

### Detach and Attach ShogiGround Instance

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Removes the ShogiGround instance from the DOM and later reattaches it to a new container. Useful for dynamically managing the board's presence on the page.

```javascript
function detach() {
  ground.detach({ board: true });
}
function attach() {
  ground.attach({ board: document.getElementById('dirty') });
}
```

--------------------------------

### Control Shogi Board Orientation

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Toggles the board orientation between 'sente' (black) and 'gote' (white). This function is typically triggered by a user action.

```javascript
function flip() {
  sg.toggleOrientation();
}
```

--------------------------------

### Manually Move a Piece and Set Turn Color

Source: https://github.com/wandererxii/shogiground/blob/master/examples/index.html

Programmatically moves a piece from one square to another and sets the active player's turn. Useful for automated play or replaying moves.

```javascript
function move() {
  ground.move('8h', '2b', true);
  ground.set({ turnColor: 'gote' });
  //ground.playPremove();
}
```

--------------------------------

### Display Piece with Custom SVG Shape

Source: https://github.com/wandererxii/shogiground/blob/master/examples/d12x12.html

Set a custom SVG shape for a specific piece on the board. Use this to visually distinguish or highlight pieces.

```javascript
function pieceSVG() {
  const shape = {
    orig: '5e',
    brush: 'green',
    piece: {
      role: 'horse',
      color: 'sente',
    },
  };
  ground.setShapes([shape]);
}
```

--------------------------------

### Select a Board Square

Source: https://github.com/wandererxii/shogiground/blob/master/examples/hands.html

Selects a specific square on the board, identified by its coordinates (e.g., '5e'). This is often a precursor to moving a piece to that square or performing an action on it.

```javascript
function sq() {
  sg.selectSquare('5e');
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.