JSFiddle - React, Tailwind, and code Playground

by Manawe

TypeScript

declare var d3;

/////////Config var///////
var matrixSize = 15;
var offset = 30;
//Create objectives and position them on the grid. The goal of reinforcement learning client would be to pick them up before it Receives  in a matrixSize*matrixSize array;
var objectives = [{ x: 0, y: 14 }, { x: 1, y: 6 }, { x: 3, y: 2 }, { x: 4, y: 12 }, { x: 7, y: 2 }, { x: 7, y: 6 }, { x: 9, y: 14 }, { x: 12, y: 8 }, { x: 14, y: 12 }, { x: 0, y: 14 }];


module Helpers {
    //Define standard margins for svg container
    var margin = {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
    };

    var width = 650 - margin.left - margin.right,
        height = 650 - margin.top - margin.bottom;

    export var createSvg = () => {
        return d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    }
    export var drawLine = (svg, startX, startY, endX, endY, colour) => {
        svg.append("line")
            .attr("x1", startX)
            .attr("y1", startY)
            .attr("x2", endX)
            .attr("y2", endY)
            .attr("stroke-width", "2")
            .attr("stroke", colour)
    }

    export var drawGridLines = (svg, matrixSize) => {
        var gridLinesContainer = svg.append("g").attr("class", "gridLines");
        var noOfGridLines = matrixSize, length = offset * noOfGridLines;
        var x = 0, y = 0;

        for (var i = 0; i <= noOfGridLines; i++) {
            drawLine(gridLinesContainer, x + offset * i, y, x + offset * i, y + length, "grey")
        }
        for (var j = 0; j <= noOfGridLines; j++) {
            drawLine(gridLinesContainer, x, y + offset * j, x + length, y + offset * j, "grey")
        }
    }

    export var drawGridObjective = (svg, objectives) => {
        var gridObjectives =...