https://github.com/Greece4ever/React-JavaScript-2-Player-Chess

2 Player Chess written in React
https://github.com/Greece4ever/React-JavaScript-2-Player-Chess

chess dom react

Last synced: 6 days ago
JSON representation

2 Player Chess written in React

• Host: GitHub
• URL: https://github.com/Greece4ever/React-JavaScript-2-Player-Chess
• Owner: Greece4ever
• Created: 2020-08-23T23:25:31.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-31T14:15:26.000Z (about 4 years ago)
• Last Synced: 2024-08-01T13:34:09.439Z (3 months ago)
• Topics: chess, dom, react
• Language: JavaScript
• Homepage: https://greece4ever.github.io/React-JavaScript-2-Player-Chess/
• Size: 442 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## Chess (2 Player)

Written entirely in React JSX

The whole idea is in the following block of code

```js

  //Creates the Chessboard pattern

  useEffect(() => {

    let status = true;

    for (let i=1;i < 65;i++)

    {

    if(status) {

      setSquares(prev => [...prev,{"color" : 1,"id" : i}])

    }

    else{

      setSquares(prev => [...prev,{"color" : 0,"id" : i,}])

    }

    status = (i%8==0) ? status : !status

  }

  },[])

```

Basically it creates and array of objects containing a value of `"color"` for the chessboard.

They are then rendered in the DOM using the `.map()` function

```js

{squares.map(square => (



))}

```


After all of these the rest is just some math and DOM manipulation

This is a Picture representing the UI of the project

![](https://i.imgur.com/LldCymx.png)

Everything is controlled using `drag-and-drop` and `position hints`