Add cursor over multiblock display

src/coffee/controllers/multiblock_controller.coffee

@@ -13,6 +13,8 @@ BaseController = require './base_controller'
 
 module.exports = class MultiblockController extends BaseController
 
+    @::HOVER_TIMEOUT = 5000 # ms
+
     @::IMAGE_SIZE = 48 # px
 
     @::X_LAYER_H_SHIFT = -24 # px
@@ -34,6 +36,7 @@ module.exports = class MultiblockController extends BaseController
         @_blockCache   = null
         @_imageLoader  = options.imageLoader
         @_modPack      = options.modPack
+        @_onHovering   = options.onHovering ?= (itemDisplay)-> # do nothing
 
     # Public Methods ###############################################################################
 
@@ -53,16 +56,24 @@ module.exports = class MultiblockController extends BaseController
         return false unless @model?
         return @_currentLayer < @model.height - 1
 
+    # Property Methods #############################################################################
+
+    Object.defineProperties @prototype,
+        currentLayer:
+            get: -> return @_currentLayer
+
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        # do nothing
+        @$outline = @$('.outline')
+        super
 
     refresh: ->
         @$el.css 'min-height':@_computeMinHeight(), 'min-width':@_computeMinWidth()
 
         @_refreshBlockCache()
         @_refreshAllBlocks()
+        super
 
     # Private Methods ##############################################################################
 
@@ -82,7 +93,7 @@ module.exports = class MultiblockController extends BaseController
             top = (pxHeight - @IMAGE_SIZE) + (x * @X_LAYER_V_SHIFT) + (z * @Z_LAYER_V_SHIFT) + (y * @Y_LAYER_V_SHIFT)
             opacity = 1.0
 
-        zindex = (@model.width - x) + (@model.depth - z) + ((@model.width * @model.depth) * y)
+        zindex = ((@model.width - x) + (@model.depth - z) + ((@model.width * @model.depth) * y)) * 2
 
         return left:left, top:top, 'z-index':zindex, opacity:opacity
 
@@ -101,6 +112,11 @@ module.exports = class MultiblockController extends BaseController
         rightPosition = @_computePosition 0, 0, @model.depth
         return rightPosition.left - leftPosition.left
 
+    _endHovering: ->
+        @$outline.css opacity:0.0
+        @_hoverTimer = null
+        @_onHovering null
+
     _randomDropDelay: ->
         return Math.random() * @MAX_DROP_DELAY
 
@@ -134,6 +150,7 @@ module.exports = class MultiblockController extends BaseController
             if not $block?
                 $block = $("<img alt='#{itemDisplay.itemName}' class='block' />")
                 $block.css position, top:-@IMAGE_SIZE, opacity:0.0
+                @_registerHoverHandlers $block, y, itemDisplay
                 @_imageLoader.load itemDisplay.iconUrl, $block
                 @_blockCache[x][y][z] = $block
                 @$el.append $block
@@ -149,8 +166,23 @@ module.exports = class MultiblockController extends BaseController
 
     _refreshAllBlocks: ->
         return unless @model?
+        if @_endHovering? then @_endHovering()
 
         for x in [0...@model.width]
             for y in [0...@model.height]
                 for z in [0...@model.depth]
                     @_refreshBlock(x, y, z)
+
+    _registerHoverHandlers: ($el, y, itemDisplay)->
+        startHovering = =>
+            return unless y is @_currentLayer
+            zIndex = parseInt($el.css('z-index')) + 1
+            zIndex = if _.isNaN(zIndex) then 0 else zIndex
+
+            @$outline.css opacity:1.0, top:$el.css('top'), left:$el.css('left'), 'z-index':zIndex
+            @_onHovering itemDisplay
+
+            if @_hoverTimer? then clearTimeout @_hoverTimer
+            @_hoverTimer = setTimeout (=> @_endHovering()), @HOVER_TIMEOUT
+
+        $el.hover startHovering, (->)

src/coffee/controllers/multiblock_viewer_controller.coffee

@@ -7,6 +7,7 @@ All rights reserved.
 
 _                    = require '../underscore_mixins'
 BaseController       = require './base_controller'
+InventoryController  = require './inventory_controller'
 MultiblockController = require './multiblock_controller'
 
 ########################################################################################################################
@@ -21,42 +22,67 @@ module.exports = class MultiblockViewerController extends BaseController
 
         @_imageLoader = options.imageLoader
         @_modPack     = options.modPack
+        @_hoverTimer  = null
 
     # Event Methods ################################################################################
 
     onBackClicked: ->
-        return if @backButton.hasClass 'disabled'
+        return if @$backButton.hasClass 'disabled'
         @multiblockController.goBackLayer()
         @refresh()
 
     onNextClicked: ->
-        return if @nextButton.hasClass 'disabled'
+        return if @$nextButton.hasClass 'disabled'
         @multiblockController.goNextLayer()
         @refresh()
 
+    onBlockHovered: (itemDisplay)->
+        if itemDisplay?
+            @$captionText.html itemDisplay.itemName
+            @_imageLoader.load itemDisplay.iconUrl, @$captionIcon
+        else
+            @$captionText.html ' '
+            @$captionIcon.attr 'src', '/images/empty.png'
+
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @multiblockController = @addChild MultiblockController, '.view__multiblock',
+        @completeInventoryController = @addChild InventoryController, '.view__inventory.complete',
+            editable:    false
             imageLoader: @_imageLoader
             modPack:     @_modPack
 
-        @backButton = @$('.button.back')
-        @nextButton = @$('.button.next')
+        @layerInventoryController = @addChild InventoryController, '.view__inventory.layer',
+            editable:    false
+            imageLoader: @_imageLoader
+            modPack:     @_modPack
+
+        @multiblockController = @addChild MultiblockController, '.view__multiblock',
+            imageLoader: @_imageLoader
+            modPack:     @_modPack
+            onHovering:  (itemDisplay)=> @onBlockHovered(itemDisplay)
+
+        @$backButton  = @$('.button.back')
+        @$nextButton  = @$('.button.next')
+        @$captionText = @$('.caption p')
+        @$captionIcon = @$('.caption img')
         super
 
     refresh: ->
-        @multiblockController.model = @model
+        if @model?
+            @completeInventoryController.model = @model.inventory
+            @layerInventoryController.model = @model.getLayerInventory @multiblockController.currentLayer
+            @multiblockController.model = @model
 
         if @multiblockController.hasBackLayer()
-            @backButton.removeClass 'disabled'
+            @$backButton.removeClass 'disabled'
         else
-            @backButton.addClass 'disabled'
+            @$backButton.addClass 'disabled'
 
         if @multiblockController.hasNextLayer()
-            @nextButton.removeClass 'disabled'
+            @$nextButton.removeClass 'disabled'
         else
-            @nextButton.addClass 'disabled'
+            @$nextButton.addClass 'disabled'
 
         super