Where-Is-Mortal-Kombat. I used React, Styled Components, Firebase Firestore and Javascript for this project.
Screenshots • Goals • Summary • Author • Credits • Attribution
Show Images
The gif and next couple images show responsiveness of my web application.
Home Menu Screen IphoneX
Attributions Page IphoneX
Seek and Find with target selected IphoneX
Seek and Find with target selected Iphone 5/SE
Seek and Find with target selected Ipad Pro
Submit Score Modal Samsung Galaxy S5
Leaderboard Page Samsung Galaxy S5
Leaderboard Page Ipad
- [✔️] Plan out folder and file structure in depth before starting. (Whiteboard)
- [✔️] Use Firebase Firestore with project - learn and getting familiar with using a BaaS
- [✔️] Re-use components when possible in project
- [✔️] Get more familiar with styled components and passing props down to be used in css
- [✔️] Have many different options to play the game and lots of data!
View Commits on project to see changes
I found myself wanting to work on this project at any chance I could get. I didn't want my game to be your traditional where is waldo, I gave this game my own flare. When I found this artwork from the attributed artist below, nostalgia hit and I had to do Mortal Kombat. I could have stopped at a handful of characters. However, I was determined to add all 79 characters and create multiple ways to play which resulted in 9 different leader boards!
Most challenging was figuring out how to use the firestore api. I learned a lot. I remember being stuck for hours trying to figure out how to query a sub-collection of data from a collection. Setting up rules to coincide with my data structure also proved problematic. After trial and error, I ended up creating separate collections for my leader board data vs my character position data. I created rules that allow you to read everything and only update the leader boards document with new data - no option to delete or add in new collections.
I ended up dropping material-ui (what I started with) and refactoring with styled components. With my grasp of CSS styled components was fantastic to use and I really liked how well it worked with React.
I dreaded planning out how I was going to add mobile responsiveness to the project. So I ended up doing that last and very glad I did! Instead of having the modal of choices pop up at your cursor, my work around was adding the cards to the bottom of the image. It feels right on mobile and very happy with how it turned out.
I hope you enjoy. Please leave a name to your score if you complete a challenge!
👤 Tim Jackson
- Github: @timjacksonm
- Twitter @timjacksonm
- LinkedIn @timjacksonm
This project idea was a part of my studies at The Odin Project's curriculum. You can see the lesson here!
Mortal Kombat Poster used as background and individual characters. Created by Gus Morais
The Mortal Kombat emblem made by 1000logos.net