Front-End Final Project

While I’m not super keen on superheroes or comics, I have to admit that this project was super duper fun. I definitely feel like my lack of general interest in the subject matter kept me from being even more creative with it, simply because I’m not acquainted enough with it to know what cool things are out there. Our instructions for our final front-end weekend project were simple:

Screen Shot 2017-06-18 at 8.24.04 PM
I wonder how long it took them to write this….

The project got released midday on Friday, I think due to some (expected at this point) Newline issues. The team was all relatively quiet about what the issue actually was but our original project was deemed ‘broken’ in some way. It’s always nice to get the project Thursday afternoon so that my workload over the weekend when I have to tend to house chores, like cleaning and meal prep, isn’t so heavy. That didn’t happen this week which was additionally stressful because the crash course that I’m leading with Bruin is this coming Wednesday as well and we definitely still need some time to prepare. The point of all this is that I literally did not get started on this project until after lunch on Friday and was, for all intents and purposes, done yesterday afternoon  in time for date night! Coincidentally we saw Wonder Woman (which I thought was Marvel but was quickly corrected). Great movie by the way. Another unique thing about this project was that most of the development of it was done in a room by myself when normally I am working with everyone else in the class and can bounce ideas around/ask questions if need be. I ran into several issues with what I was trying to accomplish but ultimately was able to find solutions to all of them online! Stuff like this is starting to make me feel like a real developer!

So anyway the project requires that I pull in some characters from an api and display them in a way that a user can select one. Here’s a shot of that:

Screen Shot 2017-06-18 at 8.13.36 PM.png
Choose your character

The api itself has a limit of 100 characters you can call at once but the js can handle any amount of characters that it receives and all of them will come out like this! Pretty neat! Another thing I’d like to point out is that I would like to change the layout of the hero ‘card’ slightly. It does have cursor pointer on but as of right now you have to click in the info area and not on the picture. I did it this way because I was getting the info for the character from a click event and at the time the click was activated on the img itself and that did not allow me to access the character stats. I would love to make the name standout a little more (give it its own line) and add something obvious that selects the character. Hopefully I’ll have some more time this week to add the stylistic changes I’d like to, but I am relatively happy with it.

I decided I wanted to make the battle screen a new html file entirely which required quite a bit of research and unfamiliar implementation on my end. I had no idea that the secondary html wouldn’t have access to the js file’s variables even though both htmls were connected to the js file. Crazy stuff! So I ended up declaring some local storage and was able to access it relatively easy – just some data type conversions. Along with that also came figuring out how to actually get the page to relocate itself – extremely easy but I had never seen it done before through js.

I also knew I wanted to have random ‘battlefields’ aka backgrounds assigned to each battle. I kept seeing old flashes of mortal combat and streetfighter when I was imagining how this project would turn out. I found several super fun gif backgrounds that literally take you back to the arcade days. Of course I have one with some cats walking around off to the side as well.

Another thing I really wanted to page to have was animation. The character icons from Marvel’s API aren’t really the kind of photos that would look good dancing but still I wanted them to do a little something! After a TON of research and playing around with transitions and I came up with something like this:

Screen Shot 2017-06-18 at 8.59.55 PM.png
fun animation stuff!

There is a swing and a reverse swing – because each character actually needs to ‘swing’ in opposite directions as they attack, otherwise the character on the right side of the screen would be attacking something behind it – not the character it is battling. Grow is what happens when the player wins! It swings around a bit and then grows rather large for emphasis. I set several timeouts in this battle as well. One of them is for the computer’s attack move – so it’s not attacking simultaneously with the user’s character. Another is the delay to reset the battlefield after either the computer or the player wins. There are a few more, but those are the more obvious and the others are really more for functionality – removing the swing class but only after swing has finished executing for example.

I realized I needed a way for the character’s health to be displayed as well! So I did a little research and came across the progress bar! Also super nifty. The bar isn’t styled ideally for me, but it will do for now. I would love to figure out how to get it to just stay that color and not reevaluate it’s own proportions. I wanted it to be red to green and as life was taken away only the red/orange segments would be displayed, but that’s not how it came out. I’m sure there’s a way and I know I can find it! Here’s what the battle page looks like :

Screen Shot 2017-06-18 at 8.13.00 PM.png
Time for Battle!

Overall I am extremely happy with the game minus some stylistic things that I ran out of time on this weekend. Definitely wanting to throw this one in the portfolio! Of course I will tighten it way way up before then! Now that I know how it will all come out in the end I know I could rewrite it much more efficiently. Also it is not yet responsive – but could be one day!

On to back-end this week!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s