The hangman in angularjs

Source Wikipedia:

The Hangman is a paper and pencil guessing game for two or more players. One player thinks of a word, phrase or sentence and the other tries to guess it by suggesting letters or numbers.

The word to guess is represented by a row of dashes, giving the number of letters, numbers and category. If the guessing player suggests a letter or number which occurs in the word, the other player writes it in all its correct positions. If the suggested letter or number does not occur in the word, the other player draws one element of a hanged man stick figure as a tally mark. The game is over when:

  • The guessing player completes the word, or guesses the whole word correctly
  • The other player completes the diagram:

This diagram is, in fact, designed to look like a hanging man. Although debates have arisen about the questionable taste of this picture,[1] it is still in use today. A common alternative for teachers is to draw an apple tree with ten apples, erasing or crossing out the apples as the guesses are used up.

Continue reading

Advertisements

Blackjack in AngularJs (reprise)

After the first implementation of the game, my friend and I compared our versions.
He focused on the deck model instead of the dealer like I did.

This simple choice drove his design to a complete different path.
He put a lot of effort trying to replicate a realistic deck, implementing the shuffle logic and making impossible to draw the same card twice.

This hypotheses never came up to my mind because I knew that in the real game there are multiple decks in order to make almost impossible for the players the calculation of the drawn cards.
Continue reading

An Authentication directive

On the server side is absolutely normal to decorate your Controllers or Actions with the Authorization attribute in order to manage correctly permissions and access to the resources/routes.

Sometime the problem is to manage the permissions or the roles in a much more atomic way in the views.
The scenario that a friend described to me was: I want in the a page to show/hide or enable/disable parts of the it depending on the roles of the user.

Continue reading

Backlog Aggregator: Roadmap Feedback (part one)

In our weekly meeting with the boss, I showed my roadmap-preview to have feedback and improve it (here the first part and here the second part of the creation of the roadmap-preview).
The roadmap-preview had to be used in two different places: in a dashboard as part of a summary of a project and in a Roadmap page where was needed to show more detailes.

My roadmap-preview had been considered good-looking, but lacking of information.
It wasn’t clear the content and the month of a release: in the dashboard had to be possible to read the key features of a release clicking on the flag, but in the Roadmap page was considered more useful to view them immediatly.

I decided not to create two different roadmap-preview directives; I prefered to have something like:

<roadmap-preview
  roadmap="roadmap"
  show-detail="true"></roadmap-preview>

Continue reading

Backlog Aggregator: Roadmap preview (part two)

To solve the test I had to create my directive.
First of all I created the module that all my directives would have to use.

var directives = angular.module('backlogsReader.directives', []);

And then I wrote my roadmap-preview Directive.

var roadmapPreview = angular.module('backlogsReader.directives');
roadmapPreview
	.directive('roadmapPreview', function () {
		return {
			restrict: 'E',
			replace: true,
			scope: {
				roadmap: '=roadmap'
			},
			templateUrl: 'relativeToTheApplicationRootUrl/roadmapPreview.html'
		};
	});

Continue reading

Backlog Aggregator: Roadmap preview (part one)

A Roadmap is a concept a little bit harder than a backlog to be managed using external tools. Pivotaltracker or software like that are very handy to manage a lot of things, but sometimes a roadmap’s content doesn’t fit perfectly with the approach that other software impose to you.

So while my teammates were thinking of how to aggregate the data and where to save them, I made the frontend as a Single Page Application using AngularJs and Jasmine and using Chutzpah as test runner.

One of the things I most appreciate using angular are the Directives.

The goal was to have a preview of a roadmap to use it in a dashboard able to summarize all the projects and their statuses.
What I wanted was to create a roadmap easily, something like

<roadmap-preview roadmap="roadmapContract"></roadmap-preview>

and I expected to have a result like
roadmap-preview
Continue reading