Made sure we can see the whole world map background, even though it looks bad when we stretch it.

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

@@ -4,7 +4,8 @@
 $mapHeight: 1536
 $forestMapWidth: 2500
 $dungeonMapWidth: 2350
-$forestMapSeaBackground: #71bad0
+$forestMapSeaBackground: rgba(113, 186, 208, 1)
+$forestMapSeaBackgroundTransparent: rgba(113, 186, 208, 0)
 $dungeonMapCaveBackground: rgba(68, 54, 45, 1)
 $dungeonMapCaveBackgroundTransparent: rgba(68, 54, 45, 0)
 $levelDotWidth: 2%
@@ -33,41 +34,61 @@ $gameControlMargin: 30px
   height: 100%
   position: absolute
 
+  .gradient
+    position: absolute
+    z-index: 0
+
+    &.horizontal-gradient
+      left: 0
+      right: 0
+      height: 3%
+
+    &.vertical-gradient
+      top: 0
+      bottom: 0
+      width: 3%
+
+    &.top-gradient
+      top: 0
+
+    &.right-gradient
+      right: 0
+
+    &.bottom-gradient
+      bottom: 0
+
+    &.left-gradient
+      left: 0
+
   &.forest
     background-color: $forestMapSeaBackground
 
+    .top-gradient
+      background: linear-gradient(to bottom, $forestMapSeaBackground 0%, $forestMapSeaBackgroundTransparent 100%)
+
+    .right-gradient
+      background: linear-gradient(to left, $forestMapSeaBackground 0%, $forestMapSeaBackgroundTransparent 100%)
+
+    .bottom-gradient
+      background: linear-gradient(to top, $forestMapSeaBackground 0%, $forestMapSeaBackgroundTransparent 100%)
+
+    .left-gradient
+      background: linear-gradient(to right, $forestMapSeaBackground 0%, $forestMapSeaBackgroundTransparent 100%)
+
   &.dungeon
     background-color: $dungeonMapCaveBackground
 
-    .gradient
-      position: absolute
-      z-index: 0
+    .top-gradient
+      background: linear-gradient(to bottom, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
 
-      &.horizontal-gradient
-        left: 0
-        right: 0
-        height: 3%
+    .right-gradient
+      background: linear-gradient(to left, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
 
-      &.vertical-gradient
-        top: 0
-        bottom: 0
-        width: 3%
+    .bottom-gradient
+      background: linear-gradient(to top, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
 
-      &.top-gradient
-        top: 0
-        background: linear-gradient(to bottom, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
-  
-      &.right-gradient
-        right: 0
-        background: linear-gradient(to left, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
-
-      &.bottom-gradient
-        bottom: 0
-        background: linear-gradient(to top, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
-  
-      &.left-gradient
-        left: 0
-        background: linear-gradient(to right, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
+    .left-gradient
+      background: linear-gradient(to right, $dungeonMapCaveBackground 0%, $dungeonMapCaveBackgroundTransparent 100%)
 
   .map
     position: relative

app/views/play/WorldMapView.coffee

@@ -249,36 +249,20 @@ module.exports = class WorldMapView extends RootView
   onWindowResize: (e) =>
     mapHeight = iPadHeight = 1536
     mapWidth = if @terrain is 'dungeon' then 2350 else 2500
-    iPadWidth = 2048
     aspectRatio = mapWidth / mapHeight
-    iPadAspectRatio = iPadWidth / iPadHeight
     pageWidth = $(window).width()
     pageHeight = $(window).height()
     widthRatio = pageWidth / mapWidth
     heightRatio = pageHeight / mapHeight
-    iPadWidthRatio = pageWidth / iPadWidth
-    if @terrain is 'dungeon'
-      # Make sure we can see almost the whole map, fading to background in one dimension.
-      if heightRatio <= iPadWidthRatio
-        # Full width, full height, left and right margin
-        resultingHeight = pageHeight
-        resultingWidth = resultingHeight * aspectRatio
-      else if iPadWidthRatio < heightRatio * (iPadAspectRatio / aspectRatio)
-        # Cropped width, full height, left and right margin
-        resultingWidth = pageWidth
-        resultingHeight = resultingWidth / aspectRatio
-      else
-        # Cropped width, full height, top and bottom margin
-        resultingWidth = pageWidth * aspectRatio / iPadAspectRatio
-        resultingHeight = resultingWidth / aspectRatio
+    # Make sure we can see the whole map, fading to background in one dimension.
+    if heightRatio <= widthRatio
+      # Left and right margin
+      resultingHeight = pageHeight
+      resultingWidth = resultingHeight * aspectRatio
     else
-      # Scale it in either dimension so that we're always full on one of the dimensions.
-      if heightRatio > widthRatio
-        resultingHeight = pageHeight
-        resultingWidth = resultingHeight * aspectRatio
-      else
-        resultingWidth = pageWidth
-        resultingHeight = resultingWidth / aspectRatio
+      # Top and bottom margin
+      resultingWidth = pageWidth
+      resultingHeight = resultingWidth / aspectRatio
     resultingMarginX = (pageWidth - resultingWidth) / 2
     resultingMarginY = (pageHeight - resultingHeight) / 2
     @$el.find('.map').css(width: resultingWidth, height: resultingHeight, 'margin-left': resultingMarginX, 'margin-top': resultingMarginY)