paularmstrong/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <title>Sprite Animation Tester</title>

  <style type="text/css">

  * {
    box-sizing: border-box;
  }

  body {
    font: normal 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  #drop {
    display: inline-block;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    height: 200px;
    width: 200px;
    border: 100px solid #AAA;
    border-radius: 100px;
    font-weight: bold;
    position: relative;
  }
  #drop span {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: block;
    pointer-events: none;
  }

  #drop.hover {
    border: 5px solid #0F0;
  }

  #drop.accepted {
    border-color: rgb(200, 255, 200);
  }
  #drop.accepted span {
    top: 0;
    left: 0;
  }

  #canvas {
    display: inline-block;
  }

  canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  }


  </style>
</head>
<body>

  <div id="drop"><span>Drop Spritesheet Here</span></div>

  <canvas id="canvas" width="200" height="200"></canvas>

  <form>
    <ul>
      <li>
        <label for="bg">Background Color</label>
        <input type="text" id="bg" name="bg" value="#000">
      </li>
      <li>
        <label for="frameTime">Frame Time (seconds)</label>
        <input type="text" id="frameTime" name="frameTime" value="0.1">
      </li>
      <li>
        <label for="frameSize">Frame Size (square pixels)</label>
        <input type="text" id="frameSize" name="frameSize" value="28">
      </li>
      <li>
        <label for="scale">Scale</label>
        <input type="text" id="scale" name="scale" value="2">
      </li>
      <li>
        <label for="frames">Frames (comma delimited)</label>
        <input type="text" id="frames" name="frames" value="0, 1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2, 1">
      </li>
    </ul>
  </form>

  <div id="sheet"></div>
  <script>
  var $ = document.querySelector.bind(document),
    $$ = document.querySelectorAll.bind(document),
    canvas = $('#canvas'),
    ctx = canvas.getContext('2d'),
    dropTarget = $('#drop'),
    formats = ['image/png', 'image/jpeg', 'image/gif'],
    sheetContainer = $('#sheet'),
    dropTextEl = $('span'),
    dropText = dropTextEl.innerText,
    inputs = $$('input'),
    image = new Image(),
    _curFrame = 0,
    _lastDate,
    _bg,
    _time,
    _size,
    _dSize,
    _frames,
    _scale,
    _dx,
    _dy;

  ctx.imageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;

  function draw() {
    var now = new Date(),
      t = (now - _lastDate) / 1000,
      f = _frames[_curFrame];

    if (t >= _time) {
      _curFrame = (_curFrame >= _frames.length - 1) ? 0 : _curFrame + 1;
      _lastDate = now;
    }

    ctx.fillStyle = _bg;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(image, f.x, f.y, _size, _size, _dx, _dy, _dSize, _dSize);
    setTimeout(draw, 16);
  }

  function readForm() {
    _bg = $('#bg').value;
    _time = $('#frameTime').value;
    _size = parseInt($('#frameSize').value, 10);
    _frames = $('#frames').value.split(/\s*,\s*/);
    _scale = parseFloat($('#scale').value, 10);

    var cols = image.width / _size,
      rows = image.height / _size,
      r = 0,
      c = 0,
      frameMap = [];

    for (r = 0; r < rows; r++) {
      for (c = 0; c < cols; c++) {
        frameMap.push({ x: c * _size, y: r * _size});
      }
    }

    _frames = _frames.map(function (f) {
      return frameMap[f];
    });

    _dSize = _size * _scale;

    _curFrame = 0;
    _dx = (canvas.width / 2) - (_dSize / 2);
    _dy = (canvas.height / 2) - (_dSize / 2);
    _lastDate = new Date();
    draw();
  }

  // readForm();
  [].slice.call(inputs, 0).forEach(function (el) {
    el.addEventListener('change', readForm, true);
  });

  dropTarget.addEventListener('dragenter', function (e) {
    dropTarget.classList.add('hover');
    dropTarget.classList.remove('accepted');
    dropTextEl.innerText = dropText;
  }, false);

  dropTarget.addEventListener('dragleave', function (e) {
    dropTarget.classList.remove('hover');
  }, false);

  dropTarget.addEventListener('drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
    dropTarget.classList.remove('hover');
    dropTarget.classList.add('accepted');

    var formData = new FormData(),
      files = e.dataTransfer.files,
      file = files[0],
      reader = new FileReader();


    if (files.length > 1) {
      alert('Cannot accept more than 1 file');
    }

    if (formats.indexOf(file.type) === -1) {
      alert('Cannot accept file of type "' + file.type + '".');
    }

    dropTextEl.innerText = file.name;

    reader.addEventListener('load', function (e) {
      image.src = reader.result;
    }, true);

    image.addEventListener('load', function (e) {
      sheetContainer.innerHtml = '';
      sheetContainer.appendChild(image);
      readForm();
    });

    reader.readAsDataURL(file);
  }, false);

  </script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>Sprite Animation Tester</title>

	<style type="text/css">

	* {
	box-sizing: border-box;
	}

	body {
	font: normal 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	#drop {
	display: inline-block;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	height: 200px;
	width: 200px;
	border: 100px solid #AAA;
	border-radius: 100px;
	font-weight: bold;
	position: relative;
	}
	#drop span {
	position: absolute;
	top: -100px;
	left: -100px;
	width: 200px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	display: block;
	pointer-events: none;
	}

	#drop.hover {
	border: 5px solid #0F0;
	}

	#drop.accepted {
	border-color: rgb(200, 255, 200);
	}
	#drop.accepted span {
	top: 0;
	left: 0;
	}

	#canvas {
	display: inline-block;
	}

	canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
	}


	</style>
	</head>
	<body>

	<div id="drop"><span>Drop Spritesheet Here</span></div>

	<canvas id="canvas" width="200" height="200"></canvas>

	<form>
	<ul>
	<li>
	<label for="bg">Background Color</label>
	<input type="text" id="bg" name="bg" value="#000">
	</li>
	<li>
	<label for="frameTime">Frame Time (seconds)</label>
	<input type="text" id="frameTime" name="frameTime" value="0.1">
	</li>
	<li>
	<label for="frameSize">Frame Size (square pixels)</label>
	<input type="text" id="frameSize" name="frameSize" value="28">
	</li>
	<li>
	<label for="scale">Scale</label>
	<input type="text" id="scale" name="scale" value="2">
	</li>
	<li>
	<label for="frames">Frames (comma delimited)</label>
	<input type="text" id="frames" name="frames" value="0, 1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2, 1">
	</li>
	</ul>
	</form>

	<div id="sheet"></div>
	<script>
	var $ = document.querySelector.bind(document),
	$$ = document.querySelectorAll.bind(document),
	canvas = $('#canvas'),
	ctx = canvas.getContext('2d'),
	dropTarget = $('#drop'),
	formats = ['image/png', 'image/jpeg', 'image/gif'],
	sheetContainer = $('#sheet'),
	dropTextEl = $('span'),
	dropText = dropTextEl.innerText,
	inputs = $$('input'),
	image = new Image(),
	_curFrame = 0,
	_lastDate,
	_bg,
	_time,
	_size,
	_dSize,
	_frames,
	_scale,
	_dx,
	_dy;

	ctx.imageSmoothingEnabled = false;
	ctx.mozImageSmoothingEnabled = false;
	ctx.webkitImageSmoothingEnabled = false;

	function draw() {
	var now = new Date(),
	t = (now - _lastDate) / 1000,
	f = _frames[_curFrame];

	if (t >= _time) {
	_curFrame = (_curFrame >= _frames.length - 1) ? 0 : _curFrame + 1;
	_lastDate = now;
	}

	ctx.fillStyle = _bg;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(image, f.x, f.y, _size, _size, _dx, _dy, _dSize, _dSize);
	setTimeout(draw, 16);
	}

	function readForm() {
	_bg = $('#bg').value;
	_time = $('#frameTime').value;
	_size = parseInt($('#frameSize').value, 10);
	_frames = $('#frames').value.split(/\s,\s/);
	_scale = parseFloat($('#scale').value, 10);

	var cols = image.width / _size,
	rows = image.height / _size,
	r = 0,
	c = 0,
	frameMap = [];

	for (r = 0; r < rows; r++) {
	for (c = 0; c < cols; c++) {
	frameMap.push({ x: c * _size, y: r * _size});
	}
	}

	_frames = _frames.map(function (f) {
	return frameMap[f];
	});

	_dSize = _size * _scale;

	_curFrame = 0;
	_dx = (canvas.width / 2) - (_dSize / 2);
	_dy = (canvas.height / 2) - (_dSize / 2);
	_lastDate = new Date();
	draw();
	}

	// readForm();
	[].slice.call(inputs, 0).forEach(function (el) {
	el.addEventListener('change', readForm, true);
	});

	dropTarget.addEventListener('dragenter', function (e) {
	dropTarget.classList.add('hover');
	dropTarget.classList.remove('accepted');
	dropTextEl.innerText = dropText;
	}, false);

	dropTarget.addEventListener('dragleave', function (e) {
	dropTarget.classList.remove('hover');
	}, false);

	dropTarget.addEventListener('drop', function (e) {
	e.preventDefault();
	e.stopPropagation();
	dropTarget.classList.remove('hover');
	dropTarget.classList.add('accepted');

	var formData = new FormData(),
	files = e.dataTransfer.files,
	file = files[0],
	reader = new FileReader();


	if (files.length > 1) {
	alert('Cannot accept more than 1 file');
	}

	if (formats.indexOf(file.type) === -1) {
	alert('Cannot accept file of type "' + file.type + '".');
	}

	dropTextEl.innerText = file.name;

	reader.addEventListener('load', function (e) {
	image.src = reader.result;
	}, true);

	image.addEventListener('load', function (e) {
	sheetContainer.innerHtml = '';
	sheetContainer.appendChild(image);
	readForm();
	});

	reader.readAsDataURL(file);
	}, false);

	</script>

	</body>
	</html>