Jump to content

World Factions - UI


martyj
 Share

Recommended Posts

I am still working on keyboard. It's the one feature preventing me from showing a multi-player video.

Javascript:

element.droppable({
   drop:function(event,ui)
   {
 var dragIndex = angular.element(ui.draggable).data('index');
 var dragLoc = angular.element(ui.draggable).data('location');
 var dropIndex = angular.element(this).data('index');
 var dropLoc = angular.element(this).data('location');
 if(dragLoc == dropLoc)
 {
  if(dragLoc == 'in')
  {
   var dragRow = parseInt(dragIndex/GAME_ENGINE.InventoryScope.cols);
   var dragCol = dragIndex%GAME_ENGINE.InventoryScope.cols
   var dropRow = parseInt(dropIndex/GAME_ENGINE.InventoryScope.cols);
   var dropCol = dropIndex%GAME_ENGINE.InventoryScope.cols
   var oldItem = GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol];
   GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol] = GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol];
   GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol] = oldItem;
   // TODO: Have Inventory do this logic
   GAME_ENGINE.InventoryScope.moveItem(dragIndex, dropIndex);
  }
  else
  {
   var oldItem = GAME_ENGINE.ActiveItemScope.items[dropIndex];
   GAME_ENGINE.ActiveItemScope.items[dropIndex] = GAME_ENGINE.ActiveItemScope.items[dragIndex];
   GAME_ENGINE.ActiveItemScope.items[dragIndex] = oldItem;
   // TODO: Have Inventory do this logic
   GAME_ENGINE.ActiveItemScope.moveItem(dragIndex, dropIndex);
  }
 }
 else
 {
  if(dragLoc == 'in') // dropLoc = ai
  {
   var dragRow = parseInt(dragIndex/GAME_ENGINE.InventoryScope.cols);
   var dragCol = dragIndex%GAME_ENGINE.InventoryScope.cols
   var oldItem = GAME_ENGINE.ActiveItemScope.items[dropIndex];
   var newItem = GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol];
   GAME_ENGINE.ActiveItemScope.items[dropIndex] = newItem;
   GAME_ENGINE.InventoryScope.inventoryRow[dragRow][dragCol] = oldItem;
   // TODO: Have Inventory do this logic
   GAME_ENGINE.InventoryScope.addItem(oldItem.id, oldItem.qty, dragIndex);
   GAME_ENGINE.ActiveItemScope.addItem(newItem.id, newItem.qty, dropIndex);
  }
  else // Drag Location = ai, drop Location inventory
  {
   var dropRow = parseInt(dropIndex/GAME_ENGINE.InventoryScope.cols);
   var dropCol = dropIndex%GAME_ENGINE.InventoryScope.cols
   var oldItem = GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol];
   var newItem = GAME_ENGINE.ActiveItemScope.items[dragIndex];
   GAME_ENGINE.InventoryScope.inventoryRow[dropRow][dropCol] = newItem;
   GAME_ENGINE.ActiveItemScope.items[dragIndex] = oldItem;
   // TODO: Have Inventory do this logic
   GAME_ENGINE.ActiveItemScope.addItem(oldItem.id, oldItem.qty, dragIndex);
   GAME_ENGINE.InventoryScope.addItem(newItem.id, newItem.qty, dropIndex);
  }
 }
 scope.$apply();
 GAME_ENGINE.ActiveItemScope.$apply();
 GAME_ENGINE.InventoryScope.$apply();
   }
  });

 

HTML:

<div id="active_item_inventory">
   <div class="inventory_item" ng-repeat="item in activeItems track by $index">
 <div ng-if="item.qty==0">
  <div class="item" data-index="{{$index}}" ng-class="{selected: item.id!=0}" data-location="ai" droppable>
   <div class="active_selection_box" ng-show="$index == selected"></div>
  </div>
 </div>
 <div ng-if="item.qty > 0">
  <div class="item">
   <img ng-src="{{item.icon}}" data-index="{{$index}}" ng-class="{selected: item.id!=0}" data-location="ai" draggable />
   <div class="count" ng-show="item.qty > 1">
    {{item.qty}}
   </div>
   <div class="active_selection_box" ng-show="$index == selected"></div>
  </div>
 </div>
   </div>
  </div>
  <div id="inventory">
   <div class="inventory_row" ng-repeat="row in inventoryRow track by $index">
 <div class="inventory_item" ng-init="rowIndex = $index">
  <div ng-repeat="item in row track by $index">
   <div class="row_item" ng-init="colIndex = $index">
    <div ng-if="item.qty == 0">
	 <div class="item" data-index="{{(rowIndex * cols) + colIndex}}" data-location="in" droppable></div>
    </div>
    <div ng-if="item.qty > 0">
	 <div class="item">
	  <img ng-src="{{item.icon}}" data-index="{{(rowIndex * cols) + colIndex}}" data-location="in" draggable />
	  <div class="count" ng-show="item.qty > 1">
	   {{item.qty}}
	  </div>
	 </div>
    </div>
   </div>
  </div>
 </div>
   </div>
  </div>

 

CSS

#inventory{

}
#inventory .inventory_row{
 padding: 0px 0px 0px 2px;
 height: 84px;
}

#inventory .row_item{

}
#inventory .item{
 background: #404040;
 line-height: 64px;
 width: 64px;
 height: 64px;
 margin: 10px;
 float: left;
}
#inventory .item img{
 vertical-align: middle;
 width: 54px;
 margin: 5px;
}
.item .count{
position: absolute;
margin-top: -84px;
margin-left: 4px;
}
#active_item_inventory{
height:104px;
}
#active_item_inventory .inventory_item{
 float: left;
}
#active_item_inventory .item{
 background: #404040;
 width: 84px;
 height: 84px;
 margin: 10px;
 line-height: 64px;
}

#active_item_inventory .item img{
 vertical-align: middle;
 width: 74px;
 margin: 5px;
}
.sortable{
list-style-type: none; margin: 0; padding: 0;
}
.ui-draggable-dragging{
z-index: 1000;
width: 54px !important;
}

Link to comment
Share on other sites

I only have two bugs with the inventory code.

 

1. When you drag an item, it sometimes doesn't resize correctly to the drop location if you drop it to the same location.

2. When you drag an item, the quantity doesn't go with the item.

 

I can send you a zip of the whole UI if you're interested. Along with some javascript console commands to add items to the inventory. Let you play around with it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...