Inventory Management System PHP/InteractJS

[Monkuar]

I'm going to MAKE this task very simple for you. I am just not that experienced with php yet to conquer this specific task.

 

Let me get you started with some examples of how easy the client side of this is.

 

Copy and paste this and run it as index.php on your dev server:

 

<script src="http://code.interactjs.io/interact-1.2.2.min.js"></script>
<script>
	function qs(expr){return document.querySelector(expr)}
</script>
<style>
.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:.7s;-webkit-animation-duration:.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1);opacity:1}}
.InventoryTest{
	border:1px solid #D3D3D3;border-bottom:0;width:24px;height:24px;float:left;padding:3px;border-right:0;
}
.itemdrag{position:relative;z-index:1}
 
.InventoryTest:nth-child(9n+9){
	border-right:1px solid #D3D3D3
}
.InventoryTest:nth-last-child(-n+9){
 border-bottom:1px solid #D3D3D3;
}
.itemdrag{position:relative;z-index:1}
</style>
	<?php 
		error_reporting(E_ERROR);
		//Display 63 boxes (Fits with the css nth-child tags to look pretty! lol)
		for($i = 1; $i < 64; $i++){
			if ($i == 1){ // Slot positions 1 Dimensions: 3x3 (lengthXwidth)
				$item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/3azYLNf.png></div>';
			}elseif($i==4){ // Slot position 2 Dimensions 2x1 lengthXwidth)
				$item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/l3y0W7d.png></div>';
			}else{$item1 = '';}
			
			

			$inventoryboxes .= '<div class="InventoryTest" data-slot='.$i.'>'.$item1.'</div>';
		}
	?>
	<div style="width:300px">
	<?php echo $inventoryboxes ?>
</div>

<script>
	
	  
// target elements with the "draggable" class
interact('.itemdrag')
  .draggable({
  
    // enable inertial throwing
    inertia: true,
	onstart: function (event) {
		
		},
 
    // call this function on every dragmove event
    onmove: function (event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

 
      // translate the element
	  target.style.position = "relative";
	  target.style.zIndex="2500";
      target.style.webkitTransform = target.style.transform ='translate(' + x + 'px, ' + y + 'px)';
	
 
 
      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    // call this function on every dragend event
    onend: function (event) {
	  var target = event.target;
 
		target.removeAttribute("style");
		target.removeAttribute("data-x");
		target.removeAttribute("data-y");
  
    }
  });
  
interact('.InventoryTest').dropzone({
	
	
  // only accept elements matching this CSS selector
  accept: '.itemdrag',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.40,

  // listen for drop related events:

  ondropactivate: function (event) {
  var draggableid = event.relatedTarget;
    // add active dropzone feedback
	// Is this and item that can be equipped?

	if (event.relatedTarget.getAttribute('item-type') != "Misc"){
	 //qs('#shadow'+draggableid.getAttribute('item-type')+'').style.display='none';
	}
		
	
	
	
    event.target.classList.add('drop-ACCEPT');
  },
  ondragenter: function (event) {
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
	

    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
    //draggableElement.textContent = 'Dragged in';
  },
  ondragleave: function (event) {
    // remove the drop feedback style
	
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    //event.relatedTarget.textContent = 'Dragged out';
  },
  ondrop: function (event) {
	var dragid = event.relatedTarget;
	if (event.target.hasChildNodes()) {
	//console.log(event.target.childNodes[1]);
	return;
	}
	
	var slotp = event.target.getAttribute("data-slot");
	var slotp2 = event.relatedTarget.getAttribute("data-cslot");
	var shadowid = qs('#shadow'+dragid.getAttribute('item-type')+'');
	var item_id = event.relatedTarget.getAttribute("item_id"); // <-- The one being dragged
	
	//We need to show the shadow gear again.
	(shadowid) ? shadowid.style.display='inline-block': '';
	

	
 
	
	
	qs('[data-slot="'+slotp2+'"]').innerHTML='';
	qs('[data-slot="'+slotp+'"]').appendChild(event.relatedTarget);
	
	event.target.childNodes[0].setAttribute("data-cslot", slotp);
	
	//We do our ajax functions here, just log the information for now:
	console.log(" item_id="+item_id+"&slot_go="+slotp+"  ");
 
 
	
	
	event.relatedTarget.className += ' fadeIn';
	

	
	
	//console.log(event.relatedTarget);
	//console.log(event.target);
    //event.relatedTarget.textContent = 'Dropped';
  },
  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-ACCEPT');
    event.target.classList.remove('drop-target');
  }
});
</script>


	

Now, go there and drag and move the belt around in the inventory. They should update accordingly. Example:

 

Press F12 and check your console. You should see upon each item being moved, it's logging their slot it was moved.

 

What I need?

 

I need this where items CANNOT overlap each other in the inventory. The items need to be piped from mysql and positioned to the appropriate position in the inventory. You need to be experienced in Javascript and PHP for this. InteractJS because if you check the example above, the armor is being dragged, but you cannot drop it on anything because interactjs doesn't know it's that big.

 

If you look at Diablo 2's inventory system, and Path of Exile's or Diablo 3's, you can get an idea of what I'm looking for. Let me know if you're interested in this and what price.

 

There is a field in my rpg_user_items table called slot_position and slot_size. slot_size represents the widthxheight of the item. (in this example and code above, it's 3x3 (armor) and 2x1 (belt).

Edited January 25, 2015 by Monkuar