JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id = "output"></textarea><br>
<button onclick = "window.func()">Run</button>

CSS

textarea{
  width: 90%;
  height: 150px;
}

JavaScript

var ge = document.getElementById.bind(document);
var output = ge('output');
var f;

var a = [
['.', ',', '.', ',', '.', ',', '.'],
['.', ',', '.', ',', '.', ',', '.'],
['.', ',', '.', ',', '.', ',', '1'],
];
var b = [
[0,1,0,0,1,2,0],
[1,1,1,2,2,2,2],
[0,2,0,0,0,1,0],
];

window.func = () => {
  func();
  output.value = f(a,b);
};

function func(){
  f=(a,b,g=(x,y)=>!(b[y]||0)[x],u=s=r='',L='length',R='repeat')=>{for(y=v=-1;++y<a[L];)for(i=v;++i<8;)for(x=v,s+=`
`+r,r+=' ';m=b[y][++x],W=Q=a[y][x],W+=(Z=~m&1)?Q:u,D=(A=i<m)|(B=i>7-m)?W:u,p=g(x-1,y)?W:D,q=g(x+1,y)?W:D,x<a[0][L];)s+=p+(A&&g(x,y-1)||B&&g(x,y+1)||!m?Q:'@#'[Z])[R](8-(p+q)[L])+q;return s}
}