Added new slot icons and dungeon map.

app/styles/game-menu/inventory-view.sass

@@ -7,6 +7,8 @@ $equippedWidth: 450px
 $itemSlotMargin: 5px
 $itemSlotSize: ($equippedWidth - 6 * 2 * $itemSlotMargin) / 6
 $itemSlotSizeWithMargin: $itemSlotSize + 2 * $itemSlotMargin
+$itemSlotBorderWidth: 2px
+$itemSlotInnerWidth: $itemSlotSize - 2 * $itemSlotBorderWidth
 $heroContainerBottomMargin: 10px
 $heroContainerWidth: 4 * $itemSlotSizeWithMargin
 $heroContainerHeight: $inventoryHeight - 2 * $itemSlotSizeWithMargin - $heroContainerBottomMargin
@@ -76,16 +78,71 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
         width: 100%
         height: 100%
         background-size: cover
-        border: 2px solid #888
-        @include opacity(0.75)
+        border: $itemSlotBorderWidth solid #888
+        @include opacity(0.4)
+        background-image: url(/images/pages/game-menu/slot-icons.png)
 
-      &[data-slot="waist"], &[data-slot="pet"], &[data-slot="minion"], &[data-slot="misc-1"]
+      &[data-slot="misc-1"] .placeholder
+        background-position-x: -0 * $itemSlotInnerWidth
+
+      &[data-slot="minion"] .placeholder
+        background-position-x: -1 * $itemSlotInnerWidth
+
+      &[data-slot="programming-book"] .placeholder
+        background-position-x: -2 * $itemSlotInnerWidth
+
+      &[data-slot="spellbook"] .placeholder
+        background-position-x: -3 * $itemSlotInnerWidth
+
+      &[data-slot="misc-0"] .placeholder
+        background-position-x: -4 * $itemSlotInnerWidth
+
+      &[data-slot="wrists"] .placeholder
+        background-position-x: -5 * $itemSlotInnerWidth
+
+      &[data-slot="left-ring"] .placeholder
+        background-position-x: -6 * $itemSlotInnerWidth
+
+      &[data-slot="right-ring"] .placeholder
+        background-position-x: -7 * $itemSlotInnerWidth
+
+      &[data-slot="torso"] .placeholder
+        background-position-x: -8 * $itemSlotInnerWidth
+
+      &[data-slot="feet"] .placeholder
+        background-position-x: -9 * $itemSlotInnerWidth
+
+      &[data-slot="neck"] .placeholder
+        background-position-x: -10 * $itemSlotInnerWidth
+
+      &[data-slot="waist"] .placeholder
+        background-position-x: -11 * $itemSlotInnerWidth
+
+      &[data-slot="eyes"] .placeholder
+        background-position-x: -12 * $itemSlotInnerWidth
+
+      &[data-slot="head"] .placeholder
+        background-position-x: -13 * $itemSlotInnerWidth
+
+      &[data-slot="pet"] .placeholder
+        background-position-x: -14 * $itemSlotInnerWidth
+
+      &[data-slot="gloves"] .placeholder
+        background-position-x: -15 * $itemSlotInnerWidth
+
+      &[data-slot="left-hand"] .placeholder
+        background-position-x: -16 * $itemSlotInnerWidth
+
+      &[data-slot="right-hand"] .placeholder
+        background-position-x: -17 * $itemSlotInnerWidth
+
+      &[data-slot="whatever"]
         // My spooging of the other placeholders had them dimmed; these didn't.
         .placeholder
           @include opacity(0.35)
           border-color: black
       &.selected
-        &[data-slot="waist"], &[data-slot="pet"], &[data-slot="minion"], &[data-slot="misc-1"]
+        &[data-slot="whatever"]
           .placeholder
             border-color: #28f
 

app/styles/play/world-map-view.sass

@@ -1,11 +1,13 @@
 @import "app/styles/mixins"
 @import "app/styles/bootstrap/variables"
 
+$mapHeight: 1536
 $forestMapWidth: 2500
-$forestMapHeight: 1536
+$dungeonMapWidth: 2350
 $forestMapSeaBackground: #71bad0
+$dungeonMapCaveBackground: rgb(54, 43, 34)
 $levelDotWidth: 2%
-$levelDotHeight: $levelDotWidth * $forestMapWidth / $forestMapHeight
+$levelDotHeight: $levelDotWidth * $forestMapWidth / $mapHeight
 $levelDotZ: $levelDotHeight * 0.25
 $levelDotHoverZ: $levelDotZ * 2
 $levelDotShadowWidth: 0.8 * $levelDotWidth
@@ -28,7 +30,12 @@ $gameControlMargin: 30px
 #world-map-view
   width: 100%
   height: 100%
-  background-color: $forestMapSeaBackground
+
+  &.forest
+    background-color: $forestMapSeaBackground
+
+  &.dungeon
+    background-color: $dungeonMapCaveBackground
 
   .map
     position: relative

app/templates/play/world-map-view.jade

@@ -1,5 +1,5 @@
 .map
-  img.map-background(src="/images/pages/play/map_forest.jpg", alt="")
+  img.map-background(src="/images/pages/play/map_" + mapType + ".jpg", alt="")
 
   - var seenNext = false;
   each campaign in campaigns

app/views/game-menu/InventoryView.coffee

@@ -103,7 +103,7 @@ module.exports = class InventoryView extends CocoView
 
     for itemSlot in @$el.find '.item-slot'
       slot = $(itemSlot).data 'slot'
-      $(itemSlot).find('.placeholder').css('background-image', "url(/images/pages/game-menu/slot-#{slot}.png)")
+      #$(itemSlot).find('.placeholder').css('background-image', "url(/images/pages/game-menu/slot-#{slot}.png)")
       do (slot) =>
         $(itemSlot).droppable
           drop: (e, ui) => @onAvailableItemDoubleClick()

app/views/play/WorldMapView.coffee

@@ -73,6 +73,7 @@ module.exports = class WorldMapView extends RootView
     context.levelStatusMap = @levelStatusMap
     context.levelPlayCountMap = @levelPlayCountMap
     context.isIPadApp = application.isIPadApp
+    context.mapType = 'dungeon'
     context
 
   afterRender: ->
@@ -145,13 +146,13 @@ module.exports = class WorldMapView extends RootView
     @$levelInfo.css('top', top)
 
   onWindowResize: (e) =>
-    forestMapWidth = 2401
-    forestMapHeight = 1536
-    aspectRatio = forestMapWidth / forestMapHeight
+    mapHeight = 1536
+    mapWidth = 2350  # 2500 for forest
+    aspectRatio = mapWidth / mapHeight
     pageWidth = $(window).width()
     pageHeight = $(window).height()
-    widthRatio = pageWidth / forestMapWidth
-    heightRatio = pageHeight / forestMapHeight
+    widthRatio = pageWidth / mapWidth
+    heightRatio = pageHeight / mapHeight
     if widthRatio > heightRatio
       resultingWidth = pageWidth
       resultingHeight = resultingWidth / aspectRatio
@@ -519,8 +520,8 @@ hero = [
     id: 'dungeons-of-kithgard'
     original: '528110f30268d018e3000001'
     description: 'Grab the gem, but touch nothing else. Start here.'
-    x: 17.23
-    y: 36.94
+    x: 20.24
+    y: 32.93
   }
   {
     name: 'Gems in the Deep'
@@ -529,8 +530,8 @@ hero = [
     id: 'gems-in-the-deep'
     original: '54173c90844506ae0195a0b4'
     description: 'Quickly collect the gems; you will need them.'
-    x: 22.6
-    y: 35.1
+    x: 18.47
+    y: 49.78
   }
   {
     name: 'Shadow Guard'
@@ -539,8 +540,8 @@ hero = [
     id: 'shadow-guard'
     original: '54174347844506ae0195a0b8'
     description: 'Evade the Kithgard minion.'
-    x: 27.74
-    y: 35.17
+    x: 30.89
+    y: 61.30
   }
   {
     name: 'True Names'
@@ -549,8 +550,8 @@ hero = [
     id: 'true-names'
     original: '541875da4c16460000ab990f'
     description: 'Learn an enemy\'s true name to defeat it.'
-    x: 32.7
-    y: 36.7
+    x: 44.39
+    y: 57.39
   }
   {
     name: 'The Raised Sword'
@@ -559,8 +560,8 @@ hero = [
     id: 'the-raised-sword'
     original: '5418aec24c16460000ab9aa6'
     description: 'Learn to equip yourself for combat.'
-    x: 36.6
-    y: 39.5
+    x: 41.83
+    y: 41.74
   }
   {
     name: 'The First Kithmaze'
@@ -569,8 +570,8 @@ hero = [
     id: 'the-first-kithmaze'
     original: '5418b9d64c16460000ab9ab4'
     description: 'The builders of Kith constructed many mazes to confuse travelers.'
-    x: 38.4
-    y: 43.5
+    x: 57.39
+    y: 48.15
   }
   {
     name: 'The Second Kithmaze'
@@ -579,8 +580,8 @@ hero = [
     id: 'the-second-kithmaze'
     original: '5418cf256bae62f707c7e1c3'
     description: 'Many have tried, few have found their way through this maze.'
-    x: 38.9
-    y: 48.1
+    x: 61.72
+    y: 37.07
   }
   {
     name: 'New Sight'
@@ -589,8 +590,8 @@ hero = [
     id: 'new-sight'
     original: '5418d40f4c16460000ab9ac2'
     description: 'A true name can only be seen with the correct lenses.'
-    x: 39.3
-    y: 53.1
+    x: 55.54
+    y: 26.96
   }
   {
     name: 'Lowly Kithmen'
@@ -599,8 +600,8 @@ hero = [
     id: 'lowly-kithmen'
     original: '541b24511ccc8eaae19f3c1f'
     description: 'Use your glasses to seek out and attack the Kithmen.'
-    x: 39.4
-    y: 57.7
+    x: 70.53
+    y: 27.93
   }
   {
     name: 'A Bolt in the Dark'
@@ -609,8 +610,8 @@ hero = [
     id: 'a-bolt-in-the-dark'
     original: '541b288e1ccc8eaae19f3c25'
     description: 'Kithmen are not the only ones to stand in your way.'
-    x: 40.0
-    y: 63.2
+    x: 86.08
+    y: 40.76
   }
   {
     name: 'The Final Kithmaze'
@@ -619,8 +620,8 @@ hero = [
     id: 'the-final-kithmaze'
     original: '541b434e1ccc8eaae19f3c33'
     description: 'To escape you must find your way through an Elder Kithman\'s maze.'
-    x: 42.67
-    y: 67.98
+    x: 96.95
+    y: 58.15
   }
   {
     name: 'Kithgard Gates'
@@ -629,9 +630,9 @@ hero = [
     id: 'kithgard-gates'
     original: '541c9a30c6362edfb0f34479'
     description: 'Escape the Kithgard dungeons and don\'t let the guardians get you.'
-    x: 47.38
-    y: 70.55
     disabled: true
+    x: 84.02
+    y: 72.39
   }
   {
     name: 'Defence of Plainswood'
@@ -640,9 +641,9 @@ hero = [
     id: 'defence-of-plainswood'
     original: '541b67f71ccc8eaae19f3c62'
     description: 'Protect the peasants from the pursuing ogres.'
-    x: 52.66
-    y: 69.66
     disabled: true
+    x: 95.31
+    y: 88.26
   }
   #{
   #  name: ''