Creating the components for shuffling pictures
The slider puzzle game provides the slider puzzle where the player shuffles the tiles into a picture to win, the elapsed time display, the logic for rearranging the puzzles, the logic to check if we win, and a timer to calculate the elapsed time since the game started.
To calculate the elapsed time easily, we can use the moment library. To install the library, we can run npm install moment. Once we have installed the package, we can begin writing the necessary code.
Let's create the src/components/SliderPuzzle.vue file. The full code for this file can be found at https://github.com/PacktPublishing/-Vue.js-3-By-Example/blob/master/Chapter03/src/components/SliderPuzzle.vue.
We will start by creating the component with the script tag:
<script> import moment from "moment"; const correctPuzzleArray = [ "image_part_001.jpg", "image_part_002.jpg", "image_part_003...