If you like building/designing character unit behaviors, the initial setup of chess is a neat task.
Confining drag/drop to valid moves per the unique piece types in an interesting way was quite satisfying.
Blocking on a friendly and take on an opponent handled and identified.
All on grid. Doesn't get any better.

Wish I'd done it sooner is something that would have been nice.
Purpose for the platform today, is to have a play with advancing
https://gamedev.net/blogs/entry/2294203-my-first-neuron/
One may suggest that with the following, with the tests written, the goal is to get a system to navigate on it's own.

Board setup

const start_pieces = [
   rook_black, knight_black, bishop_black, queen_black, king_black, bishop_black, knight_black, rook_black,
   pawn_black, pawn_black,   pawn_black,   pawn_black,  pawn_black, pawn_black,   pawn_black,   pawn_black, 
   '', '', '', '', '', '', '', '', 
   '', '', '', '', '', '', '', '', 
   '', '', '', '', '', '', '', '', 
   '', '', '', '', '', '', '', '',
   pawn_white, pawn_white,   pawn_white,   pawn_white,  pawn_white, pawn_white,   pawn_white,   pawn_white,
   rook_white, knight_white, bishop_white, queen_white, king_white, bishop_white, knight_white, rook_white
];

function createBoard() {
   start_pieces.forEach((start_piece, i) => {
      const square = document.createElement('div');
      square.classList.add('square');       
      square.setAttribute('square-id', i);                     // (row*col) index
      square.innerHTML = start_piece;                          // piece class, name id  
      
      const row = Math.floor((63 - i) / 8) + 1;                // checker board pattern
      if(row % 2 === 0) square.classList.add((i % 2) === 0 ? "light" : "dark");
      else square.classList.add(i % 2 === 0 ? "dark" : "light");

      if(i<=15) square.firstChild.classList.add('black');      // black piece id
      if(i>=48) square.firstChild.classList.add('white');      // white piece id

      game_board.append(square);
   });
}

sample gather of valid moves during drag start

  rook: function(pid, state) {
      let data = [];
      const col = pid % 8;         // what column is pid  (0=>63)(8x8grid)        /\   pid-(8*(1=>7))
      for(let i=1; i<col+1; ++i) { // check horizontal left                      /  \
         let index = Number(pid) - Number(i);             //                    /    \
         if(state[index].firstChild) break;               //                    \    /
         data.push(index);                                //                     |  |
      }                                                   //                     |  |
      for(let i=1; i<8-col; ++i) {   // check horizontal right      pid-(1=>7)   |  |
         let index = Number(pid) + Number(i);             //                     |  |
         if(state[index].firstChild) break;               //        _/\__________|  |__________/\_
         data.push(index);                                //      < _  __________ pid__________  _ >
      }                                                   //         \/          |  |          \/
      const row = Math.floor((pid/8) % 8);                //                     |  |         pid+(1=>7)
      for(let i=1; i<row+1; ++i) { // check vertical up                          |  |
         let index = Number(pid) - (Number(i)*8);         //                     |  |
         if(state[index].firstChild) break;               //                     |  |
         data.push(index);                                //                    /    \
      }                                                   //                    \    / 
      for(let i=1; i<8-row; ++i) { // check vertical down                        \  / pid+(8*(1=>7))
         let index = Number(pid) + (Number(i)*8);         //                      \/
         if(state[index].firstChild) break;
         data.push(index);
      }
      return data;
   }

with it's counterpart identifying valid kills for this move.

rook: function(pid, state) {
      let data = [];
      const col = pid % 8;
      for(let i=1; i<col+1; ++i) {
         let index = Number(pid) - Number(i);
         if(state[index].firstChild && state[index].children[0].className === 'piece white') break;
         if(state[index].firstChild && state[index].children[0].className === 'piece black') {data.push(index); break;}
      }
      for(let i=1; i<8-col; ++i) {
         let index = Number(pid) + Number(i);
         if(state[index].firstChild && state[index].children[0].className === 'piece white') break;
         if(state[index].firstChild && state[index].children[0].className === 'piece black') {data.push(index); break;}
      }
      const row = Math.floor((pid/8) % 8);
      for(let i=1; i<row+1; ++i) {
         let index = Number(pid) - (Number(i)*8);
         if(state[index].firstChild && state[index].children[0].className === 'piece white') break;
         if(state[index].firstChild && state[index].children[0].className === 'piece black') {data.push(index); break;}
      }
      for(let i=1; i<8-row; ++i) {
         let index = Number(pid) + (Number(i)*8);
         if(state[index].firstChild && state[index].children[0].className === 'piece white') break;
         if(state[index].firstChild && state[index].children[0].className === 'piece black') {data.push(index); break;}
      }
      return data;
   }

I'm tempted to just do behavioral trees but this new term “fluid neural network” or something I find by forced chance is calling my name with passion. 🙂

Chess 2024 11 05 - YouTube