IRMINGARD
For the reimplementation in ClojureScript and Om see: https://github.com/paulkoegel/omingard
PLAY: http://irmingard.herokuapp.com
Irmingard is a patience card game. The goal of the game is to clear away all cards from the board to discard piles.
TL;DR Rules
- the aim is to sort all cards to their discard piles (you have 8 of those instead of Solitaire's 4)
- drag and drop cards onto other matching cards (draggable cards are marked green on hover, drop targets are marked yellow on hover while dragging another card)
- double click on a card to discard it to a pile
- press 'hit me' to get new cards
How to play
Irmingard is played with two sets (104 cards in total) of four suits (
- when a column on the game board is empty only Kings can be dropped on them
- the first card to discard on a pile must be an Ace
- top cards from piles can be dragged back onto the board (comes in very handy in the late game, believe me)
Making of
The slides of my presentation "Solitaire mit Backbone" (German) from November 2012's CologneJS can be found here: http://paulkoegel.github.com/colognejs-talk-2012-11
Technologies
Only using Rails as a build tool (compiles CoffeeScript, HAML Coffee etc.). I'd use Grunt or Gulp for this today. All game logic - even saving/loading of games - resides in client-side JavaScript.
- HTML5 drag and drop API (I used this HTML5 Rocks Tutorial)
- Backbone.js
- CoffeeScript
- Backbone Marionette
- Backbone Relational
- HAML Coffee Templates
- Gon gem
- Rails 3.2.8
- jQuery Pinkify
- tests are in the making and will be written with Jasmine + Jasminerice + Guard Jasmine (Phantom JS)
Planned features
- add some awesome end game animation or image (how about reusing this?)
- write Jasmine specs
- improve UI
- save game state
- collaboration mode with server-side validation of moves and real time move propagation handled by web sockets (using FAYE, most likely)
Why "Irmingard"?
It's named after a person.
Objects
Stack
The stack of shuffled and cards in your hand, you can only see their back.
Pile
Discard piles where all the cards land in the following order: ace, 2, 3, ..., queen, king There's 8 of them, two per suit.
Column
There are 9 columns on the board. at the start of the game they're filled with 1, 2, 3, 4, 5, 4, 3, 2, and 1 cards (left to right). Only the last card of each column is open and movable.
Card
104 in total:
- 2 sets of cards
- in 4 suits (hearts, diamonds, spades, clubs)
- with values from 1 (ace), 2, 3, ... 10, 11 (jack), 12 (queen), 13 (king)
- in 4 suits (hearts, diamonds, spades, clubs)
Dev notes
Jasmine Javascript Specs
-
in your browser:
rails s
open localhost:3000/jasmine -
headless:
guard-jasmine spec
Problems
Callback Flow
-
Can't set a card's draggability directly in its render method because on rendering the card's Column hasn't been updated yet by Backbone Relational Cards Collection: 'add' callback, card's column is still: 4 CardsShow: rendering
♥ queen with column still set to: 4 Column Model.handleAdd callback: only now has the card's column been updated to the new one: 0The card first gets added to the Card Collection Backbone Relational uses behind the scene. This add automatically triggers Marionette's render on the card - unfortunately, Backbone Relational hasn't updated the card's column value then. One way out of this could be to rerender the Card in the Column's handleAdd callback (con: double rendering). A better idea might be to leave everything as it is and only update the card's draggability in Column.handleAdd. Then simply bind the CardView to changes on draggability and set the HTML-attribute accordingly.
Acknowledgements
Big thanks to Jeremy Ashkenas for creating CoffeeScript & Backbone.js, to Derick Bailey for building Backbone Marionette, and to Bumi for introducing me to Backbone in the first place - back in 2010 ;)
Graphics
Thank you for providing the card images to the following artists:
- Fronts: Yozzo - http://yozzo.deviantart.com/art/playing-cards-source-66472891?q=boost%3Apopular%20deck%20cards&qo=86
- Back: Adam Levermore - http://browse.deviantart.com/?qh=§ion=&global=1&q=playing+card+back#/dssugt
- Page background texture is based on: Fuzzimo.com's Free Hi-Res Canvas Textures + Seamless
- Save icon courtesy of Turbomilk