tileset

by Felis Catus

HTML

<div id="container" class="container w4">
  <div class="tile t_2_3 hacker"></div>
  <div class="tile t_3_4"></div>
  <div class="tile t_2_3"></div>
  <div class="tile t_3_4 officer"></div>
  <div class="tile t_1_2"></div>
  <div class="tile t_1_2 t_3_4 user bad_1 bad_2"></div>
  <div class="tile t_4_1 t_2_3"></div>
  <div class="tile t_4_1"></div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.w3 {
  width: 300px;
}
.w4 {
  width: 400px;
}
.w5 {
  width: 500px;
}
.w6 {
  width: 600px;
}
.w7 {
  width: 700px;
}
.tile {
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.tile:after, .tile:before {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  content: '';
  background: transparent;
}
.t_1_2:after {
  box-shadow: 50px -50px 0px 38px #f0f0f0, 50px -50px 0px 42px black;
}
.t_3_4:before {
  box-shadow: -50px 50px 0px 38px #f0f0f0, -50px 50px 0px 42px black;
}
.t_2_3:after {
  box-shadow: 50px 50px 0px 38px #f0f0f0, 50px 50px 0px 42px black;
}
.t_4_1:before {
  box-shadow: -50px -50px 0px 38px #f0f0f0, -50px -50px 0px 42px black;
}

.t_1_2.bad_1:after {
  box-shadow: 0 -50px 5px -5px red, 50px -50px 0px 38px #f0f0f0, 50px -50px 0px 42px black;
}
.t_1_2.bad_2:after {
  box-shadow: 48px 0 5px -5px red, 50px -50px 0px 38px #f0f0f0, 50px -50px 0px 42px black;
}
.t_1_2.bad_1.bad_2:after {
  box-shadow: 0 -50px 5px -5px red, 48px 0 5px -5px red, 50px -50px 0px 38px #f0f0f0, 50px -50px 0px 42px black;
}

.t_2_3.bad_2:after {
  box-shadow: 48px 0 5px -5px red, 50px 50px 0px 38px #f0f0f0, 50px 50px 0px 42px black;
}
.t_2_3.bad_3:after {
  box-shadow: 0 48px 5px -5px red, 50px 50px 0px 38px #f0f0f0, 50px 50px 0px 42px black;
}
.t_2_3.bad_2.bad_3:after {
  box-shadow: 0 48px 5px -5px red, 48px 0 5px -5px red, 50px 50px 0px 38px #f0f0f0, 50px 50px 0px 42px black;
}

.t_3_4.bad_3:before {
  box-shadow: 0 48px 5px -5px red, -50px 50px 0px 38px #f0f0f0, -50px 50px 0px 42px black;
}
.t_3_4.bad_4:before {
  box-shadow: -50px 0 5px -5px red, -50px 50px 0px 38px #f0f0f0, -50px 50px 0px 42px black;
}
.t_3_4.bad_3.bad_4:before {
  box-shadow: 0 48px 5px -5px red, -50px 0 5px -5px red, -50px 50px 0px 38px #f0f0f0, -50px 50px 0px 42px...

JavaScript 1.7

const tiles = ['t', 't_1_2', 't_2_3', 't_3_4', 't_4_1', 't_1_2 t_3_4', 't_2_3 t_4_1'];
const codes = [0, 3, 6, 12, 9, 15, 15];
function build_random(size){
  let container = $('#container');
  container.empty().removeClass().addClass('container w'+size);
  for (let i = 0; i<size*size; i++){
  	let tile = (7*Math.random())|0;
    container.append($('<div>').addClass('tile '+tiles[tile]).attr('data-code', codes[tile]));
  }
}
//const delay = (time) => (result) => new Promise(resolve => setTimeout(() => resolve(result), time));
const delay = ms => new Promise(_ => setTimeout(_, ms));
async function build_random_consistent(size){
	let container = $('#container');
  container.empty().removeClass().addClass('container w'+size);
  for (let i = 0; i<size*size; i++){
  	let fits, rpts=0;
  	do {
    	if (rpts>1000)
      	return;
      rpts++;
      let tile = (7*Math.random())|0;
      let newEl;
      container.append((newEl = $('<div>')).addClass('tile '+tiles[tile]).attr('data-code', codes[tile]));
    	fits = check_tiles(i, size*size, true);
      await delay(50);
      if (!fits)
      	newEl.remove();
    }while(!fits)
  }
}
// there are two or less legal forms for each cell, depending on backtracking neigbourse (top, left) and
// cell's position (middle or boundary).
function build_consistent(size){
	let container = $('#container');
  container.empty().removeClass().addClass('container w'+size);
  let backtrack = [], last = 0;
  do {
  	
  } while (backtrack.length<size*size)
  for (let i = 0; i<size*size; i++){
  	let fits, rpts=0;
  	do {
    	if (rpts>1000)
      	return;
      rpts++;
      let tile = (7*Math.random())|0;
      let newEl;
      container.append((newEl = $('<div>')).addClass('tile '+tiles[tile]).attr('data-code', codes[tile]));
    	fits = check_tiles(i, size*size, true);
      if (!fits)
      	newEl.remove();
    }while(!fits)
  }
}
function check_tiles(tile, length, incremental){
  let tiles = $('#container>.tile').toArray();
  let codes =...