<base-ball> runners

by WebComponents

HTML

<style>
  #FIELD { background: lightgreen; width: 150px; margin: 20px }
</style>
<svg id=FIELD viewBox="0 0 250 250" transform="rotate(45)">
  <g fill="brown">
    <path id="home"   d="M 150 150 h 80 v 80 h -80 v -80z" fill="green"/>
    <path id="first"  d="M 150 20  h 80 v 80 h -80 v -80z"/>
    <path id="second" d="M  20 20  h 80 v 80 h -80 v -80z"/>
    <path id="third"  d="M 20 150  h 80 v 80 h -80 v -80z"/>
  </g>
  <circle id="player" cx="190" cy="190" r="30" fill="gold"/>
</svg>
<script>
	let field = document.getElementById("FIELD");
  let player = field.getElementById("player");
  function getCenter(el , { left, top, width, height } = el.getBoundingClientRect()) {
    let point = Object.assign(field.createSVGPoint(),{x:left+width/2, y:top+height/2})
                       .matrixTransform(field.getScreenCTM().inverse());
    return { cx:~~point.x, cy:~~point.y };
  }
  function runto(destination) {
  	let {cx:playerX,cy:playerY} = getCenter(player);
  	let {cx:baseX  ,cy:baseY  } = getCenter(field.getElementById(destination));
    let translateX = baseX - playerX;  
    let translateY = baseY - playerY;
    console.log(destination,translateX,translateY);
    let track = `<line x1="${playerX}" y1="${playerY}" x2="${baseX}" y2="${baseY}" stroke-width="10" stroke="black"/>`;
    field.insertAdjacentHTML("beforeend",track);
		return player.animate([ 
          { 
          //transform: `translate(${0}px,${0}px)` 
          }, 
          { transform: `translate(${translateX}px,${translateY}px)` }], 
        { duration:500, fill:"forwards", composite:"add" }
    ).finished; // return Promise
  }
  runto("first").then(() => runto("second")).then((x)=>{
  	console.log(x);
  });
</script>

CSS

img {
  transform: rotate(45deg);
}