ivannash23 / ng-hangman

[angular, labs]

#ngHangman

_________
|/      |                               _
|      (_)       __ _ _ __   __ _ _   _| | __ _ _ __
|      \|/      / _` | '_ \ / _` | | | | |/ _` | '__|
|       |      | (_| | | | | (_| | |_| | | (_| | |
|      / \      \__,_|_| |_|\__, |\__,_|_|\__,_|_|
|                           |___/
|___                                        hang-man

Why is this important?

This workshop is important because:

This workshop is a chance to use the skills you've developed so far and play with angular. We'll be making an in-browser hang-man game.

What are the objectives?

After this workshop, developers will be able to:

• Get user input with ng-model
• Organize code with ng-controller
• Visualize a collection with ng-repeat
• Fire an event with ng-change

Where should we be now?

Before this workshop, developers should already be able to:

• Use Angular at a basic level

Mockup of End Result

Setup

1. clone this repo (or fork & clone)
2. open index.html and app.js
3. open hangman.js and read it's contents

Most of the game code itself has been given to you. Let's check it out using dev tools. Open index.html and in the browser console try the following:

hangman = new HangmanGame('test');

You should have a new instance of a game. Now try running:

hangman.guess('x');
hangman.guess('t');
hangman.isWinner();

Note what is returned, and what changes on hangman. You'll use this inside your angular controller.

Step 1: Initialization

Let's get angular setup in our app.

• bower install your front-end assets
• add ng-app in the appropriate location and set it equal to your "hangmanApp"
• register a new controller with your application called "hangmanCtrl" and use it in the view

Step 2: Game Properties

• in the controller instantiate a new game instance, new HangmanGame('elephant'), and pass it to the view
• a HangmanGame instance provides guesses, completedWord and triesRemaining properties. Add these in the appropriate parts of the html using expressions to get the values from the hangmanGame to display on the page.
  • Hint: You might not be able to see the guesses until you make some. We don't have an interface for that yet, but we can add a couple of guesses right in the controller. You can try calling .guess('f') on your game instance inside the controller. console.log as needed.
  • Note: completedWord is a string containing guessed characters that match, in their correct positions. E.g. if you guessed 'b' and 'r' for 'rabbit', it shows: 'r_bb__'

Step 3: User Input

• autofocus to the input field
• use ng-model to track the input field's value
• use ng-change to call a function when the input changes and pass in the input's value
  • write a helper function in your controller that is passed into the view, i.e. guessLetter.
  • the input should be cleared after each character is typed

Step 4: Win State

• add the class "glyphicon-ok" to the span with class "glyphicon" if the game is won
• add the class "glyphicon-remove" to the span with class "glyphicon" if the game is lost

Step 5: Looking Good

The guesses on the page is kinda ugly. Let's fix it.

• change the list of guesses to display using ng-repeat
• improve the looks of anything else as desired

Step 6: More User Stories (Bonus)

Accomplish the following features on your own or in a pair. User can...

• enter an uppercase word that's treated as a lower case word
• be challenged with a random word from a list of words
• restart the game after win/lose
• keep score of games won and lost
• see a drawing of the hangman as the game progresses (extra bonus)