JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
  <head>
    <title>Candy Crush Clone</title>
    <style>
      pre { margin-left: 15px !important }
    </style>

    <script src="fabric.js"></script>
	<script src="hammer.js"></script>
  </head>
  <body onload="init()">



    <div id="bd-wrapper" ng-controller="CanvasControls">
      <h2>Score : <span id="result">0</span></h2>
      <canvas id="c" width="440" height="550" style="border:1px dotted #ccc"></canvas>
    </div>
	  <span id="log"></span>
<script id="main">
var hack = true;
var process = [];
var DURATION = 200;
    function inline(src, scrId, dest, destId, direction)
	{
		var row = parseInt(((scrId-1)/(this.__canvas.coloumn))) + 1;
		var col = parseInt(scrId - ((row-1)*this.__canvas.coloumn));
		var rowMax = row*this.__canvas.coloumn;
		var colMax = col+((this.__canvas.row-1)*this.__canvas.coloumn);
		var rowMin = rowMax - this.__canvas.coloumn + 1;
		var colMin = col;
		// Horizontal
		if (("panleft" === direction && (scrId-1) < rowMin) || ("panright" === direction && scrId >= rowMax)) {
				src.animate('left', src.origionalX, {
					duration: 200,
					onChange: this.__canvas.renderAll.bind(this.__canvas),
					onComplete: function() {
					//src.isAnimating = false;
					//src.lockMovementY = false;
				},
					easing: fabric.util.ease['easeInOutQuart']
				});
				
				if (src.top != src.origionalY) {
					src.animate('top', src.origionalY, {
					duration: 200,
					onChange: this.__canvas.renderAll.bind(this.__canvas),
					onComplete: function() {
					//src.isAnimating = false;
					//src.lockMovementY = false;
					},
					easing: fabric.util.ease['easeInOutQuart']
				   });
				}
			
				return false;
		}
		
		
		// Vertical
		if (("panup" === direction && (scrId) < colMin) || ("pandown" === direction && scrId >= colMax)) {
			if (src.left != src.origionalX) {
				src.animate('left', src.origionalX, {
				duration: 200,
				onChange:...