-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(puzzle): correct puzzle drag'n'drop
- Loading branch information
Gerd Müller
committed
Jun 13, 2020
1 parent
f673acf
commit aec1f71
Showing
1 changed file
with
69 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,94 @@ | ||
| import React, {useState} from 'react'; | ||
| import { IMAGE_SUFFIX } from '@gerdesque/data'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import React, { Component } from "react"; | ||
| import './puzzle.scss'; | ||
|
|
||
| export const Puzzle = () => { | ||
| const useStyles = makeStyles(() => ({ | ||
| puzzle: { | ||
| backgroundImage: `url(${"./assets/daheim_puzzle"+IMAGE_SUFFIX})`, | ||
| boxShadow: '0 0 8px 8px #dcd5cc inset', | ||
| }, | ||
| })); | ||
| const classes = useStyles(); | ||
| class Puzzle extends Component { | ||
| state = { | ||
| pieces: [], | ||
| shuffled: [], | ||
| solved: [] | ||
| }; | ||
|
|
||
| const pieces = [...Array(16)].map((_, i) => ({ | ||
| img: `daheim_puzzle_${("0" + (i + 1)).substr(-2)}`, | ||
| componentDidMount() { | ||
| const pieces = [...Array(16)].map((_, i) => ({ | ||
| img: `daheim_puzzle_${("0" + (i + 1)).substr(-2)}.webp`, | ||
| order: i, | ||
| board: "shuffled" | ||
| })); | ||
|
|
||
| const shufflePieces = (pieces) => { | ||
| const shuffled = [...pieces]; | ||
|
|
||
| for (let i = shuffled.length - 1; i > 0; i--) { | ||
| const j = Math.floor(Math.random() * (i + 1)); | ||
| [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; | ||
| } | ||
|
|
||
| return shuffled; | ||
| this.setState({ | ||
| pieces, | ||
| shuffled: this.shufflePieces(pieces), | ||
| solved: [...Array(16)] | ||
| }); | ||
| } | ||
| const [shuffled, setShuffled] = useState(shufflePieces(pieces)); | ||
| const [solved, setSolved] = useState([...Array(16)]); | ||
|
|
||
| // const handleDrop = (e, targetName) => { | ||
| // let target = this.state[targetName]; | ||
| // const pieceOrder = e.dragData.piece.order; | ||
| // if (target[pieceOrder]) return; | ||
|
|
||
| // const pieceData = this.state.pieces.find(p => p.order === +pieceOrder); | ||
| // const origin = this.state[pieceData.board]; | ||
|
|
||
| // if (targetName === pieceData.board) target = origin; | ||
| // origin[origin.indexOf(pieceData)] = undefined; | ||
| // target[pieceOrder] = pieceData; | ||
| // pieceData.board = targetName; | ||
| handleDrop(e, index, targetName) { | ||
| e.preventDefault(); | ||
| let target = this.state[targetName]; | ||
| if (target[index]) return; | ||
|
|
||
| // this.setState({ [pieceData.board]: origin, [targetName]: target }); | ||
| // this.checkBoard(); | ||
| // } | ||
| const pieceOrder = e.dataTransfer.getData("text"); | ||
| const pieceData = this.state.pieces.find(p => p.order === +pieceOrder); | ||
| const origin = this.state[pieceData.board]; | ||
|
|
||
| const handleDrop = (e, index, targetName) => { | ||
| e.preventDefault(); | ||
| let target = targetName === 'shuffled' ? shuffled : solved; | ||
| //if (target[index]) return; | ||
|
|
||
| const pieceOrder = e.dataTransfer.getData('text'); | ||
| const pieceData = pieces.find(p => p.order === +pieceOrder); | ||
| const origin = pieceData.board === 'shuffled' ? shuffled : solved; | ||
|
|
||
| if (targetName === pieceData.board) target = origin; | ||
| //origin[origin.indexOf(pieceData)] = undefined; | ||
| //target[pieceOrder] = pieceData; | ||
| //pieceData.board = targetName; | ||
|
|
||
| // this.setState({ [pieceData.board]: origin, [targetName]: target }); | ||
| origin[origin.indexOf(pieceData)] = undefined; | ||
| target[index] = pieceData; | ||
| pieceData.board = targetName; | ||
|
|
||
| const newShuffled = [...shuffled]; | ||
| newShuffled[newShuffled.indexOf(pieceData)] = undefined; | ||
| this.setState({ [pieceData.board]: origin, [targetName]: target }); | ||
| } | ||
|
|
||
| solved[index] = pieceData; | ||
| setShuffled(newShuffled); | ||
| handleDragStart(e, order) { | ||
| const dt = e.dataTransfer; | ||
| dt.setData("text/plain", order); | ||
| dt.effectAllowed = "move"; | ||
| } | ||
|
|
||
| const handleDragStart = (e, order) => { | ||
| e.dataTransfer.setData('text/plain', order); | ||
| render() { | ||
| return ( | ||
| <div className='puzzleBox'> | ||
| <div className='puzzle'> | ||
| <ul className='puzzle__shuffled-board'> | ||
| {this.state.shuffled.map((piece, i) => this.renderPieceContainer(piece, i, "shuffled"))} | ||
| </ul> | ||
| <ol className='puzzle__solved-board' style={{ backgroundImage: `url(./assets/daheim_puzzle.webp)` }}> | ||
| {this.state.solved.map((piece, i) => this.renderPieceContainer(piece, i, "solved"))} | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const renderPieceContainer = (piece, index, boardName) => { | ||
| renderPieceContainer(piece, index, boardName) { | ||
| return ( | ||
| <li key={index} | ||
| onDragOver={(e) => e.preventDefault()} | ||
| onDrop={(e) => handleDrop(e, index, boardName)}> | ||
| {piece && <img | ||
| draggable | ||
| onDragStart={(e) => handleDragStart(e, piece.order)} | ||
| alt="" | ||
| src={`./assets/${piece.img}.webp`}/>} | ||
| <li | ||
| key={index} | ||
| onDragOver={e => e.preventDefault()} | ||
| onDrop={e => this.handleDrop(e, index, boardName)} | ||
| > | ||
| {piece && ( | ||
| <img | ||
| draggable | ||
| alt="" | ||
| onDragStart={e => this.handleDragStart(e, piece.order)} | ||
| src={(`./assets/${piece.img}`)} | ||
| /> | ||
| )} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className='puzzleBox'> | ||
| <div className='puzzle'> | ||
| <ul className='puzzle__shuffled-board'> | ||
| {shuffled.map((piece, i) => renderPieceContainer(piece, i, "shuffled"))} | ||
| </ul> | ||
| <ol className={`puzzle__solved-board ${classes.puzzle}`}> | ||
| {solved.map((piece, i) => renderPieceContainer(piece, i, "solved"))} | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| shufflePieces(pieces) { | ||
| const shuffled = [...pieces]; | ||
|
|
||
| for (let i = shuffled.length - 1; i > 0; i--) { | ||
| const j = Math.floor(Math.random() * (i + 1)); | ||
| [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; | ||
| } | ||
|
|
||
| return shuffled; | ||
| } | ||
| } | ||
|
|
||
| export default Puzzle; |