JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<table>
<tbody>
    <tr>
        <td>0,0</td><td>1,0</td><td>2,0</td><td n>3,0</td>
    </tr>
    <tr>
        <td>0,1</td><td s>1,1</td><td s>2,1</td><td n>3,1</td>
    </tr>
    <tr>
        <td>0,2</td><td s>1,2</td><td s>2,2</td><td n>3,2</td>
    </tr>
    <tr>
        <td>0,3</td><td s>1,3</td><td s>2,3</td><td>3,3</td>
    </tr>
</tbody>
</table>
<code id="increment"></code>

CSS

table td{border:solid 1px gray; width: 50px; height: 50px; text-align: center;}

code span{
    display: inline-block;
    background: gainsboro;
    margin: 4px;
    padding: 2px 8px;
}
td[s]{
    background: gainsboro;
}
td[n]{
    background: skyblue;
}

JavaScript

var el_1 = {a: [1,1], b: [2,3]};
var el_2 = {a: [3,0], b: [3,2]};
var x = 0;
var y = 1;

function getInsideNodes($nodes){
    var A = $nodes.a;
    var B = $nodes.b;
    var result = []
	for( var i_row = A[y]; i_row <= B[y]; i_row++ ){
        for( var i_col = A[x]; i_col <= B[x]; i_col++ ){
        	result.push(i_col+','+i_row);
        }
    }
    return result;
}

// 1 y 3
// 0 y 2

function ifInside(original, consult){
	var A_o = original.a;
    var B_o = original.b;
    
    var numbers = [consult.a[x],consult.a[y],consult.b[x],consult.b[y]];
    var r = 0;
    
    for( number in numbers ){
        if( number < A_o[x] && number > B_o[x] ){ r+=1 }
        if( number < A_o[y] && number > B_o[y] ){ r+=1 }
    }
    return r;
}

console.log(getInsideNodes(el_1));
console.log(ifInside(el_1, el_2));