Add an HTML slider to allow changing the chessboard size

[programarivm]

An HTML slider should be displayed horizontally just below the chessboard. The chessboard size will change accordingly when adjusting the slider.

See:

• https://github.com/chesslablab/react-chess/issues/584

Happy learning and coding!

[programarivm]

Hi @Faisalhs51, please let me know if you'd want to check out this one.

Keep it up,

[Faisalhs51]

Sure 👍🏻

[Faisalhs51]

@programarivm how to setup and run this project?

[programarivm]

Let me update the docs with some guidelines on how to setup the development environment. The @chesslablab/react-board package is being developed locally with the help of my-app which package.json is described next.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "localDependencies": {
    "@chesslablab/react-board": "../@chesslablab/react-board"
  }
}

The package is built using preconstruct.

yarn preconstruct build

Then, it is installed in my-app using install-local.

install-local --save ../@chesslablab/react-board

// App.js

import { ClassicalBoard } from '@chesslablab/react-board';

function App() {
  const stateBoard = {
    turn: 'w',
    isCapture: false,
    isCheck: false,
    isMate: false,
    isStalemate: false,
    fen: [
      'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq -',
      'rnbqkbnr/pppppppp/8/8/3P4/8/PPP1PPPP/RNBQKBNR b KQkq d3',
      'rnbqkb1r/pppppppp/5n2/8/3P4/8/PPP1PPPP/RNBQKBNR w KQkq -',
      'rnbqkb1r/pppppppp/5n2/8/2PP4/8/PP2PPPP/RNBQKBNR b KQkq c3',
      'rnbqkb1r/pppp1ppp/4pn2/8/2PP4/8/PP2PPPP/RNBQKBNR w KQkq -',
      'rnbqkb1r/pppp1ppp/4pn2/8/2PP4/2N5/PP2PPPP/R1BQKBNR b KQkq -',
      'rnbqk2r/pppp1ppp/4pn2/8/1bPP4/2N5/PP2PPPP/R1BQKBNR w KQkq -',
      'rnbqk2r/pppp1ppp/4pn2/8/1bPP4/2N1P3/PP3PPP/R1BQKBNR b KQkq -',
      'rnbq1rk1/pppp1ppp/4pn2/8/1bPP4/2N1P3/PP3PPP/R1BQKBNR w KQ -',
      'rnbq1rk1/pppp1ppp/4pn2/8/1bPP4/2N1PN2/PP3PPP/R1BQKB1R b KQ -',
    ],
    flip: 'w',
  };

  const filterMove = () => {
    // Implement pre-processing logic for the chess move.
  }

  const handleMove = () => {
    // Implement validation logic for the chess move.
  }

  return (
    <ClassicalBoard
      stateBoard={stateBoard}
      goBack={0}
      filterMove={filterMove}
      handleMove={handleMove}
    />
  );
}

export default App;

See:

• https://github.com/preconstruct/preconstruct/issues/581

Happy learning!