Add gd1 and wd1 to campaign world Ux

Add 1st game-dev and web-dev campaigns to world selector
Take player back out to world selector after completing campaigns up through forest

Closes #3828

app/styles/play/campaign-view.sass

@@ -592,6 +592,79 @@ $gameControlMargin: 30px
             margin: 15px 0
             min-width: 100px
 
+      .beta-container
+        $betaImagesWidth: 1902px
+        width: $campaignWidth
+        height: $campaignHeight
+        display: inline-block
+        flex-shrink: 0
+        position: relative
+
+        .beta-campaign
+          width: $campaignWidth
+          height: $campaignHeight / 2
+          display: inline-block
+          flex-shrink: 0
+          position: relative
+          cursor: pointer
+          // http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.11,.67,.08,1.42
+          @include transition(0.25s cubic-bezier(0.11, 0.67, 0.8, 1.42))
+
+          &:hover
+            @include scale($campaignHoverScale)
+
+          &.silhouette
+            @include filter(contrast(50%) brightness(65%))
+            pointer-events: none
+
+          &.locked
+            @include filter(contrast(80%) brightness(80%))
+            pointer-events: none
+
+          .campaign-label
+            position: absolute
+            top: 40%
+            width: 100%
+            text-align: center
+
+            .campaign-name, .levels-completed, .campaign-locked
+              margin: 0
+              color: white
+              text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
+
+            .campaign-locked
+              margin: 32px 0
+
+            .campaign-description
+              margin: 0px 40px
+              background: transparent url(/images/level/popover_border_background.png) no-repeat
+              background-size: 100% 100%
+              padding: 12px
+              color: black
+              font-size: 12px
+
+            .levels-completed
+              font-size: 22px
+
+            .play-button
+              margin: 10px 0
+              min-width: 100px
+              color: white
+
+          .background-container
+            position: absolute
+            left: $campaignWidth / 4
+            width: $campaignWidth / 2
+            height: $campaignHeight / 2
+            background: transparent url(/images/pages/play/portal-beta-campaigns.png) no-repeat 0 0
+            background-size: $betaImagesWidth / 2
+
+            &.campaign-web-dev-1
+              background-position: -151px 0px
+            &.campaign-game-dev-1
+              background-position: -454px 0px
+
+
   .small-nav-logo, .picoctf-powered-by
     position: absolute
     top: 1%

app/templates/play/campaign-view.jade

@@ -100,28 +100,57 @@ if view.showAds()
   else
     .portal
       .portals
-        for campaignSlug in ['dungeon', 'forest', 'desert', 'mountain', 'glacier', 'volcano']
-          - var campaign = campaigns[campaignSlug];
-          - var godmode = me.get('permissions', true).indexOf('godmode') != -1;
-          div(class="campaign #{campaignSlug}" + (campaign ? "" : " silhouette") + (campaign && campaign.locked && !godmode ? " locked" : ""), data-campaign-slug=campaignSlug)
-            .campaign-label
-              h2.campaign-name
-                if campaign
-                  span= i18n(campaign.attributes, 'fullName')
-                else
-                  span ???
-              if campaign && campaign.levelsTotal
-                h3.levels-completed
-                  span= campaign.levelsCompleted
-                  | /
-                  span= campaign.levelsTotal
-              if campaign && campaign.locked && !godmode
-                h3.campaign-locked(data-i18n="play.locked") Locked
-              else if campaign
-                btn(data-i18n="common.play").btn.btn-illustrated.btn-lg.btn-success.play-button
-              if campaign && campaign.get('description')
-                p.campaign-description
-                  span= i18n(campaign.attributes, 'description')
+        for campaignSlug in ['dungeon', 'beta-campaigns', 'forest', 'desert', 'mountain', 'glacier', 'volcano']
+          if campaignSlug === 'beta-campaigns'
+            - var betaSlugs = _.shuffle(['campaign-game-dev-1', 'campaign-web-dev-1']);
+            .beta-container
+              each campaignSlug in betaSlugs
+                - var campaign = campaigns[campaignSlug];
+                if !campaign
+                  - continue;
+                div(class="beta-campaign" + (campaign ? "" : " silhouette") + (campaign && campaign.locked && !godmode ? " locked" : ""), data-campaign-slug=campaignSlug)
+                  .background-container(class="#{campaignSlug}")
+                  .campaign-label
+                    h3.campaign-name
+                      if campaign
+                        span= i18n(campaign.attributes, 'fullName')
+                        if campaign.levelsTotal
+                          span.spl= campaign.levelsCompleted
+                          | /
+                          span= campaign.levelsTotal
+                      else
+                        span ???
+                    if campaign && campaign.locked && !godmode
+                      h4.campaign-locked(data-i18n="play.locked") Locked
+                    else if campaign
+                      btn.btn.btn-illustrated.btn-lg.btn-primary.play-button(data-i18n="common.play")
+                    if campaign && campaign.get('description')
+                      p.campaign-description
+                        span= i18n(campaign.attributes, 'description')
+          else
+            - var campaign = campaigns[campaignSlug];
+            if !campaign
+              - continue;
+            - var godmode = me.get('permissions', true).indexOf('godmode') != -1;
+            div(class="campaign #{campaignSlug}" + (campaign ? "" : " silhouette") + (campaign && campaign.locked && !godmode ? " locked" : ""), data-campaign-slug=campaignSlug)
+              .campaign-label
+                h2.campaign-name
+                  if campaign
+                    span= i18n(campaign.attributes, 'fullName')
+                  else
+                    span ???
+                if campaign && campaign.levelsTotal
+                  h3.levels-completed
+                    span= campaign.levelsCompleted
+                    | /
+                    span= campaign.levelsTotal
+                if campaign && campaign.locked && !godmode
+                  h3.campaign-locked(data-i18n="play.locked") Locked
+                else if campaign
+                  btn(data-i18n="common.play").btn.btn-illustrated.btn-lg.btn-success.play-button
+                if campaign && campaign.get('description')
+                  p.campaign-description
+                    span= i18n(campaign.attributes, 'description')
 
   .game-controls.header-font.picoctf-hide
     button.btn.poll.hidden(data-i18n="[title]play.poll")

app/views/play/CampaignView.coffee

@@ -55,6 +55,7 @@ module.exports = class CampaignView extends RootView
     'click #back-button': 'onClickBack'
     'click #clear-storage-button': 'onClickClearStorage'
     'click .portal .campaign': 'onClickPortalCampaign'
+    'click .portal .beta-campaign': 'onClickPortalCampaign'
     'mouseenter .portals': 'onMouseEnterPortals'
     'mouseleave .portals': 'onMouseLeavePortals'
     'mousemove .portals': 'onMouseMovePortals'
@@ -668,7 +669,7 @@ module.exports = class CampaignView extends RootView
     console.error "CampaignView hero update couldn't find hero slug for original:", hero
 
   onClickPortalCampaign: (e) ->
-    campaign = $(e.target).closest('.campaign')
+    campaign = $(e.target).closest('.campaign, .beta-campaign') 
     return if campaign.is('.locked') or campaign.is('.silhouette')
     campaignSlug = campaign.data('campaign-slug')
     Backbone.Mediator.publish 'router:navigate',

app/views/play/level/modal/HeroVictoryModal.coffee

@@ -413,7 +413,17 @@ module.exports = class HeroVictoryModal extends ModalView
       AudioPlayer.playSound name, 1
 
   getNextLevelCampaign: ->
-    {'kithgard-gates': 'forest', 'kithgard-mastery': 'forest', 'siege-of-stonehold': 'desert', 'clash-of-clones': 'mountain', 'summits-gate': 'glacier'}[@level.get('slug')] or @level.get 'campaign'  # Much easier to just keep this updated than to dynamically figure it out.
+    # Much easier to just keep this updated than to dynamically figure it out.
+    # TODO: only go back to world selector if any beta campaigns are incomplete
+    {
+      'kithgard-gates': '',
+      'kithgard-mastery': '',
+      'tabula-rasa': '',
+      'wanted-poster': '',
+      'siege-of-stonehold': '',
+      'clash-of-clones': 'mountain',
+      'summits-gate': 'glacier'
+    }[@level.get('slug')] ? @level.get 'campaign'
 
   getNextLevelLink: (returnToCourse=false) ->
     if @level.isType('course', 'game-dev', 'web-dev') and nextLevel = @level.get('nextLevel') and not returnToCourse