JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<ul class="buttons">
    <li class="lvl-6">
        <button>6</button>
    </li>
    <li class="lvl-5">
        <button>5</button>
    </li>
    <li class="lvl-4">
        <button>4</button>
    </li>
    <li class="lvl-3">
        <button>3</button>
    </li>
    <li class="lvl-2">
        <button>2</button>
    </li>
    <li class="lvl-1">
        <button>1</button>
    </li>
    <li class="lvl-0">
        <button>0</button>
    </li>
</ul>
<div class="elevator-shaft shaft-1">
    <div class="elevator" id="ev1"></div>
</div>
<div class="elevator-shaft shaft-2">
    <div class="elevator" id="ev2"></div>
</div>
<div class="elevator-shaft shaft-3">
    <div class="elevator" id="ev3"></div>
</div>

CSS

ul {
    list-style: none;
    margin:0;
    padding:0;
    position: absolute;
    top:10px;
    left:10px;
    width:50px;
    height:350px;
}
li {
    width: 50px;
    height: 50px;
    outline: 1px solid lightgrey;
}
.elevator-shaft {
    border: 1px solid lightgrey;
    width:50px;
    height:350px;
    position: absolute;
}
.shaft-1 {
    top:10px;
    left:70px;
}
.shaft-2 {
    top:10px;
    left:130px;
}
.shaft-3 {
    top:10px;
    left:190px;
}
.elevator {
    outline: 1px solid blue;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom:0;
    left:0;
    transition: bottom 2s ease-in-out;
}

JavaScript

var levelArr = [0, 50, 100, 150, 200, 250, 300];

var orderingQueue = [];

var elevator = function () {

    this.isMoving = false;
    this.domSelector = null;
    this.destinationLvl = null;

    this.goToLevel = function (lvl) {
        this.destinationLvl = lvl;
        this.domSelector.css('bottom', levelArr[lvl]);
        this.isMoving = true;
    };

    this.init = function (id) {
        var self = this;
        this.domSelector = $(id);
        this.domSelector.on('transitionend', function () {
            //alert('.lvl-'+self.destinationLvl);
            $('.lvl-' + self.destinationLvl).css({
                'background': 'white'
            });
            self.isMoving = false;
        });
        return this;
    };
}

var ev1 = new elevator();
ev1.init('#ev1');

var ev2 = new elevator();
ev2.init('#ev2');

var ev3 = new elevator();
ev3.init('#ev3');

var elevatorsArr = [ev1, ev2, ev3];

$('button').on('click', function () {
    var lvl = $(this).text();
    $('.lvl-' + lvl).css({
        'background': 'lightpink'
    });
    callElevator(lvl);
    //ev1.goToLevel(lvl);
});



function callElevator(lvl) {
    orderingQueue.push(lvl);
    dequeue();
}

function dequeue() {
    if (orderingQueue.length > 0) {
        for (var i = 0; i < elevatorsArr.length; i++) {
            if (!elevatorsArr[i].isMoving) {
                elevatorsArr[i].goToLevel(orderingQueue.shift());
                return;
            }
        }
    }
}