
### Game Logic

###### Build the Board and put Tile to it.

Our first step will be to prepare our constants.

- **TILE_COUNT** is the number of tiles we want in our board.
- **GRID_SIZE** is the number of rows and column in our board.
- **BOARD_SIZE** is the size of the board in pixel.

```js
export const TILE_COUNT = 16;
export const GRID_SIZE = 4;
export const BOARD_SIZE = 320;
```

###### Lets now start with our board and then we make our tile component.

Using our board size and number of grids we create single tile width and height and pass it down to our tile component as a props.

Along with that we will send our tile array which has count of **0** to **TILE_COUNT-1** denoting each tile index.

```js
//Board.js
import { useState } from "react";
import { BOARD_SIZE, GRID_SIZE, TILE_COUNT } from "./constants";

function Board() {
  const [tiles, setTiles] = useState([...Array(TILE_COUNT).keys()]);
  const [isStarted, setIsStarted] = useState(false);
  const style = {
    width: BOARD_SIZE,
    height: BOARD_SIZE,
  };
  console.log("tiles", tiles);
  const pieceWidth = Math.round(BOARD_SIZE / GRID_SIZE);
  const pieceHeight = Math.round(BOARD_SIZE / GRID_SIZE);

  return (
    <>
      <ul style={style} className="board">
        {tiles.map((tile, index) => (
          <Tile
            key={tile}
            index={index}
            tile={tile}
            width={pieceWidth}
            height={pieceHeight}
          />
        ))}
      </ul>
    </>
  );
}

export default Board;
```

Before making our tile component we need to add some css.

Our tile is absolutely positioned and we can move it around the board using translate.

```css
/*app.css*/
.App {
  display: grid;
  place-items: center;
  height: 100vh;
}
h1 {
  margin: 0;
}
.board {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.tile {
  position: absolute;
  list-style: none;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
}

button {
  display: block;
  padding: 8px 24px;
  border-radius: 2px;
  color: #fff;
  background: #000;
  cursor: pointer;
}
```

###### Next we will hop into our tile component.

In this component we will first start by sending index to getMatrixPosition function in helper.js and get its position for row and column.

Next we will send the row and column we received from getMatrixPosition function and send it to getVisualPosition function in helper.js along with arguments width and height of tiles.Using this function we get to the location where the tile must be placed using the translate property.

We will also keep out last element that is **TILE_COUNT - 1** as hidden for empty block which gets swapped through the game.

```js
//Tile.js
function Tile({ tile, index, width, height, handleTileClick }) {
  const { row, col } = getMatrixPosition(index);
  console.log(row, col);
  const visualPos = getVisualPosition(row, col, width, height);
  const tileStyle = {
    width: `calc(100% / ${GRID_SIZE})`,
    height: `calc(100% / ${GRID_SIZE})`,
    translateX: visualPos.x,
    translateY: visualPos.y,
  };

  const translateX = visualPos.x;
  const translateY = visualPos.y;
  return (
    <li
      style={{
        ...tileStyle,
        transform: `translate(${translateX}px, ${translateY}px)`,
        transition: "transform 0.5s linear",
        // Last tile?
        opacity: tile === TILE_COUNT - 1 ? 0 : 1,
      }}
      className="tile"
      handleTileClick={handleTileClick}
    >
      {`${tile + 1}`}
    </li>
  );
}

export default Tile;
```

```js
//helpers.js
export function getMatrixPosition(index) {
  return {
    row: Math.floor(index / GRID_SIZE),
    col: index % GRID_SIZE,
  };
}

export function getVisualPosition(row, col, width, height) {
  return {
    x: col * width,
    y: row * height,
  };
}
```

###### Now lets write some code to shuffle our array in board.js.

We will add a state isStarted to keep tract whether the game had started or not.

```js
//Board.js
import { useState } from "react";
import { BOARD_SIZE, GRID_SIZE, TILE_COUNT } from "./constants";
import { shuffle } from "./helpers";
import Tile from "./Tile";
function Board() {
  const [tiles, setTiles] = useState([...Array(TILE_COUNT).keys()]);
  const [isStarted, setIsStarted] = useState(false);
  const style = {
    width: BOARD_SIZE,
    height: BOARD_SIZE,
  };
  console.log("tiles", tiles);
  const pieceWidth = Math.round(BOARD_SIZE / GRID_SIZE);
  const pieceHeight = Math.round(BOARD_SIZE / GRID_SIZE);

  const shuffleTiles = () => {
    const shuffledTiles = shuffle(tiles);
    setTiles(shuffledTiles);
  };

  const handleShuffleClick = () => {
    shuffleTiles();
  };

  const handleStartClick = () => {
    shuffleTiles();
    setIsStarted(true);
  };

  return (
    <>
      <ul style={style} className="board">
        {tiles.map((tile, index) => (
          <Tile
            key={tile}
            index={index}
            tile={tile}
            width={pieceWidth}
            height={pieceHeight}
            handleTileClick={handleTileClick}
          />
        ))}
      </ul>
      {!isStarted ? (
        <button onClick={() => handleStartClick()}>Start game</button>
      ) : (
        <button onClick={() => handleShuffleClick()}>Restart game</button>
      )}
    </>
  );
}

export default Board;
```

Here is our shuffle function which takes the help of sort function which sort our array to zig-gag pattern(greater or lesser) using probability or we can use [Fisher-Yates-Shuffle](https://www.geeksforgeeks.org/shuffle-a-given-array-using-fisher-yates-shuffle-algorithm/).
We also check to see if our generated array is solvable or not using isSolvable function.

```js
//helpers.js
// Credits to https://codepen.io/unindented/pen/QNWdRQ
export function isSolvable(tiles) {
  let product = 1;
  for (let i = 1, l = TILE_COUNT - 1; i <= l; i++) {
    for (let j = i + 1, m = l + 1; j <= m; j++) {
      product *= (tiles[i - 1] - tiles[j - 1]) / (i - j);
    }
  }
  return Math.round(product) === 1;
}

export function shuffle(tiles) {
  const shuffledTiles = [
    ...tiles
      .filter((t) => t !== tiles.length - 1)
      .sort(() => Math.random() - 0.5),
    tiles.length - 1,
  ];
  return isSolvable(shuffledTiles) ? shuffledTiles : shuffle(shuffledTiles);
}
```

###### Now we write swapTiles function to move our tiles.

We check if swap is possible between the index clicked and the last element that is hidden.

```js
//Board.js
import { useState } from "react";
import { BOARD_SIZE, GRID_SIZE, TILE_COUNT } from "./constants";
import { canSwap, isSolved, shuffle, swap } from "./helpers";
import Tile from "./Tile";
function Board() {
  const [tiles, setTiles] = useState([...Array(TILE_COUNT).keys()]);
  const [isStarted, setIsStarted] = useState(false);
  const style = {
    width: BOARD_SIZE,
    height: BOARD_SIZE,
  };
  console.log("tiles", tiles);
  const pieceWidth = Math.round(BOARD_SIZE / GRID_SIZE);
  const pieceHeight = Math.round(BOARD_SIZE / GRID_SIZE);

  const swapTiles = (tileIndex) => {
    if (canSwap(tileIndex, tiles.indexOf(tiles.length - 1))) {
      const swappedTiles = swap(
        tiles,
        tileIndex,
        tiles.indexOf(tiles.length - 1)
      );
      setTiles(swappedTiles);
    }
  };

  const shuffleTiles = () => {
    const shuffledTiles = shuffle(tiles);
    setTiles(shuffledTiles);
  };

  const handleTileClick = (index) => {
    swapTiles(index);
  };
  const handleShuffleClick = () => {
    shuffleTiles();
  };

  const handleStartClick = () => {
    shuffleTiles();
    setIsStarted(true);
  };

  return (
    <>
      <ul style={style} className="board">
        {tiles.map((tile, index) => (
          <Tile
            key={tile}
            index={index}
            tile={tile}
            width={pieceWidth}
            height={pieceHeight}
            handleTileClick={handleTileClick}
          />
        ))}
      </ul>
      {!isStarted ? (
        <button onClick={() => handleStartClick()}>Start game</button>
      ) : (
        <button onClick={() => handleShuffleClick()}>Restart game</button>
      )}
    </>
  );
}

export default Board;
```

Here we just check if the last element is at top,left,right,or bottom of the index clicked and if it is present in any of these locations we use our swap function to swap it with last index element.

```js
//helpers.js
export function canSwap(srcIndex, destIndex) {
  const { row: srcRow, col: srcCol } = getMatrixPosition(srcIndex);
  const { row: destRow, col: destCol } = getMatrixPosition(destIndex);
  return Math.abs(srcRow - destRow) + Math.abs(srcCol - destCol) === 1;
}

export function swap(tiles, src, dest) {
  const tilesResult = [...tiles];
  [tilesResult[src], tilesResult[dest]] = [tilesResult[dest], tilesResult[src]];
  return tilesResult;
}
```

###### Next we add code for isSolve which basically checks if the board is solved or not.

```js
//helpers.js
export function isSolved(tiles) {
  for (let i = 0, l = tiles.length; i < l; i++) {
    if (tiles[i] !== i) {
      return false;
    }
  }
  return true;
}
```

###### Finally add some image to it.

**App.js**

```js
import { useEffect, useState } from "react";
import "./App.css";
import Board from "./Board";
import { updateURLParameter } from "./helpers";

function App() {
  const [imgUrl, setImgUrl] = useState("");

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("img")) {
      setImgUrl(urlParams.get("img"));
    }
  }, []);

  const handleImageChange = (e) => {
    setImgUrl(e.target.value);
    window.history.replaceState(
      "",
      "",
      updateURLParameter(window.location.href, "img", e.target.value)
    );
  };
  return (
    <div className="App">
      <h1>SLIDING PUZZLE</h1>
      <Board imgUrl={imgUrl} />
      <label htmlFor="imgurl">
        IMAGE URL :&nbsp;
        <input id="imgurl" value={imgUrl} onChange={handleImageChange} />
      </label>
    </div>
  );
}

export default App;
```

**Board.js**

```js
import { useState } from "react";
import { BOARD_SIZE, GRID_SIZE, TILE_COUNT } from "./constants";
import { canSwap, isSolved, shuffle, swap } from "./helpers";
import Tile from "./Tile";
function Board({ imgUrl }) {
  const [tiles, setTiles] = useState([...Array(TILE_COUNT).keys()]);
  const [isStarted, setIsStarted] = useState(false);
  const style = {
    width: BOARD_SIZE,
    height: BOARD_SIZE,
  };
  console.log("tiles", tiles);
  const pieceWidth = Math.round(BOARD_SIZE / GRID_SIZE);
  const pieceHeight = Math.round(BOARD_SIZE / GRID_SIZE);

  const swapTiles = (tileIndex) => {
    if (canSwap(tileIndex, tiles.indexOf(tiles.length - 1))) {
      const swappedTiles = swap(
        tiles,
        tileIndex,
        tiles.indexOf(tiles.length - 1)
      );
      setTiles(swappedTiles);
    }
  };

  const shuffleTiles = () => {
    const shuffledTiles = shuffle(tiles);
    setTiles(shuffledTiles);
  };

  const handleTileClick = (index) => {
    swapTiles(index);
  };
  const handleShuffleClick = () => {
    shuffleTiles();
  };

  const handleStartClick = () => {
    shuffleTiles();
    setIsStarted(true);
  };

  const hasWon = isSolved(tiles);

  return (
    <>
      <ul style={style} className="board">
        {tiles.map((tile, index) => (
          <Tile
            key={tile}
            index={index}
            imgUrl={imgUrl}
            tile={tile}
            width={pieceWidth}
            height={pieceHeight}
            handleTileClick={handleTileClick}
          />
        ))}
      </ul>
      {hasWon && isStarted && <div>Puzzle solved 🧠 🎉</div>}
      {!isStarted ? (
        <button onClick={() => handleStartClick()}>Start game</button>
      ) : (
        <button onClick={() => handleShuffleClick()}>Restart game</button>
      )}
    </>
  );
}

export default Board;
```

**helpers.js**

```js
import { GRID_SIZE, TILE_COUNT } from "./constants";

// Get the row/col pair from a linear index.
export function getMatrixPosition(index) {
  return {
    row: Math.floor(index / GRID_SIZE),
    col: index % GRID_SIZE,
  };
}

export function getVisualPosition(row, col, width, height) {
  return {
    x: col * width,
    y: row * height,
  };
}

export function canSwap(srcIndex, destIndex) {
  const { row: srcRow, col: srcCol } = getMatrixPosition(srcIndex);
  const { row: destRow, col: destCol } = getMatrixPosition(destIndex);
  return Math.abs(srcRow - destRow) + Math.abs(srcCol - destCol) === 1;
}

export function swap(tiles, src, dest) {
  const tilesResult = [...tiles];
  [tilesResult[src], tilesResult[dest]] = [tilesResult[dest], tilesResult[src]];
  return tilesResult;
}

// Credits to https://codepen.io/unindented/pen/QNWdRQ
export function isSolvable(tiles) {
  let product = 1;
  for (let i = 1, l = TILE_COUNT - 1; i <= l; i++) {
    for (let j = i + 1, m = l + 1; j <= m; j++) {
      product *= (tiles[i - 1] - tiles[j - 1]) / (i - j);
    }
  }
  return Math.round(product) === 1;
}

export function isSolved(tiles) {
  for (let i = 0, l = tiles.length; i < l; i++) {
    if (tiles[i] !== i) {
      return false;
    }
  }
  return true;
}

export function shuffle(tiles) {
  const shuffledTiles = [
    ...tiles
      .filter((t) => t !== tiles.length - 1)
      .sort(() => Math.random() - 0.5),
    tiles.length - 1,
  ];
  return isSolvable(shuffledTiles) && !isSolved(shuffledTiles)
    ? shuffledTiles
    : shuffle(shuffledTiles);
}

export function updateURLParameter(url, param, paramVal) {
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split("=")[0] !== param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&";
      }
    }
  }

  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}
```

**Tile.js**

```js
import { BOARD_SIZE, GRID_SIZE, TILE_COUNT } from "./constants";
import { getMatrixPosition, getVisualPosition } from "./helpers";

function Tile({ tile, index, width, height, handleTileClick, imgUrl }) {
  const { row, col } = getMatrixPosition(index);
  console.log(row, col);
  const visualPos = getVisualPosition(row, col, width, height);
  const tileStyle = {
    width: `calc(100% / ${GRID_SIZE})`,
    height: `calc(100% / ${GRID_SIZE})`,
    translateX: visualPos.x,
    translateY: visualPos.y,
    //for image
    backgroundImage: `url(${imgUrl})`,
    backgroundSize: `${BOARD_SIZE * 1.25}px`,
    backgroundPosition: `${(100 / GRID_SIZE) * (tile % GRID_SIZE)}% ${
      (100 / GRID_SIZE) * Math.floor(tile / GRID_SIZE)
    }%`,
  };

  const translateX = visualPos.x;
  const translateY = visualPos.y;
  return (
    <li
      style={{
        ...tileStyle,
        transform: `translate(${translateX}px, ${translateY}px)`,
        transition: "transform 0.5s linear",
        // Is last tile?
        opacity: tile === TILE_COUNT - 1 ? 0 : 1,
      }}
      className="tile"
      onClick={() => handleTileClick(index)}
    >
      {!imgUrl && `${tile + 1}`}
    </li>
  );
}

export default Tile;
```

_Reference_ : Barely coading with Daniel Bark
