JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://rawgit.com/GoodBoyDigital/pixi.js/dev/bin/pixi.js"></script>

JavaScript

var o1 = new PIXI.Graphics;
	
	o1.position.x = 50;
	o1.position.y = 50;
	o1.beginFill(0xFFFFFF);
	o1.lineStyle(1, 0x000000);
	o1.drawRect(0,0, 200,200);
	
    o1.interactive = true;
	o1.buttonMode =true;
	o1
        .on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove);

	var o2 = new PIXI.Graphics;
	
	o2.position.x = 100;
	o2.position.y = 100;
	o2.beginFill(0xFFFFFF);
	o2.lineStyle(1, 0x000000);
	o2.drawRect(0,0, 200,200);
	
    o2.interactive = true;
	o2.buttonMode =true;
	o2
        .on('mousedown', onDragStart)
        .on('touchstart', onDragStart)
        .on('mouseup', onDragEnd)
        .on('mouseupoutside', onDragEnd)
        .on('touchend', onDragEnd)
        .on('touchendoutside', onDragEnd)
        .on('mousemove', onDragMove)
        .on('touchmove', onDragMove);

	  	o3 = new PIXI.Text("This an example of Arial 20px in white", {font:"20px Arial", fill:"#FFFFFF"});
		o3.position.x = 10; 
        o3.position.y = 10;

	var renderer= PIXI.autoDetectRenderer( window.innerWidth, window.innerHeight, { backgroundColor: 0xCCCCCC, antialias: true } );
	document.body.appendChild( renderer.view );
	var stage= new PIXI.Container();  
	stage.addChild( o1 );
	stage.addChild( o2 );
    stage.addChild( o3 );
	requestAnimationFrame( animate );

	function animate() {
	    requestAnimationFrame( animate );
	    renderer.render( stage );
	}

	function onDragStart(event) {
        event.stopPropagation();
		this.data = event.data;
		this.alpha = 0.5;
		this.dragging = true;
	}

	function onDragEnd() {
		this.alpha = 1;
		this.dragging = false;
		this.data = null;
	}

	function onDragMove() {
		if (this.dragging) {
			var newPosition = this.data.getLocalPosition(this.parent);
			this.position.x = newPosition.x;
			this.position.y =...