x : <input type="range" min="0" max="5" step="1" value="0" onchange="x=-1+parseInt(this.value);draw();" /><br>
y : <input type="range" min="0" max="5" step="1" value="0" onchange="y=-1+parseInt(this.value);draw();" /><br>
w : <input type="range" min="0" max="6" step="1" value="0" onchange="w=2+parseInt(this.value);draw();" /><br>
h : <input type="range" min="0" max="6" step="1" value="0" onchange="h=2+parseInt(this.value);draw();" /><br>
<hr>
x2: <input type="range" min="0" max="5" step="1" value="0" onchange="x2=-1+parseInt(this.value);draw();" /><br>
y2: <input type="range" min="0" max="5" step="1" value="0" onchange="y2=-1+parseInt(this.value);draw();" /><br>
w2: <input type="range" min="0" max="6" step="1" value="0" onchange="w2=2+parseInt(this.value);draw();" /><br>
h2: <input type="range" min="0" max="6" step="1" value="0" onchange="h2=2+parseInt(this.value);draw();" /><br>
<input type="button" value="save" onclick="save();"><br>
<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
canvas.width=canvas.height=512;
canvas.style.width=canvas.style.height='512px';
var ctx = canvas.getContext('2d');
var MAX = 4;
var colors = ['rgba(255,153,0,0.5)','rgba(255,255,255,0.7)','rgba(0,102,0,0.3)','rgba(0,0,102,0.3)','rgba(102,0,0,0.3)','rgba(255,0,0,0.4)','rgba(0,255,0,0.4)','rgba(0,0,255,0.4)','rgba(255,255,0,0.4)','rgba(255,0,255,0.4)','rgba(0,255,255,0.4)'];
var models = [];
  
let x = -1;
let y = -1;
let w = 2;
let h = 2;
let x2 = -1;
let y2 = -1;
let w2 = 2;
let h2 = 2;

function overlapsFrame(oldRect,x,y,w,h) {
  let a_over = overlapsRect(oldRect,x+1,y+1,w-2,h-2);
  let b_over = overlapsRect({x:oldRect.x+1,y:oldRect.y+1,w:oldRect.w-2,h:oldRect.h-2},x,y,w,h);
  if (a_over<=0) return false;
  if (b_over<=0) return false;
  console.log('a_b_over', a_over, b_over);
  //if (!edgeInCenter(oldRect.x,oldRect.y,oldRect.w,oldRect.h)) return false;
  //if (!edgeInCenter(x,y,w,h)) return false;
  
  let newRect = new Rect(x,y,w,h,'');
  let b = false;
  for (let i = 0; i < oldRect.tileFrame.length; i++) {
    for (let j = 0; j < newRect.tileFrame.length; j++) {
      if (oldRect.tileFrame[i].x >= 0 && oldRect.tileFrame[i].x < MAX &&
          oldRect.tileFrame[i].x == newRect.tileFrame[j].x &&
          oldRect.tileFrame[i].y >= 0 && oldRect.tileFrame[i].y < MAX &&
          oldRect.tileFrame[i].y == newRect.tileFrame[j].y) 
      {   
        b=true; 
      }
    }
    for (let j = 0; j < oldRect.tileFrame.length; j++) {
      if (i < oldRect.tileFrame.length-1 && 
          oldRect.isNeighbor(oldRect.tileFrame[i].x,oldRect.tileFrame[i].y,
                             oldRect.tileFrame[j].x,oldRect.tileFrame[j].y) &&
          newRect.hasCoordinate(oldRect.tileFrame[i].x,oldRect.tileFrame[i].y) &&
          newRect.hasCoordinate(oldRect.tileFrame[j].x,oldRect.tileFrame[j].y)
          ) 
      {
        //BOTH HAVE THE SAME neightbors!
        return false;
      }
    }
  }
  return b;
}

  function rotateModel(mod) {
    for (let j = 0; j < 4; j++)
    {
      //270 degrees
      let _rect = [];
      for (let i = 0; i < mod.rects.length; i++)
      {
         _rect.push( rotateRect(mod.rects[i]) );
      }
      mod.rects = _rect;
      console.log(mod.rects);
      if (hasModel(mod))
      {
        return true;
      }
    }
    return false;
  }


  function rotateRect(orect) {
  // Rect(x,y,w,h,color,isInner,isFrame)
    return new Rect(
    MAX - orect.y - orect.h - 1,
    orect.x,
    orect.h,
    orect.w,
    orect.color,
    orect.isInner,
    orect.isFrame);
    //
  }

function edgeInCenter(x,y,w,h) {
  /*return (x >= 1 && x < MAX-1 && y >= 1 && y < MAX-1) ||
         (x+w >=1 && x+w < MAX-1 && y >= 1 && y < MAX-1) ||
         (x+w >=1 && x+w < MAX-1 && y+h >= 1 && y+h < MAX-1) ||
         (x >=1 && x < MAX-1 && y+h >= 1 && y+h < MAX-1);*/
   return (x >= 0 && x < MAX && y >= 0 && y < MAX) ||
         (x+w >=0 && x+w < MAX && y >= 0 && y < MAX) ||
         (x+w >=0 && x+w < MAX && y+h >= 0 && y+h < MAX) ||
         (x >=0 && x < MAX && y+h >= 0 && y+h < MAX);
}

function overlapsRect(rect,x,y,w,h) {
  /*if (((x < rect.x && x+w > rect.x) || (x < rect.x+w && x+w > rect.x+w)) &&
          ((y < rect.y && y+h > rect.y) || (y < rect.y+h && y+h > rect.y+h))) {*/
      let x_overlap = Math.max(0, Math.min(rect.x+rect.w, x+w, 1+4) - Math.max(rect.x, x,1));
      let y_overlap = Math.max(0, Math.min(rect.y+rect.h, y+h, 1+4) - Math.max(rect.y, y,1));
      let overlapArea = x_overlap * y_overlap;
      //if the area is larger than 0 
      //console.log(rect,x,y,w,h,'overlapArea=',overlapArea);
      return overlapArea;
    /*} 
    return 0;*/
}

function Rect(x,y,w,h,color,isInner,isFrame) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.color = color;
  this.isInner = isInner;
  this.isFrame = isFrame;
  this.tileFrame = [];
  for (let i = x; i <= x+w; i++) {
    for (let j = y; j <= y+h; j++) {
      if (i >= 0 && j >= 0 && i <= x+w && j <= y+h) {
        if (i == x || i == x+w || j == y || j == y+h) {
          this.tileFrame.push({x:i,y:j});
        }
      }
    }
  }
  this.hasCoordinate = function(x,y){
    for (let i = 0; i < this.tileFrame.length; i++) {
      if (this.tileFrame[i].x==x && this.tileFrame[i].y==y) return true;
    }
    return false;
  }
  this.isNeighbor = function(x,y,x2,y2) {
    return ( (x==x2&&(y==y2-1||y==y2+1)) || (y==y2&&(x==x2-1||x==x2+1)) && x >=0 && x < MAX && y < MAX && y>=0);
  }
} 

function hasModel(model) {
  console.log('has-models.length',models.length);
  if (models.length > 0)
  for (let i = 0; i < models.length; i++) {
     let m = models[i];
     let compare = 0;
      //up to 4 if 4 identical coordinates
     for (let ri = 0; ri < m.rects.length; ri++) {
        //if all rects in m have the same x,y,w,h like in the given model
        //without a specific order
        //return true
        //color and other properties will not be compared
        let mr = m.rects[ri];
        for (let mj = 0; mj < model.rects.length; mj++) {
          let m_rect = model.rects[mj];
          if (mr.x==m_rect.x && mr.y==m_rect.y && mr.w==m_rect.w && mr.h==m_rect.h) {
            compare++;
          }
        }
     }
     if (compare >= 4) {
       console.log('m - model->',m.rects,model.rects);
       return true;
     }
  }
  
  return false;
}


let index = 0;
models = [];
model = null;

while (localStorage.getItem(MAX+'times'+MAX+'_'+index)!=null )
{
  model = JSON.parse(localStorage.getItem(MAX+'times'+MAX+'_'+index));
  models.push(model);
  index++;
}

function save() {
  let index = models.length;
  let c = colors[Math.floor(Math.random()*colors.length)];
  let oc = [];
  oc.push(c);
  for (let i = 0; i < 6; i++)
  {
    while( oc.indexOf(c) >= 0) { 
      c = colors[Math.floor(Math.random()*colors.length)];
    }
    oc.push(c);
  }  
    
  let rects = [
    new Rect(x,y,w,h,oc[0],false,true),
    new Rect(x+1,y+1,w-2,h-2,oc[1],true,false),
    new Rect(x2,y2,w2,h2,oc[2],false,true),
    new Rect(x2+1,y2+1,w2-2,h2-2,oc[3],true,false)
  ];
  rects = rects.sort(function(a,b) { return Math.random() < 0.5? 1 : -1;});
  let id = MAX+'times'+MAX+'_'+index;
  let model = {id:id, basecolor:'#fce',background:oc[4], center:oc[5], rects:rects};
  
  if (!rotateModel(model))
  {
    localStorage.setItem(id,JSON.stringify(model));
    models.push(model);  
    console.log(model);
    redrawModel(model);
  } else {
    alert('double or not valid');
  }
}

draw();
for (index = 0; index < models.length; index++)
{
  redrawModel(models[index]);
  //localStorage.setItem(models[index].id, JSON.stringify(models[index]) );
  console.log('save->',index);
}


function redrawModel(model) {
  ctx.fillStyle = model.basecolor;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = model.background;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.lineWidth = 1;
  ctx.strokeStyle='rgba(0,25,25,0.35)';
  /*ctx.fillStyle = 'rgba(0,25,25,0.35)';
  ctx.strokeRect(canvas.width/MAX,
                 canvas.height/MAX,
                 4*canvas.width/MAX,
                 4*canvas.height/MAX);
  ctx.fillRect(canvas.width/MAX,
                 canvas.height/MAX,
                 4*canvas.width/MAX,
                 4*canvas.height/MAX);*/
  for (let j = 0; j < model.rects.length; j++) {
    let rect = model.rects[j];
    //console.log(rect);
    ctx.fillStyle = rect.color;
    ctx.strokeStyle='rgba(0,25,25,0.35)';

    if (rect.isFrame) {
      /*for (let i = 0; i < rect.tileFrame.length; i++) {
        ctx.fillRect(0+rect.tileFrame[i].x*canvas.width/MAX,
                     0+rect.tileFrame[i].y*canvas.height/MAX,
                     canvas.width/MAX,
                     canvas.height/MAX);
      }*/      
      /*let x = rect.x;
      let y = rect.y;
      let w = rect.w;
      let h = rect.h;
      ctx.beginPath();
      ctx.moveTo(x*canvas.width/MAX, 
                 y*canvas.height/MAX);
      ctx.lineTo(x*canvas.width/MAX,
                 (y+h)*canvas.height/MAX);
      ctx.lineTo((x+w)*canvas.width/MAX,
                 (y+h)*canvas.height/MAX);
      ctx.lineTo((x+w)*canvas.width/MAX,
                 y*canvas.height/MAX);
      ctx.lineTo(x*canvas.width/MAX,
                 y*canvas.height/MAX);
                 
      ctx.moveTo((x+1)*canvas.width/MAX, 
                 (y+1)*canvas.height/MAX);      
      ctx.lineTo((x+w)*canvas.width/MAX,
                 (y+1)*canvas.height/MAX);      
      ctx.lineTo((x+w)*canvas.width/MAX,
                 (y+h)*canvas.height/MAX);
      ctx.lineTo((x+1)*canvas.width/MAX,
                 (y+h)*canvas.height/MAX);      
      ctx.lineTo((x+1)*canvas.width/MAX,
                 (y+1)*canvas.height/MAX);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();*/
      ctx.strokeStyle=rect.color;
      ctx.lineWidth = canvas.width/MAX;
      ctx.strokeRect((0.5 + rect.x)*canvas.width/MAX,
                     (0.5 + rect.y)*canvas.height/MAX,
                     (rect.w)*canvas.width/MAX,
                     (rect.h)*canvas.height/MAX);
       
      ctx.strokeStyle = 'rgba(0,25,25,0.35)';
      ctx.lineWidth = 1;
      ctx.strokeRect((rect.x)*canvas.width/MAX,
                     (rect.y)*canvas.height/MAX,
                     (rect.w + 1)*canvas.width/MAX,
                     (rect.h + 1)*canvas.height/MAX);
      ctx.strokeRect((rect.x + 1)*canvas.width/MAX,
                     (rect.y + 1)*canvas.height/MAX,
                     (rect.w - 1)*canvas.width/MAX,
                     (rect.h - 1)*canvas.height/MAX);
    } else {
      /*ctx.strokeRect(rect.x * canvas.width/MAX,
                   rect.y * canvas.height/MAX,
                   rect.w * canvas.width/MAX,
                   rect.h * canvas.height/MAX);
      ctx.fillRect(rect.x * canvas.width/MAX,
                   rect.y * canvas.height/MAX,
                   rect.w * canvas.width/MAX,
                   rect.h * canvas.height/MAX);
                   */
      ctx.strokeStyle = 'rgba(0,25,25,0.35)';
      ctx.lineWidth = 1;
      ctx.strokeRect(canvas.width/MAX,
                 canvas.height/MAX,
                 3*canvas.width/MAX,
                 3*canvas.height/MAX);
      ctx.fillRect(canvas.width/MAX,
                     canvas.height/MAX,
                     3*canvas.width/MAX,
                     3*canvas.height/MAX);
    }
  }
  //debug
  //ctx.lineWidth = 3;
  //ctx.fillStyle = 
  /*ctx.strokeRect(canvas.width/MAX,
                 canvas.height/MAX,
                 4*canvas.width/MAX,
                 4*canvas.height/MAX);
  ctx.fillRect(canvas.width/MAX,
                 canvas.height/MAX,
                 4*canvas.width/MAX,
                 4*canvas.height/MAX);*/
}

function drawA(model) {
  ctx.lineWidth = 1;
  ctx.fillStyle='#fce';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle='rgba(0,102,0,0.3)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle='rgba(255,255,255,0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle='rgba(0,25,25,0.45)';
  for (let i = 0; i < MAX; i++) {
    for (let j = 0; j < MAX; j++) {     
      ctx.strokeRect(i*canvas.width/MAX,
                     j*canvas.height/MAX,
                     canvas.width/MAX,
                     canvas.height/MAX);
    }
  }
  ctx.lineWidth = 3;
  ctx.strokeRect(0*canvas.width/MAX,
                0*canvas.height/MAX,
                MAX*canvas.width/MAX,
                MAX*canvas.height/MAX);


  ctx.lineWidth = canvas.width/MAX-5;
  for (let i = 0; i < model.rects.length; i++)
  {
    if (model.rects[i].isFrame)
    {
      ctx.strokeRect((0.5+model.rects[i].x)*canvas.width/MAX,
                     (0.5+model.rects[i].y)*canvas.height/MAX,
                     (model.rects[i].w)*canvas.width/MAX,
                     (model.rects[i].h)*canvas.height/MAX);
    }
  }
  console.log('drawA.model->',model);
}

function draw() {
  ctx.lineWidth = 1;
  ctx.fillStyle='#fce';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle='rgba(0,102,0,0.3)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle='rgba(255,255,255,0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle='rgba(0,25,25,0.45)';
  for (let i = 0; i < MAX; i++) {
    for (let j = 0; j < MAX; j++) {     
      ctx.strokeRect(i*canvas.width/MAX,
                     j*canvas.height/MAX,
                     canvas.width/MAX,
                     canvas.height/MAX);
    }
  }
  ctx.lineWidth = 3;
  ctx.strokeRect(0*canvas.width/MAX,
                0*canvas.height/MAX,
                MAX*canvas.width/MAX,
                MAX*canvas.height/MAX);


  ctx.lineWidth = canvas.width/MAX;
console.log(x,y,w,h,' - ',x2,y2,w2,h2);
  ctx.strokeRect((0.5+x)*canvas.width/MAX,
                 (0.5+y)*canvas.height/MAX,
                 (w)*canvas.width/MAX,
                 (h)*canvas.height/MAX);
  ctx.strokeRect((0.5+x2)*canvas.width/MAX,
                 (0.5+y2)*canvas.height/MAX,
                 (w2)*canvas.width/MAX,
                 (h2)*canvas.height/MAX);
}
  
</script>