Weekend Word Game

This weekend seems to have come and gone in the blink of an eye. In fact, time seems to be disappearing faster and faster. I almost never feel like I have enough of it to do what I want to do, but just enough to do what I need to do most days. Fortunately this weekend has sustained my wants and needs! I rocked the weekend project and even did some extra ‘hard mode’ tasks as well as fixing a HUGE bug I found in my marvel game from last weekend (it looks so much better since the last time you guys have seen it)!

I got pretty lucky this weekend in that our project was based off something I had already spent hours on in the front end – a hangman game! The unlucky part is that since we are programming strictly on the server-side basically nothing I had written previously would do me any good. I didn’t mind much though, and since I have learned so much in just the couple weeks since I last wrote the logic of my original hangman game, I was able to implement everything I had learned in this version which included cutting the logic of the game itself way down and calling functions that live outside the main logic and could easily be re-usable!

When you first load the page you get to choose your mode: easy, normal or hard. This will determine the length of the word you are guessing! Once you click the play button you head over to the main game page. This is where your ‘session’ gets started. Expression-session is an npm module that you can load into your node.js application. It assists you in storing session data including cookies. Cookies were not used for this project, but with session they easily could’ve been! You play until you either win or lose. If you win, you have the option of adding your name to the ‘Hall of Fame’ which is actually a permanent json file that the server writes to when someone enters their name! Super cool stuff. At both the win and lose screen there is an option to play again. Once you click that button your session has restarted with all new data! Basically a session is a giant object that lives on the ‘request’ (the server ‘requests’ information from the browser and then ‘responds’ accordingly). You can add any key and value pair you’d like to the object such as the magic word itself or the number of guesses the player has remaining.Before you start judging, the design of this game was not supposed to be heavily considered. The magic is in the code! Here’s a slideshow of what the player will see:

This slideshow requires JavaScript.

Now let’s walk through the fun stuff!

Loading all the dependencies, setting up a file path to the json file where the winners live, setting up all the dependencies so they are usable and setting up the mustache engine. Basically the configuration of the application itself:

Screen Shot 2017-06-25 at 8.54.22 PM.png

This is where I set up session! Session needs these as the bare minimum to be used but there’s a ton of other cool stuff session can do!

Screen Shot 2017-06-25 at 8.54.41 PM.png

This is where I set up my easy, normal and hard modes. Basically I have a huge file that is all the words in the dictionary. I need to run through all those words and sort them based on their length which is exactly what the function determineMode does! It then pushes the word to it’s appropriate array. I also needed this function to run on application start up so I set it outside of all my page loads and made it an IIFE (immediately invoked function expression) so that it will call itself!

Screen Shot 2017-06-25 at 8.54.33 PM.png

Once you load the root directory, this little post function will determine whether you have selected easy, normal or hard and then choose your word based on that decision! ‘Post’ allows us to grab any information that was entered on the webpage and manipulate it when it gets back to the server. Finally it will redirect you to the game page. Using request.session.newWord means that the game page will have access to your word! Request.body allows me to select elements of the body of the html and access their value!

 

Screen Shot 2017-06-25 at 8.54.56 PM.png

This get function is used to create the game you’re about to play! It sets up all the necessary variables and stores them on the session object so that we will be able to modify and access them throughout the duration of the game! There’s even a loop that sets up our dashes to be equal to the number of letters in our magic word!

Screen Shot 2017-06-25 at 8.54.50 PM.png

This is where all the magic happens. Our game post function! Every time the user presses enter this little guy will run! The first several lines are for checking against invalid guesses. I could’ve used a validator to do this, but I felt for my own understanding it was helpful to do it manually. If you notice the very first line in the function resets the error to an empty string, so that you aren’t continuously bombarded with expired errors. After the error conditionals, the users guess gets pushed to an array that contains all guesses, if the guess is in the word, two functions are called. The screenshot and explanation of those is a bit further down, but I want to point out how much cleaner the code is since the functions were called inside the conditional instead of writing out even more conditionals in this block. The next block determines whether or not there are any letters left to guess, and if there aren’t it redirects the user to the win page, otherwise, the game page is loaded again with the session object that has been updated with the user’s guess! If the letter guessed was not in the magic word, the guess gets pushed to an array of incorrect guesses and a guess is deducted from the guess counter. The next block determines whether or not the user has any guesses left. If not, the ‘lost’ page will be rendered and passed the session object so the user can see what the word actually was, otherwise the game page is loaded again with the session object that has been updated!

Screen Shot 2017-06-25 at 8.55.11 PM.png

So the top block of code here is where the server will grab the name of the winner, if entered, and push it to the array inside of the json file called winners. This file does not get written over when the session ends. We have to convert the object to a string in order for json to work correctly and we also must determine the filepath to that object.

The next function takes in the magic word as an array and the current guess. It looks through the array and determines whether or not the guess is any of the letters it finds in the array. If it is, it removes that letter from the array. Doing this allows us to simply check for any remaining letters to determine if the user has won. It then returns the updated array back to us.

The last little function does basically the same thing except it takes in the dashes array as well. This will replace the dashes the user sees with the letter in the correct index of the magic word. It replaces the guessed letter with a ‘/’ in the correct word array so that the loop can continue to check for that letter (in case a letter appears more than once the magic word). In the back of my mind is a question of whether or not those two functions can be compounded to one…

Screen Shot 2017-06-25 at 8.55.20 PM.png

Well, that’s all I’ve got for now. I’m pumped that the concept of sessions is making sense to me, and I’m excited for the week ahead! Until next time!

Advertisements

Server Talk

I can’t believe I haven’t posted all week! Actually, yes I can. This week has been crammed full of new concepts not to mention the crash course that I was a lead instructor for last night! Where to even begin.

This whole week has been about communicating with the server. First we learned the very basics – how to host a local server on your machine! Pretty cool stuff. Then we learned how to render an html file to a page by talking to the server (called routing/dynamic routing). Next we started installing some modules for Node that make life a little easier. These packages are basically code that other developers have written over time that help automate the things we as programmers need to accomplish. There are tons of libraries out there and they all serve some specific purpose. We’ve been mainly using express, mustache, body-parser, cookie-parser and validator. We’ve been able to create data, import data and modify data using these tools and Node. It hasn’t been easy, but it’s very cool stuff we are learning.

I’ve definitely been feeling the frustration this week. The first half of the week I was basically a frustrated mess. I found myself in a generally unpleasant mood most of Monday and Tuesday. It’s a lot of new information and I don’t like not being able to understand all of it right away. Luckily I was able to check in with myself Tuesday evening and just kind of hit the reset button. The past two days, though still trying, have been so much better because of it. I think our whole class is slightly behind where we should be right now, maybe by a day or half a day, but things are starting to click for me. A problem I couldn’t solve last night I was able to solve after our lecture today. It was pertaining to a project which required us to to create a todo list and render the items to the page every time an item was added, but the tricky part was we also needed to be able to cross the items off the list when they were complete. The part that got me yesterday was knowing how to get that information back to the server when the user checked that a task was complete. Fortunately I was able to work at it today and got the answer! I had been trying to use a PUT method, however what I didn’t know at the time was that html forms only allow for GET and POST methods! I also was able to add a little JSON flair so that the list becomes somewhat permanent. Instead of the data being wiped clean when the server connection is interrupted, the server writes to a JSON file which remains unaffected by the server connection! Here’s a little glimpse at the ‘requires’ used to set up the app/server!

Screen Shot 2017-06-22 at 9.03.28 PM

The next piece is authentication! We will be using and setting cookies to track sessions for users as they log in and sign up! We did a little bit of that today by building our own ‘middlewares’ (a piece of code the user must ‘pass through’ in order to get to the next page), but we will be learning a neat little module for sessions tomorrow which will help tremendously with our current project(creating an app that stores user login info and counts the number of times they have visited the webpage)!

I’m a little nervous for the workload this weekend, but as always I’m confident that I’ll be able to conquer whatever is thrown my way!

The crash course last night was super fun! It was a relatively small group so it was pretty engaging and intimate. Bruin and I were told we did an awesome job and it felt natural to be up there talking about coding. Here’s us leading the course:

19396916_1061836153947641_7848217293217574272_n
that’s me behind the computer!

I really loved the experience and would absolutely love to do it again, especially if I could be a part of the development of the material. The only thing that was slightly unfortunate was that the course was in the middle of the toughest week so far! If I can get through this week, I can do anything!

I’ll definitely try to be better about posting, this week was just a different beast unto itself. I’m sure I’ll be posting about our weekend project and updating more frequently from now on!

Gotta get back to the grind!

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!

API’s

Another moderately late post means I’ve been knee deep in projects! Spent the last couple hours on hangman and boy, I’m very excited about it. It is so close! I want to polish and then clean it up before I share it with you guys, but it’s coming I promise!

Today our class assignments were to write a couple of Promises and use callback functions. Since we aren’t equipped to totally handle promises in the traditional sense, we used them with setTimeouts. I didn’t think I was grasping it very well but when I was writing my function and calling my callbacks I realized that I do comprehend what’s going on, at least a lot more than I thought! I can feel my brain slowly conquering concepts that have been somewhat challenging for me over the last week and I’ve got to say I like it a lot.

Our afternoon project was to pull data from an API for the first time and create a website with that data! When we first received the project I felt overwhelmed by the amount of work it would require. Literally 1.5 hours later and I was done! I shocked even myself with how fast I was able to pull and dissect and the assign the data to the DOM. The HTML file is bare bones and the CSS is limited to about 1.5 pages, the last .5 being just responsive design. Here’s a glance at that:

Screen Shot 2017-06-14 at 8.49.16 PM
the IIFE that pulls data from the API
Screen Shot 2017-06-14 at 8.49.28 PM
Step by Step Adding In Elements and assigning values/variables

 

Screen Shot 2017-06-14 at 8.49.43 PM.png
Finished product!

 

Bruin and I (the leads) and a couple other students (the support) were able to meet up today to briefly review the crash course material for next Wednesday! It’s going to be a very small Mario game with minimum functionality! I’m feeling both excited, because it’s going to be an excellent experience and I will learn a lot, and nervous, because the game has movements of a character based on x and y axis and I do not have the slightest idea where to start with that. Luckily one of our instructors is going to walk us through the existing code and show us what is happening. It will be a great base of knowledge in case I decide to build something similar at any point in the future! Here’s a look at that code:

Screen Shot 2017-06-14 at 8.57.02 PM.png
Very small snippet from a large file

As the days go by, I feel my excitement buzzing and growing. I do still feel the nervousness of the job hunt in my future, but I’m constantly reminding myself to stay present and focus on this experience, on step at a time. Ultimately I couldn’t be more grateful to be where I am and grateful that I am not only working extremely hard, but grasping 97% of what is thrown at me. I am feeling a lot of pride these days and I’m pretty pumped about it.

Onward!

Algorithms & Polishing

It’s late and today was a lot, so I’ve got to keep this short. We went pretty heavy into algorithms today and what’s known as The Big O (a way to describe the complexity of an algorithm). We had several algo’s to build out including a (extremely inefficient) bubble sort function. If you get a chance and don’t already know you should look it up. Basically you would never want to use it for anything, but wrapping your mind around it and getting it to work is a big step to grasping these things. Here it is:

Screen Shot 2017-06-13 at 10.18.32 PM.png
bubble sort!

I had a couple mental hold-ups today, but the more I practiced making algo’s the easier it became, so that’s a good sign! I felt a little behind today, but I’m remaining confident that it will all fall in place for me. I also have some great buddies that help me when I’m not fully grasping something right off the cuff.

I spent the latter half of my day working on making the word-game project from the other day into an actual hang man game! I’m excited to use it in my portfolio as something I built just 3 weeks into the cohort! I have been working on it all night and now it’s late so I must go to sleep, but here’s what it looks like so far! A couple of key things I still need to do such as getting the backgrounds to cycle in as incorrect guesses are made, but I’ll write a whole post about it once it’s done!

Screen Shot 2017-06-13 at 10.13.42 PM.png
I’m proud of my baby! p.s. I drew out the hangman figure and I suck at drawing!

I’ve got my eye to the future and my head held high! Ready for tomorrow!

Scope, Hoisting and IIFE’s

It’s the start of the fourth week of my time at TIY! I have gained so much in that time, yet there is still so much ahead. As we enter our second and final week of JavaScript I am feeling like slowly I am gathering all the pieces I need to build amazing things! I can’t help but wish that I was able to put them all together now, and that I had all the pieces to start building a professional portfolio in my spare time, but I will have to accept where I am for now. I find myself wanting to practice more JavaScript in the way of HTML manipulation. I feel that is my biggest area for growth right  now as we only focussed on that for one day last week. I’m hoping I’ll have time to build our hangman game into an actual webpage! I’d love to have it on my portfolio. While I am an extremely efficient and hard working individual, sometimes I am lacking in creativity. I’m hoping that while I finish the course and build my case for a job, that I’ll be able to pull some creative genius from somewhere. I know employers will look for that and I know I can build whatever is set in front of me, it’s just a matter of deciding what to build!

Our lesson for today was heavy on scope and protecting the global scope from repeated variable names. They always say your job as a developer will be 90% coming up with names for things. Our activities today were pretty straight forward. We were given lots of functions with improper use of scope and hoisting and had to restructure them so that they worked in the way they were intended.

IIFE’s are used to compartmentalize all the variable names inside a function that will be “immediately invoked” so that you never have to worry about those variable names interfering with your global variables. These kinds of logic rules just make sense to me. If you have two children you wouldn’t name them both the same thing, ever. So don’t do with with your computer babies aka variables.

I’m still waiting on some info on the crash course Bruin and I are leading next week. I’m really hoping the details come along soon. I HATE being unprepared, but I am very excited about the opportunity!

I had a short meeting with the front-end guy and our campus director and was told that I am exceeding expectations and am not a concern for either of them when it comes to finding a job after the cohort. I hope what they say is true! It’s funny how you can never see yourself the way other see you…

Until tomorrow!

Calculators are Useful

This weekend we were tasked with creating a functioning calculator from scratch using what is commonly referred to as “vanilla javascript”. Basically all that means is not loading in a library such as jQuery, which makes selecting elements, both of the HTML and CSS variety, extremely straightforward. As much as I wish we were using jQuery I feel I ultimately will be very happy that I learned it the long and somewhat more difficult way. From what I understand, jQuery is on its way out due to some browser support issues so learning this vanilla will serve extremely beneficial to understanding libraries to come (or maybe even one day building one).

That was a sidestep, but back to the calculator! I wrote it a couple different ways. Thursday night I played around with the HTML skeleton for what would be the better part of an evening. I originally went with a div table created by some table creator, then realized upon styling that the display: table attributes were really screwing with my idea of how the project would go. I couldn’t get the “display” cell to widen and also be in line (height-wise) with its neighboring cells.  I ended up spending some extra time reorganizing and it took me about 2.5 minutes to get the layout perfect using just flex properties and width %’s. I was very happy I chose to go that route at the end of the day but I wish I had done that from the beginning.

Friday during lab I was able to get two different JavaScript versions of the calculator running. The first one was long and required splitting the input and performing one calculation at a time. It also required the order of operations to be done somewhat manually using conditional statements. Here’s a look at that code:

Screen Shot 2017-06-11 at 5.26.13 PM.png
tedious, but it works

While I was writing that beastly conditional, I came across a built-in called eval which does exactly that: evaluates a string as a mathematical function. The problem was this: the way I had to organize my input to get it to split left and right of the mathematical operator made it impossible to run eval on.

Which is where I decided to rewrite the function! With (only a little) help from Bubba I had this bad boy up and running in no time:

Screen Shot 2017-06-11 at 5.25.44 PM.png

Not only does it work more effectively, it is a beautiful piece of code. The hard mode for this project was to add in a square root and modulo button, which as you can see has been done. Eval works for modulo but not for square root, as the nature of square root is a little different. I threw in a quick conditional case for that button and was done! I finished all parts of this project by Friday evening, which I was extremely proud of after how intense this past week had been. I can only hope the rest of the course treats me as kindly as the first three weeks! I’ve spent the last couple days taking care of personal things and spending a few hours a day working on supplemental exercises which I am grateful for as I feel they are solidifying the knowledge of the past weeks.

We also had a review Friday. It was brief and basic. I was told I was not a concern for the instructor since my pace was on par with the expectation and asked if I had any questions. I was hoping to get something a little more in depth than that, but for now I’ll take it. I’m meeting with the campus director tomorrow so I’ll be able to express any lingering concerns then.

Let’s see what this week has in store!