-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
271 lines (257 loc) · 13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!--
Theme Name: alive-Responsive-Coming-Soon-Template
Author URI: http://webthemez.com/
Description: alive is a minimal, responsive, business coming soon / landing page / one page HTML5 template based on Bootstrap 3.2.0. This theme is clean and fast, easy to customize multipurpose, includes Services and Contact form, 400+ Font Awesome icons, custom backgrounds and much more!
-->
<!doctype html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en-gb" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Chess for Newbies</title>
<meta name="description" content="">
<meta name="author" content="WebThemez">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link href="css/animate.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/styles.css" />
<link href="font/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!--/.header-->
<div id="#top"></div>
<section id="home">
<div class="banner-container", style="background-image: url('images/imgchess.jpg'); background-size: 100% 100%;">
<div class="container">
<div class="row">
<div class="logo"></div>
</div>
<div class="row">
<div class="logo"></div>
</div>
<div class="heading text-center">
<h2 style="text-shadow:
/* Outline */
-1px -1px 0 #606060,
1px -1px 0 #606060,
-1px 1px 0 #606060,
1px 1px 0 #606060,
-2px 0 0 #606060,
2px 0 0 #606060,
0 2px 0 #606060,
0 -2px 0 #606060; "><b>Chess for Newbies!</b></h2>
<strong style="text-shadow:
/* Outline */
-1px -1px 0 #606060,
1px -1px 0 #606060,
-1px 1px 0 #606060,
1px 1px 0 #606060;">J. Choi, G. Gao, J. Hasan, P. Li</strong> </div>
<div class="countdown styled"></div>
</div>
</div>
</section>
<section id="aboutUs">
<div class="container">
<div class="row feature design">
<div class="six columns right">
<h2>Chess gaining popularity</h2>
<p> The COVID-19 pandemic had a significant impact on the popularity of chess worldwide. While chess has always been a popular game, especially among enthusiasts and competitive players, the pandemic brought a renewed interest in the game and saw a surge in its popularity. </p>
<p> The release of the Netflix miniseries "The Queen's Gambit" in late 2020 further fueled the chess boom. The show depicted the story of a young female chess prodigy and received critical acclaim, capturing the attention of a wider audience. Many people, inspired by the series, developed an interest in learning and playing chess. </p>
<p> The graph on the left shows the number of games played on <a href="https://www.lichess.org">lichess server</a> over time. It is perhaps the most widely used open-source, free website where you can play chess online. It reported a surge in new users and a significant rise in the number of games being played. </p>
</div>
<div class="six columns feature-media left" style = "position:relative; top:60px;"> <img src="images/Chess-popularity-v2.svg" alt=""> </div>
</div>
</div>
</section>
</body>
</html>
</body>
</html>
<!DOCTYPE html><html><head>
<title>Chess for Newbies</title>
<link rel="stylesheet" href="style.css">
<!-- for loading the chessboard -->
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css" integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js" integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD" crossorigin="anonymous"></script>
<!-- chessboard loading complete! -->
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script><script src="https://unpkg.com/[email protected]"></script><script src="https://unpkg.com/[email protected]"></script></head>
<body>
<div style="margin: 25px 50px 75px;">
<!---
<h2 id="Chess-Intro">What is Chess?</h2>
<p>Chess is a two player game on 64 squares. It has gained huge popularity recently especially in the online format post COVID. Infact, <a href="https://www.chess.com/">Chess.com</a> and <a href="https://lichess.org">Lichess.org</a> who are the two most popular platforms, regularly record about 10 and 5 million active players. </p>
-->
<h2 id="The Problem">The Problem</h2>
<ul>
<li>
Existing Chess training is targeted at players who have decent knowledge of chess openings.
</li>
<li>
Moreover, the games can be quite long (30 or more moves per player) and younger players often fail to reason out the moves.
</li>
<li> In fact, in the elite games the moves are quite unintuitive to even advanced players.
</li>
</ul>
<h2 id="The Solution"> Our Goal</h2>
<ul>
<li>
We want to target <b>extreme beginners</b> (those who only know the moves), and show them common tricks to trap a fellow beginner player.
</li>
<li>
We focused on <b>miniature</b> games (less than 15 moves per player), to remove the reliance on deep chess theory.
</li>
<li>
We looked at <b>5 million</b> unique games from the <a href="https://database.lichess.org/">lichess database </a>, to understand how common minature games go about.
</li>
<li>
We generate a sunburst map showing the most common games. The larger the region on the annulus, the more common the move is.
</li>
<li>
Click on "New Game" to play chess and compare your moves to the common ones!
</li>
</ul>
<h2 id="Interaction tips"> Interaction Tips</h2>
<ul>
<li>
Play a few games with your friends using our interactive chart to familiarize with chess openings!
</li>
<li>
Explore possible moves by <b>hovering over the sunburst</b> chart while playing. The moves will be visually represented on the left-hand chessboard.
</li>
<li>
"Lock" your desired moves by <b>clicking on the sunburst</b>. Click "Reset Sunburst" to unlock.
</li>
<li>
During a game, if you want to strategize for your next move, <b>interact with the chessboard by moving the pieces</b>. The corresponding moves will be highlighted on the sunburst chart for easy reference.
</li>
<li>
The default chart only shows the 500 most popular games, but one can use the "Number of Games" slider to see the more uncommon games to learn more about what makes these short games so interesting.
</li>
<li>
Use the "Player Ratings" slider to explore how players with different levels of proficiency approach the game. Alternatively, you can view the sunburst chart of elite professional players to appreciate their advanced strategies.
</li>
</ul>
<h2 id="ave moves">Moves of average players</h2>
<p>We looked at over 5 million unique minature games on lichess between 2014-2016 played by players with various ELO ratings. </p>
</div>
<div class="container">
<div class="svg-container">
<div id="myBoard"></div>
<svg id="sunburst" viewBox="-500 -500 1000 1000" transform="translate(0, -20)">
<!--
<svg width="40%" height="80%" id="sunburst" viewBox="-604 -604 1210 1210" transform="translate(776, -400)">
-->
<!-- Add your SVG content here -->
</svg>
</div>
<div class="controls">
<div class="sliders">
<!-- <button id="playButton">Play</button> -->
<!--- emsp and nbsp are for spaces-->
<label for="dateSlider1"> Player Ratings </label>
<input class="slider" id="dateSlider1" type="range" min="0" max="4" step="1" value="0">
<span id="sliderValue">3500-4000</span>
<label for="rateSlider"> Number of Games </label>
<input class="slider" id="rateSlider" type="range" min="0" max="5" step="1" value="0">
<span id="rateValue">Top 500</span>
</div>
<div class="buttons">
<button id="clickmode">Reset Sunburst</button>
<button id="newgame">New Game</button>
</div>
</div>
</div>
<div style="margin: 25px 50px 75px;">
<h2 id="findings">Some Findings</h2>
<p>
There are several common trappy lines we figured out. Here is an example:
</p>
<p>
1. e4 e5 2. Nf3 Nc6 3. Bc4 Nd4 4. Nxe5 Qg5! 5. Nxf7 Qxg2 6. Rf1 Qxe4# 7. Be2 Nf3#
</p>
<p>
This is known as <a href="https://en.wikipedia.org/wiki/Blackburne_Shilling_Gambit">Blackburne Shilling gambit</a>.
</p>
<ul>
<li>
Although these types of moves are typically not objectively the best, they are easy to understand in beginner's perspective yet have clear purpose. This may give advantage to one of the players and even quick wins sometimes.
</li>
<li>
The higher the ratings are, the more diverse openings we see. For instance, in the 1500-2000 level, 85.7% of the games start with 1. e4 e5 (that is, white's first move is pawn to e4 and black's response against it is pawn to e5). However, among 3500-4000 rated players, white's first moves are more uniformly distributed among e4, d4, Nf3 and so on.
</li>
</ul>
<h2 id="elite moves">Moves of elite players (ELO 2500+) </h2>
<p>To compare we look at how the elite players (ELO 2500+) have played against each other in over 500 thousand games over the last three years (2020-2022). </p>
</div>
<div class="container">
<div class="svg-container">
<div id="myBoardelite"></div>
<svg id="sunburst-elite" viewBox="-450 -450 900 900" transform="translate(0, -20)">
<!--
<svg width="40%" height="80%" id="sunburst" viewBox="-604 -604 1210 1210" transform="translate(776, -400)">
-->
<!-- Add your SVG content here -->
</svg>
</div>
<div class="controls">
<div class="sliders">
<!-- <button id="playButton">Play</button> -->
<!--- emsp and nbsp are for spaces-->
<!-- <label for="dateSlider1-elite"> Games Ratings </label>
<input class="slider" id="dateSlider1-elite" type="range" min="0" max="5" step="1" value="0">
<span id="sliderValue-elite">3500-4000</span> -->
<label for="rateSlider-elite"> Number of Games </label>
<input class="slider" id="rateSlider-elite" type="range" min="0" max="4" step="1" value="0">
<span id="rateValue-elite">Top 500</span>
</div>
<div class="buttons">
<button id="clickmode-elite">Reset Sunburst</button>
<button id="newgame-elite">New Game</button></div>
</div>
</div>
<div style="margin: 25px 50px 75px;">
<h2 id="guide">A guide on wise moves for each chess piece</h2>
<li>
We analyzed 5 million games to discover the most popular moves for each piece.
</li>
<li>
View heatmaps illustrating the common movement patterns for each chess piece.
</li>
<li>
Click the buttons to access the visualizations and read our insightful guidelines!
</li>
</div>
<div class="container2">
<div class="svg-container">
<img id="svgImage" src="bishop.svg" alt="SVG Image">
</div>
<div class="buttons">
<button id="bishop"><img src="w-b.png" alt="bishop"></button>
<button id="king"><img src="w-k.png" alt="king"></button>
<button id="knight"><img src="w-n.png" alt="knight"></button>
<button id="queen"><img src="w-q.png" alt="queen"></button>
<button id="rook"><img src="w-r.png" alt="rook"></button>
<button id="pawn"><img src="w-p.png" alt="pawn"></button>
</div>
</div>
<div style="margin: 25px 50px 75px;">
<h3 id="heatmaptitle">Bishops</h3>
<h4 id="heatmap-main">Target your opponent's weak f pawn! Pin your opponent's knight!</h4>
<p id="heatmap-comment"> Note that f pawn is only protected by each king. In the opening stage, if you are a beginner, it's intuitive to develop your light square bishop (resp. dark square bishop in black's perspective) to the c4 square (resp. c5 square in black's perspective). If you're white, normally, your opponent's knight will be developed to c6 or f6 square. Hence its also good in many cases to develop your bishop with tempo to b5 or g5 square in order to restrict the mobility of the knight. This is called pin in chess.</p>
</div>
<script src="bundle.js"></script></body></html>