JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<button onClick="pause()"> pause </button>
<button onClick="start()"> start </button>
<button onClick="animate();"> animate </button>
<p>blue-white player coordinates:</p>
<div id="coords">_</div>current time:
<div id="time">_</div>percentage:
<div width="100%" id="percentage">_</div>point at length:
<div id="point">_</div>
<div class="svgContainer">
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="field2" viewBox="0 0 1143 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
    <title>field_transparent2</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Soccer_field_-_empty" sketch:type="MSLayerGroup" transform="translate(571.500000, 912.000000) rotate(90.000000) translate(-571.500000, -912.000000) translate(-339.500000, 341.500000)">
            <rect id="Rectangle-path" fill="#32894A" sketch:type="MSShapeGroup" x="4.4187692e-12" y="0.583656536" width="1821.20323" height="1140.23271"></rect>
            <path d="M910.601616,32.2567873 L79.1827492,32.2567873 L79.1827492,1109.14323 L1742.02048,1109.14323 L1742.02048,32.2567873 L910.601616,32.2567873 L910.601616,1109.14323 L910.601616,32.2567873 Z" id="Shape" stroke="#FFFFFF" stroke-width="2" fill="#27AE60" sketch:type="MSShapeGroup"></path>
            <ellipse id="Oval" stroke="#FFFFFF" stroke-width="2" fill-opacity="0" fill="#000000" sketch:type="MSShapeGroup" cx="910.601616" cy="570.70001" rx="144.904431" ry="144.904573"></ellipse>
            <ellipse id="Oval" stroke="#FFFFFF" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="910.601616" cy="570.70001" rx="3.16730997" ry="3.16731307"></ellipse>
            <ellipse id="Oval" stroke="#FFFFFF" fill="#FFFFFF"...

CSS

body {
    font-size:10px;
    font-family:sans-serif;
}
.svgContainer {
    width:1143px;
  
    background-color:#eee;
}

JavaScript

var paused = 0;
var framesDisplayed = 0;
var kp = [];

function pause() {
    svg = document.getElementById("field2");
    if (paused) {
        svg.unpauseAnimations();
    } else {
        svg.pauseAnimations();
        gc = document.getElementById("blue1");
        p = document.getElementById("p3");
        document.getElementById('coords').innerHTML = gc.getBoundingClientRect().left + "," + gc.getBoundingClientRect().top;
        document.getElementById('time').innerHTML = svg.getCurrentTime();
        document.getElementById('percentage').innerHTML = svg.getCurrentTime() / 5 * 100;
        document.getElementById('point').innerHTML = p.getPointAtLength(svg.getCurrentTime() / 5).x + "," + p.getPointAtLength(svg.getCurrentTime() / 5).y;
    }
    paused = !paused;
}

function start() {
    svg = document.getElementById("field2");
    svg.setCurrentTime(0);
    svg.unpauseAnimations();

}

function animate() {

    kp = d3.select("#forward").attr("keyPoints").split(';');
    interval = 1000;
    d3.timer(doAnimate(), interval);
}

function doAnimate() {

    framesDisplayed++;
    console.log(kp[framesDisplayed]);
    if (framesDisplayed > 10) return true;
    p = d3.select("#p3");
    d3.select("#greenCircle")
        .attr("cx", p.getPointAtLength(kp[framesDisplayed]).x)
        .attr("cy", p.getPointAtLength(kp[framesDisplayed]).y);
    console.log(p.getPointAtLength(kp[framesDisplayed]).x);
}