JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="1"></div>
<div class="2"></div>
<div class="3"></div>

JavaScript

function Unit(sub) {
    self = sub || this;
    
    self.pos = {x:0,y:0}
    self.print = function() {
        return "Unit: { pos: { x:" + self.pos.x + ", y:" + self.pos.y + " } }";
    }
};

function Protoss(sub) {
    self = sub || this;
    Unit(self);
    
    self.speak = function() {
        return "My life for Aiur";
    };
    self.isProtoss = true;
};

function Flier(sub) {
    self = sub || this;
    Unit(self);
    
    self.speak = function() {
        return "Contact";
    };
    self.isFlier = true;
};

function Corsair(sub) {
    self = sub || this;
    Protoss(self);
    Flier(self);
};

function Tank(sub) {
    self = sub || this;
    Morpher(self, function() {
        if (self.mode === "Tank") {
            self.mode = "Seige";
        } else {
            self.mode = "Tank";
        }
    });
    
    self.mode = "Tank";
}

function Morpher(sub, morph) {
    self = sub || this;
    Unit(self);
    
    self.morph = morph;
};

var unit = new Unit();
$('div.1').html(unit.print());

var corsair = new Corsair();
if (corsair.isProtoss && corsair.isFlier) {
    $('div.2').html(corsair.speak());
};

var tank = new Tank();
$('div.3').html(tank.mode);
tank.morph();
$('div.3').html($('div.3').html() + ' -> ' + tank.mode);