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)
}