remove piece IDs and unused <img> elements; animate click moves

css/chess.css

@@ -338,20 +338,20 @@ button:disabled .silhouette {
    height: 100%;
 }
 
-#cb_phantom .cb-lt-piece,
+.cb-phantom .cb-lt-piece,
-#cb_phantom .cb-dk-piece {
+.cb-phantom .cb-dk-piece {
    top: 5%;
 }
 
-#cb_board #cb_phantom .cb-lt-piece,
+#cb_board .cb-phantom .cb-lt-piece,
-#cb_board.cb-reversed #cb_phantom .cb-dk-piece {
+#cb_board.cb-reversed .cb-phantom .cb-dk-piece {
    left: 15%;
    right: auto;
    clip-path: inset(0 15% 0 0);
 }
 
-#cb_board #cb_phantom .cb-dk-piece,
+#cb_board .cb-phantom .cb-dk-piece,
-#cb_board.cb-reversed #cb_phantom .cb-lt-piece {
+#cb_board.cb-reversed .cb-phantom .cb-lt-piece {
    left: auto;
    right: 15%;
    clip-path: inset(0 0 0 15%);

index.html

@@ -253,25 +253,6 @@
 				<div class="badge jitsi-badge"><a id="jitsi_link" href="https://meet.jit.si/PacoSako" rel="noopener noreferer" target="_blank"><img src="<%=require('./svg/jitsi-logo-blue.svg')%>" alt="Jitsi Meet" title="Jitsi Meet"></a></div>
 				<div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" rel="noopener noreferer" target="_blank"><img src="<%=require('./png/gogs.png')%>" alt="Source Code" title="Source Code"></a></div>
 			</div>
-
-			<div id="cb_hidden" style="display: none">
-				<div id="cb_phantom" class="cb-phantom"></div>
-
-				<div id="cb_pieces" style="display: none">
-					<div id="cb_piece_kd" class="cb-piece cb-dk-piece cb-king"   ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_king_right"   alt="kd"></div>
-					<div id="cb_piece_qd" class="cb-piece cb-dk-piece cb-queen"  ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_queen_right"  alt="qd"></div>
-					<div id="cb_piece_bd" class="cb-piece cb-dk-piece cb-bishop" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_bishop_right" alt="bd"></div>
-					<div id="cb_piece_nd" class="cb-piece cb-dk-piece cb-knight" ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_knight_right" alt="nd"></div>
-					<div id="cb_piece_rd" class="cb-piece cb-dk-piece cb-rook"   ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_rook_right"   alt="rd"></div>
-					<div id="cb_piece_pd" class="cb-piece cb-dk-piece cb-pawn"   ><img src="<%=require('./svg/traditional-theme.svg')%>#dark_pawn_right"   alt="pd"></div>
-					<div id="cb_piece_kl" class="cb-piece cb-lt-piece cb-king"   ><img src="<%=require('./svg/traditional-theme.svg')%>#light_king_left"   alt="kl"></div>
-					<div id="cb_piece_ql" class="cb-piece cb-lt-piece cb-queen"  ><img src="<%=require('./svg/traditional-theme.svg')%>#light_queen_left"  alt="ql"></div>
-					<div id="cb_piece_bl" class="cb-piece cb-lt-piece cb-bishop" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_bishop_left" alt="bl"></div>
-					<div id="cb_piece_nl" class="cb-piece cb-lt-piece cb-knight" ><img src="<%=require('./svg/traditional-theme.svg')%>#light_knight_left" alt="nl"></div>
-					<div id="cb_piece_rl" class="cb-piece cb-lt-piece cb-rook"   ><img src="<%=require('./svg/traditional-theme.svg')%>#light_rook_left"   alt="rl"></div>
-					<div id="cb_piece_pl" class="cb-piece cb-lt-piece cb-pawn"   ><img src="<%=require('./svg/traditional-theme.svg')%>#light_pawn_left"   alt="pl"></div>
-				</div>
-			</div>
 		</div>
 	</body>
 </html>

js/pacosako_ui.js

@@ -36,41 +36,42 @@ $(function (){
    let visibleGame = new PS.Game(currentGame);
    let cancelGameCallback = function() {};
 
-   function pieceTypeCode(type) {
+   function pieceTypeClass(type) {
       if (type === PS.KING) {
-         return 'k';
+         return 'cb-king';
       } else if (type === PS.QUEEN) {
-         return 'q';
+         return 'cb-queen';
       } else if (type === PS.ROOK) {
-         return 'r';
+         return 'cb-rook';
       } else if (type === PS.KNIGHT) {
-         return 'n';
+         return 'cb-knight';
       } else if (type === PS.BISHOP) {
-         return 'b';
+         return 'cb-bishop';
       } else if (type === PS.PAWN) {
-         return 'p';
+         return 'cb-pawn';
       } else {
          throw new Error(`unknown piece type: ${type}`);
       }
    }
 
-   function pieceSideCode(side) {
+   function pieceSideClass(side) {
       if (side === PS.LIGHT) {
-         return 'l';
+         return 'cb-lt-piece';
       } else if (side === PS.DARK) {
-         return 'd';
+         return 'cb-dk-piece';
       } else {
          throw new Error(`unknown side: ${side}`);
       }
    }
 
-   function pieceCode(side, type) {
-      return pieceTypeCode(type) + pieceSideCode(side);
-   }
-
    function cbSquare(where) {
       if (where === PS.PHANTOM) {
-         return $('#cb_phantom').first()
+         let square = $('#cb_phantom');
+         if (square.length < 1) {
+            square = $(`<div id="cb_phantom" class="cb-phantom"></div>`);
+            square.hide().appendTo('body');
+         }
+         return square;
       } else if (where.match(/^[a-h][1-8]$/)) {
          return $('#cb_' + where).first()
       } else {
@@ -78,10 +79,21 @@ $(function (){
       }
    }
 
-   function cbSquareLocation(square) {
+   function cbPiece(where, side) {
-      const id = square.id || square[0].id;
+      const square = cbSquare(where);
+      if (!square) {
+         return null;
+      } else if (side === true) {
+         return square.find('.cb-piece');
+      } else {
+         return square.find('.' + pieceSideClass(side)).first();
+      }
+   }
 
-      if (id === 'cb_phantom') {
+   function cbSquareLocation(square) {
+      const id = $(square).attr('id');
+
+      if (id === "cb_phantom") {
          return PS.PHANTOM;
       }
 
@@ -116,7 +128,7 @@ $(function (){
       }
    }
 
-   function pieceEndMove(piece, to) {
+   function pieceEndMove(piece, to, animate) {
       let from = piece.data('location');
       piece.appendTo('#cb_hidden');
 
@@ -125,10 +137,11 @@ $(function (){
          currentGame.move(from, to, meta);
       } catch (err) {
          debug('unable to move', err);
+         animate = false;
       }
 
       $('#cb_board').data('last_state', currentGame.moves);
-      setCurrentGame(currentGame);
+      setCurrentGame(currentGame, animate);
       putState();
    }
 
@@ -139,7 +152,7 @@ $(function (){
          return;
       }
 
-      pieceEndMove(selected, cbSquareLocation(this));
+      pieceEndMove(selected, cbSquareLocation(this), true);
    }
 
    function squareDropDestination(ev, ui) {
@@ -184,22 +197,16 @@ $(function (){
       dragged.removeData('saved-style');
       dragged.css('z-index', '');
       if ($('#cb_board').data('dragging_from') === dragged.data('location')) {
+         if ($('#cb_board .cb-selected').length < 1) {
             renderBoard();
          }
       }
-
-   function placePiece(where, side, type, suffix) {
-      const code = pieceCode(side, type);
-      const piece_id = 'cb_piece_' + code + '_' + suffix;
-      let piece = $('#' + piece_id);
-      if (piece.length < 1) {
-         piece = $('#cb_piece_' + code).clone().prop({ id: piece_id });
    }
-      piece.finish();
+
-      piece.attr('id', piece_id);
+   function placePiece(where, side, type) {
-      piece.removeClass('cb-selected');
+      const piece = $(`<div class="cb-piece"></div>`);
-      piece.removeClass('cb-in-check');
+      piece.addClass(pieceSideClass(side));
-      piece.removeAttr('style');
+      piece.addClass(pieceTypeClass(type));
       piece.data({ side: side, type: type, location: where });
       piece.appendTo(cbSquare(where));
       piece.draggable({
@@ -215,33 +222,26 @@ $(function (){
 
    function renderBoard(animate) {
       $('#cb_board').removeData('dragging_from');
-      $('#cb_board .cb-piece').finish();
+      $('#cb_board .cb-piece').remove();
       $('#cb_board .cb-square').off('click.select');
       $('#cb_board .cb-square').off('click.unselect');
       $('#cb_board .cb-square').off('click.destination');
-      $('#cb_board .cb-piece.cb-selected').removeClass('cb-selected');
-      $('#cb_board .cb-piece.cb-in-check').removeClass('cb-in-check');
-      $('#cb_board .cb-piece').removeAttr('style').appendTo('#cb_hidden');
       $('#cb_board .cb-start').removeClass('cb-start');
       $('#cb_board .cb-end').removeClass('cb-end');
       $('#cb_board .cb-legal').removeClass('cb-legal');
-      $('#cb_phantom').appendTo('#cb_hidden');
       $('#cb_explain_check').text('');
+      $('#cb_phantom').remove();
 
       const game = visibleGame;
       const board = game.board;
 
       for (const side of [PS.LIGHT, PS.DARK]) {
-         const counters = {};
          for (const row of PS.ROWS) {
             for (const column of PS.COLUMNS) {
                const here = column + row;
                const type = board.getPiece(side, here);
                if (type !== PS.EMPTY) {
-                  if (!counters[type]) {
+                  placePiece(here, side, type);
-                     counters[type] = 0;
-                  }
-                  placePiece(here, side, type, String(++counters[type]));
                }
             }
          }
@@ -258,10 +258,8 @@ $(function (){
          }
 
          if (lastMove.from && lastMove.to && animate) {
-            let pieces = cbSquare(lastMove.to).find('.cb-piece');
+            const sideMoved = lastMove.alongside ? true : lastMove.side;
-            if (!lastMove.alongside) {
+            const pieces = cbPiece(lastMove.to, sideMoved);
-               pieces = pieces.filter(lastMove.side === PS.LIGHT ? '.cb-lt-piece' : '.cb-dk-piece');
-            }
             if (pieces.length > 0) {
                const fromRect = cbSquare(lastMove.from)[0].getBoundingClientRect();
                const toRect = cbSquare(lastMove.to)[0].getBoundingClientRect();
@@ -297,12 +295,12 @@ $(function (){
 
       const liveView = !game.canRedo;
       const playing = game.status === PS.PLAYING;
-      const clss = game.player === PS.LIGHT ? '.cb-lt-piece' : '.cb-dk-piece';
+      const clss = pieceSideClass(game.player);
 
       const phantom = board.phantom;
       if (phantom) {
-         const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type, 'ph');
+         const piece = placePiece(PS.PHANTOM, phantom.side, phantom.type);
-         cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from));
+         cbSquare(PS.PHANTOM).appendTo(cbSquare(phantom.from)).show();
 
          if (liveView && playing) {
             piece.draggable('enable');
@@ -310,13 +308,13 @@ $(function (){
             pieceStartMove(piece, 'click');
          }
       } else if (liveView && playing) {
-         const pieces = $('#cb_board ' + clss)
+         const pieces = $('#cb_board .' + clss)
          pieces.parent().on('click.select', squareClickSelect);
          pieces.draggable('enable');
       }
 
       const check = game.isInCheck();
-      const king = $('#cb_board ' + clss + '.cb-king');
+      const king = $('#cb_board .cb-king.' + clss);
 
       if (check) {
          king.addClass('cb-in-check');