Rachael/Match

Tested in FireFox - all shapes appear BlackAndWhite?. --CH

Entertainingly, it is playable in black-and-white, and even breaking even on score (I got +19). It does seem to be only dealing 80 of the 81 cards from the deck, though: a zero-based array problem somewhere, I suspect. --AC

Eek. OK, will fix that. --Rachael

Funky! One very minor suggestion - incresing the width of the card border when a card is selected could be nice; the colour of a single-pixel-wide line is hard to see on a small high-resolution monitor. - MoonShadow

I tried that at first (and/or outsetting the selected cards), but IE doesn't support cell-spacing. So when you select a card and it gets a thicker border than when it was unselected, all the cards to the right of it have to move, which looks rubbish. So the single-pixel line is the result of necessity rather than design. Will try and investigate another way round it, though. --Rachael

You could have a thick white border around the card in addition to the single-pixel black; make it always be there but become the selection colour when selected. That way things would always take the same amount of room whether selected or not. - MoonShadow

That's a good idea :) (Can cells have multiple borders? Or would each cell have to have another element inside it to support the second border?) --Rachael, revealing ignorance

Nope, one border per HTML element. I habitually wrap things in DIVs and SPANs. Or you could make IMG elements have a border. - MoonShadow

One border each, but you can also have padding and margins: http://www.w3.org/TR/REC-CSS2/box.html --M-A

Indeed, but not sure that helps here - margins are transparent, and while padding inherits the cell's foreground colour it's on the wrong side of the border for the effect. - MoonShadow

Hmm, good points.  I'd forgotten you couldn't add colour to margins and padding.  You could create a fixed-height, fixed-width div with a white background inside each td. Give the div a thin black margin and the td a thick white border, then programmatically recolour the div margin and td border to red when selected. --M-A

Mac OS9 and IE aren't happy with it (white rectangle on black rectangle on white page...) but I'll be able to see it when I get home :) - SunKitten

filter:mask() is IE6-only, AIUI. There's no Mozilla or early IE equivalent for what you're trying to do - you can control opacity in Mozilla, but not colour. There's no filter:glow() either, but that's not functionally important. There's only three colours, though - just create a set of images for each. - MoonShadow

Aw, but I was so pleased to have made all 81 cards out of only 9 images :( Maybe I could try something involving transparency and bgcolor instead of filter:mask.

That could work - you could have white images with shapes made out of transparent pixels over a solid colour background. Bear in mind that IE does not support PNG transparency. - MoonShadow

... but everything supports GIF transparency, so try that.  Indeed, I have just taken a copy of the page and fiddled with the images and CSS and it works beautifully in Firefox.  I'll upload a copy somewhere to show you when I've finished... --M-A

See http://www.railwaymouse.co.uk/match/

Cool, that works - in Safari, anyway. In Mac IE it displays each single image larger than my browser window, with huge scrollbars. But Mac IE is just screwy. --Rachael  Try adding width adn height attributes to the <img> tags... --M-A

Not in my Mac IE ;) It works fine there - SunKitten

Confirmed. Does it quite regularly too. Can get up to 3 of the same, as well. Also, when you match a set after adding extra cards, something breaks. The extra images show as broken, for a start, and you lose some of whatever cards were down there. --CH

• 80/81 cards zero-based array bug: fixed
  
• Colours done by background-color instead of filter-mask: fixed
  
• Duplicate-cards-dealing bug: fixed, I think (if you're interested: it was moving the final three non-blank cards into the three recently-emptied spaces, but it was doing all three before blanking the spaces it moved them from. So on the second and third iteration it was moving the same "final non-blank card" up into the vacated spaces.)(PsychoBabe thought the duplicate cards were a deliberate variation. That's the kind of user you want.)
  
• Thicker selected card borders done using spans: fixed (though can't align vertically in spans, so had centre the images by doing something a bit naff with a <BR>, because I couldn't be bothered to try and do it with absolute positioning or put another whole table inside each span)