Rotate Tiles for Dungeon Twister on BGA

rotateDungeonTwisterTilesOnBga.js

// Open your DevTool console of your browser:
// mac/chrome ⌥ + ⌘ + j
// win/chrome ctrl + maj + j
// Copy and paste that code.
// Use `rotateTileCW(x)` or `rotateTileCCW(x)` to rotate clockwise or counterclockwise any tile x
// where x is the number of the tile from 0 to 7. Tiles are numbered from left to right, top to bottom.
// Use `reset()` or refresh the page to reset rotations.

const tiles = [0, 0, 0, 0, 0, 0, 0, 0];

getRotation = (el) => {
  const {
    style: { transform },
  } = el;
  if (!transform) {
    return 0;
  }
  return Number(transform.split("rotate(")[1]?.split("deg)")[0]);
};

rotate = (el, r) => {
  const rotation = getRotation(el);
  el.style.transform = `rotate(${r + rotation}deg)`;
};

setTransition = (el) => {
  el.style.transition = "all 0.5s ease-in-out 0s";
};

setInAContainer = (parent, elm) => {
  if (elm.getAttribute("isboardtoken")) {
    return elm;
  }
  const container = document.createElement("div");
  container.appendChild(elm);
  const top = elm.offsetTop;
  const left = elm.offsetLeft;
  container.style.position = "absolute";
  container.style.top = elm.style.top;
  container.style.left = elm.style.left;
  elm.style.top = "0px";
  elm.style.left = "0px";
  parent.appendChild(container);
  return container;
};

flagAsBoardToken = (boardToken) => {
  if (!boardToken.getAttribute("isboardtoken")) {
    boardToken.setAttribute("isboardtoken", "true");
  }
  return boardToken;
};

rotateTileTokens = (t, r) => {
  const {
    clientWidth: tileSideLength,
    offsetTop: tileOffsetTop,
    offsetLeft: tileOffsetLeft,
  } = $(`tile_${t}`);
  const boardTokensParent = $("board_tokens").children;
  const boardTokensChildren = ["illusions", "markers", "portcullis"];
  const boardTokens = boardTokensChildren.reduce((allBoardTokens, category) => {
    const tokens = [...boardTokensParent[category].children].map((token) =>
      setInAContainer(boardTokensParent[category], token)
    );
    return [...allBoardTokens, ...tokens];
  }, []);

  const allTokens = [
    ...$("tokens_objects").children,
    ...$("tokens_characters").children,
    ...boardTokens.map(flagAsBoardToken),
  ];
  allTokens.forEach(setTransition);

  const onTileTokens = allTokens.filter((token) => {
    const { offsetTop, offsetLeft } = token;
    const isBoardToken = token.getAttribute("isboardtoken");
    const diffX =
      (isBoardToken ? tileSideLength * 2 + offsetTop : offsetTop) -
      tileOffsetTop +
      1;
    const diffY = offsetLeft - tileOffsetLeft + 1;
    return (
      diffX >= 0 &&
      diffX < tileSideLength &&
      diffY >= 0 &&
      diffY < tileSideLength
    );
  });

  onTileTokens.forEach((token) => {
    const { clientWidth, offsetTop, offsetLeft } = token;
    const isBoardToken = token.getAttribute("isboardtoken");
    const toCenterX = tileOffsetLeft - offsetLeft + tileSideLength / 2;
    const toCenterY =
      tileOffsetTop -
      (isBoardToken ? tileSideLength * 2 + offsetTop : offsetTop) +
      tileSideLength / 2;
    token.style.transformOrigin = `${toCenterX}px ${toCenterY}px`;
    rotate(token, r);
  });
};

rotateTile = (t, r) => {
  const tile = $(`tile_${t}_art`);
  const rotation = getRotation(tile);
  tile.style.transform = `rotate(${r + rotation}deg)`;
  setTransition(tile);
  rotateTileTokens(t, r);
  tiles[t] += r;
};

rotateTileCW = (t) => rotateTile(t, 90);
rotateTileCCW = (t) => rotateTile(t, -90);
reset = () => tiles.forEach((r, i) => rotateTile(i, -r));