Example with clicking as opposed to dragging for entering moves

[ZenLearner]

I guess by now I could probably do it myself, but it would be nice to have an example like 'Allow only Legal Moves' that instead of dragging uses clicking on starting and end squares.

I suppose combining 'Allow only Legal Moves' with 'Click to Create Arrows' would do the trick, but of course it would be nice if it was 'officially done' . Otherwise, I guess I will put it on my 'to do list'

Many thanks on a magnificent project. I have now Chessboard and Chessboard2 working very well. And eliminating jQuery also an added bonus...

[oakmac]

Many thanks on a magnificent project. I have now Chessboard and Chessboard2 working very well. And eliminating jQuery also an added bonus...

Thank you! 🎉 🙏

[ZenLearner]

This already works. Including the call to chess to validate moves....

let startingSquare = null

const game = new Chess()

const board = window.Chessboard2('myBoard', { onMousedownSquare,position:game.fen() })

const statusEl = byId('gameStatus') const fenEl = byId('gameFEN') const pgnEl = byId('gamePGN')

function onMousedownSquare (evt, domEvt) { // clear any circles that may be on the board board.clearCircles()
// do we have a starting square ? if (startingSquare) { // Input the move. We could validate with chess... var mousemove = startingSquare+'-'+evt.square console.log(mousemove) board.move(mousemove) // clear the startingSquare startingSquare = null } else { // store the pending arrow info startingSquare = evt.square

// put a circle on the starting square
board.addCircle(evt.square)

} }

function byId (id) { return document.getElementById(id) }

[ZenLearner]

And this is already a full working example !! What a versatile program!! (I know zero about programming )

/ Attempting to input moves with clicks, as opposed to dragging Will validate moves with chess... Fernando Semprun , February 2024 /

let startingSquare = null

const game = new Chess()

const board = window.Chessboard2('myBoard', { onMousedownSquare,position:game.fen() })

const statusEl = byId('gameStatus') const fenEl = byId('gameFEN') const pgnEl = byId('gamePGN')

updateStatus()

function onMousedownSquare (evt, domEvt) { // clear any circles that may be on the board board.clearCircles()

// do we have a starting square ? if (startingSquare) { // check move validity first

const move = game.move({
    from: startingSquare,
    to: evt.square,
    promotion: 'q' // NOTE: always promote to a queen for example simplicity
  })
  if (move) {
    // update the board position with the new game position, then update status DOM elements
    board.fen(game.fen(), () => {
      updateStatus()
    })
  } else {
    return 'snapback'
  }
// clear the startingSquare
startingSquare = null

} else { // store the starting squaure startingSquare = evt.square

// put a circle on the starting square
board.addCircle(evt.square)

} }

function updateStatus () { let statusHTML = '' const whosTurn = game.turn() === 'w' ? 'White' : 'Black'

if (!game.game_over()) {
  if (game.in_check()) statusHTML = whosTurn + ' is in check! '
  statusHTML = statusHTML + whosTurn + ' to move.'
} else if (game.in_checkmate() && game.turn() === 'w') {
  statusHTML = 'Game over: white is in checkmate. Black wins!'
} else if (game.in_checkmate() && game.turn() === 'b') {
  statusHTML = 'Game over: black is in checkmate. White wins!'
} else if (game.in_stalemate() && game.turn() === 'w') {
  statusHTML = 'Game is drawn. White is stalemated.'
} else if (game.in_stalemate() && game.turn() === 'b') {
  statusHTML = 'Game is drawn. Black is stalemated.'
} else if (game.in_threefold_repetition()) {
  statusHTML = 'Game is drawn by threefold repetition rule.'
} else if (game.insufficient_material()) {
  statusHTML = 'Game is drawn by insufficient material.'
} else if (game.in_draw()) {
  statusHTML = 'Game is drawn by fifty-move rule.'
}

statusEl.innerHTML = statusHTML
fenEl.innerHTML = game.fen()
pgnEl.innerHTML = game.pgn()

}

function byId (id) { return document.getElementById(id) }

[ZenLearner]

A further example with a different starting position

So simple

/ Attempting to input moves with clicks, as opposed to dragging Will validate moves with chess... /

let startingSquare = null

var fenposition = 'rnbq1rk1/pp2p1bp/2pp1np1/3P1p2/2P5/2N2NP1/PP2PPBP/R1BQ1RK1 b - - 0 8'

const game = new Chess(fenposition)

const board = window.Chessboard2('myBoard', { onMousedownSquare,position:game.fen() })

const statusEl = byId('gameStatus') const fenEl = byId('gameFEN') const pgnEl = byId('gamePGN')

updateStatus()

function onMousedownSquare (evt, domEvt) { // clear any circles that may be on the board board.clearCircles()

// do we have a starting square ? if (startingSquare) { // check move validity first

const move = game.move({
    from: startingSquare,
    to: evt.square,
    promotion: 'q' // NOTE: always promote to a queen for example simplicity
  })
  if (move) {
    // update the board position with the new game position, then update status DOM elements
    board.fen(game.fen(), () => {
      updateStatus()
    })
  } else {
    return 'snapback'
  }
// clear the startingSquare
startingSquare = null

} else { // store the pending arrow info startingSquare = evt.square

// put a circle on the starting square
board.addCircle(evt.square)

} }

function updateStatus () { let statusHTML = '' const whosTurn = game.turn() === 'w' ? 'White' : 'Black'

if (!game.game_over()) {
  if (game.in_check()) statusHTML = whosTurn + ' is in check! '
  statusHTML = statusHTML + whosTurn + ' to move.'
} else if (game.in_checkmate() && game.turn() === 'w') {
  statusHTML = 'Game over: white is in checkmate. Black wins!'
} else if (game.in_checkmate() && game.turn() === 'b') {
  statusHTML = 'Game over: black is in checkmate. White wins!'
} else if (game.in_stalemate() && game.turn() === 'w') {
  statusHTML = 'Game is drawn. White is stalemated.'
} else if (game.in_stalemate() && game.turn() === 'b') {
  statusHTML = 'Game is drawn. Black is stalemated.'
} else if (game.in_threefold_repetition()) {
  statusHTML = 'Game is drawn by threefold repetition rule.'
} else if (game.insufficient_material()) {
  statusHTML = 'Game is drawn by insufficient material.'
} else if (game.in_draw()) {
  statusHTML = 'Game is drawn by fifty-move rule.'
}

statusEl.innerHTML = statusHTML
fenEl.innerHTML = game.fen()
pgnEl.innerHTML = game.pgn()

}

function byId (id) { return document.getElementById(id) }