JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.3.2/konva.js"></script>
<script src="https://raw.githubusercontent.com/mihaifm/linq/master/linq.js"></script>
<div class="chart"></div>

JavaScript

const container = document.querySelector('div.chart');
const gridColor = '#666';
const lineWidth = 1;
const width = 400;
const height = 400;
const numGridLines = 50;
const gridSpacing = width / numGridLines;
const antFillColor = 'red';

var squareCollection = [];
var stage = null;
var rectLayer = null;
var antLayer = null;

Konva.pixelRatio = 2;

var make = () => {
  stage = new Konva.Stage({
    container: container,
    width: width,
    height: height
  });
  let bgLayer = new Konva.Layer({});
  let bgRect = new Konva.Rect({
    fill: '#ccc',
    width: stage.width(),
    height: stage.height()
  });

  bgLayer.add(bgRect);
  stage.add(bgLayer);

  rectLayer = new Konva.Layer();
  
  for (let i = 0; i < numGridLines; i++) {
  	for (let j = 0; j < numGridLines; j++) {
      let rect = new Konva.Rect({
        x: i * gridSpacing,
        y: j * gridSpacing,
        width: gridSpacing,
        height: gridSpacing,
        fill: 'red',
        isOn: false
      });
      rect.name( `sq-${rect.x()}-${rect.y()}`);
      rectLayer.add(rect);
      
      squareCollection.push(rect);
    }
  }
  stage.add(rectLayer);
  
  antLayer = new Konva.Layer();
  stage.add(antLayer);
  
  init();
};
var returnXYCoord = (_i) => { return _i * gridSpacing; };

var curPos = { x: numGridLines / 2, y: numGridLines / 2 };
var init = () => {
	let x = 0;
  let dir = 1;
  for (let i = 0; i < 100; i++) {
    if ((returnXYCoord(curPos.x) > 0 && returnXYCoord(curPos.x) < width) && (returnXYCoord(curPos.y) > 0 && returnXYCoord(curPos.y) < width)) {      
      console.log(returnXYCoord(curPos.x), returnXYCoord(curPos.y));
      let sq = rectLayer.getChildren(function(node){
        return node.name() === `sq-${returnXYCoord(curPos.x)}-${returnXYCoord(curPos.y)}`;
      });
      if (sq.length) {
        if (sq[0].attrs.fill === 'red') {
          sq[0].fill('black');
					dir = 4 ? dir = 1 : dir = dir + 1;

					curPos.x += 1;
        } else {
          sq[0].fill('red');
					dir = 1 ? dir...