darosh · October 16, 2015 17:04
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="script.js"></script>
 </body>
diff --git a/script.js b/script.js
 console.log('begin');

 var url = 'https://cdn.rawgit.com/darosh/scrolls-and-decks/master/client/';
 var id = 591;
 var element = document.documentElement;
 var attrs = {};

 var canvas = document.createElement('canvas');

 var zoom = 1;
 var shift = 0;

 canvas.width = 530 * zoom;
 canvas.height = 490 * zoom;
 element.appendChild(canvas);
 var ctx = canvas.getContext('2d');
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 var standDeferred = $.Deferred();
 var standImg = new Image();
 standImg.src = url + 'images/unitstand.png';
 standDeferred.img = standImg;
 standImg.onload = function() {
  standDeferred.resolve(standDeferred);
 };

 var spritesImg = new Image();
 var data;

 data = $.ajax({
  url: url + 'data/bundles/' + id + '/data.json',
 });

 var deferred = $.Deferred();

 spritesImg.src = url + 'data/bundles/' + id + '/sprites.png';
 spritesImg.onload = function() {
  deferred.img = spritesImg;
  deferred.resolve(deferred);
 };

 $.when(data, standDeferred, deferred).then(ready);

 function ready(d) {
  data = d[0];
  console.log('ready');  
  
  var fps = 24;
  var firstFrameTime = null;

  function animate() {
    window.requestAnimationFrame(function() {

      var time = (new Date()).getTime();

      var animation = data.animations.idle;

      if (!firstFrameTime) {
        firstFrameTime = time;
      }

      var elapsed = Math.round((time - firstFrameTime) / (1000 / fps));

      var animated = true;
      var inView = true;
      var delay = (animated && inView) ? (1000 / 30) : (1000 / 3);
      var frame = elapsed % animation.length;

      if (inView || (elapsed === 0)) {
        if ((frame !== previousFrame) && (animated || previousFrame === null)) {
          previousFrame = frame;
          renderFrame(animation[frame]);
        }
      }

      setTimeout(function() {
        animate();
      }, delay);
    });
  }

  var previousFrame = null;

  animate(id);
 }

 function renderPart(part) {
  if (part.length === 3) {
    part.splice(1, 0, 1, 0, 0, 1);
  }

  var s = data.sprites[part[0]];
  var e = 264 * zoom + part[5] / (s[4] / s[2]);
  var f = 270 * zoom + shift + part[6] / (s[5] / s[3]);
  ctx.setTransform(part[1], part[2], part[3], part[4], e, f);
  ctx.drawImage(spritesImg, s[0], s[1], s[2], s[3], 0, 0, s[2], s[3]);
 }

 function clearFrame() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var w = standImg.width * 0.58;
  var h = standImg.height * 0.58;
  ctx.globalAlpha = 0.18;
  ctx.drawImage(standImg, 0, 0, standImg.width, standImg.height, (canvas.width - w) / 2, 328 * zoom + shift, w, h);
  
  ctx.globalAlpha = 1;
 }

 function renderFrame(frame) {
  clearFrame();
  frame.forEach(renderPart);
 }
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="script.js"></script>
	</body>
	console.log('begin');

	var url = 'https://cdn.rawgit.com/darosh/scrolls-and-decks/master/client/';
	var id = 591;
	var element = document.documentElement;
	var attrs = {};

	var canvas = document.createElement('canvas');

	var zoom = 1;
	var shift = 0;

	canvas.width = 530 * zoom;
	canvas.height = 490 * zoom;
	element.appendChild(canvas);
	var ctx = canvas.getContext('2d');
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	var standDeferred = $.Deferred();
	var standImg = new Image();
	standImg.src = url + 'images/unitstand.png';
	standDeferred.img = standImg;
	standImg.onload = function() {
	standDeferred.resolve(standDeferred);
	};

	var spritesImg = new Image();
	var data;

	data = $.ajax({
	url: url + 'data/bundles/' + id + '/data.json',
	});

	var deferred = $.Deferred();

	spritesImg.src = url + 'data/bundles/' + id + '/sprites.png';
	spritesImg.onload = function() {
	deferred.img = spritesImg;
	deferred.resolve(deferred);
	};

	$.when(data, standDeferred, deferred).then(ready);

	function ready(d) {
	data = d[0];
	console.log('ready');

	var fps = 24;
	var firstFrameTime = null;

	function animate() {
	window.requestAnimationFrame(function() {

	var time = (new Date()).getTime();

	var animation = data.animations.idle;

	if (!firstFrameTime) {
	firstFrameTime = time;
	}

	var elapsed = Math.round((time - firstFrameTime) / (1000 / fps));

	var animated = true;
	var inView = true;
	var delay = (animated && inView) ? (1000 / 30) : (1000 / 3);
	var frame = elapsed % animation.length;

	if (inView \|\| (elapsed === 0)) {
	if ((frame !== previousFrame) && (animated \|\| previousFrame === null)) {
	previousFrame = frame;
	renderFrame(animation[frame]);
	}
	}

	setTimeout(function() {
	animate();
	}, delay);
	});
	}

	var previousFrame = null;

	animate(id);
	}

	function renderPart(part) {
	if (part.length === 3) {
	part.splice(1, 0, 1, 0, 0, 1);
	}

	var s = data.sprites[part[0]];
	var e = 264 * zoom + part[5] / (s[4] / s[2]);
	var f = 270 * zoom + shift + part[6] / (s[5] / s[3]);
	ctx.setTransform(part[1], part[2], part[3], part[4], e, f);
	ctx.drawImage(spritesImg, s[0], s[1], s[2], s[3], 0, 0, s[2], s[3]);
	}

	function clearFrame() {
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	var w = standImg.width * 0.58;
	var h = standImg.height * 0.58;
	ctx.globalAlpha = 0.18;
	ctx.drawImage(standImg, 0, 0, standImg.width, standImg.height, (canvas.width - w) / 2, 328 * zoom + shift, w, h);

	ctx.globalAlpha = 1;
	}

	function renderFrame(frame) {
	clearFrame();
	frame.forEach(renderPart);
	}