JSFiddle - React, Tailwind, and code Playground

by ephekt

HTML

<div class="delivery-truck"></div>
<div class="delivery-truck"></div>
<div class="depot"></div>

<div id="house" class="delivery-address"></div>
<div id="office" class="delivery-address"></div>
<div id="factory" class="delivery-address"></div>
<div id="vacation" class="delivery-address"></div>

CSS

body{
    background:#000;
}

.delivery-truck{
    background:#CC0000;
    width:30px;
    height:30px;
    position:absolute;
    z-Index: 5;
}

.depot{
    position:absolute;
    width:150px;
    height:150px;
    background:#ccc;
    border:3px dashed #666;
    top:200px;
    left:300px;
}

.delivery-address{
    position:absolute;
    border:3px dashed yellow;
}

.parcel{
    width:5px; 
    height:5px;
    background:white;
    display:block;
    border:2px solid red;
}

#house{
    width:50px;
    height:50px;
    top:340px;
    left:700px;
    background:#663300;
}

#office{
    width:80px;
    height:150px;
    top:100px;
    left:650px;
    background:white;
}

#factory{
    width:160px;
    height:60px;
    top:500px;
    left:600px;
    background:grey;
}
#vacation{
    width:50px;
    height:50px;
    top:340px;
    left:50px;
    background:#00FF00;
}

JavaScript

/* 
The Task

Second solution: Same as v1 but implements the closure to prevent 
any issues with conflicting scripts.

Requires mootools more for transition effects

Things I'm aware aren't polished:
1 - The animations are good, but could be better - I don't do collision
detection with other buildings yet, and assume that we'll park the truck in
the middle of the structure but could change that.  Also the package sometimes
shows up before the truck finishes the transition - this is my first time
using mootools (and transitions) so I'm sure there's a way to delay
dropping the package until a DOM refresh is done.
2 - z-Index on the truck needs to be set to some value (say 5) so that it
doesn't disappear as it's delivering
*/
var runDelivery = (function() {
  var Depot = new Class({
    initialize: function(root, packages) {
      this.root = root;
      if (packages) {
        this.packages = packages;
      } else {
        this.packages = [];
      }
    },

    getPackage: function() {
      if (this.packages.length > 0) {
        return this.packages.shift();
      }
      throw "No packages";
    },

    hasPackage: function() {
      return this.packages.length > 0;
    },

    addPackage: function(new_package) {
      this.packages.push(new_package);
    },

    getRoot: function() {
      return this.root;
    }
  });

  var Package = new Class({
    initialize: function(destination) {
      this.destination = destination;
    },

    getDestination: function() {
      return this.destination;
    },

    deliverPackage: function() {
      // this will draw the package on the screen
      var packageElem = new Element('div', {
        'class' : 'parcel'
      });
      packageElem.inject(this.getDestination());
    }
  });

  var Truck = new Class({
    initialize: function(root, depot, packages) {
      this.root = root;
      this.depot = depot;
      if (packages) {
        this.packages = packages;
      } else {
        this.packages = [];
      }
   ...