@alepot55/chessboardjs 1.1.0 → 2.0.3

package/chessboard.config.js

@@ -0,0 +1,145 @@
+const animationTime = {
+    'fast': 200,
+    'slow': 600,
+    'normal': 400,
+    'verySlow': 1000,
+    'veryFast': 100
+};
+
+const boolValues = {
+    'true': true,
+    'false': false,
+    'none': false,
+    1: true,
+    0: false
+};
+
+const transitionFunctions = {
+    'ease': 'ease',
+    'linear': 'linear',
+    'ease-in': 'ease-in',
+    'ease-out': 'ease-out',
+    'ease-in-out': 'ease-in-out'
+};
+
+class ChessboardConfig {
+    constructor(settings) {
+        const defaults = {
+            id: 'board',
+            position: 'start',
+            orientation: 'w',
+            mode: 'normal',
+            size: 'auto',
+            draggable: true,
+            hints: true,
+            clickable: true,
+            movableColors: 'both',
+            moveHighlight: true,
+            overHighlight: true,
+            moveAnimation: 'ease',
+            moveTime: 'fast',
+            dropOffBoard: 'snapback',
+            snapbackTime: 'fast',
+            snapbackAnimation: 'ease',
+            fadeTime: 'fast',
+            fadeAnimation: 'ease',
+            ratio: 0.9,
+            piecesPath: 'https://cdn.jsdelivr.net/npm/@alepot55/chessboardjs/default_pieces',
+            onMove: () => true,
+            onMoveEnd: () => true,
+            onChange: () => true,
+            onDragStart: () => true,
+            onDragMove: () => true,
+            onDrop: () => true,
+            onSnapbackEnd: () => true,
+            whiteSquare: '#f0d9b5',
+            blackSquare: '#b58863',
+            highlight: 'yellow',
+            selectedSquareWhite: '#ababaa',
+            selectedSquareBlack: '#ababaa',
+            movedSquareWhite: '#f1f1a0',
+            movedSquareBlack: '#e9e981',
+            choiceSquare: 'white',
+            coverSquare: 'black',
+            hintColor: '#ababaa'
+        };
+
+        const config = Object.assign({}, defaults, settings);
+
+        this.id_div = config.id_div;
+        this.position = config.position;
+        this.orientation = config.orientation;
+        this.mode = config.mode;
+        this.dropOffBoard = config.dropOffBoard;
+        this.size = config.size;
+        this.movableColors = config.movableColors;
+        this.moveAnimation = config.moveAnimation;
+        this.snapbackAnimation = config.snapbackAnimation;
+        this.fadeAnimation = config.fadeAnimation;
+        this.piecesPath = config.piecesPath;
+        this.onMove = config.onMove;
+        this.onMoveEnd = config.onMoveEnd;
+        this.onChange = config.onChange;
+        this.onDragStart = config.onDragStart;
+        this.onDragMove = config.onDragMove;
+        this.onDrop = config.onDrop;
+        this.onSnapbackEnd = config.onSnapbackEnd;
+
+        this.hints = this.setBoolean(config.hints);
+        this.clickable = this.setBoolean(config.clickable);
+        this.draggable = this.setBoolean(config.draggable);
+        this.moveHighlight = this.setBoolean(config.moveHighlight);
+        this.overHighlight = this.setBoolean(config.overHighlight);
+
+        this.moveTime = this.setTime(config.moveTime)
+        this.snapbackTime = this.setTime(config.snapbackTime);
+        this.fadeTime = this.setTime(config.fadeTime);
+
+        this.setCSSProperty('pieceRatio', config.ratio);
+        this.setCSSProperty('whiteSquare', config.whiteSquare);
+        this.setCSSProperty('blackSquare', config.blackSquare);
+        this.setCSSProperty('highlightSquare', config.highlight);
+        this.setCSSProperty('selectedSquareWhite', config.selectedSquareWhite);
+        this.setCSSProperty('selectedSquareBlack', config.selectedSquareBlack);
+        this.setCSSProperty('movedSquareWhite', config.movedSquareWhite);
+        this.setCSSProperty('movedSquareBlack', config.movedSquareBlack);
+        this.setCSSProperty('choiceSquare', config.choiceSquare);
+        this.setCSSProperty('coverSquare', config.coverSquare);
+        this.setCSSProperty('hintColor', config.hintColor);
+
+        // Configure modes
+        if (this.mode === 'creative') {
+            this.onlyLegalMoves = false;
+            this.hints = false;
+        } else if (this.mode === 'normal') {
+            this.onlyLegalMoves = true;
+        }
+    }
+
+    setCSSProperty(property, value) {
+        document.documentElement.style.setProperty(`--${property}`, value);
+    }
+
+    setOrientation(orientation) {
+        this.orientation = orientation;
+        return this;
+    }
+
+    setTime(value) {
+        if (typeof value === 'number') return value;
+        if (value in animationTime) return animationTime[value];
+        throw new Error('Invalid time value');
+    }
+
+    setBoolean(value) {
+        if (typeof value === 'boolean') return value;
+        throw new Error('Invalid boolean value');
+    }
+
+    setTransitionFunction(value) {
+        if (transitionFunctions[value]) return transitionFunctions[value];
+        throw new Error('Invalid transition function');
+    }
+}
+
+export default ChessboardConfig;

package/chessboard.css

@@ -1,106 +1,105 @@
-:root {
-    --dimBoard: 600px;
-    --pieceRatio: 0.9;
-
-    --blackSquare: #b58863;
-    --whiteSquare: #f0d9b5;
-    --highlightSquare: yellow;
-    --selectedSquareWhite: #ababaa;
-    --selectedSquareBlack: #ababaa;
-    --movedSquareBlack: #e9e981;
-    --movedSquareWhite: #f1f1a0;
-    --choiceSquare: white;
-    --coverSquare: black;
-    --hintColor: #ababaa;
-}
-
-.board {
-    display: grid;
-    grid-template: repeat(8, 1fr) / repeat(8, 1fr);
-    width: var(--dimBoard);
-    height: var(--dimBoard);
-    background-color: var(--blackSquare);
-}
-
-.square {
-    width: calc(var(--dimBoard) / 8);
-    height: calc(var(--dimBoard) / 8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.piece {
-    position: absolute;
-    z-index: 10;
-    width: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
-    height: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
-
-    /* No selection */
-    -webkit-user-select: none;
-    /* Safari */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* IE10+/Edge */
-    user-select: none;
-    /* Standard */
-}
-
-.choicable {
-    z-index: 25;
-}
-
-.hint {
-    background: var(--hintColor);
-    width: calc(calc(var(--dimBoard) / 8) / 3.5);
-    height: calc(calc(var(--dimBoard) / 8) / 3.5);
-    position: absolute;
-    z-index: 5;
-    border-radius: 50%;
-    opacity: 0.8;
-}
-
-.catchable {
-    width: calc(calc(var(--dimBoard) / 8) * 0.9);
-    height: calc(calc(var(--dimBoard) / 8) * 0.9);
-}
-
-.blackSquare {
-    background: var(--blackSquare);
-}
-
-.whiteSquare {
-    background: var(--whiteSquare);
-}
-
-.selectedSquareWhite {
-    background: var(--selectedSquareWhite);
-}
-
-.selectedSquareBlack {
-    background: var(--selectedSquareBlack);
-}
-
-.movedSquareBlack {
-    background: var(--movedSquareBlack);
-}
-
-.movedSquareWhite {
-    background: var(--movedSquareWhite);
-}
-
-.choice {
-    background: var(--choiceSquare);
-    z-index: 20;
-}
-
-.cover {
-    background: var(--coverSquare);
-    opacity: 0.5;
-    z-index: 20;
-}
-
-.highlighted {
-    box-shadow: inset 0 0 10px var(--highlightSquare);
+:root {
+    --dimBoard: 600px;
+    --pieceRatio: 0.9;
+
+    --blackSquare: #b58863;
+    --whiteSquare: #f0d9b5;
+    --highlightSquare: yellow;
+    --selectedSquareWhite: #ababaa;
+    --selectedSquareBlack: #ababaa;
+    --movedSquareBlack: #e9e981;
+    --movedSquareWhite: #f1f1a0;
+    --choiceSquare: white;
+    --coverSquare: black;
+    --hintColor: #ababaa;
+}
+
+.board {
+    display: grid;
+    grid-template: repeat(8, 1fr) / repeat(8, 1fr);
+    width: var(--dimBoard);
+    height: var(--dimBoard);
+}
+
+.square {
+    width: calc(var(--dimBoard) / 8);
+    height: calc(var(--dimBoard) / 8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.piece {
+    position: absolute;
+    z-index: 10;
+    width: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
+    height: calc(calc(var(--dimBoard) / 8) * var(--pieceRatio));
+
+    /* No selection */
+    -webkit-user-select: none;
+    /* Safari */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE10+/Edge */
+    user-select: none;
+    /* Standard */
+}
+
+.choicable {
+    z-index: 50;
+}
+
+.hint {
+    background: var(--hintColor);
+    width: calc(calc(var(--dimBoard) / 8) / 3.5);
+    height: calc(calc(var(--dimBoard) / 8) / 3.5);
+    position: absolute;
+    z-index: 5;
+    border-radius: 50%;
+    opacity: 0.8;
+}
+
+.catchable {
+    width: calc(calc(var(--dimBoard) / 8) * 0.9);
+    height: calc(calc(var(--dimBoard) / 8) * 0.9);
+}
+
+.blackSquare {
+    background: var(--blackSquare);
+}
+
+.whiteSquare {
+    background: var(--whiteSquare);
+}
+
+.selectedSquareWhite {
+    background: var(--selectedSquareWhite);
+}
+
+.selectedSquareBlack {
+    background: var(--selectedSquareBlack);
+}
+
+.movedSquareBlack {
+    background: var(--movedSquareBlack);
+}
+
+.movedSquareWhite {
+    background: var(--movedSquareWhite);
+}
+
+.choice {
+    background: var(--choiceSquare);
+    z-index: 30;
+}
+
+.cover {
+    background: var(--coverSquare);
+    opacity: 0.5;
+    z-index: 25;
+}
+
+.highlighted {
+    box-shadow: inset 0 0 10px var(--highlightSquare);
 }