I wanted to "program" a peg solitaire game in the browser, but of course it should be done in XSLT (1.0).
The infrastructure with Saxon-CE for XSLT in the browser development is great ...
The game peg solitaire is a well known 1-player game, find background information on Wikipedia:
Of course we could have an XML file stored for each possible position.
And a xml-stylesheet processing-instruction would instruct the browser which stylesheet to use for drawing.
Of course each field would have a hyperlink associated which links to "the next" position.
There is one principal problem with this simple approach:
We have 33 fields, and each can have a peg on it or not -- this makes 2^33 or more than 8 billion different positions!
I do not have enough webspace to store 8 billion XML files on my private web server!
And even if it would be possible for the English board, the Diamond board has 45 fields and 2^45 = 35,184,372,088,832 positions ...
So it should be clear that a static XML file approach is not possible.
Based on code snippets I already used in posting "[xsl] support of stylesheet embedding for ALL browsers"
just has to be included in the generated Stylesheet output. Doing that allows to use displayResult(stylesheet URL, XML string)
which executes the stylesheet on a given (dynamically generated!) XML string.
now consists of three files only, which are shown below, and which are contained in peg-solitaire.zip
* an initial position in an HTML file, with <body> onLoad function doing the initial display
* draw.xsl, where all the peg-solitaire logic, display, ... is contained (only 268 lines)
* xslt-events.js, providing the "dynamic XML processing" capability.
I have tested peg-solitaire successfully with all big5 browsers (Windows-/Linux- version):
* Chrome (18.0.1 / 17.0.9)
* Firefox (11.0 / 10.0.3)
* Internet Explorer (8 / -)
* Opera (11.62 / 11.62)
* Safari(5.1.5 / -)
need to be loaded exactly once, and network connectivity is not needed afterwards.
peg-solitaire also works fine on the Opera mini
web browser of my KS360 cell phone!
See photo taken (with my cell phone from that of my son) at bottom.
draw.xsl allows for two modes:
* "play" mode, where you can see the "stop" button at bottom right
* "edit" mode, where you can see the "play" button at bottom right (create your own initial configurations!)
In addition the 5 graphical buttons allow to go to the start positions of the 5 different boards directly.
In edit mode this is the "toggle" sequence:
... --> "forbidden" --> "empty field" --> "peg" --> "forbidden" --> ...
Switching between "play" and "edit" mode is done the same way as the actions for all the other fields.
If you selected "a wrong" peg in "play" mode, clicking on it again unmarks it.
If you look into draw.xsl you can see how to use key() function as a "node pointer".
The heart of the stylesheet is the simple serializer neded to generate the XML string at the bottom.
Inside the serializer the transformations needed are integrated.
I played with the asymmetrical 3-3-2-2 board and found a solution.
If you want to see, click on this animation
of the solution.
This is the complete stylesheet doing all the work, draw.xsl:
And this is the basis for providing dynamic XML processing in the browser, xslt-events.js
This is the screenshot of KS360 cell phone running peg-solitaire in Opera mini browser:
This is a screenshot from myAndroid cell phone running peg-solitaire in Opera mini browser: