Card Game Project - Deployment

With some working components, and before jumping into the game logic, I want to try out building a native version for at least Android.

Cordova

Building with Cordova worked pretty well. I spent more time installing packages than I did building the app. The best part was the app works and looks great on the device. Special thanks to this blog for documenting their steps as well.

npm install -g cordova
cordova -v

Installing with npm is a breeze. I am using Cordova 6.0.0.

cordova create polycardwarapp com.chimmelb.polycardwar PolyCardWar

This initialized my application in the polycardwarapp directory.

cd polycardwarapp/
cordova platform add android

Build my dist/ directory and copy it to the /www directory of the app.

cd ..
cp -R dist/ polycardwarapp/www/
cd polycardwarapp/
cordova build android

This is where I got stuck. I add the Android SDK tools installed but either never used them, or needed to update them. 

android update sdk -u -a

That command made me agree to many EULAs, and started updating some build tools. I waiting while updating 24, 23, 22, 21 and quit soon after that. Then the build worked flawlessly.

cordova emulate android

Emulator was OK, and installed the apk created at platforms/android/build/outputs/apk/android-debug.apk on my phone. Started up quickly and was responsive. 

PhoneGap

The instructions for PhoneGap building were pretty straightforward, and was more app-based than command line. I followed their instructions for the sample app, copied my dist/ directory into the www/ folder, and the next build worked! 

I was suprised to read this: 

Apache Cordova is the engine that powers Adobe PhoneGap™, similar to how WebKit powers Chrome or Safari. 

...so perhaps that's why these were two positive experiences.

Mobile Chrome App

My first try was the documentation to build a chrome app, included in Polymer. This worked enough to build an app, but the routing in the app didn't work for me and kept getting toasts about not finding certain app paths.

Next Steps

I'm sure Cordova and PhoneGap have many more options, like the icon for the app, portrait-only view models and other cool things. I sometimes get an app routing error when first starting the game, and there could be other errors hiding about that will only be visible in an app format, rather than on the web browser (PhoneGap's tooling would probably be more useful in that case too). The Crosswalk project is also an option (or plugin) that could be useful.

But deployment is possible, and that's what I intended to find out. The game needs a lot more logic, but the layout and user input ("clicking") all worked on a mobile device in an app format. A more formal solution would be needed before hitting an app store, but the biggest risk of "Is this even possible?" has been cleared, so we can continue back to the app!

Tracking

This was another day, though there were some other project hurdles to handle today. And like I eluded earlier, installing android packages was a bigger time-sink than anything else. The actual build tools worked great! 

Card Game Project - Components

There are two components that are custom to this game, the <game-card> and the <card-stack>, which is a collection of <game-card>s.

Cards

The simpler of the two will be the game card. Like your standard playing card, it need a front and a back. The back will have a logo (the Polymer logo), the same on all cards. The front will have text that reflects some rank (in this game, it's basically 1-6 plus 3 special card types).

The first trick is to not show both sides of the card at the same time. I took out the other styling attributes for the css, and just wanted to show the affect of a relatively positioned outer <div> (so it's still affected by flexbox correctly), and two absolutely positioned inner <div>, with classes front and back. The outer div defines the css transition, and that the back of a flipped card can be seen (backface-visibility: hidden;). The front of the card is flipped over with  transform: rotateY( 180deg), and the front and back are both rotated 180 degrees in the same direction to get the affect.

That flipped class is applied with Polymer's special attribute data binding, class$="front {{isFlipped(show)}}", which binds the calculation of the class to a function in game-card's script called "isFlipped", that is evaluated every time the value of the attribute "show" changes (internally to game-card, or applied to the element from elsewhere). When the class appears or disappears, the css animation is applied.

For now, an "on-click" event is present to flip the cards as needed.

Stacks

Cards in this game are played from stacks (or piles). Two things I wanted to do for stacks was

1. Proportion the cards dimensions
2. Fan the cards so I could see them all from top to bottom.

My first step was to make cards that had a respectable shape! Normal playing cards are 64mm x 89mm so we want to keep that proportion. Plus, in the card stacks I want to "fan out" a stack of up to 5 card and still fit in the width of the <card-stack> element (which is always resized with flexbox). A little calculation is needed, and the solution I've used was this (polymer properties removed):


With Polymer, getting the size of elements (or their parents) is tricky if not done at the right time where all the values are 0. Here I used the IronResizeableBehavior to catch an iron-resize event, and if the height is > 0 (meaning it actually rendered), performed some calculations to preserve the aspect ratio. 

Fanning the cards needs to happen from inside the <card-stack>, but outside of <game-card>, so the aspects and behaviors of the cards are independent of the styles applied. Using Polymer's <dom-repeat> template, we can list the cards in an array, and with CSS just stack them on top of each other. This style was very calculated, so this was done with a function bound to three attributes of the <card-stack> (so will be recalculated each time).

Tracking

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

The resizing of cards (and where to bind values in the layout) took about 3 hours, the card flip was about 2, and the fanning elements was about 1. Measuring time is funny, because it really was about a day between meetings, lunch, the other projects that needs attention, etc . . . cramming 6 hours of good work into 9 hours of my day : )

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.

Card Game Project

A project idea that's been in my head for a while has been a HTML5 web game published as an app. Nothing fancy with <canvas> or animation libraries, but something like a turned-based game that was fun enough with simple controls. I backed a Kickstarter for a small, 2-player card game recently that my son and I like to play, so that will be the end-goal of this project.

Along the way I want to look at turning a HTML page into a true mobile app, via PhoneGap, Cordova or Crosswalk. I also want to track my time and progress; not because I miss my tenth-of-an-hour tracking days in the defense industry, but just to have some data points for future estimates and observe any pitfalls of my own practices.

Technologies

There are a few popular frameworks for building web app these days, along with a myriad of cool javascript libraries, and I can only choose one. I was really interested in trying the Ionic Framework, but it looks like version 2 is getting ready for prime time, which also uses Angular 2. I didn't want to ramp up learning v1 because it might not pass my longevity test, and I didn't want to learn v2 because changes are still happening in both Ionic 2 and Angular 2. Since this is a side-bar project, I want to learn a little, but not new everything, since my goal is to actually finish : ) We just used Polymer in a recent project and I'd like another try at those web components, which I hear will be useful in Angular 2 anyway. (If my app were any more complex, with any of the services "native" to Ionic or the like, I'd want to use that framework instead.)

And at this point, there isn't much more needed than Polymer to get the app out the door.

Road Map

My basic plan for app construction is:

1. Setup and Layout - get app and dev tooling working, Flexbox the main areas of the views
2. Components - at least two major components needed for cards
3. Control - Click events on components or game areas to confirm actions
4. Logic - data structures and game rules (and AI?)
5. Animations - Cards and actions look better when things move
6. Deploy - turn into native app

I might test out the Deploy step earlier to get a feel for how that all works a little sooner. Waiting to try critical steps until the very end, even though you only need them at the very end, is a mistake. 

Waiting to try critical steps until the very end, even though you only need them at the very end, is a mistake.    ~chimmelb

I quoted myself on that, because it applies to small and large projects alike : )

Tracking

I'll get this up on github, and branch each stage as I complete it. I'll blog after each stage and record the amount of time it took. Again, this isn't a race and I'm not under the clock of some schedule, but hopefully will find the results interesting. 

Also, I need to figure out a good way to display source code in blogger, because code samples break up mundane writing ; )

The Series

Will update this section as other posts are written.

Setup and Layout

Components