# react-sliding-tile-puzzle

> A react sliding tile puzzle component

Latest version **1.0.5** (published 2019-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-sliding-tile-puzzle
pnpm add react-sliding-tile-puzzle
yarn add react-sliding-tile-puzzle
bun add react-sliding-tile-puzzle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-02-23 |
| First published | 2019-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 13.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AmauriAires |
| Maintainers | amauribizerra |
| Keywords | react, sliding, tile, puzzle, AI |

## Links

- npm: https://www.npmjs.com/package/react-sliding-tile-puzzle
- Homepage: https://github.com/AmauriAires/react-sliding-tile-puzzle/blob/master/README.md
- npm.io page: https://npm.io/package/react-sliding-tile-puzzle

## Dependencies (8)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [css-loader](https://npm.io/package/css-loader.md) ^2.1.0
- [url-loader](https://npm.io/package/url-loader.md) ^1.1.2
- [file-loader](https://npm.io/package/file-loader.md) ^3.0.1
- [keygenerator](https://npm.io/package/keygenerator.md) ^1.0.4
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [sleep-promise](https://npm.io/package/sleep-promise.md) ^8.0.1
- [react-clickable](https://npm.io/package/react-clickable.md) ^1.1.0

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-02-23
- 1.0.4 — 2019-02-23
- 1.0.3 — 2019-02-13
- 1.0.2 — 2019-02-13
- 1.0.1 — 2019-02-13
- 1.0.0 — 2019-02-11
- 0.0.0 — 2019-02-11

## README

# react-sliding-tile-puzzle

A Sliding Tile Puzzle!

![](react-sliding-tile-puzzle.gif)

-   react-sliding-tile-puzzle makes use of AI to find a solution to the puzzle.

-   AI algorithm: A<sup>\*</sup> with cost function = min(f(x)), where f(x) = h(x) + g(x), h(x) = manhattan distance and g(x) = height of tree.

-   Other algorithms will be added to this module soon. The idea is to use this kind of puzzle to compare/demonstrate various algorithms.

\* The use of images (as tiles) will be implemented soon.

**Demo**

http://AmauriAires.github.io/react-sliding-tile-puzzle

**Installation**

```
npm install react-sliding-tile-puzzle --save
```

**Props**

| Prop Name     | Type   | Is Required | Default Value | Description                                                            |
| ------------- | ------ | ----------- | ------------- | ---------------------------------------------------------------------- |
| solvePuzzle   | bool   | optional    |               | Tells AI algorithm to solve puzzle.                                    |
| newPuzzle     | bool   | optional    |               | Tells component to create a new puzzle. Suffle pattern board.          |
| maxIterations | number | optional    | 50            | Max number of tile moves allowed for AI algorithm to solve the puzzle. |
| image         | string | required    |               | Image for tiles                                                        |
| size          | number | required    |               | Puzzle dimensions (height x width = size x size ) in px                |

**Usage**

```javascript
import React, { Component } from 'react';
import './App.css';
import SlidingTilePuzzle from 'react-sliding-tile-puzzle';
import { Button, Segment } from 'semantic-ui-react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            solvePuzzle: false,
            newPuzzle: false,
        };
    }

    handleClickSolvePuzzle = () => {
        this.setState({ solvePuzzle: !this.state.solvePuzzle });
    };

    handleClickNewPuzzle = () => {
        this.setState({ newPuzzle: !this.state.newPuzzle });
    };

    render() {
        return (
            <div className="App">
                <Segment.Group>
                    <Segment>Sliding Tile Puzzle</Segment>
                    <Segment.Group horizontal>
                        <Segment.Group vertical="true">
                            <Segment>
                                <Button
                                    fluid
                                    onClick={this.handleClickNewPuzzle}
                                >
                                    New Puzzle
                                </Button>
                            </Segment>
                            <Segment>
                                <Button
                                    fluid
                                    onClick={this.handleClickSolvePuzzle}
                                >
                                    Solve Puzzle
                                </Button>
                            </Segment>
                        </Segment.Group>
                        <Segment>
                            <SlidingTilePuzzle
                                solvePuzzle={this.state.solvePuzzle}
                                newPuzzle={this.state.newPuzzle}
                                maxIterations={300}
                                image="serenity-mitchell-1163490-unsplash.jpg"
                                size={130}
                            />
                        </Segment>
                    </Segment.Group>
                </Segment.Group>
            </div>
        );
    }
}

export default App;
```

---
_Source: https://npm.io/package/react-sliding-tile-puzzle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._