roguelike dev spritesheet management

spritesheet.js

const spriteStyleSheet = buildSpriteStyleSheet('http://rogueliketutorials.com/images/arial10x10.png', 10, 10, [
  [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?'],
  ['@', '[', '\\', ']', '^', '_', '`', '{', '|', '}', '~'],
  [],
  ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
])

function buildSpriteStyleSheet (url, width, height, charMap) {
  return charMap
    .reduce((acc, row, y) => row
      .reduce((acc, char, x) => {
        return ({
          ...acc, [char]: {
            'background-image': `url(${url})`,
            'background-repeat': 'no-repeat',
            'width': `${width}px`,
            'height': `${height}px`,
            'background-position': `-${x * width}px -${y * height}px`
          }
        })
      }, acc), {})
}

function styleToString (styles) {
  return Object.keys(styles).reduce((acc, key) => `${key}:${styles[key]};${acc}`, '')
}