react-slide-puzzle
 └── src
     ├── components
     │   ├── Button.js
     │   ├── Display.js
     │   ├── Margin.js
     │   ├── ModalWindow.js
     │   └── SlidePuzzle.js
     ├── hooks
     │   ├── useDragAndDrop.js
     │   ├── useMutationObserver.js
     |   ├── useResizeObserver.js
     │   └── useSlidePuzzle.js
     ├── reducers
     │   └── slidePuzzleReducer.js
     ├── App.css
     ├── App.js
     ├── App.test.js
     ├── constants.js
     ├── index.css
     ├── index.js
     ├── logo.svg
     ├── serviceWorker.js
     └── utils.js

yarn add styled-components

// スライドパズルのサイズ
export const SLIDE_PUZZLE_SIZE = {
	height: '60vmin',
	width: '60vmin'
}

// スライドパズルの背景画像
export const BG = "bg.jpg";

// ピースがシャッフルされるスピード
export const SHUFFLE_SPEED = 60;

// ピースの最大シャッフル数
export const MAX_SHUFFLE_COUNT = 100;

// レベルに応じたピース数
export const LEVEL = {
	easy: 9,
	normal: 16,
	hard: 25
};

// 盤面のカラー
export const BOARD_COLOR = "#997f5d";

const loadImage = (url) => {
	return new Promise((resolve) => {
		const img = new Image();
		img.src = url;
		img.crossOrigin = "Anonymous";
		img.addEventListener("load", (e) => {
			resolve(e.target);
		});
	});
};

export async function divideImage(
	url,
	rows,
	cols
) {
	const canvas = document.createElement('canvas')

	const ctx = canvas.getContext('2d')

	const squareImageUrl = await getSquareImage(url).then(r => r)

	const image = await loadImage(squareImageUrl).then(r => r)

	canvas.width = image.width / rows
	canvas.height = image.height / cols

	const dividedImages = []

	let count = 0

	for(let i = 0; i < cols; i++) {
		for(let j = 0; j < rows; j++) {
			ctx.drawImage(
				image,
				j * image.width / rows,
				i * image.height / cols,
				image.width / rows,
				image.height / cols,
				0,
				0,
				canvas.width,
				canvas.height
			)

			const clipedImage = canvas.toDataURL('image/jpeg')

			dividedImages[count] = clipedImage

			count++
		}
	}

	return dividedImages
}

export const clamp = (value, min, max) => {
	if (value < min)
		return min
	else if (value > max)
		return max
	return value
}

import React from 'react'
import styled from 'styled-components'

const StyledGameStatus = styled.div`
	color: ${({ color }) => (color ? color : "#333333")};
	font-size: ${({ fontSize }) => (fontSize ? fontSize : "1em")};
`;

const GameStatus = ({ className, title, text, color, fontSize }) => (
	<StyledGameStatus
		className={className}
		color={color}
		fontSize={fontSize}
	>{`${title}: ${text}`}</GameStatus>
);

export default GameStatus

<div>{`${title}: ${text}`}</div>

import React from 'react'
import styled from 'styled-components'

const StyledSlidePuzzle = styled.div`
	background-color: ${({ boardColor }) => boardColor};
	box-sizing: border-box;
	border: 1vmin solid ${({ boardColor }) => boardColor};
	border-radius: 1vmin;
	height: ${({ sideLength }) => sideLength};
	position: relative;
	width: ${({ sideLength }) => sideLength};
	z-index: 0;
`;

const Piece = styled.div`
	box-sizing: border-box;
	height: ${({ piece }) => piece.height}px;
	padding: 0.3vmin;
	position: absolute;
	left: ${({ piece }) => piece.x}px;
	top: ${({ piece }) => piece.y}px;
	transition: ${({ piece }) => (piece.isShuffle ? `all linear 100ms` : "")};
	transform: translate3d(
		${({ piece }) => piece.offsetX}px,
		${({ piece }) => piece.offsetY}px,
		0
	);
	user-select: none;
	width: ${({ piece }) => piece.width}px;
	z-index: ${({ piece }) => (piece.blank ? 1 : 3)};
`;

const Img = styled.img`
  display: block
  height: auto;
  pointer-events: none;
  width: 100%;
`;

const Num = styled.span`
	color: white;
	font-size: 1vmin;
	position: absolute;
	top: 1.2vmin;
	left: 1.2vmin;
`;

const SlidePuzzle = ({ className, slidePuzzle, boardColor, sideLength }) => (
	<StyledSlidePuzzle
		className={className}
		ref={slidePuzzle.slidePuzzleNode}
		boardColor={boardColor}
		sideLength={sideLength}
	>
		{slidePuzzle.pieces.map((piece, i) => (
			<Piece
				className={`piece piece-${piece.baseId}`}
				piece={piece}
				onMouseDown={slidePuzzle.handleMouseDown}
				key={piece.baseId}
			>
				{!piece.blank && (
					<React.Fragment>
						<Num className="piece-num">{piece.baseId}</Num>
						<Img className="piece-image" src={piece.image}></Img>
					</React.Fragment>
				)}
			</Piece>
		))}
	</StyledSlidePuzzle>
);

export default SlidePuzzle

const slidePuzzleReducer = (state, action) => {
	switch (action.type) {
		case "RESIZE_SLIDE_PUZZLE": {
			if (!state.pieces.length) {
				return {
					...state
				};
			}

			const pieces = [...state.pieces];
			const pieceLength = state.pieceLength;
			const width = action.width;
			const height = action.height;

			const rows = Math.sqrt(pieceLength);
			const cols = rows;

			let count = 0;

			for (let i = 0; i < cols; i++) {
				for (let j = 0; j < rows; j++) {
					const pieceWidth = width / rows;
					const pieceHeight = height / cols;

					pieces[count].x *= pieceWidth / pieces[count].width;
					pieces[count].y *= pieceHeight / pieces[count].height;
					pieces[count].basePointX *= pieceWidth / pieces[count].width;
					pieces[count].basePointY *= pieceHeight / pieces[count].height;
					pieces[count].height = pieceHeight;
					pieces[count].width = pieceWidth;

					count++;
				}
			}

			return {
				...state,
				pieces,
				height,
				width
			};
		}

		case "RESET_SLIDE_PUZZLE": {
			return {
				...state,
				pieces: [],
				pieceLength: 0,
				bg: null,
				isLock: true,
				isComplete: false,
				isShuffle: false,
				width: 0,
				height: 0,
				trouble: 0
			};
		}

		case "SHUFFLE_PIECES": {
			const pieces = [...state.pieces];

			pieces.map((piece) => ({
				...piece,
				isShuffle: false
			}));

			const pieceLength = pieces.length;

			const blank = pieces.find((piece) => piece.blank);

			const piecesNextToBlank = pieces.filter((piece, i) => {
				return (
					(piece.id === blank.id - 1 && blank.y === piece.y) || 
					(piece.id === blank.id + 1 && blank.y === piece.y) || 
					(piece.id === blank.id - Math.sqrt(pieceLength) && blank.x === piece.x) ||
					(piece.id === blank.id + Math.sqrt(pieceLength) && blank.x === piece.x)
				);
			});

			const r = Math.floor(Math.random() * piecesNextToBlank.length);

			const movingPiece = piecesNextToBlank[r];

			if (!movingPiece) {
				return {
					...state,
					pieces
				};
			}

			if (movingPiece.isShuffle) {
				return {
					...state,
					pieces: pieces.map((piece) => ({
						...piece,
						isShuffle: false
					}))
				};
			}

			return {
				...state,
				pieces: pieces.map((piece) =>
					piece === movingPiece
						? {
								...piece,
								id: blank.id,
								x: blank.x,
								y: blank.y,
								basePointX: blank.x,
								basePointY: blank.y,
								isShuffle: true
						  }
						: piece === blank
						? {
								...piece,
								id: movingPiece.id,
								x: movingPiece.x,
								y: movingPiece.y,
								basePointX: movingPiece.x,
								basePointY: movingPiece.y,
								isShuffle: false
						  }
						: piece
				)
			};
		}

		case "SORT_PIECES": {
			const pieces = [...state.pieces].sort((a, b) => a.id - b.id);

			return {
				...state,
				pieces
			};
		}

		case "DRAG_START_PIECE": {
			const pieces = [...state.pieces].map((piece) =>
				piece.baseId === action.num
					? {
							...piece,
							isDrag: true
					  }
					: piece
			);

			return {
				...state,
				pieces
			};
		}

		case "LIMIT_MOVEMENT_PIECE": {
			const pieces = [...state.pieces];
			const width = state.width;
			const height = state.height;

			pieces.forEach((piece) => {
				if (piece.isDrag) {
					if (piece.x <= 0) {
						piece.offsetX = 0;
					}

					if (piece.x + piece.width >= width) {
						piece.offsetX = 0;
					}

					if (piece.y <= 0) {
						piece.offsetY = 0;
					}

					if (piece.y + piece.height >= height) {
						piece.offsetY = 0;
					}
				}
			});

			return {
				...state,
				pieces
			};
		}

		case "DRAG_MOVE_PIECE": {
			const pieces = [...state.pieces];
			const pieceLength = pieces.length;
			const elementOffsetX = action.elementOffsetX;
			const elementOffsetY = action.elementOffsetY;

			pieces.forEach((piece) => {
				if (piece.isDrag) {
					if (
						pieces[piece.id - 1] &&
						pieces[piece.id - 1].blank &&
						pieces[piece.id - 1].y === piece.y
					) {
						pieces[piece.id] = {
							...piece,
							offsetX: clamp(elementOffsetX, -piece.width, 0)
						};
					} else if (
						pieces[piece.id + 1] &&
						pieces[piece.id + 1].blank &&
						pieces[piece.id + 1].y === piece.y
					) {
						pieces[piece.id] = {
							...piece,
							offsetX: clamp(elementOffsetX, 0, piece.width)
						};
					} else if (
						pieces[piece.id - Math.sqrt(pieceLength)] &&
						pieces[piece.id - Math.sqrt(pieceLength)].blank &&
						pieces[piece.id - Math.sqrt(pieceLength)].x === piece.x
					) {
						pieces[piece.id] = {
							...piece,
							offsetY: clamp(elementOffsetY, -piece.height, 0)
						};
					} else if (
						pieces[piece.id + Math.sqrt(pieceLength)] &&
						pieces[piece.id + Math.sqrt(pieceLength)].blank &&
						pieces[piece.id + Math.sqrt(pieceLength)].x === piece.x
					) {
						pieces[piece.id] = {
							...piece,
							offsetY: clamp(elementOffsetY, 0, piece.height)
						};
					}
				}
			});

			return {
				...state,
				pieces
			};
		}

		case "DRAG_END_PIECE": {
			const pieces = [...state.pieces];
			const pieceLength = pieces.length;

			const replacePiece = (targetPiece, blank) => {
				pieces[targetPiece.id] = {
					...pieces[targetPiece.id],
					id: blank.id,
					x: blank.basePointX,
					y: blank.basePointY,
					basePointX: blank.basePointX,
					basePointY: blank.basePointY,
					offsetX: 0,
					offsetY: 0
				};

				pieces[blank.id] = {
					...pieces[blank.id],
					id: targetPiece.id,
					x: targetPiece.basePointX,
					y: targetPiece.basePointY,
					basePointX: targetPiece.basePointX,
					basePointY: targetPiece.basePointY,
					offsetX: 0,
					offsetY: 0
				};
			};

			let trouble = 0;

			pieces.forEach((piece) => {
				if (piece.isDrag) {
					if (
						Math.abs(piece.offsetX) > piece.width / 2 ||
						Math.abs(piece.offsetY) > piece.height / 2
					) {
						if (piece.offsetX < 0) {
							const blank = pieces[piece.id - 1];
							replacePiece(piece, blank);
						} else if (piece.offsetX > 0) {
							const blank = pieces[piece.id + 1];
							replacePiece(piece, blank);
						} else if (piece.offsetY < 0) {
							const blank = pieces[piece.id - Math.sqrt(pieceLength)];
							replacePiece(piece, blank);
						} else if (piece.offsetY > 0) {
							const blank = pieces[piece.id + Math.sqrt(pieceLength)];
							replacePiece(piece, blank);
						}

						trouble = state.trouble + 1;
					} else {
						piece.offsetX = 0;
						piece.offsetY = 0;

						trouble = state.trouble;
					}
				}
			});

			return {
				...state,
				pieces: pieces.map((piece) =>
					piece.isDrag
						? {
								...piece,
								isDrag: false
						  }
						: piece
				),
				trouble
			};
		}

		case "CHANGE_SLIDE_PUZZLE_BG": {
			return {
				...state,
				bg: action.url
			};
		}

		case "CHANGE_PIECE_LENGTH": {
			return {
				...state,
				pieceLength: action.num
			};
		}

		case "INITIALIZE_SLIDE_PUZZLE": {
			const pieces = [...state.pieces];
			const pieceLength = action.pieceLength;
			const height = action.height;
			const width = action.width;
			const pieceImages = action.pieceImages;

			const rows = Math.sqrt(pieceLength);
			const cols = rows;

			let count = 0;

			for (let i = 0; i < cols; i++) {
				for (let j = 0; j < rows; j++) {
					const pieceHeight = height / cols;
					const pieceWidth = width / rows;

					const x = j * pieceHeight;
					const y = i * pieceHeight;

					pieces[count] = {
						...pieces[count],
						id: count,
						baseId: count,
						image: pieceImages[count],
						x,
						y,
						basePointX: x,
						basePointY: y,
						blank: count === pieceLength - 1 ? true : false,
						isDrag: false,
						isShuffle: false,
						height: pieceHeight,
						width: pieceWidth,
						offsetX: 0,
						offsetY: 0
					};

					count++;
				}
			}

			return {
				...state,
				pieces,
				pieceLength
			};
		}

		case "START_SHUFFLE_PIECES": {
			return {
				...state,
				isShuffle: true
			};
		}

		case "STOP_SHUFFLE_PIECES": {
			const pieces = [...state.pieces].map((piece) => ({
				...piece,
				isShuffle: false
			}));

			return {
				...state,
				pieces,
				isShuffle: false
			};
		}

		case "LOCK_SLIDE_PUZZLE": {
			return {
				...state,
				isLock: true
			};
		}

		case "UNLOCK_SLIDE_PUZZLE": {
			return {
				...state,
				isLock: false
			};
		}

		case "COMPLETE_SLIDE_PUZZLE": {
			return {
				...state,
				isComplete: true
			};
		}

		case "INCOMPLETE_SLIDE_PUZZLE": {
			return {
				...state,
				isComplete: false
			};
		}

		case "RESET_TROUBLE": {
			return {
				...state,
				trouble: 0
			};
		}

		default:
			throw new Error();
	}
};

const initialState = {
	isLock: true,
	isShuffle: false,
	isComplete: false,
	bg: null,
	pieces: [],
	pieceLength: 0,
	width: 0,
	height: 0,
	trouble: 0
};

const useSlidePuzzle = (bg, pieceLength) => {
	const [
		element,
		pointer,
		handleMouseDown,
		setElementOffset,
		resetElementOffset,
		setElementPosition
	] = useDragAndDrop();

	const { currentDragElement, elementPosition, elementOffset } = element;

	const { pointerStartPosition, pointerMovePosition } = pointer;

	const [slidePuzzle, dispatch] = useReducer(slidePuzzleReducer, initialState);

	const slidePuzzleNode = useRef(null);
	const intervalId = useRef(null);

	const initializeSlidePuzzle = async () => {
		const width = slidePuzzleNode.current.clientWidth;
		const height = slidePuzzleNode.current.clientHeight;

		const rows = Math.sqrt(pieceLength);
		const cols = rows;
		const squareImageUrl = await getSquareImage(bg, width).then((r) => r);
		const pieceImages = divideImage(squareImageUrl, rows, cols);

		pieceImages.then((images) =>
			dispatch({
				type: "INITIALIZE_SLIDE_PUZZLE",
				pieceLength,
				pieceImages: images,
				height,
				width
			})
		);
	};

	const changeSlidePuzzleBg = useCallback((url) =>
		dispatch({
			type: "CHANGE_SLIDE_PUZZLE_BG",
			url
		})
	);

	const changePieceLength = useCallback((num) =>
		dispatch({
			type: "CHANGE_PIECE_LENGTH",
			num
		})
	);

	const startShufflePieces = useCallback(() =>
		dispatch({
			type: "START_SHUFFLE_PIECES"
		})
	);

	const stopShufflePieces = useCallback(() =>
		dispatch({
			type: "STOP_SHUFFLE_PIECES"
		})
	);

	const lockSlidePuzzle = useCallback(() =>
		dispatch({
			type: "LOCK_SLIDE_PUZZLE"
		})
	);
	const unlockSlidePuzzle = useCallback(() =>
		dispatch({
			type: "UNLOCK_SLIDE_PUZZLE"
		})
	);

	const completeSlidePuzzle = useCallback(() =>
		dispatch({
			type: "COMPLETE_SLIDE_PUZZLE"
		})
	);
	const incompleteSlidePuzzle = useCallback(() =>
		dispatch({
			type: "INCOMPLETE_SLIDE_PUZZLE"
		})
	);

	const resetSlidePuzzle = useCallback(() =>
		dispatch({
			type: "RESET_SLIDE_PUZZLE"
		})
	);

	const resetTrouble = useCallback(() =>
		dispatch({
			type: "RESET_TROUBLE"
		})
	);

	useResizeObserver([slidePuzzleNode], (entries) => {
		const height = entries[0].contentRect.height;
		const width = entries[0].contentRect.width;

		if (height === 0 || width === 0) return;

		dispatch({
			type: "RESIZE_SLIDE_PUZZLE",
			width,
			height
		});
	});

	useEffect(() => {
		if (!slidePuzzle.isShuffle) return;

		let count = 0;

		intervalId.current = setInterval(() => {
			count++;

			dispatch({
				type: "SHUFFLE_PIECES"
			});

			if (count > MAX_SHUFFLE_COUNT) {
				clearInterval(intervalId.current);

				dispatch({
					type: "SORT_PIECES"
				});

				dispatch({
					type: "STOP_SHUFFLE_PIECES"
				});

				dispatch({
					type: "UNLOCK_SLIDE_PUZZLE"
				});
			}
		}, SHUFFLE_SPEED);
	}, [slidePuzzle.isShuffle]);

	// mousedown
	useEffect(() => {
		if (slidePuzzle.isLock) return;

		if (!currentDragElement.current) return;

		const num = parseFloat(
			currentDragElement.current.className.replace(/[^0-9]/g, "")
		);

		dispatch({
			type: "DRAG_START_PIECE",
			num
		});
	}, [elementPosition]);

	// mousemove
	useEffect(() => {
		if (slidePuzzle.isLock) return;

		if (!currentDragElement.current) return;

		dispatch({
			type: "LIMIT_MOVEMENT_PIECE"
		});

		dispatch({
			type: "DRAG_MOVE_PIECE",
			elementOffsetX: elementOffset.x,
			elementOffsetY: elementOffset.y
		});
	}, [elementOffset.x, elementOffset.y]);

	// mouseup
	useEffect(() => {
		if (slidePuzzle.isLock) return;

		if (currentDragElement.current) return;

		dispatch({
			type: "DRAG_END_PIECE"
		});

		dispatch({
			type: "SORT_PIECES"
		});

		resetElementOffset();
	}, [elementPosition]);

	useEffect(() => {
		if (slidePuzzle.isLock) return;

		if (currentDragElement.current) return;

		const matchPieces = slidePuzzle.pieces.filter(
			(piece) => piece.id === piece.baseId
		);

		if (matchPieces.length === slidePuzzle.pieceLength) {
			dispatch({
				type: "COMPLETE_SLIDE_PUZZLE"
			});
		}
	}, [slidePuzzle.pieces]);

	return [
		{
			pieces: slidePuzzle.pieces,
			slidePuzzleNode,
			handleMouseDown
		},
		initializeSlidePuzzle,
		changeSlidePuzzleBg,
		changePieceLength,
		startShufflePieces,
		stopShufflePieces,
		lockSlidePuzzle,
		unlockSlidePuzzle,
		slidePuzzle.isComplete,
		completeSlidePuzzle,
		incompleteSlidePuzzle,
		resetSlidePuzzle,
		slidePuzzle.trouble,
		resetTrouble
	];
};

const [slidePuzzle, dispatch] = useReducer(slidePuzzleReducer, initialState);

dispatch({ 
  type: 'INITIALIZE',
  x: 0,
  y: 0
})

case "INITIALIZE": {
  return {
    ...state,
    x: action.x,
    y: action.y
  };
}

useEffect(() => {
		if (!slidePuzzle.isShuffle) return;

    // ここでシャッフルの処理を行う
	}, [slidePuzzle.isShuffle]);

const Piece = styled.div`
    // 省略
    transition: ${({ piece }) => (piece.isShuffle ? `all linear 100ms` : "")};
`;

useEffect(() => {
    // パズルの操作がロックされていれば終了する
		if (slidePuzzle.isLock) return;

    // 押し込んでいなければ終了する
		if (!currentDragElement.current) return;

		// ここで押下したときの処理を行う
	}, [elementPosition]);

useEffect(() => {
		if (slidePuzzle.isLock) return;

		if (!currentDragElement.current) return;

		// do something
	}, [elementOffset.x, elementOffset.y]);

useEffect(() => {
		if (slidePuzzle.isLock) return;

    // 押し込んでいれば終了する
		if (currentDragElement.current) return;

		// do something
	}, [elementPosition]);

useEffect(() => {
  // スライドパズルの操作がロックされていれば以降の処理は行わない
  if (slidePuzzle.isLock) return;

  // ピースがドラッグされていれば以降の処理は行わない
	if (currentDragElement.current) return;

  // ここでクリア判定をする
}, [slidePuzzle.pieces])

const matchPieces = slidePuzzle.pieces.filter(
			(piece) => piece.id === piece.baseId
		);

if (matchPieces.length === slidePuzzle.pieceLength) {
			dispatch({
				type: "COMPLETE_SLIDE_PUZZLE"
			});
		}

const height = entries[0].contentRect.height;
		const width = entries[0].contentRect.width;

		if (height === 0 || width === 0) return;

		dispatch({
			type: "RESIZE_SLIDE_PUZZLE",
			width,
			height
		});

const App = () => {
	const [isStartGame, setIsStartGame] = useState(false);
	const [level, setLevel] = useState(LEVEL.easy);
	const [selectBg, setSelectBg] = useState(BG);
	const [
		slidePuzzle,
		initializeSlidePuzzle,
		changeSlidePuzzleBg,
		changePieceLength,
		startShufflePieces,
		stopShufflePieces,
		lockSlidePuzzle,
		unlockSlidePuzzle,
		isComplete,
		completeSlidePuzzle,
		incompleteSlidePuzzle,
		resetSlidePuzzle,
		trouble,
		resetTrouble
	] = useSlidePuzzle(selectBg, level);

	useEffect(() => {
		initializeSlidePuzzle();
	}, []);

	const startGame = useCallback(() => {
		setIsStartGame(true);
		startShufflePieces();
	}, []);

	useEffect(() => {
		if (!isComplete) return;
		lockSlidePuzzle();
	}, [isComplete]);

	const resetGame = useCallback(() => {
		setIsStartGame(false);
		resetSlidePuzzle();
		initializeSlidePuzzle();
	}, []);

	return (
		<StyledApp>
			<Modal
				title="Game clear!"
				text={`your trouble is ${trouble}.`}
				isShow={isComplete}
			/>
			<SlidePuzzleWrapper>
				<FlexRowSpaceBetween>
					<Display
						className="troble"
						title="Trouble"
						text={trouble}
						fontSize="2vmin"
					/>
					<Display
						className="level"
						title="Level"
						text={
							level === LEVEL.easy
								? "easy"
								: level === LEVEL.normal
								? "normal"
								: level === LEVEL.hard
								? "hard"
								: "easy"
						}
						fontSize="2vmin"
					/>
				</FlexRowSpaceBetween>
				<Margin bottom="1.2vmin" />
				<SlidePuzzle
					className="slide-puzzle"
					slidePuzzle={slidePuzzle}
					boardColor={BOARD_COLOR}
					sideLength="60vmin"
				/>
				<Margin top="3vmin">
					<FlexRowCenter>
						<Button
							bgColor="orange"
							color="#333"
							mRight=".5em"
							onClick={startGame}
							isDisabled={isStartGame ? true : false}
						>
							Start
						</Button>
						<Button
							className="dialog-button"
							color="#333"
							onClick={resetGame}
							mLeft=".5em"
							isDisabled={isStartGame ? false : true}
						>
							Reset
						</Button>
					</FlexRowCenter>
				</Margin>
			</SlidePuzzleWrapper>
		</StyledApp>
	);
};