JSFiddle - React, Tailwind, and code Playground

by greyhare

HTML

<div id="trays">
    <ul class="tray">
        <li>
            <img src="http://paragonwiki.com/w/images//b/b2/Inherent_Brawl.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//2/27/AssaultWeapons_ARBurst.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//2/25/AssaultWeapons_ShotgunSlug.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//9/96/AssaultWeapons_ShotgunBuckShot.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//8/8c/AssaultWeapons_ARM30grenade.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//a/ae/AssaultWeapons_ShotgunBeanbag.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//f/f4/AssaultWeapons_SniperRifle.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//d/d2/AssaultWeapons_ARFlamethrower.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//1/1a/AssaultWeapons_ARFlamethrowerIgnite.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//1/1f/AssaultWeapons_ARFullAuto.png" />
        </li>
    </ul>
    <ul class="tray">
        <li>
            <img src="http://paragonwiki.com/w/images//b/b2/Inherent_Brawl.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//0/06/Archery_QuickArrow.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//2/24/Archery_MediumArrow.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//6/65/Archery_ConeArrow.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//1/11/Archery_FlamingArrow.png" />
        </li>
        <li>
            <img src="http://paragonwiki.com/w/images//7/70/Archery_Aim.png" />
        </li>
        <li>
           ...

CSS

ul.tray {
    list-style-type: none;
    padding: 0;
}
ul.tray li {
    display: inline;
}
ul.tray li img {
    vertical-align: middle;
}
#trays {
    position: relative;
}
#trayNumber {
    position: absolute;
    top: 70px;
    left: 374px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
}
button.direction {
    position: absolute;
    height: 36px;
    width: 12px;
    left: 0px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 24px;
    padding: 0;
    border: none;
    background: #fff;
}
#rotUp {
    top: 24px;
}
#rotDown {
    top: 96px;
}
.label {
    font-family: Verdana, Arial, sans-serif;
    font-size: 8px;
    font-weight: bold;
}

JavaScript

var trays = $(".tray"),
    activeTray = 0,
    kAxMajor = 160,
    kAxMinor = 140,
    kStepDeg = -13,
    kOfstX = 140,
    kOfstY = 120,
    kStepRotate = 1.0 / 4.0;

trays.css("position", "absolute");
var coord = function (x) {
    return Math.round(x).toString() + "px";
};

var positionTrays = function (selectedTray) {
    var i, x, y, z, vert, opacity;
    for (i = 0; i < trays.length; ++i) {
        // Work out the relative location
        // of the tray.
        vert = i - selectedTray;

        // Compute coordinates and move tray.
        a = vert * kStepDeg * Math.PI / 180.0;
        y = Math.sin(a) * kAxMajor;
        x = -Math.cos(a) * kAxMinor;
        z = Math.abs(vert);
        //opacity = z <= 1 ? 1.0 : 2.0 - z;
        if (vert <= -1) {
            opacity = 0;
        } else if (vert <= 0) {
            opacity = 1 + vert;
        } else if (vert <= 1) {
            opacity = 1 - (vert / 4);
        } else {
            opacity = 0.75;
        }

        $(trays[i])
            .css("top", coord(y + kOfstY))
            .css("left", coord(x + kOfstX))
            .css("opacity", opacity)
            .css("z-index", 2 - Math.ceil(z))
            .show();
    }
};

var currentTrayPos = activeTray,
    currentTrayStep = kStepRotate;
var steppedTrayMovement = function () {
    if (currentTrayPos == activeTray) return;
    currentTrayPos += currentTrayStep;
    if (currentTrayPos >= trays.length) {
        currentTrayPos -= trays.length;
    } else if (currentTrayPos < 0) {
        currentTrayPos += trays.length;
    }
    positionTrays(currentTrayPos);
    window.setTimeout(steppedTrayMovement, 10);
};

positionTrays(currentTrayPos);

var Key = function (element, name, code) {
    var that = this;
    this.isPressed = false;
    this.keyName = name;
    this.keyCode = code;
    this.domElem = $(element)
        .mousedown(function () {
        that.pressed();
    })
        .mouseup(function () {
        that.released();
    })
       ...