Join games via invitation URL, instead of anonymously
[sumserum.git] / client / index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4         <style type="text/css">
5                 #about {
6                         width: 500px;
7                         margin-left:auto;
8                         margin-right:auto;
9                         font-family: sans-serif;
10                         text-align: justify;
11                         -webkit-hyphens: auto;
12                         -moz-hyphens: auto;
13                         -ms-hyphens: auto;
14                         hyphens: auto;
15                 }
16         </style>
17         <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
18         <meta charset="utf-8">
19         <title>Sum Serum</title>
20 </head>
21
22 <body>
23 <div align="center">
24 <button id="playlocal">Play local</button>
25 <button id="playonline">Play online</button>
26 <input id="shareurl" style="display:none; width:450px" />
27 </div>
28 <div align="center">
29 <canvas tabindex="1" id="canvas" align="center" width="500" height="400"
30         style="border:0px solid blue; background: lightgrey" />
31 </div>
32
33 <script src="engine.js" ></script>
34 <script src="sumserum.js"></script>
35
36 <div id="about">
37 <h3>About Sum Serum</h3>
38
39 <p>
40 Sum Serum is an independent and unauthorized browser implementation of the very nice board game <a href="http://www.spiel-und-design.eu/index.php?seite=shop&kategorie=tabuluna&gruppe=1&Nr=0040"><b>Sim Serim</b></a> by Heinrich Glumpler. You can find <a href="http://boardgamegeek.com/filepage/39765/sim-serim-english-rules">English rules</a> on <a href="http://boardgamegeek.com/boardgame/30046/sim-serim">BoardGameGeek</a>.
41 </p>
42
43 <p>
44 This implementation lets you play locally, with two players, or online:
45 </p>
46 <ul>
47 <li>If you play locally, you probably do not want to select your number of stones with the mouse, as your opponent will see your selection. Therefore, the left player (black) can use the keys <tt>1</tt> up to <tt>4</tt> to make a (hopefully unseen) selection. The right player uses <tt>U</tt>, <tt>I</tt>, <tt>O</tt> and <tt>P</tt>, which just happen to be convenient keys on the right. It does not matter in which order the players make their choice.</li>
48 <li>If you want to play online, just press “Play online”. You will see an URL shown below that button; share that with your friend (e.g. via e-mail or instant messenger) and you can play.</li>
49 </ul>
50
51 <p>Sum Serum was implemented by <a href="http://www.joachim-breitner.de/">Joachim Breitner</a> and is Free Software. Feel free to look <a href="http://git.nomeata.de/?p=sumserum.git">at the code</a> or <a href="https://github.com/nomeata/sumserum/issues">report a problem or a pull-request</a>. It builds on HTML5, Canvas, node.js and SockJS and is currently hosted by <a href="https://www.openshift.com/">OpenShift</a>.
52 </p>
53
54
55 </div>
56 </body>
57 </html>