Skip to content

Commit 99b4a5a

Browse files
committed
first commit
0 parents  commit 99b4a5a

19 files changed

+2918
-0
lines changed

apple-touch-icon.png

727 Bytes
Loading

css/default.css

+754
Large diffs are not rendered by default.

css/reset.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/ */
2+
/* v1.0 | 20080212 */
3+
4+
html, body, div, span, applet, object, iframe,
5+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
6+
a, abbr, acronym, address, big, cite, code,
7+
del, dfn, em, font, img, ins, kbd, q, s, samp,
8+
small, strike, strong, sub, sup, tt, var,
9+
b, u, i, center,
10+
dl, dt, dd, ol, ul, li,
11+
fieldset, form, label, legend,
12+
table, caption, tbody, tfoot, thead, tr, th, td {
13+
margin: 0;
14+
padding: 0;
15+
border: 0;
16+
outline: 0;
17+
font-size: 100%;
18+
vertical-align: baseline;
19+
background: transparent;
20+
}
21+
body {
22+
line-height: 1;
23+
}
24+
ol, ul {
25+
list-style: none;
26+
}
27+
28+
:focus {
29+
outline: 0;
30+
}
31+
32+
table {
33+
border-collapse: collapse;
34+
border-spacing: 0;
35+
}

favicon.ico

1.12 KB
Binary file not shown.

img/acceptable.png

576 Bytes
Loading

img/ajax-loader.gif

4.67 KB
Loading

img/bgTile.png

268 Bytes
Loading

img/sprites.png

73.5 KB
Loading

index.html

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
6+
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
7+
<link rel="canonical" href="http://plainchess.timwoelfle.de" />
8+
<title>PlainChess</title>
9+
<link rel="shortcut icon" href="favicon.ico" />
10+
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
11+
<meta name="apple-mobile-web-app-capable" content="yes" />
12+
</head>
13+
<body>
14+
<div id="header">
15+
<a href="#" id="toggleFaq">Frequently Asked Questions</a> · <a href="http://twitter.com/timwoelfle">News on Twitter</a> · <a href="#" id="contact" style="display: inline-block;">Contact</a>
16+
17+
<div style="float: right">
18+
<!-- Flattr Button BEGIN -->
19+
<script type="text/javascript">
20+
/* <![CDATA[ */
21+
(function() {
22+
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
23+
24+
s.type = 'text/javascript';
25+
s.async = true;
26+
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto&uid=timwoelfle&button=compact&language=en_GB';
27+
28+
t.parentNode.insertBefore(s, t);
29+
})();
30+
/* ]]> */
31+
</script>
32+
<a class="FlattrButton" style="display:none;"
33+
title="PlainChess"
34+
data-flattr-uid="timwoelfle"
35+
data-flattr-tags="chess, html5, jquery"
36+
data-flattr-category="software"
37+
href="http://plainchess.timwoelfle.de">
38+
PlainChess is the world's first true HTML5 chess game, simple yet full–featured and beautiful.
39+
</a>
40+
<!-- Flattr Button END -->
41+
<!-- AddThis Button BEGIN -->
42+
<div class="addthis_toolbox addthis_default_style " style="display: inline-block;">
43+
<a class="addthis_counter addthis_pill_style"></a>
44+
</div>
45+
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
46+
<!-- AddThis Button END -->
47+
</div>
48+
</div>
49+
50+
<div id="main">
51+
<h1>
52+
<a href="index.html"><span class="light">Plain</span>Chess</a>
53+
</h1>
54+
55+
<div id="flip">
56+
<div id="faq">
57+
<div id="wideBorder"></div>
58+
59+
<div id="content">
60+
<h2>What is PlainChess?</h2>
61+
62+
<p>PlainChess aims to be a simple yet full–featured and beautiful alternative to the cluttered chess portals currently existing.</p>
63+
64+
<p>Its primary goal is to allow two persons to play a round of chess, no matter whether they happen to be at the same location or on a different continent. It's designed to be platform independent and to run on every computer or smart phone equipped with a modern web browser and thus enabling people everywhere around the globe to play chess, at home and on the go.</p>
65+
66+
<h2>I like PlainChess. How can I support you in order to keep updates comin'?</h2>
67+
68+
<p>There are many ways to support me and show your love! Tell your friends and enemies about PlainChess; twitter, blog or write letters about it. Share it on your social networks and <a href="http://flattr.com/">Flattr</a> if you already have an account, otherwise get one :)</p>
69+
70+
<h2>Why yet another chess implementation, what makes PlainChess different?</h2>
71+
72+
<p>Its minimalistic approach sets it apart from most of the other chess implementations on the internet. They usually use browser plugins like Adobe Flash or even client software to realize the game itself and offer a variety of features around it: news, riddles, communities and dozens of little gadgets.</p>
73+
74+
<p>Due to this complexity they often take a lot of clicks to get a game started, they tend to react slowly and are often cluttered with ads. Some even require registration fees in order to be able to play a game. PlainChess is free, fast and built on modern web technologies but on the other hand also passes on features beyond basic gameplay.</p>
75+
76+
<h2>I want a list, what features do you offer?</h2>
77+
78+
<ul>
79+
<li>Online and offline games with an appointed partner</li>
80+
<li>Nearly full implementation of all official chess rules</li>
81+
<li>Autosaving the game for interrupted sessions</li>
82+
<li>Minimalistic and clean interface</li>
83+
<li>Platform independent due to the use of modern web technologies</li>
84+
<li>Free and ad–free</li>
85+
</ul>
86+
87+
<h2>Which chess rules exactly are implemented, which aren't?</h2>
88+
89+
<p>Nearly all of them: PlainChess recognizes valid moves as well as <a href="http://en.wikipedia.org/wiki/Check_(chess)">check</a>, <a href="http://en.wikipedia.org/wiki/Checkmate">mate</a> and <a href="http://en.wikipedia.org/wiki/Stalemate">stalemate</a> situations. It also supports the three specials moves of kings and pawns: <a href="http://en.wikipedia.org/wiki/Castling">castling</a>, <a href="http://en.wikipedia.org/wiki/Promotion_(chess)">pawn promotions</a> and <a href="http://en.wikipedia.org/wiki/En_passant">en passant capturing</a>. The only rules currently not supported are the draw rules except for stalemate: <a href="http://en.wikipedia.org/wiki/Threefold_repetition">threefold repetition</a>, <a href="http://en.wikipedia.org/wiki/Fifty-move_rule">the fifty–move rule</a>, impossibility of checkmate and <a href="http://en.wikipedia.org/wiki/Draw_by_agreement">mutual agreement</a>.</p>
90+
91+
<h2>What features are you planning on implementing next?</h2>
92+
93+
<p>This is a very interesting question. It totally depends on the amount of spare time and my motivation (which you can improve by supporting me!) and I can't promise anything. So consider the following points an approximate and ambitious roadmap only to be enjoyed with caution:</p>
94+
95+
<h3>General</h3>
96+
<ul>
97+
<li>Support of time control and chess clocks</li>
98+
<li>Support of <a href="http://en.wikipedia.org/wiki/FEN">FEN codes</a> and saved games</li>
99+
<li>Support of at least some of the draw rules</li>
100+
<li>Optimized layout for smart phones like the iPhone</li>
101+
<li>Something quite special but still secret :)</li>
102+
</ul>
103+
104+
<h3>Online mode</h3>
105+
<ul>
106+
<li>Synchronized game time for time control and chess clocks</li>
107+
<li>Server side turn saving for rejoins and spectator mode</li>
108+
<li>Player pings for recognition of disconnection</li>
109+
</ul>
110+
111+
<h2>You keep mentioning modern web technologies: What exactly are you talking about?</h2>
112+
113+
<p>PlainChess is the first chess implementation built completely with HTML5 technologies (at least as far as I know). I'm talking about the buzzword HTML5 here, not W3C HTML5 itself.</p>
114+
115+
<p>The game engine is written in JavaScript and relies on the frameworks <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>, which means that offline games can be played without internet connectivity (this will get interesting once a smart phone optimized version with <a href="http://www.w3.org/TR/html5/offline.html">HTML5 manifest</a> comes out).</p>
116+
117+
<p>The design uses CSS3 en masse: rounded borders, shadows, opacity, sprite images and experimental transitions &amp; transforms. That's right, many of the animations are rendered hardware accelerated with CSS3 transitions and all the spinning/turning stuff you see are CSS3 transforms.</p>
118+
119+
<h2>Who are you and why did you make this?</h2>
120+
121+
<p>I'm Tim Wölfle from Germany and wanted to try out the new possibilities HTML5 technologies offer. At the same time I wanted to play a quick round of chess with a friend on the internet, but didn't find anything that would allow me to start right away and without registration. Last but not least I had this great idea on how to improve the chess experience but needed a platform to realize it. You don't see it yet, but it's in the makes – have a look at the roadmap's last point ;)</p>
122+
</div>
123+
</div>
124+
125+
<div id="chess">
126+
<div id="info">
127+
<p id="currentTurn"></p>
128+
<p id="lastMove"></p>
129+
<p id="gameTime"></p>
130+
</div>
131+
132+
<div id="border">
133+
<table>
134+
<tr><th></th><td colspan="8" rowspan="8"></td></tr>
135+
<tr><th></th></tr>
136+
<tr><th></th></tr>
137+
<tr><th></th></tr>
138+
<tr><th></th></tr>
139+
<tr><th></th></tr>
140+
<tr><th></th></tr>
141+
<tr><th></th></tr>
142+
<tr><td></td><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
143+
</table>
144+
</div>
145+
146+
<table id="board">
147+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
148+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
149+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
150+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
151+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
152+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
153+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
154+
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
155+
</table>
156+
157+
<ul id="whiteCemetery"></ul>
158+
<ul id="blackCemetery"></ul>
159+
<div class="promotion"><div></div><ul></ul></div>
160+
161+
<div class="menu" id="start">
162+
<div class="thin stripe tone40"></div>
163+
<div id="hostGame" class="stripe tone55">
164+
<h2><span></span>Play white online</h2>
165+
<input type="text" value="Host game named…" id="hostGameName" />
166+
<input type="button" value="Go" />
167+
</div>
168+
<div id="joinGame" class="stripe tone70">
169+
<h2><span></span>Play black online</h2>
170+
<input type="text" value="Join game named…" id="joinGameName" />
171+
<input type="button" value="Go" />
172+
</div>
173+
<div id="playOffline" class="stripe tone85">
174+
<h2><a href="#"><span>♙♟</span>Play offline</a></h2>
175+
</div>
176+
<div class="thin stripe tone100"></div>
177+
</div>
178+
179+
<div class="menu" id="pause">
180+
<div class="thin stripe tone40"></div>
181+
<div id="toggleAutoSave" class="stripe tone55">
182+
<h2><a href="#" style="letter-spacing: -0.075em"><span></span>Autosave <span>on</span></a></h2>
183+
</div>
184+
<div id="playOn" class="stripe tone70">
185+
<h2><a href="#"><span></span>Play on</a></h2>
186+
</div>
187+
<div id="quitGame" class="stripe tone85">
188+
<h2><a href="#"><span></span>Quit game</a></h2>
189+
</div>
190+
<div class="thin stripe tone100"></div>
191+
</div>
192+
193+
<div class="menu" id="end">
194+
<div class="thin stripe tone70"></div>
195+
<div id="playOn" class="stripe tone85">
196+
<h2 style="top: 60px"><a href="#">Back to board</a></h2>
197+
</div>
198+
<div class="stripe tone100" style="z-index: 1; overflow: visible">
199+
<h2><span></span><span></span></h2>
200+
</div>
201+
<div id="quitGame" class="stripe tone85">
202+
<h2><a href="#">Start new game</a></h2>
203+
</div>
204+
<div class="thin stripe tone70"></div>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
<script src="js/jquery-1.4.4.min.js"></script>
210+
<script src="js/jquery-ui-1.8.9.custom.min.js"></script>
211+
<script src="js/jquery.caret.1.02.min.js"></script>
212+
<script src="js/json2.min.js"></script>
213+
<script src="js/game.js"></script>
214+
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=timwoelfle"></script>
215+
</body>
216+
</html>

0 commit comments

Comments
 (0)