seansawyer/map-touchup.html

## map-touchup.html
<html>
<body>
    <script>
     var map = [
         ['#', '#', '#' ,'#', '#', '#' ,'#', '#', '#', '#'],
         ['#', ' ', ' ', '#', ' ', ' ', ' ', ' ', ' ', '#'],
         ['#', ' ', ' ', '#', '#', ' ', ' ', ' ', ' ', '#'],
         ['#', '#', '#', '#', '#', ' ', ' ', ' ', ' ', '#'],
         ['#', ' ', '#', ' ', '#', '#', '#', '#', '#', '#'],
         ['#', ' ', '#', ' ', '#', ' ', ' ', ' ', ' ', '#'],
         ['#', '#', '#', '#', '#', ' ', ' ', ' ', ' ', '#'],
         ['#', ' ', '#', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
         ['#', ' ', '#', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
         ['#', '#', '#' ,'#', '#', '#' ,'#', '#', '#', '#']
     ];

     function prettifyWall(map, x, y) {
         var height = map.length;
         var width = map[0].length;
         /*
            We will use the lowest 4 bits to represent the connectivity of the the
            current tiles to the surrounding tiles, in left/down/up/right order
            (H/J/K/L) highest to lowest. If X is the current tile below, the
            exponents are as follows:

              1
            3 X 0
              2

            We don't represent the current tile in the bits, since it is always
            connected to itself.
          */
         var connectivity = 0;
         var dxdys = [
             [-1, 0],  // L
             [0, 1],  // D
             [0, -1], // U
             [1, 0],  // R
         ];
         // Walk the relevant adjacent tiles left to right one row at a time.
         for (dxdy of dxdys) {
             console.log(dxdy);
             var dx = dxdy[0];
             var dy = dxdy[1];
             var ax = x + dx;
             var ay = y + dy;
             if (ax == x && ay == y) {
                 // The current tile is not represented in the connectivity bits.
                 // This shouldn't happen...because we are stepping by 2
                 continue;
             }
             // Shift the connectivity bits left since we are adding a bit.
             connectivity <<= 1;
             if (ax < 0 || ax >= width || ay < 0 || ay >= height) {
                 // If the adjacent coordinates are off the map, mark it connected.
                 connectivity |= 0;
             } else if (map[ay][ax] == '#') {
                 // If the adjacent coordinates are a wall, mark it connected.
                 connectivity |= 1;
             }
             // Otherwise the shift operation already added a zero for us.
         }
         var connectivityStr = connectivity.toString(2).padStart(4, '0');
         console.log(`(${x}, ${y}) Connectivity: ${connectivityStr} (${connectivity})`);
         console.log(
             `  ${connectivityStr[2]}\n` +
             `${connectivityStr[0]} # ${connectivityStr[1]}\n`+
             `  ${connectivityStr[3]}`
         );
         // Bits are in H/J/K/L or left/down/up/right order.
         var connectivityMasks = {
             '1111': '╬',  // cross
             '1101': '╦',  // top t junction
             '1011': '╩',  // bottom t junction
             '0111': '╠',  // left t junction
             '1110': '╣',  // right t junction
             '0101': '╔',  // top left corner
             '1100': '╗',  // top right corner
             '0110': '║',  // veritical wall
             '1001': '═',  // horizontal wall
             '0011': '╚',  // bottom left corner
             '1010': '╝'   // bottom right corner
         };
         for (var maskStr in connectivityMasks) {
             mask = parseInt(maskStr, 2);
             console.log(`(${x}, ${y}) Trying mask ${maskStr} (${mask}) on connectivity ${connectivityStr} (${connectivity})`);
             console.log(`(${x}, ${y}) connectivity & mask = ${connectivity & mask}`);
             if (connectivity == mask) {
                 console.log(`(${x}, ${y}) (connectivity & mask == mask) = ${connectivity & mask == mask}`);
                 var tile = connectivityMasks[maskStr];
                 console.log(`(${x}, ${y}) Prettified tile: ${tile}`);
                 return tile;
             }
         }
         return map[y][x];
     }

     function prettifyWalls(map) {
         var prettyMap = [];
         for (var y = 0; y < map.length; y++) {
             var prettyRow = [];
             var row = map[y];
             prettyMap.push(prettyRow);
             for (var x = 0; x < row.length; x++) {
                 var tile = row[x];
                 if (row[x] == '#') {
                     tile = prettifyWall(map, x, y);
                 }
                 prettyRow.push(tile);
             }
         }
         return prettyMap;
     }

     var preBeforeContent = ' 0123456789\n';
     map.forEach(function(row, i) {
         preBeforeContent = preBeforeContent + i + row.join('') + '\n';
     });
     var preBefore = document.createElement("pre");
     preBefore.textContent = preBeforeContent;
     document.body.appendChild(preBefore);

     var prettyMap = prettifyWalls(map);

     var preAfterContent = ' 0123456789\n';
     prettyMap.forEach(function(prettyRow, i) {
         preAfterContent = preAfterContent + i + prettyRow.join('') + '\n';
     });
     var preAfter = document.createElement("pre");
     preAfter.textContent = preAfterContent;
     document.body.appendChild(preAfter);
    </script>
</body>
</html>
	<html>
	<body>
	<script>
	var map = [
	['#', '#', '#' ,'#', '#', '#' ,'#', '#', '#', '#'],
	['#', ' ', ' ', '#', ' ', ' ', ' ', ' ', ' ', '#'],
	['#', ' ', ' ', '#', '#', ' ', ' ', ' ', ' ', '#'],
	['#', '#', '#', '#', '#', ' ', ' ', ' ', ' ', '#'],
	['#', ' ', '#', ' ', '#', '#', '#', '#', '#', '#'],
	['#', ' ', '#', ' ', '#', ' ', ' ', ' ', ' ', '#'],
	['#', '#', '#', '#', '#', ' ', ' ', ' ', ' ', '#'],
	['#', ' ', '#', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
	['#', ' ', '#', ' ', ' ', ' ', ' ', ' ', ' ', '#'],
	['#', '#', '#' ,'#', '#', '#' ,'#', '#', '#', '#']
	];

	function prettifyWall(map, x, y) {
	var height = map.length;
	var width = map[0].length;
	/*
	We will use the lowest 4 bits to represent the connectivity of the the
	current tiles to the surrounding tiles, in left/down/up/right order
	(H/J/K/L) highest to lowest. If X is the current tile below, the
	exponents are as follows:

	1
	3 X 0
	2

	We don't represent the current tile in the bits, since it is always
	connected to itself.
	*/
	var connectivity = 0;
	var dxdys = [
	[-1, 0], // L
	[0, 1], // D
	[0, -1], // U
	[1, 0], // R
	];
	// Walk the relevant adjacent tiles left to right one row at a time.
	for (dxdy of dxdys) {
	console.log(dxdy);
	var dx = dxdy[0];
	var dy = dxdy[1];
	var ax = x + dx;
	var ay = y + dy;
	if (ax == x && ay == y) {
	// The current tile is not represented in the connectivity bits.
	// This shouldn't happen...because we are stepping by 2
	continue;
	}
	// Shift the connectivity bits left since we are adding a bit.
	connectivity <<= 1;
	if (ax < 0 \|\| ax >= width \|\| ay < 0 \|\| ay >= height) {
	// If the adjacent coordinates are off the map, mark it connected.
	connectivity \|= 0;
	} else if (map[ay][ax] == '#') {
	// If the adjacent coordinates are a wall, mark it connected.
	connectivity \|= 1;
	}
	// Otherwise the shift operation already added a zero for us.
	}
	var connectivityStr = connectivity.toString(2).padStart(4, '0');
	console.log(`(${x}, ${y}) Connectivity: ${connectivityStr} (${connectivity})`);
	console.log(
	` ${connectivityStr[2]}\n` +
	`${connectivityStr[0]} # ${connectivityStr[1]}\n`+
	` ${connectivityStr[3]}`
	);
	// Bits are in H/J/K/L or left/down/up/right order.
	var connectivityMasks = {
	'1111': '╬', // cross
	'1101': '╦', // top t junction
	'1011': '╩', // bottom t junction
	'0111': '╠', // left t junction
	'1110': '╣', // right t junction
	'0101': '╔', // top left corner
	'1100': '╗', // top right corner
	'0110': '║', // veritical wall
	'1001': '═', // horizontal wall
	'0011': '╚', // bottom left corner
	'1010': '╝' // bottom right corner
	};
	for (var maskStr in connectivityMasks) {
	mask = parseInt(maskStr, 2);
	console.log(`(${x}, ${y}) Trying mask ${maskStr} (${mask}) on connectivity ${connectivityStr} (${connectivity})`);
	console.log(`(${x}, ${y}) connectivity & mask = ${connectivity & mask}`);
	if (connectivity == mask) {
	console.log(`(${x}, ${y}) (connectivity & mask == mask) = ${connectivity & mask == mask}`);
	var tile = connectivityMasks[maskStr];
	console.log(`(${x}, ${y}) Prettified tile: ${tile}`);
	return tile;
	}
	}
	return map[y][x];
	}

	function prettifyWalls(map) {
	var prettyMap = [];
	for (var y = 0; y < map.length; y++) {
	var prettyRow = [];
	var row = map[y];
	prettyMap.push(prettyRow);
	for (var x = 0; x < row.length; x++) {
	var tile = row[x];
	if (row[x] == '#') {
	tile = prettifyWall(map, x, y);
	}
	prettyRow.push(tile);
	}
	}
	return prettyMap;
	}

	var preBeforeContent = ' 0123456789\n';
	map.forEach(function(row, i) {
	preBeforeContent = preBeforeContent + i + row.join('') + '\n';
	});
	var preBefore = document.createElement("pre");
	preBefore.textContent = preBeforeContent;
	document.body.appendChild(preBefore);

	var prettyMap = prettifyWalls(map);

	var preAfterContent = ' 0123456789\n';
	prettyMap.forEach(function(prettyRow, i) {
	preAfterContent = preAfterContent + i + prettyRow.join('') + '\n';
	});
	var preAfter = document.createElement("pre");
	preAfter.textContent = preAfterContent;
	document.body.appendChild(preAfter);
	</script>
	</body>
	</html>