After deciding that I wanted to write an online game of patience, the most common of which is probably Klondike, I also decided that I wanted to be able to include dozens of different games of solitaire.
I wondered if a data driven design would let me do that.
I mean, at first sight, Patience or Solitaire (I'll use the two words interchangeably) is mainly about moving cards from one place to another. There are various restrictions on which card can be moved and where it can be placed, and that is more or less all.
I'm using Javascript, CSS and HTML. Nothing fancy and I'm aiming for small, fast, efficient using a simple coding style.
I'm designing as I go along.
Iteratively.
I know that there are various tasks that I need to accomplish to be able to write a data driven suite of Solitaire games. I just don't know what all these tasks will entail as yet, or indeed what they all are.
One of the key tasks with progamming is knowing how to break up one enormous task into smaller tasks.
I more or less started with first task of drawing a card to the screen, and checking that it could be resized.
So in this case, how do I write an online game of patience (in javascript), has become how do I display a playing card on the screen.
This is suprisingly fiddly, and breaks down into small tasks.
You need to decide:
Initially, I wanted to use svg for the card images as these scale nicely. A quick google didn't help me discover how to do this, so for now I'm using png to encode the image data.
These are converted into base64 data URLs, and saved in a .css file. There is a nice site enabling you to do this here.
The cards will be displayed by adding them to the DOM - or at least this is my initial idea.
At the moment, one playing card is being shown in the centre of the screen. The next task will be to check it scales/rotates properly on mobile.
It is worth mentioning at the outset, that my design will be data driven. While I don't know the exact structure as yet, I do have an idea as to the outline.
I need to allow different different card layouts. I intend to achieve this by having one js file called solitairemain.j which is included for every game.
There will also be an additional file for each game (e.g. klondike.js, spider.js ...) which will contain the rules for that game along with the layout.
I am aware that this isn't a particularly *fashionable* way of doing things. I'm also aware having programmed off and on for thirty years that *fashionable* often overcomplicates and becomes difficult to maintain. This is my gripe with frameworks.
As I'm designing Iteratively, it is distinctly possible that I will need to backtrack with each of these stages.
I'm using Firebase. I could equally as well have used Amazon S3.
Solitaire Online is a static site, using only CSS, HTML and Javascript. I'm not bothering with multiplayer, scoring or any additional frills.
That's because I want to make the games of Patience as I want to play them. Simple, easy and quick to use.
And I don't want to have to bother with server side coding.