JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.0/pixi.js"></script>
<script text="text/jsont"...

JavaScript

var app = new PIXI.Application(800, 800, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var _data = JSON.parse(jsonData.innerText); 
 

var cellWidth = 20,
cellHeight = 20,
_cellWidth = 5,
_cellHeight = 5,
padding=10;
for(var i=0,index=0;i<_data.size[1];i++){
  for(var f=0;f<_data.size[0];f++){
		let cell = new PIXI.Sprite(PIXI.Texture.WHITE),
    _index = index;
    cell.width = cellWidth;
    cell.height = cellHeight;
    cell.tint = 0xff000f;
    cell.position.x = (i)*(cellWidth+padding);
    cell.position.y = f*(cellHeight+padding);
    app.stage.addChild(cell);
    
       var _color =false;
    if(_index==_data.domokun[0]){ 
    	_color =1;//blue
    }else if(_index==_data['end-point'][0]){
    	_color =2; //yellow
    }else if(_index==_data['pony'][0]){
    	_color =3;  //red
    }
    if(_color){ 
     //console.log(cell.position.x,cell.position.y,_color)
      var _cellItem = new PIXI.Sprite(PIXI.Texture.WHITE);
      _cellItem.width =cellWidth/2; 
       //_cellItem.position.y  =_index; 
      _cellItem.height =cellHeight/2;
      _cellItem.position.x = _cellItem.width/4;
      _cellItem.position.y = _cellItem.height/4;
      _cellItem.scale.y =_cellItem.scale.x = 0.5;
      _cellItem.tint = _color ==1?0x00ffff:(_color ==2?0xffff00:0xff00ff); 
      cell.addChild(_cellItem);
      //console.log(_cellItem);
    }
    
    var  
    _dItem = _data.data[_index];
    for(var _i=0;_i<_dItem.length;_i++){
    var _cellDir;
      switch(_dItem[_i]){
	
  			case 'west':{ 
          _cellDir = new PIXI.Sprite(PIXI.Texture.WHITE);
          _cellDir.width = _cellWidth;
          _cellDir.height = _cellHeight/2;
          _cellDir.tint = 0x00ff0f;
          _cellDir.position.x = 0;
          _cellDir.position.y = _cellHeight/2 + cell.height/2;
          cell.addChild(_cellDir);
        	break;
        }
        case 'north':{
          _cellDir = new PIXI.Sprite(PIXI.Texture.WHITE);
          _cellDir.width = _cellWidth/2;
         ...