From 3636f3d25929657e485070685f8098cda47ab2c2 Mon Sep 17 00:00:00 2001 From: Nick Winter Date: Thu, 2 Oct 2014 14:05:18 -0700 Subject: [PATCH] Messing with the scaling on the dungeon map. --- app/styles/play/world-map-view.sass | 34 ++++++++++++++++++++- app/templates/play/world-map-view.jade | 4 +++ app/views/play/WorldMapView.coffee | 41 +++++++++++++++++++------- 3 files changed, 67 insertions(+), 12 deletions(-) diff --git a/app/styles/play/world-map-view.sass b/app/styles/play/world-map-view.sass index 13b17e790..1f838ec96 100644 --- a/app/styles/play/world-map-view.sass +++ b/app/styles/play/world-map-view.sass @@ -5,7 +5,8 @@ $mapHeight: 1536 $forestMapWidth: 2500 $dungeonMapWidth: 2350 $forestMapSeaBackground: #71bad0 -$dungeonMapCaveBackground: rgb(54, 43, 34) +$dungeonMapCaveBackground: rgba(68, 54, 45, 1) +$dungeonMapCaveBackgroundTransparent: rgba(68, 54, 45, 0) $levelDotWidth: 2% $levelDotHeight: $levelDotWidth * $forestMapWidth / $mapHeight $levelDotZ: $levelDotHeight * 0.25 @@ -30,6 +31,7 @@ $gameControlMargin: 30px #world-map-view width: 100% height: 100% + position: absolute &.forest background-color: $forestMapSeaBackground @@ -37,6 +39,36 @@ $gameControlMargin: 30px &.dungeon background-color: $dungeonMapCaveBackground + .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 + 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%) + .map position: relative diff --git a/app/templates/play/world-map-view.jade b/app/templates/play/world-map-view.jade index 12cd121c4..c7c88f85f 100644 --- a/app/templates/play/world-map-view.jade +++ b/app/templates/play/world-map-view.jade @@ -1,4 +1,8 @@ .map + .gradient.horizontal-gradient.top-gradient + .gradient.vertical-gradient.right-gradient + .gradient.horizontal-gradient.bottom-gradient + .gradient.vertical-gradient.left-gradient img.map-background(src="/images/pages/play/map_" + mapType + ".jpg", alt="") - var seenNext = false; diff --git a/app/views/play/WorldMapView.coffee b/app/views/play/WorldMapView.coffee index 4520b851a..60e65aa5e 100644 --- a/app/views/play/WorldMapView.coffee +++ b/app/views/play/WorldMapView.coffee @@ -17,6 +17,7 @@ class LevelSessionsCollection extends CocoCollection module.exports = class WorldMapView extends RootView id: 'world-map-view' template: template + terrain: 'Dungeon' # or Grass events: 'click .map-background': 'onClickMap' @@ -76,7 +77,7 @@ module.exports = class WorldMapView extends RootView context.levelStatusMap = @levelStatusMap context.levelPlayCountMap = @levelPlayCountMap context.isIPadApp = application.isIPadApp - context.mapType = 'dungeon' + context.mapType = _.string.slugify @terrain context afterRender: -> @@ -85,6 +86,7 @@ module.exports = class WorldMapView extends RootView unless application.isIPadApp _.defer => @$el.find('.game-controls .btn').tooltip() # Have to defer or i18n doesn't take effect. @$el.find('.level').tooltip() + @$el.addClass _.string.slugify @terrain onSessionsLoaded: (e) -> for session in @sessions.models @@ -149,28 +151,45 @@ module.exports = class WorldMapView extends RootView @$levelInfo.css('top', top) onWindowResize: (e) => - mapHeight = 1536 - mapWidth = 2350 # 2500 for forest + 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 - if widthRatio > heightRatio - resultingWidth = pageWidth - resultingHeight = resultingWidth / aspectRatio + 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 else - resultingHeight = pageHeight - resultingWidth = resultingHeight * aspectRatio + # 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 resultingMarginX = (pageWidth - resultingWidth) / 2 resultingMarginY = (pageHeight - resultingHeight) / 2 @$el.find('.map').css(width: resultingWidth, height: resultingHeight, 'margin-left': resultingMarginX, 'margin-top': resultingMarginY) playAmbientSound: -> return if @ambientSound - #terrain = 'Grass' - terrain = 'Dungeon' - return unless file = {Dungeon: 'ambient-dungeon', Grass: 'ambient-map-grass'}[terrain] + return unless file = {Dungeon: 'ambient-dungeon', Grass: 'ambient-map-grass'}[@terrain] src = "/file/interface/#{file}#{AudioPlayer.ext}" unless AudioPlayer.getStatus(src)?.loaded AudioPlayer.preloadSound src