create gamedata for a looping bitsy tile animation

bitsy tile loop.js

////////////
// config //
////////////
const tileStr = `
00000000
00000000
00100100
00100100
00000000
01000010
00111100
00000000
`; // single frame of gamedata
const direction = "up"; // one of "left", "right", "up", "down"

//////////
// code //
//////////
const dir = direction.toLowerCase();
const transpose = array => array.map((row, i) => array.map(col => col[i]));

let tile = tileStr
	.trim() // grr whitespace
	.split('\n') // split to rows
	.map(row => row.split('')); // split to 2d array

if (dir === "left" || dir === "right") {
	// horizontal looping needs to act on columns instead of rows
	tile = transpose(tile);
}

let frames = tile
	.map(() => tile) // make a copy of the tile for each frame
	.map((frame, i) => frame.slice(i + 1).concat(frame.slice(0, i + 1))); // rotate each frame

if (dir === "down" || dir === "right") {
	// down and right are just the reverse of up and left
	frames = frames.reverse();
}

if (dir === "left" || dir === "right") {
	// put the frames back into the correct orientation
	frames = frames.map(frame => transpose(frame));
}

frames = frames
	.map(frame => frame.map(row => row.join('')).join('\n')).join('\n>\n'); // convert back to gamedata string

console.log(frames); // c'est fini