JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="screen" width="100" height="100"></canvas>

JavaScript

class GameObject {
	constructor(tag) {
    	this.Tag = tag;
        this.Components = {};
        this.Parent = undefined;
    }
    
    RegisterParent(parent)
    {
    	this.Parent = parent;
    }
    
    RegisterComponent(componentName, component)
    {
    	this.Components[componentName] = component;
    }

    Update()
    {
    	if(this.Parent['Update'] != undefined)
        {
        	this.Parent.Update();
        }
    
    	for(var key in this.Components)
        {
        	if(this.Components[key]['Update'] !== undefined)
            {
                this.Components[key].Update();
            }
        }
    }
    
    Draw(ctx)
    {
    	for(var key in this.Components)
        {
        	if(this.Components[key]['Draw'] !== undefined)
            {
                this.Components[key].Draw(ctx);
            }
        }
    }
    
    GetComponent(componentName)
    {
    	return this.Components[componentName];
    }
}

class Transform {
	constructor(xPos, yPos) {
    	this.XPos = xPos;
        this.YPos = yPos;
    }
}

class Colour {
	constructor(red, green, blue, alpha) {
    	this.Red = red;
        this.Green = green;
        this.Blue = blue;
        this.Alpha = alpha;
    }
    
    GetColour()
    {
    	return 'rgba('+ this.Red +','+ this.Green +','+ this.Blue +','+ this.Alpha +')'
    }
}

class Graphic {
	constructor(width, height, colour, transform)
    {
    	this.Width = width;
        this.Height = height;
        this.Color = colour;
        this.Transform = transform;
    }
    
    Draw(ctx)
    {
    	ctx.fillStyle = this.Color.GetColour();
        ctx.fillRect(this.Transform.XPos, this.Transform.YPos, this.Width, this.Height);
    }
}

class House {
	constructor(xPos, yPos, width, height, color, tag)
    {
    	this.GameObject = new GameObject(tag);
        this.GameObject.RegisterComponent('Transform', new Transform(xPos, yPos));
        this.GameObject.RegisterComponent('Graphic', new Graphic(width, height, color,...