Change the cursor to match the selected spare piece when hovering ove…

…r the spare piece. Still need to make the same cursor appear when hovering over the board.
waiyan112 · Feb 18, 2017 · 2f349fd · 2f349fd
1 parent cf7eada
commit 2f349fd
Show file tree

Hide file tree

Showing 15 changed files with 7 additions and 2 deletions.
diff --git a/public/cursors/black-bishop.cur b/public/cursors/black-bishop.cur
diff --git a/public/cursors/black-king.cur b/public/cursors/black-king.cur
diff --git a/public/cursors/black-knight.cur b/public/cursors/black-knight.cur
diff --git a/public/cursors/black-pawn.cur b/public/cursors/black-pawn.cur
diff --git a/public/cursors/black-queen.cur b/public/cursors/black-queen.cur
diff --git a/public/cursors/black-rook.cur b/public/cursors/black-rook.cur
diff --git a/public/cursors/trash.cur b/public/cursors/trash.cur
diff --git a/public/cursors/white-bishop.cur b/public/cursors/white-bishop.cur
diff --git a/public/cursors/white-king.cur b/public/cursors/white-king.cur
diff --git a/public/cursors/white-knight.cur b/public/cursors/white-knight.cur
diff --git a/public/cursors/white-pawn.cur b/public/cursors/white-pawn.cur
diff --git a/public/cursors/white-queen.cur b/public/cursors/white-queen.cur
diff --git a/public/cursors/white-rook.cur b/public/cursors/white-rook.cur
diff --git a/public/stylesheets/boardEditor.css b/public/stylesheets/boardEditor.css
@@ -38,7 +38,6 @@ body.dark #board_editor .spare.white {
   height: 58.102px;
 }
 #board_editor .spare piece {
-  cursor: pointer;
   width: 100%;
   height: 100%;
 }

diff --git a/ui/editor/src/view.js b/ui/editor/src/view.js
@@ -141,8 +141,14 @@ function sparePieces(ctrl, color, orientation, position) {
     class: ['spare', position, 'orientation-' + orientation, color].join(' ')
   }, ['pointer', 'king', 'queen', 'rook', 'bishop', 'knight', 'pawn', 'trash'].map(function(role) {
     var piece = ((['pointer', 'trash'].indexOf(role) === -1) ? color + ' ' : '') + role,
+      selectedParts = ctrl.vm.selected().split(' '),
+      cursorName = selectedParts[0] + ((selectedParts.length >= 2) ? '-' + selectedParts[1] : ''),
+      cursor = (cursorName === 'pointer') ?
+        // http://www.cursors-4u.com
+        cursorName : 'url(/assets/cursors/' + cursorName + '.cur), default !important',
       pieceElement = {
-        class: piece
+        class: piece,
+        style: 'cursor: ' + cursor
       },
       containerClass = 'no-square' + ((ctrl.vm.selected() === piece) ? ' selected-square' : '');