Highlight the last piece clicked in the editor.

public/stylesheets/boardEditor.css

@@ -14,10 +14,10 @@
   box-sizing: border-box;
   box-shadow: 0 2px 3px rgba(0,0,0,0.3) inset;
 }
-#board_editor .spare.black {
+#board_editor .spare.black, #board_editor .spare.white .selected-square {
   background: #888;
 }
-#board_editor .spare.white {
+#board_editor .spare.white, #board_editor .spare.black .selected-square {
   background: #ccc;
 }
 body.dark #board_editor .spare.white {

ui/editor/src/ctrl.js

@@ -13,7 +13,8 @@ module.exports = function(cfg) {
   this.trans = partial(editor.trans, this.data.i18n);
 
   this.vm = {
-    redirecting: false
+    redirecting: false,
+    selected: m.prop(null)
   };
 
   this.extraPositions = [{

ui/editor/src/view.js

@@ -140,11 +140,19 @@ function sparePieces(ctrl, color, orientation, position) {
   return m('div', {
     class: ['spare', position, 'orientation-' + orientation, color].join(' ')
   }, ['king', 'queen', 'rook', 'bishop', 'knight', 'pawn'].map(function(role) {
-    return m('div.no-square', m('piece', {
-      class: color + ' ' + role,
-      'data-color': color,
-      'data-role': role
-    }))
+    var piece = color + ' ' + role;
+
+    return m('div', {
+        class: 'no-square' + ((ctrl.vm.selected() === piece) ? ' selected-square' : ''),
+        onmousedown: function() {
+          ctrl.vm.selected(piece);
+        }
+      }, m('piece', {
+        class: piece,
+        'data-color': color,
+        'data-role': role
+      })
+    );
   }));
 }