3

I'm writing a boardgame hub as a personal project, to learn/discover more about AngularJS.

I tried to go for a generic implementation, so I have a generic partial that shows a square grid and a generic controller, with all actual game logic residing in a service. I've written one such service for each boardgame I've implemented (currently 2). The one thing I can't solve in a generic manner is a cell in the grid. Depending on the game, its content may be a letter, a number, a picture, or even some (quite complex) HTML. I could use a getter function, that would call the service, that would assemble the HTML for each cell, but this feels really not-Angular-ish. So I thought of defining a directive for each type of cell. How do I place a directive conditionally in the page (based on the game type, decided in the controller)?

If you can come up with a more elegant solution, which does not require this hack-ish thing, I'd be glad to hear it.

Improve this question
2
  • Do the contents of the tile vary by game or individual tile? Commented May 30, 2013 at 14:52
  • Hey Mike, So for example tic-tac-toe, you would have 3 content types: X, 0, empty string. For reversi, you would have div's shaped as white/black circles, or nothing. For chess, you would have complex content with the image of a figurine and a span with its name, or nothing. Commented May 30, 2013 at 15:34

1 Answer 1

Reset to default
3

I think I have a pretty good solution for this. Build an HTML mockup of the UIs for each of the two games you have at the moment. Put together the cells, styles, images, etc. They don't have to be perfect but they should approximate how you see them being built.

Now try to unify the HTML of them so they are as similar as possible underneath the covers and that commonality should suggest to you what the pieces you need for the front end. For example, lets say you've done a really boring old game like Chess (rather than something interesting like King of Tokyo or Carcassonne :) and you see that you've got individual squares that work nicely as divs.

<table>
  <tr ng-repeat="row in board">
    <td ng-repeat="square in row">
      <div ng-class="square.class()"><img ng-src="square.img()"/></div>
    </td>
  </tr>
</table>

Each square supplies both a class for its styling and a transparent PNG file that can be displayed there to show the different chess pieces on the squares. It's an idea. But it may fail completely for your game because it lacks the interaction you need or animation or something else that's critical for the user experience you're trying to create.

Ultimately you have to work backwards from the UI and not forward from what you think the API should look like. I'll quote Tom Dale talking about Ember Data, "We committed the cardinal sin of inventing an API rather than extracting it..."

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks John! What you said in the first two paragraphs was actually how this project got started. For now, I only have really simple games, so I'll go with your idea - each game provides its own class for the innermost div's. When I'll start on something more complicated, I may incorporate Sharondio's solution, and have each game provide its own css class OR directive class. Great quote btw!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.