freeCodeCamp/server/views/challengeMap/show.jade

extends ../layout
block content
    .panel.panel-info
        .panel-heading.text-center
            h1 Challenge Map
        .panel-body
            if (Math.random() > 0.999)
                img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner-dino.png')
                audio(autoplay src='https://s3.amazonaws.com/freecodecamp/t-rex-roar.mp3')
            else
                img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner.png')
            .col-xs-12.col-md-8.col-md-offset-2
                h2
                    table.population-table.img-center
                        tr
                            td Established: 
                            td
                                span.text-primary #{daysRunning} 
                                | days ago
                        tr
                            td Population:   
                            td
                                span.text-primary #{camperCount} 
                                | campers
                        tr
                            td Completed:   
                            td
                                span.text-primary #{globalCompletedCount} 
                                | challenges



                .spacer
                if (user && user.progressTimestamps.length > 100)
                    .row
                        #map-notice.col-xs-12.col-md-8.col-md-offset-2.hidden
                            h2.text-center Reddit or not, here we come
                            img.thumbnail.img-center.img-responsive(src="http://i.imgur.com/lyd0bfM.jpg")
                            h4.text-center Come ask questions and share your thoughts with our entire open source community on our subreddit.
                            a.button.btn.btn-block.btn-primary(href="https://reddit.com/r/freecodecamp" target="_blank") Check it out
                            .button-spacer
                            .text-center
                                a#hide-map-notice-button(href='#') Hide this forever
                            .spacer

                ul
                  for superBlock in superBlocks
                    h2= superBlock.name
                    - var i = 0
                    for challengeBlock in superBlock.blocks
                        - i++
                        .row
                            if (user)
                                if (challengeBlock.completed === 100)
                                    .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
                                    .col-xs-1.col-sm-1.col-md-1.map-row-numbers.negative-5
                                      span.map-p.negative-10 #{i}.
                                    .col-xs-11.col-sm-8.col-md-9
                                        li.map-p.faded.negative-10
                                            a(href='#' + challengeBlock.dashedName)= challengeBlock.name
                                            if challengeBlock.markNew
                                                span.text-info.small    
                                                    strong
                                                        em NEW
                                            if challengeBlock.isComingSoon
                                                span.text-info.small    
                                                    strong
                                                        em Coming Soon
                                else
                                    .hidden-xs.col-sm-3.col-md-2
                                        .progress.progress-bar-padding.text-center.thin-progress-bar
                                            .progress-bar(role='progressbar', aria-valuenow=(challengeBlock.completed), aria-valuemin='0', aria-valuemax='100', style='width: ' + challengeBlock.completed + '%;')
                                    .col-xs-1.col-sm-1.col-md-1.map-row-numbers.negative-5
                                      span.map-p #{i}.
                                    .col-xs-11.col-sm-8.col-md-9
                                        li.map-p.negative-10
                                            a(href='#' + challengeBlock.dashedName)= challengeBlock.name
                                            if challengeBlock.markNew
                                                span.text-info.small    
                                                    strong
                                                        em NEW
                                            if challengeBlock.isComingSoon
                                                span.text-info.small    
                                                    strong
                                                        em Coming Soon
                            else
                                .hidden-xs.col-sm-3.col-md-2
                                .col-xs-1.col-sm-1.col-md-1.map-row-numbers
                                    span.map-p.negative-10  #{i}.
                                .col-xs-10.col-sm-8.col-md-9
                                    span.map-p.negative-10
                                        a(href='#' + challengeBlock.dashedName)= challengeBlock.name
                                        if challengeBlock.markNew
                                            span.text-info.small    
                                                strong
                                                    em NEW
                                        if challengeBlock.isComingSoon
                                            span.text-info.small    
                                                strong
                                                    em Coming Soon
                  h2 Full Stack Development Certification
                  .row                                        
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Greenfield Nonprofit Project 1
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Greenfield Nonprofit Project 2
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Legacy Nonprofit Project 1
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Legacy Nonprofit Project 2
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Claim your Full Stack Development Certification

                  h2 Coding Interview Preparation
                  .row                                        
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Whiteboard Coding Interview Training
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Critical Thinking Interview Training
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Mock Interview 1
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Mock Interview 2
                    .hidden-xs.col-sm-3.col-md-2.ion-locked.padded-ionic-icon.text-center.map-p.negative-10
                    .col-xs-12.col-sm-9.col-md-10
                        li.map-p.negative-10 Mock Interview 3

                hr

                for superBlock, index in superBlocks
                  for challengeBlock in superBlock.blocks
                      .row
                          a(href='#' name=challengeBlock.dashedName)
                          .spacer.negative-55

                      .row
                          .hidden-xs.col-sm-3.col-md-2
                              h3.text-primary.text-right.nowrap
                                  i.fa.fa-clock-o
                                  = challengeBlock.time
                          .col-xs-12.col-sm-9.col-md-10
                              h3 #{challengeBlock.name}  

                        - var i = 0
                        for challenge in challengeBlock.challenges
                            - i++
                            .row
                                if challenge.completed
                                    .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center.map-p.negative-10
                                    .col-xs-1.col-sm-1.col-md-1.map-row-numbers
                                        span.map-p.negative-10  #{i}.
                                    .col-xs-10.col-sm-8.col-md-9
                                        span.faded.map-p.negative-10
                                            a(href="/challenges/#{challenge.dashedName}")
                                                span.capitalize= challenge.type + ': '
                                                span= challenge.title
                                                    span.sr-only= " Complete"

                                else
                                    .hidden-xs.col-sm-3.col-md-2
                                        span.negative-10
                                    .col-xs-1.col-sm-1.col-md-1.map-row-numbers
                                        span.map-p.negative-10  #{i}.
                                    .col-xs-10.col-sm-8.col-md-9
                                        span.map-p.negative-10
                                            a(href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
                                                span.capitalize= challenge.type + ': '
                                                span= challenge.title
                                                    span.sr-only= " Incomplete"
                                            if challenge.markNew
                                                span.text-info.small    
                                                    strong
                                                        em NEW
                                            if challengeBlock.isComingSoon
                                                span.text-info.small    
                                                    strong
                                                        em Coming Soon

                        if (challengeBlock.completed === 100)
                            .button-spacer
                            .row
                                .col-xs-12.col-sm-8.col-md-6.col-sm-offset-3.col-md-offset-2.hidden
                                    a.btn.btn-lg.btn-block.signup-btn.map-challenge-block-share Section complete. Share your code portfolio with your friends.
                                        .hidden(id="#{challengeBlock.name}")

                  if (index < superBlocks.length - 1)
                    .spacer
                    hr
                    .spacer

    script.
        var username = !{JSON.stringify(user && user.username || '')};
        var lastCompleted = !{JSON.stringify(lastCompleted || false)}
        $(document).ready(function () {
            if (!localStorage || !localStorage.hideRedditNotice) {
                $("#map-notice").removeClass("hidden");
            }
            $("#hide-map-notice-button").on("click", function(e) {
                e.preventDefault();
                $("#map-notice").addClass('animated fadeOut');
                setTimeout(function() {
                    $("#map-notice").hide();
                }, 1000);
                localStorage.hideRedditNotice = "true";
            });
        });