World Factions - UI

[martyj]

Check out a video about the UI for my game.

 

 

The UI uses Awesomium built using Html, css, javascript, and AngularJS as the framework.

[Rick]

I love Awesomium. Did you actually get the inventory working yet (dragging icons around and such?).

[martyj]

Yes. I used jQuery UI's draggable for it.

 

I probably should have recorded that aspect . I was super rushed last night.

[Rick]

Yeah, I'd love to see the html/css/javascript for the inventory. That was a part that sort of stumped me.

 

Also, did you get keyboard injection working with Awesomium?

[martyj]

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;
}

[martyj]

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.

[Rick]

Yeah, it would be cool to create a module to plug and play some of these basic UI elements. Does your html scale correctly according to the resolution/aspect ratio? That's always been another issue for me.