JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <title>Tangram Test</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

CSS

body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }

JavaScript

var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();

    var colors = ["red", "orange", "yellow", "green", "blue", "purple", "pink"];
    
    var RotateShape = function(curShape) {
    	setTimeout(function(shape){
        if(shape.attrs.disabled === true){
          return;
        }
        shape.attrs.disabled = false;
        shape.rotate(45); 
        AdjustOffests(shape,shape.scaleX());
        layer.draw();
      }, 400, curShape);   
      
      /*curShape.attrs.disabled = false;
      curShape.rotate(90); 
      AdjustOffests(curShape,curShape.scaleX());
      layer.draw();*/
    };
    
    var InvertShape = function(curShape) {
    	
      curShape.attrs.disabled = true;
      var newScale = curShape.scaleX() * -1;
      AdjustOffests(curShape,newScale);
      curShape.scaleX(newScale);
      layer.draw();
      setTimeout(function(shape){
        shape.attrs.disabled = false;
      },410,curShape); 
      /*var newScale = curShape.scaleX() * -1;
      AdjustOffests(curShape,newScale);
      curShape.scaleX(newScale);
      layer.draw();*/
    }
    
    var AdjustOffests = function(curShape, newScale){
    	var curScale = curShape.scaleX();
      var curRotation = curShape.rotation()%360;      
      if(newScale === 1){
        if(curRotation == 0){
          curShape.offsetX(0);
          curShape.offsetY(0);
        }else if(curRotation == 45){
          curShape.offsetX((curShape.width()*-1));
          curShape.offsetY(curShape.height());           
        }else if(curRotation == 90){
          curShape.offsetX(0);
          curShape.offsetY(curShape.height());           
        }else if(curRotation == 135){
          curShape.offsetX(0);
          curShape.offsetY(0);           
        }else if(curRotation == 180){            	
          curShape.offsetX(curShape.width());
...