A simple SPA game with AngularJS and ASP.NET Web API 2

This is a simple single page application (SPA) game which has a AngularJS (1.x) front-end talking to a ASP.NET Web API 2 back-end. This is in the initial stage and there’s plenty to improve (see end of this article).

How the game works

Player 1 sets a word for player 2 to guess. This word is sent to the server, which returns a unique game key. This key is manually given to player 2 who uses it to retrieve the word they are supposed to guess (masked on the UI).

This slideshow requires JavaScript.

Under the hood

Player 1 sends a HTTP POST request with the word they want player 2 to guess to the server. The server returns JSON data with a unique game key, which player 2 then uses to retrieve the word (masked) that they should guess. Player 2’s guesses are handled client-side using AngularJS.

gtwuml1

A few key code snippets.

Sever-side: A very simple API. A POST request handler that puts the new word in the database and generates a corresponding unique game key; and, a GET request handler that returns the underlying target word to guess for a given unique game key.

Client-side: AngularJS script to handle client-side player 2 gameplay.

The code that updates the state of the guessed string given a new character guess.

And the corresponding unit tests (using QUnit)

Of course, this is in the initial stages and there’s much to improve, including the following:

  • Currently, the entire word that player 2 is supposed to guess comes to their client. Player 2 could easily retrieve this word (and cheat!) using dev tools in their browser. A solution would be to do the checking – of whether the candidate letter that player 2 entered occurs in the target – on the server-side.
  • Plenty of user interface improvements. For example, after player 2 successfully guesses the word, the input box and “check” button should be hidden. Could be easily with ng-hide.
  • Player 1 doesn’t, currently, have a way of being notified when Player 2 finishes the game. This could be done using server-to-client messaging using SignalR.

You can find the full code on GitHub.

Advertisements

Mo Gawdat: “Solve for Happy: Engineer Your Path to Joy” | Talks at Google

Mo Gawdat is a remarkable thinker and the Chief Business Officer at Google’s [X], an elite team of engineers that comprise Google’s futuristic “dream factory.” Applying his superior skills of logic and problem solving to the issue of happiness, he proposes an algorithm based on an understanding of how the brain takes in and processes joy and sadness. Then he solves for happy.

List at each depth of a binary tree

Problem: Given a binary tree, design an algorithm which creates a linked list of all the nodes at each depth (e.g., if you have a tree with depth D, you’ll have D linked lists).

My solution:

public class BinaryNode {

	private BinaryNode left;
	private BinaryNode right;
	private int value;
	...

     /**
	 * Populates the argument mapOfLists with a linked list of elements at each
	 * depth. The key of the map will be the depth (starting with 0).
	 *
	 * To invoke this on an entire binary tree, call providing the root
	 * BinaryNode and a depth of 0.
	 *
	 * @param node BinaryNode to process in the current iteration
	 * @param depth starting with 0
	 * @param mapOfLists see above
	 */
	public static void createMapOfOneListPerDepth(BinaryNode node, int depth,
			Map<Integer, LinkedList<BinaryNode>> mapOfLists) {
		if (node == null) {
			return;
		}
		if (mapOfLists.get(depth) == null) {
			mapOfLists.put(depth, new LinkedList<BinaryNode>());
		}
		mapOfLists.get(depth).add(node);
		depth++;
		createMapOfOneListPerDepth(node.getLeft(), depth, mapOfLists);
		createMapOfOneListPerDepth(node.getRight(), depth, mapOfLists);
		depth--;
		return;
	}

Full code including accompanying JUnit tests can be found at my GitHub.

Java 8 – method references

Remember, lambda expressions are anonymous methods and they remove a lot of ceremonial code around the main instruction that the code is conveying.

Now consider the case where a lambda expression is simply calling a method that already exists, and nothing more. In that case, we can simply things even further.

If, say, you have a class SomeClass that has a method someMethod(int a, int b) then the lambda expression

(a, b) -> SomeClass.someMethod(a, b)

can be written using a method reference as just

SomeClass::someMethod

Again, don’t confuse unfamiliar with more complicated. With practice you’ll see when lambda expressions and method references get the point of your code across better than the old way of doing things would.

There’s a little bit more to it, though. There are 4 different usages of method references.

Kind Example
Reference to a static method ContainingClass::staticMethodName
Reference to an instance method of a particular object containingObject::instanceMethodName
Reference to an instance method of an arbitrary object of a particular type ContainingType::methodName
Reference to a constructor ClassName::new

If you’d like to see more examples of method references check out the official docs here.

Making Badass Developers – Kathy Sierra keynote

Amazing talk by Kathy Sierra – author of numerous authoritative texts on Java – on “how to get way better, way faster”.

Summary points:

  1. No one has infinite cognitive reserves – even though we are often treated as if we do.
  2. Cognitive reserve can be thought of as a single tank that can be depleted in various ways, leaving less for subsequent activities. Tiny leaks add up.
  3. Help thy fellow developer by being mindful of draining their cognitive resources unnecessarily.
  4. Rethink the common adage “practice makes perfect” as “practice makes permanent” instead. It makes whatever you practiced permanent – even if they were bad habits.
  5. Key message of this talk: to go from novice to expert, what’s needed is a very high quantity of high quality exposures
    • this needs to be applied to sufficiently small chunks of the overall thing being learned
    • a chunk is too big if you cannot master it in three 45-90 mins sessions, aiming for 200-300 exposures.

Youtube: https://www.youtube.com/watch?v=FKTxC9pl-WM

 

Java 8 – lambda expressions

java8

Lambda expression were introduced in Java 8.

Here’s a simple example that illustrates how to use lambda expressions, and how they make your code simpler and more expressive (not to mention background optimizations by the compiler).

Consider this code that iterates over a list to print out its elements.

List<Integer> values = Arrays.asList(1,2,3,4);
for (int i = 0; i < values.size(); i++){
 	System.out.println(values.get(i));
}

What we’re really trying trying to do is print out each element of the array but we’ve had to write a whole bunch of ceremonial code around the that main task of interest to us. This may not bug you much but that’s because it’s familiar. Lambda expressions are (at present) less familiar. But they are simpler. And simpler code, is more readable code. It communicates the essence of what it’s trying to do more readily. Java 8 introduces two new things – internal iteration with forEach(...) on collections and lambda expressions – that can turn the big messy for loop above into something much more to the point.

values.forEach((Integer value) -> System.out.println(value));

or the following, since Java knows than each element in a collection of `Integer`s is going to be an Integer.

values.forEach(value -> System.out.println(value));

Remember how lambda expressions are essentially anonymous methods? In the code above

  • the bit before the -> are the arguments to the method ((Integer value));
  • after the -> comes the body of the method; and
  • the return type is implied based on the method to which this lambda expression is being passed. For example, a forEach(...) call understandably doesn’t need a return type (i.e. void), it just wants to know what to do for each element of the collection instance it’s invoked on.

Based on this great talk by Venkat Subramaniam at SpringOne2GX 2014

Useful jQuery snippets

Manipulating the DOM

To manipulate the DOM by accessing its elements, use the methods listed at http://api.jquery.com/category/manipulation/. Here’s a couple of examples

// set text of element
$("#title").text("Changed!");
// set HTML of the element
$("#title").html("<i>New HTML</i>");
// remove the element from the DOM
$("#second").remove();

Dynamically applying CSS

To use jQuery to apply css classes to DOM elements dynamically, first make put the following in a .css file.

.highlight {
background-color: yellow;
}

Then do this in the .js file to apply the class to a given element with id "someElem"

$("#someElem").addClass('highlight');

This will apply the styling of the highlight css class to the element with id "someElem"