JSFiddle - React, Tailwind, and code Playground

by fableal

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<div id="container">
    
</div>

JavaScript

// this is already placed inside $(window).load(...)
console.log('ei');
// (1) some constants
var orig = { x: 40, y: 20 };
var size = { width: 375, height: 375 }; 
const FINDRATIO = 14;
var x_ratio = size.width / FINDRATIO;
var y_ratio = size.height / FINDRATIO;

// (2) Setup board
var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});
var layer = new Kinetic.Layer();
// (2.1) Lets draw some lines!
var x = orig.x, 
    y = orig.y, 
    i=FINDRATIO+1, 
    far_x = orig.x + size.width;
var line;
do{
    // constants: x, far_x, ratio
    line = new Kinetic.Line({
        points: [x, y, far_x, y],
        stroke: 'black',
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
    y+=y_ratio;
    layer.add(line);
    --i;
}while(i);

x = orig.x; 
y = orig.y;
far_y = orig.y + size.height;
i = FINDRATIO+1;
do {
    // constants: y, far_y, ratio
    line = new Kinetic.Line({
        points: [x, y, x, far_y],
        stroke: 'black',
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
    x+=x_ratio;
    layer.add(line);
    --i;
} while(i);

// (2.2) lets draw playable points
var circle;
for(x = orig.x; x <= far_x ; x += x_ratio) {
    for(y = orig.y; x <= far_y ; y += y_ratio) {
        circle = new Kinetic.Circle({
            x: x,
            y: y,
            radius: 6,
            fill: 'grey',
            stroke: 'black',
            strokeWidth: 1
        });
        
        // add the shape to the layer
        layer.add(circle);
    }
}
stage.add(layer);
console.log('oi');