 			x: 0
 			y: 0
 
+		@tileSize = 32
+
 		@asciiCanvas = document.createElement 'canvas'
-		[@asciiCanvas.width, @asciiCanvas.height] = [12*4, 12*8]
+		[@asciiCanvas.width, @asciiCanvas.height] = [@tileSize*4, @tileSize*8]
 		@asciiCtx = @asciiCanvas.getContext '2d'
 
 		@graphics = @preRenderAscii()

		{x: sourceX, y: sourceY} = @graphics[graphicId]
		viewport.drawImage(
			@asciiCanvas,
			sourceX*12, sourceY*12, 12, 12,
			x*12 - c.x, y*12 - c.y, 12, 12
		)

	renderSymbolAtSlot: (ctx, x, y, symbol, color) ->
		@renderSymbol(
			ctx,
			x * 12, y * 12,
			symbol, color
		)

	renderSymbol: (ctx, x, y, symbol, color = 'white') ->
		ctx.fillStyle = 'black'
		ctx.fillRect(x, y, 12, 12)

		ctx.font = '10pt monospace'
		ctx.fillStyle = color
		ctx.textAlign = 'center'
		ctx.textBaseline = 'ideographic'
		ctx.fillText symbol, x + 5, y + 12

module.exports =
	initialize: initialize


	renderMap: (x, y) ->
		canvasSize = {x: viewport.canvas.width, y: viewport.canvas.height}
		playerScreenPos = vectorMath.mult @game.player.creature, @tileSize

		map = @game.currentMap
		center = vectorMath.add playerScreenPos, {x: @tileSize/2, y: @tileSize/2}
		@camera = vectorMath.sub center, vectorMath.div canvasSize, 2
		@camera.target = @game.player.creature

