Card Game Project - Setup and Layout

Setup

For a simple polymer project, their Polymer Starter Kit (PSK) is great. For two reasons:

1. A Material Design multi-view, single page app
2. Tooling

This card game doesn't need more than a play area and some menu options for "New Game" and maybe another page or modal for "Rules." Maybe something else, but the key here is simple. You're either playing a game, or setting up to play again. Plus, Material Design looks nice.

The other great thing is tooling. Opinion on the tools to use aside, having one line options to build, test, run and deploy your web site is a good thing. The PSK uses gulp, vulcanize, and  browsersync and a few other goodies that are just good development practices. I noticed this newer version 1.2.3 didn't have jshint, so I added that back in as well to keep my code consistent.  Use whatever tools you want and when your tools work, good stuff happens : )

I also cleaned out a few items I wouldn't be needing. Some build scripts and some of the included example pages, then I added a simple flow for the game "landing" --> "new" --> "game".  "Landing" page allows a new game to be created (maybe continue a saved game in the future), "new" is the setup phase before a game, and "game" is where the game is played. Also edited the title. (This setup step concludes in this commit, if you're curious).

Initial Data Bindings

The basic layout for the game is two columns of 5 cards (actually card stacks), one column for each player. We might need a footer for some game information or setup actions, and there is already is a header bar at the top.

I added a few custom elements to help with the layout. They are not styled and have no logic yet, but instead of building a layout with just <div>s I am one step closer to the read thing. And I want to start building with real data. This maybe not be final data model, but it is enough to get started. 

Each game will have it's current state, player1 and player2, and each player has their stack of cards. I created a <game-board> element and bind the game state to it.

And now my <game-board> element can access its own game property, and changes propagate. That's what makes the binding 2-way: using "{{}}" squiggle-braces when binding in the html and `notify: true` when declaring the property. You can read more in the Polymer docs.

Generally then, the game board has two areas, each with 5 <card-stack> elements, and each card stack element has a list of <game-card> elements (displayed as needed depending on the game or stack state).

Layout

Flexbox is a handy styling tool built into browsers via CSS. You could learn more about Flexbox by watching some videos, and more about Polymer's implementation of it via <iron-flex-layout> in their great docs. Our last project just used classes to define the flexbox properties, so I'm going to try the mixin approach this time (and maybe I can do something fancy with orientation layouts later on more easily).

This is the initial layout of the app. The game-area is a horizontal layout that holds player-area left, duel-area, and player-area right, and each player-area is a vertical and justified flexbox, holding 5 card-stacks. Most all of these mixins were defined in the <style> section of game-board.html, with a little style defined in card-stack.

A similar layout will be used in the "new game" page, a larger and wrapping right-hand area and removing the duel-area from the middle.

Tracking

This step is wrapped up, so I created a branch. https://github.com/chimmelb/polycardwar/tree/step-layout

The layout and setup steps each took about 2 hours and the data binding around 1, and I've been keeping the blog open as I go, so a little time there as well. But I'm not comparing time slices to any perceived speed I should be working at, just writing it down for now.