GuildCrafts · qweenwasabi · May 11, 2017 · May 11, 2017 · May 11, 2017 · May 12, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,18 +1,9 @@
-# Browser Games
+# Browser Games: Chess
 
-A collection of games to play in a web browser. See the full list of games in the [games.md](games.md) file.
-
-## Installation and Setup
-
-Clone the repo, install npm dependencies, and start the server:
-
-```shell-session
-$ git clone [email protected]:GuildCrafts/browser-games.git
-$ cd browser-games
-$ npm install
+start the server:
 
 ...
-
+```
 $ npm start
 ...
 Starting up http-server, serving ./public
@@ -21,4 +12,58 @@ Available on:
   http://10.0.1.11:4321
 ```
 
-Then open `http://localhost:4321/` in your browser of choice and play away!
+## Description
+
+Build a [Chess](https://en.wikipedia.org/wiki/Chess) game in the browser using HTML, CSS, JavaScript, and the [jQuery][jquery] library.
+
+Fork the the [browser-games repository][browser-games] and use the fork as your project artifact.
+
+Implement the **Chess** game from the list in the [games.md][games-list] file.
+
+![chess-gif](https://cloud.githubusercontent.com/assets/709100/25557927/a936f2b0-2cd0-11e7-84d8-faf1cf988d7c.gif)
+
+## Context
+
+This goal will challenge your ability to take a _formal, defined system_ from the real world and replicate it in code. You will start with all of the logic of the system (the rules of the game) and most of the UI already designed.
+
+Your work will be mainly in deciding how to replicate that formal logic and user interface using JavaScript + jQuery, HTML, and CSS.
+
+## Specifications
+
+#### General
+
+- [x] Artifact produced is a fork of the [browser-games][browser-games] repo.
+- [x] Variables, functions, files, etc. have appropriate and meaningful names.
+- [x] HTML, CSS, and JS files are well formatted with proper spacing and indentation.
+- [x] There is a clear separation of game logic code from view/rendering code.
+- [x] All major features are added via pull requests with a clear description and concise commit messages.
+- [x] The artifact produced is properly licensed, preferably with the [MIT license][mit-license].
+
+#### Chess
+
+- [x] [User stories](http://searchsoftwarequality.techtarget.com/definition/user-story) and features for the game are added as issues to your repo with the label `feature` or `user-story`
+  <br>_You'll have to define these yourself by looking at the rules of the game and coming up with the right user stories & features_
+- [x] jQuery is used for DOM manipulation code
+- [x] Chess game can be found at `public/chess.html`
+- [x] Chess game is playable by two people
+- [x] Pieces can only be moved according to the rules of chess
+- [ ] The game state is persisted (so reloading the page resumes where you left off)
+- [ ] The board can scale to the window size
+- [X] Game page is linked from `public/index.html`
+
+### Stretch
+
+- [ ] Game can be played against a computer AI (i.e. human v. computer)
+
+## Resources
+
+- [jQuery Learning Center](https://learn.jquery.com/) #jquery
+- Code School: [Try jQuery](https://www.codeschool.com/courses/try-jquery) #jquery #js #dom
+- CSS Tricks: [Learn jQuery from Scratch](https://css-tricks.com/lodge/learn-jquery/) #jquery #js #dom
+- FreeCodeCamp article: [A step-by-step guide to building a simple chess AI](https://medium.freecodecamp.com/simple-chess-ai-step-by-step-1d55a9266977)
+
+[browser-games]: https://github.com/GuildCrafts/browser-games
+[games-list]: https://github.com/GuildCrafts/browser-games/blob/master/games.md
+[mit-license]: https://opensource.org/licenses/MIT
+
+[jquery]: https://jquery.com/
diff --git a/package.json b/package.json
@@ -20,6 +20,9 @@
   },
   "homepage": "https://github.com/GuildCrafts/browser-games#readme",
   "dependencies": {
-    "http-server": "^0.9.0"
+    "browserify": "^14.4.0",
+    "chess.js": "^0.10.2",
+    "http-server": "^0.9.0",
+    "jquery-confirm": "^3.2.3"
   }
 }
diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/public/chess.html b/public/chess.html
@@ -0,0 +1,18 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/chessboard-0.3.0.css">
+    <link rel="stylesheet" href="css/chess.css">
+    <title>CHESS</title>
+  </head>
+  <body>
+    <div id="board" class="board"></div>
+</div>
+<script src="https://code.jquery.com/jquery-1.10.1.js"></script>
+<script src="js/chessNPM/chess.js"></script>
+<script src="js/chessNPM/chessboard-0.3.0.js"></script>
+<script src="js/chessScript.js"></script>
+  </body>
+</html>
diff --git a/public/css/chess.css b/public/css/chess.css
@@ -0,0 +1,14 @@
+.board {
+    width: 400px;
+    margin: auto
+}
+
+.info {
+    width: 400px;
+    margin: auto;
+}
+
+.move-history {
+    max-height: 100px;
+    overflow-y: scroll;
+}
diff --git a/public/css/chessboard-0.3.0.css b/public/css/chessboard-0.3.0.css
@@ -0,0 +1,70 @@
+/*!
+ * chessboard.js v0.3.0
+ *
+ * Copyright 2013 Chris Oakman
+ * Released under the MIT license
+ * https://github.com/oakmac/chessboardjs/blob/master/LICENSE
+ *
+ * Date: 10 Aug 2013
+ */
+
+/* clearfix */
+.clearfix-7da63 {
+  clear: both;
+}
+
+/* board */
+.board-b72b1 {
+  border: 2px solid #404040;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+/* square */
+.square-55d63 {
+  float: left;
+  position: relative;
+
+  /* disable any native browser highlighting */
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+
+/* white square */
+.white-1e1d7 {
+  background-color: #f0d9b5;
+  color: #b58863;
+}
+
+/* black square */
+.black-3c85d {
+  background-color: #b58863;
+  color: #f0d9b5;
+}
+
+/* highlighted square */
+.highlight1-32417, .highlight2-9c5d2 {
+  -webkit-box-shadow: inset 0 0 3px 3px yellow;
+  -moz-box-shadow: inset 0 0 3px 3px yellow;
+  box-shadow: inset 0 0 3px 3px yellow;
+}
+
+/* notation */
+.notation-322f9 {
+  cursor: default;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  position: absolute;
+}
+.alpha-d2270 {
+  bottom: 1px;
+  right: 3px;
+}
+.numeric-fc462 {
+  top: 2px;
+  left: 2px;
+}
diff --git a/public/css/chessboard-0.3.0.min.css b/public/css/chessboard-0.3.0.min.css
diff --git a/public/css/platform.css b/public/css/platform.css
@@ -0,0 +1,47 @@
+/*Each row of the grid is turned into a table row (<tr> element). The strings in
+the grid are used as class names for the table cell (<td>) elements.*/
+
+.background {
+  background: #33a6fb;
+  table-layout: fixed;
+  border-spacing: 0;
+}
+
+.background td {
+  padding: 0;
+}
+
+.lava {
+  background: #ff6363;
+}
+
+.wall {
+  background: #ffffff;
+}
+
+.actor {
+  position: absolute;
+}
+
+.coin {
+  background: #f1e559;
+}
+
+.player {
+  background: #404040;
+}
+
+.lost .player {
+  background: #9f4141;
+}
+
+.won .player {
+  box-shadow: -4px -7px 8px white, 4px -7px 8px white;
+}
+
+.game {
+  overflow: hidden;
+  max-width: 600px;
+  max-height: 450px;
+  position: relative;
+}
diff --git a/public/css/tetris.css b/public/css/tetris.css
@@ -0,0 +1,39 @@
+body {
+  background-color: rgb(0, 0, 0);
+  background-image: url(http://www.zingerbugimages.com/backgrounds/charcoal_gray_mini_bricks_seamless_pattern.gif);
+  text-align: center;
+}
+
+#score {
+  font-family: serif;
+  font-size: 2em;
+  width: 250px;
+  height: 45px;
+  background-color: yellow;
+  padding-right: 30px;
+}
+
+canvas {
+  border: outset 10px #fff;
+  height: 80vh;
+  border-style: inset;
+}
+
+h1 {
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  font-size: 6em;
+}
+
+button {
+  background-color: #4CAF50;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
diff --git a/public/img/.DS_Store b/public/img/.DS_Store
diff --git a/public/img/chesspieces/wikipedia/bB.png b/public/img/chesspieces/wikipedia/bB.png
diff --git a/public/img/chesspieces/wikipedia/bK.png b/public/img/chesspieces/wikipedia/bK.png
diff --git a/public/img/chesspieces/wikipedia/bN.png b/public/img/chesspieces/wikipedia/bN.png
diff --git a/public/img/chesspieces/wikipedia/bP.png b/public/img/chesspieces/wikipedia/bP.png
diff --git a/public/img/chesspieces/wikipedia/bQ.png b/public/img/chesspieces/wikipedia/bQ.png
diff --git a/public/img/chesspieces/wikipedia/bR.png b/public/img/chesspieces/wikipedia/bR.png
diff --git a/public/img/chesspieces/wikipedia/wB.png b/public/img/chesspieces/wikipedia/wB.png
diff --git a/public/img/chesspieces/wikipedia/wK.png b/public/img/chesspieces/wikipedia/wK.png
diff --git a/public/img/chesspieces/wikipedia/wN.png b/public/img/chesspieces/wikipedia/wN.png
diff --git a/public/img/chesspieces/wikipedia/wP.png b/public/img/chesspieces/wikipedia/wP.png
diff --git a/public/img/chesspieces/wikipedia/wQ.png b/public/img/chesspieces/wikipedia/wQ.png
diff --git a/public/img/chesspieces/wikipedia/wR.png b/public/img/chesspieces/wikipedia/wR.png
diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Browser Games</title>
-  </head>
-  <body>
-    <h1>Browser Games</h1>
 
-    <p>A collection of games to play in a web browser.</p>
+<head>
+  <meta charset="utf-8">
+  <title>Browser Games</title>
+</head>
 
-    <hr>
+<body>
+  <h1>Browser Games</h1>
+
+  <p>A collection of games to play in a web browser.</p>
+
+  <hr>
+
+  <nav>
+    <ul>
+      <li><a href="platform.html"> Platform Game</a></li>
+      <li><a href="tetris.html">Tetris</a></li>
+      <li><a href="chess.html">Chess</a></li>
+    </ul>
+  </nav>
+</body>
 
-    <nav>
-      <ul>
-        <li><a>LINK TO FIRST GAME</a></li>
-        <li><a>LINK TO SECOND GAME</a></li>
-        <li>...</li>
-      </ul>
-    </nav>
-  </body>
 </html>