I tend to like to leave evidence of my train of thoughts. 💭 Usually the comments, but this time I decided to use the README.
Using resources on the vue.js documentation, I was able to implement a shuffle functionality for my puzzle. My inital idea was to create a slider type puzzle, so this was my attempt to figure out how to move the pieces.
I went with an array after some in class discussions.
The second iteration added a splash of color. Using the same shuffle from the first puzzle, now the user has to attempt to change the board from "red, yellow, blue, green" to "green, blue, yellow, red".
So ultimately I wanted a puzzle board and puzzle pieces. This version saw the implementation of 'pieces' in the form of buttons. I struggled with the interaction between the puzzle board and the puzzle pieces. This iteration challenged me to figure out how to change the colors of the puzzle board because I knew I wanted to be able to identify which place on the board the user was going to place the piece.
Fourth and final (for this assignment at least) attempt I was able to pull together pieces of what I have learned along the way. There is now an active class to know when a piece on the board is being selected. Then when the matching 'button' or piece is selected there is a notification, and when the wrong one is selected the user is notified.
Still a long way from where I had envisions, but progress has been made.
I mainly used the Vue.js documentations. The reference for matching the arrays is found in the comments of the code where it was used.