Project Reflection

For our final project in front end web development, Nate and I made a digital Pentago game! Here is a link to our final product. This class was my first time using React, and Nate and I both really enjoyed it. In order to collaboratively work on the code we used a GitHub repo. Using the React framework worked very well for our game, and I look forward to exploring it more in the future!

What Went Well?

• Nate and I worked very compatibly to get the technical side working. Nate did most of the high level structuring in React, to get each of the components working together successfully. It was very nice that we had the static version to start from to help us stay organized as we progressed. Nate is an absolute React-wizard and he did a great job building out the components to interact with each other well.
• I mostly did more of the computational things within the game. This was pretty fun for me because I could use the math and logic alongside React syntax which was a fun learning experience for me. Once Nate had the components working together, I could build on that very nicely to add the gameplay structure of Pentago to make it playable.
  • And when I ran into debugging issues, Nate was very helpful since he had built the high level structure. He either could give me advice on how the different components were communicating, or he had previously experienced a similar bug and could provide me with some help in that way.
• In terms of creativity and design, I think we did a great job emulating the real Pentago experience. Our visual design was very aesthetically pleasing and intuitive for users to play. Our illustrator mock-ups that we did in the beginning had nice fonts and colors to match the real game, and were helpful when creating our CSS.

What Didn’t Go Well?

• As we started coding, we realized there were a lot more state changes than we anticipated. It all ended up getting solved, but I think our whole process would have gone smoother if we had thought a little more in detail about all ways our components would have been interacting. One example of an unanticipated issue would have been when the components re-render, to actually show the marbles being placed / rotated. Also, getting the calculateWinner() function to be accurate was a very long process.
  • We experienced rendering issues with passing information from high level components (e.g. App) to a low level one (e.g. Marble). The low-level component would re-render before the prop had been updated, so the render would not be visually representing the current state of the low-level component.
• Our debugging process was very tedious. In hindsight I think we could have saved a lot of time in this area of our project. Like I mentioned before, the calculateWinner() function took a lot of debugging to get it to correctly and promptly check to see if there was a winner and which player had won.
  • I would also be interested to see how I could rewrite calculateWinner() to be more efficient.  It was not a time issue for playing the game, it just took a long time to type out and account for all 32 ways to win the game.
• Creatively, it was a challenge to get the hover effect to work with the mouse. First we tried to use CSS, but then had to move to Illustrator to make separate png images for every possibility (empty, hover, player 1, player 2). When implementing the rotateQuadrant() function, the hover functionality was lost again. This was due to re-rendering issues that I mentioned before. We figured it all out, but it was definitely much more complicated than what we had originally anticipated!

What Would I Do Differently?

• Now that I am more experienced in React, I think I would spend more time thinking specifically about state. Nate and I spent time organizing our plan and basing it off of our static version and the Thinking in React document and this tic-tac-toe tutorial. However, we did not account for all state changes, and were sort of problem solving on the fly. Again, it was all fine in the end, but in the future I can be a lot more intentional when planning.
• Since Pentago was pretty simple to look at visually, I would like to push myself a little bit in terms of CSS of components. Also, after realizing how hard it was to create a hover effect with React, I am intrigued to see what other “animation” effects can be done. Beyond that, our components were literally squares inside of other squares, so I’d like to challenge myself a bit with shapes of components that I have to create their hierarchy in a bit more of a strategic way.