Chess

README.md

@@ -1,24 +1,68 @@
-# 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.
+## Challenge Rating
 
-## Installation and Setup
+This goal will likely be within your ZPD if you...
 
-Clone the repo, install npm dependencies, and start the server:
+- Can build web sites with HTML & CSS
+- Can add behavior to a web site with JavaScript
+- Can use jQuery
+- Have built other browser games
+- Are familiar with the rules of Chess
+- Are interested in making more complex interactive web pages
 
-```shell-session
-$ git clone [email protected]:GuildCrafts/browser-games.git
-$ cd browser-games
-$ npm install
+## Description
 
-...
+Build a [Chess](https://en.wikipedia.org/wiki/Chess) game in the browser using HTML, CSS, JavaScript, and the [jQuery][jquery] library.
 
-$ npm start
-...
-Starting up http-server, serving ./public
-Available on:
-  http://127.0.0.1:4321
-  http://10.0.1.11:4321
-```
+Fork the the [browser-games repository][browser-games] and use the fork as your project artifact.
 
-Then open `http://localhost:4321/` in your browser of choice and play away!
+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/

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"
   }
 }

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>

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;
+}

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;
+}

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;
+}

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;
+}

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>