JSFiddle - React, Tailwind, and code Playground

by groovy

HTML

<div id="div"></div>

JavaScript

var h = [[],[],[],[],[],[],[],[]], 
    posInComp = [], nextLabel = 0,
    example = [["x","x","y","y","y","z"]
              ,["x","y","y","z","z","z"]
              ,["y","x","x","z","z","y"]
              ,["y","y","x","z","x","y"]
              ,["x","y","z","x","y","y"]
              ,["x","z","x","x","z","z"]
              ,["x","y","z","y","y","z"]
              ,["x","y","z","x","y","y"]]

function set(x,y,i){
  h[y][x] = i
}

function find(x,y){
  return h[y][x]
}

function union(Z){
  var l = Z.length, 
      k = find(Z[l-1][0],Z[l-1][1])
  
  for (var i=0; i<Z.length; i++){
    set(Z[i][0],Z[i][1],k)
  }
  
  return k
}

function neighbors(x,y){
  var answer = []
  
  if (x-1 >= 0) 
    answer.push([x-1,y]) //W
  if (x-1 >= 0 && y-1 >= 0) 
    answer.push([x-1,y-1]) //NW
  if (y-1 >= 0) 
    answer.push([x,y-1]) //N
  if (x+1 < 6 && y-1 >= 0) 
    answer.push([x+1,y-1]) //NE
  
  return answer
}

var start = new Date().getTime()

//prime h
h[0][0] = nextLabel

//main loop
for (var y=0; y<8; y++){
  for (var x=0; x<6; x++){
    var type = example[y][x],
        Z = [],
        ns = neighbors(x,y)
    
    for (var i=0; i<ns.length; i++){
      if (example[ns[i][1]][ns[i][0]] == type) 
        Z.push([ns[i][0],ns[i][1]])
    }
    
    if (Z.length == 0) 
      set(x,y,++nextLabel)
    else {
      var k = union(Z)
      set(x,y,k)
    }
  }
}

for (var y=0; y<8; y++){
  for (var x=0; x<6; x++){
    var lab = h[y][x]
    
    if (posInComp[lab])
      posInComp[lab].push([x,y])
    else posInComp[lab] = [[x,y]]
  }  
}

var end = new Date().getTime()
var time = end - start

for (var i in example)
  document.getElementById('div').innerHTML += 
    example[i] + "<br />"

document.getElementById('div').innerHTML += 
  "<br />"
    
for (var i in h)
  document.getElementById('div').innerHTML += 
    h[i] + "<br />"
  
document.getElementById('div').innerHTML +=
  "<br />posInComp[9]: " 

for (var i in posInComp[9])
  document.getElementById('div').innerHTML...