Naming Prosecution Mitigator

    @merrymellody/react-sliding-tile-puzzle

    1.0.15 • Public • Published

    react-sliding-tile-puzzle

    A Sliding Tile Puzzle!

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

    • AI algorithm: A* 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

    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;

    Install

    npm i @merrymellody/react-sliding-tile-puzzle

    DownloadsWeekly Downloads

    10

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    13.5 MB

    Total Files

    183

    Last publish

    Collaborators

    • merrymellody