JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.die {
    background-size:600% 200%;
    background-image:url(http://tiqtech.com/apps/piratesdice/assets/dice.png);
    height:32px;
    width:24px;
}

.dice {
    text-align:center;
}

.dice .die {
    height:45px;
    width:30px;
    display:inline-block;
}
.home {
    text-align:center;
    padding:10px;
}

.home IMG {
    width:300px;
}

.menu-item {
    text-align:left;
    width:320px;
    display:inline-block;
    box-size:border-box;
}

.menu-item .die {
    height:60px;
    width:40px;
    display:inline-block;
}

.menu-item .label {
    display:inline-block;
    vertical-align:top;
    line-height:60px;
    font-size:30px;
    margin-left:10px;
}

.badge .avatar {
    position:relative;
    height:60px;
    width:45px;
    border-radius:10px;
    background:rgba(80,80,80,0.5);
}

.badge .avatar .die {
    height:24px;
    width:16px;
    position:absolute;
    bottom:-8px;
    right:-8px;
}

.badge {
    margin:10px;
    border:1px solid rgba(100,100,255,0.5);
    padding:10px;
}

.badge .details {
    min-height:60px;
    padding-left:15px;
}

.badge .details > * {
    box-sizing:border-box;
    background:#ddd;
    margin:3px 0px;
    height:50%;
}

JavaScript

enyo.kind({
    name:"pd.App",
    classes:"enyo-unselectable",
    components:[
        {kind:"Panels",  arrangerKind:"CardSlideInArranger", classes:"enyo-fit", draggable:true, components:[
            {kind:"pd.Home", onChallenge:"viewChallenge", onVersus:"viewVersus", onContinue:"continueGame"},
            {kind:"pd.Challenge"},
            {kind:"pd.Versus"},
            {kind:"pd.Game"}
        ]}
        // view state
    ],
    viewChallenge:function() {
        this.$.panels.setIndex(1);
    },
    viewVersus:function() {
        this.$.panels.setIndex(2);
    },
    continueGame:function() {
        // check for last game
        this.$.panels.setIndex(3);
    }
});

enyo.kind({
    name:"pd.Die",
    classes:"die",
    published:{
        number:1,
        selected:false
    },
    create:function() {
        this.inherited(arguments);
        this.numberChanged();
    },
    numberChanged:function() {
        this.applyStyle("background-position", (this.number-1)*-100 + "% 0");
    }
});

enyo.kind({
    name:"pd.MenuItem",
    classes:"menu-item",
    published:{
        number:1,
        label:""
    },
    components:[
        {name:"die", kind:"pd.Die"},
        {name:"label", classes:"label"}
    ],
    create:function() {
        this.inherited(arguments);
        this.numberChanged();
        this.labelChanged();
    },
    numberChanged:function() {
        this.$.die.setNumber(this.number);
    },
    labelChanged:function() {
        this.$.label.setContent(this.label);
    }
});

enyo.kind({
    name:"pd.Home",
    classes:"home",
    events:{
        onChallenge:"",
        onVersus:"",
        onContinue:""
    },
    components:[
        {kind:"Image", src:"http://tiqtech.com/apps/piratesdice/assets/sign.png"},
        {kind:"pd.MenuItem", number:1, label:"Challenge", ontap:"doChallenge"},
        {kind:"pd.MenuItem", number:2, label:"Versus", ontap:"doVersus"},
        {kind:"pd.MenuItem", number:3, label:"Continue",...