Spysol is the Spider card game but instead of playing cards it has colored squares.
The two suits are shown in the "Models" section on the left. Each suit has a different color range, with ranks from 13 to 1 in descending order: 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1. You have four of each suit, or 104 cards total.The tableau starts with several cards dealt randomly into four columns of 5 cards and six columns of 4 cards. The remaining 60 cards form the stock for later play.
To move, drag a card to another column. All the cards below it will move too. When you assemble a complete suit like one of the models, it will automatically be removed from the tableau and you'll get a point at the top. When you remove all suits (8 points), you win the game.
When you run out of desired moves, press "Draw" to deal a random row of cards from the stock to the columns. You can do this six times.
In real Spider you can only move a descending sequence, and you must move it to a column whose bottom card is the next-higher rank or an empty column. For instance, you can move 4-3-2 to a column ending in 5. Rules differ on whether all these cards must be the same suit. And you can't have an empty column when pressing "Draw". Spysol doesn't enforce these restrictions, so you can move any card to any column. So you can undo a move by doing the opposite move.
You can change the suit colors anytime by pressing "Change Colors": the suits will switch to two new random color ranges. To start a new game, press "New Game" or reload the page.
Spysol was created by Mike Orr. This is version 3. The name "Spysol" is a portmanteau of Spider, Python, and Spy.
Version 3 is written in modern vanilla Javascript and CSS.
The only library is
random-seedable
by Chris Akroyd
to shuffle the cards and choose the suit colors.
The suit colors are managed by CSS.
The cards are HTML
<div>'s with classes for the suit and rank.
Two CSS variables set the base hue for the two suits. These feed
into HSL color values for the suit-rank shades.