JSFiddle - React, Tailwind, and code Playground
JavaScript
window.onload = function () {
//===================================================
// CREATE BASICS
//===================================================
const IMG_SQUARE = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAACWCAYAAAB0HqwnAAABmklEQVR4nO3TMRHAMBDAsG/Ahj+DFEHOYztICLz42TNngKv1dQD8nUkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBIJJIJgEgkkgmASCSSCYBMILL74CkfGfYIsAAAAASUVORK5CYII=`;
let squareTexture = PIXI.Texture.fromImage(IMG_SQUARE);
var renderer = PIXI.autoDetectRenderer(320, 600, {
backgroundColor: 0xAA7F39,
antialias: true,
transparent: false,
resolution: 1
});
document.body.appendChild(renderer.view);
renderer.stage = new PIXI.Container();
//===================================================
// EXTEND CONTAINER CLASS
//===================================================
PIXI.Table = class Table extends PIXI.Container {
constructor(params) {
params = Object.assign({ width: 100, rows: 1, columss: 1 }, params)
super()
this._width = params.width
this._height = params.height
}
get width() { return this._width }
set width(value) { this._width = value }
get height() { return this._height }
set height(value) { this._height = value }
}
//===================================================
//===================================================
// ADD HEADER CONTAINER
//===================================================
var containerHeader = new PIXI.Table({
width: renderer.view.width,
height: 300
});
...