npm support (CommonJS and ES6)

.gitignore

@@ -1,7 +1,7 @@
 # git diff files
 *.diff
 
-dist/
+dist/build
 node_modules/
 
 website/*.html

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"editor.defaultFormatter": "standard.vscode-standard",
+	"standard.enable": true,
+	"standard.autoFixOnSave": true
+}

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0] - 2022-07-13
+- Available as an npm module (both ES6 and CommonJS) with instructions
+- Specify number of spares available to be placed
+- Bug fixes and optimizations
+- Works better on mobile
+- Default piece images from CDN
+- Internal position is updated before firing onChange
+- Dragged piece can be magnified
+- Accessibility improvements (alt tag)
+- Can preload piece images
+
 ## [1.0.0] - 2019-06-11
 - Orientation methods now return current orientation. [Issue #64]
 - Drop support for IE8

README.md

@@ -4,6 +4,26 @@ chessboard.js is a JavaScript chessboard component. It depends on [jQuery] v3.4.
 
 Please see [chessboardjs.com] for documentation and examples.
 
+## Usage
+
+Installation: `npm i @discape/chessboardjs`
+
+```js
+import { Chessboard, fenToObj, objToFen } from "@discape/chessboardjs";
+```
+
+```js
+const { Chessboard, fenToObj, objToFen } = require("@discape/chessboardjs");
+```
+
+Be sure to include the css:
+
+```html
+<link rel="stylesheet"
+      href="https://unpkg.com/@discape/chessboardjs/dist/build/chessboard.min.css"
+      crossorigin="anonymous">
+```
+
 ## What is chessboard.js?
 
 chessboard.js is a standalone JavaScript Chess Board. It is designed to be "just

data/releases.json

@@ -1,53 +1,53 @@
-[
-"-----------------------------------------------------------------",
-{
-  "released":false,
-  "version":"0.3.1",
-  "date":"10 Aug 2013",
-  "changes":[
-    "Orientation methods now return current orientation (GitHub Issue #64)"
-  ],
-  "files":[
-    { "name":"chessboardjs-0.3.1.zip", "size":"44.6 KB" }
-  ]
-},
-"-----------------------------------------------------------------",
-{
-  "version":"0.3.0",
-  "date":"10 Aug 2013",
-  "changes":[
-    "Added appearSpeed animation config",
-    "Added onSnapbackEnd event",
-    "Added onMoveEnd event"
-  ],
-  "files":[
-    { "name":"chessboardjs-0.3.0.zip", "size":"44.6 KB" }
-  ]
-},
-"-----------------------------------------------------------------",
-{
-  "version":"0.2.0",
-  "date":"05 Aug 2013",
-  "changes":[
-    "Added onMouseoverSquare and onMouseoutSquare events",
-    "Added onSnapEnd event",
-    "Added square code as CSS class on the squares",
-    "chess.js integration examples"
-  ],
-  "files":[
-    { "name":"chessboardjs-0.2.0.zip", "size":"44.6 KB" }
-  ]
-},
-"-----------------------------------------------------------------",
-{
-  "version":"0.1.0",
-  "date":"21 Jul 2013",
-  "changes":[
-    "Initial release"
-  ],
-  "files":[
-    { "name":"chessboard-0.1.0.zip", "size":"44.0 KB" }
-  ]
-},
-"-----------------------------------------------------------------"
+[
+"-----------------------------------------------------------------",
+{
+  "released":false,
+  "version":"0.3.1",
+  "date":"10 Aug 2013",
+  "changes":[
+    "Orientation methods now return current orientation (GitHub Issue #64)"
+  ],
+  "files":[
+    { "name":"chessboardjs-0.3.1.zip", "size":"44.6 KB" }
+  ]
+},
+"-----------------------------------------------------------------",
+{
+  "version":"0.3.0",
+  "date":"10 Aug 2013",
+  "changes":[
+    "Added appearSpeed animation config",
+    "Added onSnapbackEnd event",
+    "Added onMoveEnd event"
+  ],
+  "files":[
+    { "name":"chessboardjs-0.3.0.zip", "size":"44.6 KB" }
+  ]
+},
+"-----------------------------------------------------------------",
+{
+  "version":"0.2.0",
+  "date":"05 Aug 2013",
+  "changes":[
+    "Added onMouseoverSquare and onMouseoutSquare events",
+    "Added onSnapEnd event",
+    "Added square code as CSS class on the squares",
+    "chess.js integration examples"
+  ],
+  "files":[
+    { "name":"chessboardjs-0.2.0.zip", "size":"44.6 KB" }
+  ]
+},
+"-----------------------------------------------------------------",
+{
+  "version":"0.1.0",
+  "date":"21 Jul 2013",
+  "changes":[
+    "Initial release"
+  ],
+  "files":[
+    { "name":"chessboard-0.1.0.zip", "size":"44.0 KB" }
+  ]
+},
+"-----------------------------------------------------------------"
 ]

examples/1000-empty-board.example

@@ -2,13 +2,13 @@
 1000
 
 ===== Name
-Empty Board
-
+Empty Board
+
 ===== Description
 Chessboard.js initializes to an empty board with no second argument.
-
+
 ===== HTML
 <div id="myBoard" style="width: 400px"></div>
-
+
 ===== JS
 var board = Chessboard('myBoard')

examples/1001-start-position.example

@@ -1,15 +1,15 @@
 ===== id
 1001
 
-===== Name
-Start Position
-
+===== Name
+Start Position
+
 ===== Description
 Pass <code class="js string">'start'</code> as the second argument to initialize
 the board to the start position.
-
+
 ===== HTML
 <div id="myBoard" style="width: 400px"></div>
-
+
 ===== JS
 var board = Chessboard('myBoard', 'start')

examples/1002-fen.example

@@ -1,16 +1,16 @@
 ===== id
 1002
 
-===== Name
-FEN String
-
+===== Name
+FEN String
+
 ===== Description
 Pass a <a href="docs.html#fen_string">FEN String</a> as the second argument to
 initialize the board to a specific position.
-
+
 ===== HTML
 <div id="myBoard" style="width: 400px"></div>
-
+
 ===== JS
 var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R'
 var board = Chessboard('myBoard', ruyLopez)

examples/1003-position-object.example

@@ -1,16 +1,16 @@
 ===== id
 1003
 
-===== Name
-Position Object
-
-===== Description
-Pass a <a href="docs.html#position_object">Position Object</a> as the second argument to initialize the board to a specific position.
-
-===== HTML
-<div id="myBoard" style="width: 400px"></div>
-
-===== JS
+===== Name
+Position Object
+
+===== Description
+Pass a <a href="docs.html#position_object">Position Object</a> as the second argument to initialize the board to a specific position.
+
+===== HTML
+<div id="myBoard" style="width: 400px"></div>
+
+===== JS
 var position = {
   d6: 'bK',
   d4: 'wP',

examples/1004-multiple-boards.example

@@ -1,25 +1,25 @@
 ===== id
 1004
 
-===== Name
-Multiple Boards
-
-===== Description
-You can have multiple boards on the same page.
-
+===== Name
+Multiple Boards
+
+===== Description
+You can have multiple boards on the same page.
+
 ===== CSS
 .small-board {
   display: inline-block;
   margin-right: 5px;
   width: 200px;
 }
-
+
 ===== HTML
 <div id="board1" class="small-board"></div>
 <div id="board2" class="small-board"></div>
 <div id="board3" class="small-board"></div>
-
-===== JS
+
+===== JS
 var board1 = Chessboard('board1', {
   position: 'start',
   showNotation: false

examples/2000-config-position.example

@@ -1,17 +1,17 @@
 ===== id
 2000
 
-===== Name
-Start Position
-
-===== Description
-Set the <a href="docs.html#config:position"><code class="js plain">position</code></a> property to <code class="js string">'start'</code> to initialize the board to the start position.
-
-===== HTML
-<div id="myBoard" style="width: 400px"></div>
-
-===== JS
-var config = {
-  position: 'start'
+===== Name
+Start Position
+
+===== Description
+Set the <a href="docs.html#config:position"><code class="js plain">position</code></a> property to <code class="js string">'start'</code> to initialize the board to the start position.
+
+===== HTML
+<div id="myBoard" style="width: 400px"></div>
+
+===== JS
+var config = {
+  position: 'start'
 }
-var board = Chessboard('myBoard', config)
+var board = Chessboard('myBoard', config)

examples/2001-config-orientation.example

@@ -1,18 +1,18 @@
 ===== id
 2001
 
-===== Name
-Orientation
-
-===== Description
-Use the <a href="docs.html#config:orientation"><code class="js plain">orientation</code></a> property to set board orientation.
-
-===== HTML
-<div id="myBoard" style="width: 400px"></div>
-
-===== JS
-var config = {
-  orientation: 'black',
-  position: 'start'
+===== Name
+Orientation
+
+===== Description
+Use the <a href="docs.html#config:orientation"><code class="js plain">orientation</code></a> property to set board orientation.
+
+===== HTML
+<div id="myBoard" style="width: 400px"></div>
+
+===== JS
+var config = {
+  orientation: 'black',
+  position: 'start'
 }
-var board = Chessboard('myBoard', config)
+var board = Chessboard('myBoard', config)