This is Part 3 and Day 3 of my coding a Game of Patience Dev Blog.
For the record the days are neither sequential or complete. Note also the complete absence of images.
So there I was thinking that I had nailed the display part of the programming. I'd written a function setGridPositionsAndCardSize() which would display the cards correctly for any game of Patience that you could imagine - provided it only used one deck of cards and could fit within a 9 by 7 grid.
I was mistaken.
The cards were not properly centred. I wasted some time on this before realising that the problem lay within the .css and not within the Javascript. I'd left a margin set. Oops.
Each card had an unwanted border around it. It turns out that this is caused by an obscure function of .css which randomly (or so it seems), adds a border. The solution was to use *span*.
The cards overlapped in certain situations. I'd tested my code with a fake Solitaire layout. I created a row of cards at the top of the screen and another row along the bottom. These were used to test rotation and scaling.
Unfortunately, this didn't reveal the fact that my calculation of the card length didn't always work correctly.
I fixed this by basing the height of the card on the width.
Unless, and this was what bit me earlier, the new calculated height was greater than the gap between y co-ordinates on the card grid. The grid is the basis used to space the cards.
If the height is greater than the gap, it is re-calculated with the width being based on the height.
This seems to work, although no doubt there exist all sorts of edge conditions which will cause it to fail in one way or another.
Luckily, I'm designing a Game of Patience, and not running a power station (at the moment).
On that note, I'm not concerned with fussy or non-standard browsers. Life's too short - especially for a fun project.