function moveTile(tileId, tileLoc, nullLoc) {
  tileState['tileLoc'][tileId] = nullLoc;
  tileState['nullLoc'] = tileLoc;

  const tileEl = document.getElementById(tileId);

  const direction = findAdjacencyDirection(tileLoc, nullLoc);
  // need to move the tile 100% of the x or y direction, plus 3px to allow for grid-gap
  const moveX = `calc(${direction[0] * -100}% + ${direction[0] * -5}px)`;
  const moveY = `calc(${direction[1] * -100}% + ${direction[1] * -5}px)`;

  // The .moving class can't exist until we know what direction it needs to move in.
  // So to add the rule, we add it to the stylesheet, not to the element itself.
  const styleSheetIndex = Object.keys(document.styleSheets).find((key) => document.styleSheets[key].href.includes('/style.css'));
  document.styleSheets[styleSheetIndex].insertRule(`#${tileId}.moving { 
      transform: translate(${moveX}, ${moveY}); 
  }`);

  tileEl.addEventListener('transitionend', function() {
    // Note: new rules are added at 0, so we know we can remove the rule we added earlier from position 0.
    // We'll still check in case we had a race condition and it's already gone :)
    const cssRules = document.styleSheets[styleSheetIndex].cssRules;
    const styleRuleIndex = Object.keys(cssRules).find((key) => cssRules[key].selectorText === `#${tileId}.moving`);
    if (styleRuleIndex) {
      document.styleSheets[styleSheetIndex].deleteRule(styleRuleIndex);
    }

    tileEl.classList.remove('moving');
    drawGame();
  });

  tileEl.classList.add('moving');
}
// We then redraw the board with all tiles on the grid once the transition's done.
We then redraw the board with all tiles on the grid once the transition's done.
We then redraw the board with all tiles on the grid once the transition ' s done .
function moveTile(tileId, tileLoc, nullLoc) {
  tileState['tileLoc'][tileId] = nullLoc;
  tileState['nullLoc'] = tileLoc;
  const tileEl = document.getElementById(tileId);
  const direction = findAdjacencyDirection(tileLoc, nullLoc);
  const moveX = `calc(${direction[0] * -100}% + ${direction[0] * -5}px)`;
  const moveY = `calc(${direction[1] * -100}% + ${direction[1] * -5}px)`;
  const styleSheetIndex = Object.keys(document.styleSheets).find((key) => document.styleSheets[key].href.includes('/style.css'));
  document.styleSheets[styleSheetIndex].insertRule(`#${tileId}.moving { 
      transform: translate(${moveX}, ${moveY}); 
  }`);
  tileEl.addEventListener('transitionend', function() {
    const cssRules = document.styleSheets[styleSheetIndex].cssRules;
    const styleRuleIndex = Object.keys(cssRules).find((key) => cssRules[key].selectorText === `#${tileId}.moving`);
    if (styleRuleIndex) {
      document.styleSheets[styleSheetIndex].deleteRule(styleRuleIndex);
    }
    tileEl.classList.remove('moving');
    drawGame();
  });
  tileEl.classList.add('moving');
}
function moveTile ( tileId , tileLoc , nullLoc ) { tileState [ 'tileLoc' ] [ tileId ] = nullLoc ; tileState [ 'nullLoc' ] = tileLoc ; const tileEl = document . getElementById ( tileId ) ; const direction = findAdjacencyDirection ( tileLoc , nullLoc ) ; const moveX = ` ${ direction [ 0 ] * - 100 } ${ direction [ 0 ] * - 5 } ` ; const moveY = ` ${ direction [ 1 ] * - 100 } ${ direction [ 1 ] * - 5 } ` ; const styleSheetIndex = Object . keys ( document . styleSheets ) . find ( ( key ) => document . styleSheets [ key ] . href . includes ( '/style.css' ) ) ; document . styleSheets [ styleSheetIndex ] . insertRule ( ` ${ tileId } ${ moveX } ${ moveY } ` ) ; tileEl . addEventListener ( 'transitionend' , function ( ) { const cssRules = document . styleSheets [ styleSheetIndex ] . cssRules ; const styleRuleIndex = Object . keys ( cssRules ) . find ( ( key ) => cssRules [ key ] . selectorText === ` ${ tileId } ` ) ; if ( styleRuleIndex ) { document . styleSheets [ styleSheetIndex ] . deleteRule ( styleRuleIndex ) ; } tileEl . classList . remove ( 'moving' ) ; drawGame ( ) ; } ) ; tileEl . classList . add ( 'moving' ) ; }
We then redraw the board with all tiles on the grid once the transition's done.
We then redraw the board with all tiles on the grid once the transition ' s done .
// need to move the tile 100% of the x or y direction, plus 3px to allow for grid-gap // The .moving class can't exist until we know what direction it needs to move in. // So to add the rule, we add it to the stylesheet, not to the element itself. // Note: new rules are added at 0, so we know we can remove the rule we added earlier from position 0. // We'll still check in case we had a race condition and it's already gone :)