JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<h1>
Encode/Decode:
</h1>
<input id="in">
<div id="result">
</div>
<h1>Grid:</h1>
<div id="array"></div>

JavaScript

var direction = {
	UP: 1,
	LEFT: 2,
	DOWN: 3,
	RIGHT: 4
};

var charAdd = function(c, val) {return String.fromCharCode(c.charCodeAt(0) + val); };
var gkey_chars = [];
var gkey = [];
for (var i = 0; i < 13; )
{
	gkey_chars.push(charAdd('a', i));
	gkey_chars.push(charAdd('n', i));
	gkey_chars.push(charAdd('A', i));
	gkey_chars.push(charAdd('N', i));
	gkey.push({x: ++i, y: 0, initial: direction.DOWN});
	gkey.push({x: 14, y: i, initial: direction.LEFT});
	gkey.push({x: 0, y:i, initial: direction.RIGHT});
	gkey.push({x: i, y:14, initial: direction.UP});
}

var indexOfXY = function(x,y)
{
	for (var i = 0, e; i < gkey.length; i++)
	{
		e = gkey[i];
		if (e.x == x && e.y == y) { return i; }
	}
	return -1;
};

var nextDir = function(c, dir)
{
	if (c != '\\' && c != '/') { return dir; }
	return (c == '/') ? 5 - dir : ((dir < 3) ? (3-dir) : (7 - dir));
};

// both decrypts/encrypts (it's a mirror!)
var hash = function(hash, grid)
{
	var ret = '';
	for (var i = 0, index, pos, dir, x, y; i < hash.length; i++)
	{
		index = gkey_chars.indexOf(hash[i]);
		if (index < 0) { throw 'bad character'; }
		pos = gkey[index];
		x = pos.x, y = pos.y
		dir = pos.initial;
		switch (dir)
		{
			case direction.UP:
				y--;
				break;
			case direction.DOWN:
				y++;
				break;
			case direction.LEFT:
				x--;
				break;
			case direction.RIGHT:
				x++;
				break;
			default:
				throw 'invalid direction' + dir;
		}
		while (x > 0 && x < 14 && y > 0 && y < 14)
		{
			dir = nextDir(grid[y-1][x-1], dir);
			switch (dir)
			{
				case direction.UP:
					y--;
					break;
				case direction.DOWN:
					y++;
					break;
				case direction.LEFT:
					x--;
					break;
				case direction.RIGHT:
					x++;
					break;
				default:
					throw 'invalid direction' + dir;
			}
		}
		index = indexOfXY(x, y);
		if (index < 0) { throw 'somehow character `' + hash[i] + '` leads nowhere'; }
		ret += gkey_chars[index];
	}
	return ret;
};

var html = '';
var ex = "   \\\\  /\\    \n            \\\n   /         \n  ...