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

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

$mapHeight: 1536
$forestMapWidth: 2500
$dungeonMapWidth: 2350
$forestMapSeaBackground: #71bad0
$dungeonMapCaveBackground: rgba(68, 54, 45, 1)
$dungeonMapCaveBackgroundTransparent: rgba(68, 54, 45, 0)
$levelDotWidth: 2%
$levelDotHeight: $levelDotWidth * $forestMapWidth / $mapHeight
$levelDotZ: $levelDotHeight * 0.25
$levelDotHoverZ: $levelDotZ * 2
$levelDotShadowWidth: 0.8 * $levelDotWidth
$levelDotShadowHeight: 0.8 * $levelDotHeight
$levelClickRadius: 40px
$gameControlSize: 80px
$gameControlMargin: 30px

+keyframes(levelStartedPulse)
  from
    @include box-shadow(0px 0px 4px #333)
    margin-bottom: -$levelDotHeight / 3 + $levelDotZ
  50%
    @include box-shadow(0px 0px 22px skyblue)
    margin-bottom: -$levelDotHeight / 3 + ($levelDotHoverZ + $levelDotZ) / 2
  to
    @include box-shadow(0px 0px 4px #333)
    margin-bottom: -$levelDotHeight / 3 + $levelDotZ

#world-map-view
  width: 100%
  height: 100%
  position: absolute

  &.forest
    background-color: $forestMapSeaBackground

  &.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

    .map-background
      width: 100%
      height: 100%

    .level, .level-shadow
      position: absolute
      border-radius: 100%
      -webkit-transform: scaleY(0.75)
      transform: scaleY(0.75)

    .level
      z-index: 2
      width: $levelDotWidth
      height: $levelDotHeight
      margin-left: -0.5 * $levelDotWidth
      margin-bottom: -$levelDotHeight / 3 + $levelDotZ
      border: 2px groove white
      @include transition(margin-bottom 0.5s ease)

      &.disabled, &.locked
        background-image: url(/images/pages/game-menu/lock.png)
        background-size: 75%
        background-repeat: no-repeat
        background-position: 50% 50%
        opacity: 0.7

        a
          cursor: default

      &.next
        width: 2 * $levelDotWidth
        height: 2 * $levelDotHeight
        margin-left: -0.5 * 2 * $levelDotWidth
        margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotZ

      &.started, &.next
        border: 3px solid lightgreen
        @include box-shadow(0px 0px 35px skyblue)

        // Would be cool, but kills performance, since we have to re-render all the time.
        //&:not(:hover)
        //  -webkit-animation-name: levelStartedPulse
        //  -webkit-animation-duration: 3s
        //  -webkit-animation-iteration-count: infinite

      &.complete
        border: 3px solid gold
        @include box-shadow(0px 0px 35px skyblue)

    .level-shadow
      z-index: 1
      width: $levelDotShadowWidth
      height: $levelDotShadowHeight
      margin-left: -0.5 * $levelDotShadowWidth
      margin-bottom: -$levelDotShadowHeight / 3
      background-color: black
      @include box-shadow(0px 0px 10px black)
      @include opacity(0.75)

      &.next
        width: 2 * $levelDotShadowWidth
        height: 2 * $levelDotShadowHeight
        margin-left: -0.5 * 2 * $levelDotShadowWidth
        margin-bottom: -2 * $levelDotShadowHeight / 3

    .level:hover
      margin-bottom: -$levelDotHeight / 3 + $levelDotHoverZ
      @include box-shadow(0px 0px 35px skyblue)

      &.next
        margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotHoverZ

    .level
      a
        display: block
        padding: $levelClickRadius
        margin-left: -0.5 * $levelClickRadius
        margin-top: -0.5 * $levelClickRadius
        border-radius: $levelClickRadius

      &.next a
        padding: 2 * $levelClickRadius
        margin-left: 2 * -0.5 * $levelClickRadius
        margin-top: 2 * -0.5 * $levelClickRadius
        border-radius: 2 * $levelClickRadius

    .level-info-container
      display: none
      position: absolute
      z-index: 3
      padding: 10px
      border-width: 15px
      // Using modernizr-mixin for compat detection
      @include yep(borderimage)
        border-image: url(/images/level/popover_background.png) 18 fill round
      @include nope(borderimage)
        background-color: rgb(247, 242, 218)

      .level-info.complete h3:after
        content: " - Complete!"
        color: green
    
      .level-info.started h3:after
        content: " - Started"
        color: desaturate(green, 50%)
    
      .level-info
        h3
          margin-top: 0
          margin-bottom: 0px

        .level-description
          color: black
          text-shadow: 0 1px 0 white

        .campaign-label
          text-shadow: 0 1px 0 white

      .start-level
        display: block
        margin: 10px auto 0 auto
        width: 200px
          
  .game-controls
    position: absolute
    right: 1%
    bottom: 1%
    z-index: 3

    .btn
      &:not(:first-child)
        margin-left: $gameControlMargin
      width: $gameControlSize
      height: $gameControlSize
      
      background: url(/images/pages/play/menu_icons.png) no-repeat
      
      position: relative
      img
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        
      background-size: cover
      @include transition(0.5s ease)
      @include box-shadow(2px 2px 4px black)
      border: 0
      border-radius: 12px
      // IE9 shows a blank white button with this MS gradient filter in place
      filter: none 
      
      &:hover
        @include box-shadow(0 0 12px #bbf)

      &:active
        @include box-shadow(0 0 20px white)
      
      &.heroes
        background-position: (-1 * $gameControlSize) 0px
      &.achievements
        background-position: (-2 * $gameControlSize) 0px
      &.account
        background-position: (-3 * $gameControlSize) 0px
      &.settings
        background-position: (-4 * $gameControlSize) 0px

    .tooltip
      font-size: 24px

  .old-levels
    position: absolute
    bottom: 1%
    left: 1%
    z-index: 3

    a
      font-size: 24px
      color: #eee
      text-decoration: underline

      &:hover
        color: white
        text-shadow: 1px 1px 0px black

  .user-status
    position: absolute
    bottom: 1%
    left: 50%
    width: 400px
    margin-left: -200px
    text-align: center
    font-size: 24px
    color: white
    text-shadow: 1px 1px 0px black

    button
      margin-left: 10px

  #volume-button
    position: absolute
    left: 1%
    top: 1%
    padding: 3px 8px
    @include opacity(0.75)

    &:hover
      @include opacity(1.0)

    .glyphicon
      display: none
      font-size: 32px

    &.vol-up .glyphicon.glyphicon-volume-up
      display: inline-block

    &.vol-off .glyphicon.glyphicon-volume-off
      display: inline-block
      @include opacity(0.50)
      &:hover
        @include opacity(0.75)

    &.vol-down .glyphicon.glyphicon-volume-down
      display: inline-block

body:not(.ipad) #world-map-view
  .level-info-container
    pointer-events: none

  .old-levels
    display: none

body.ipad #world-map-view
  // iPad only supports up to Kithgard Gates for now.
  .campaign-switch
    display: none