More steps towards building the bonfire challenge interface

app.js

@@ -251,10 +251,10 @@ app.get(
 app.all('/account', passportConf.isAuthenticated);
 app.get('/account/api', userController.getAccountAngular);
 app.get('/bonfire', bonfireController.index);
-//app.get(
+app.get(
-//    '/bonfire/:bonfireNumber',
+    '/bonfire/:bonfireNumber',
-//    bonfireController.returnBonfire
+    bonfireController.returnBonfire
-//);
+);
 
 // Unique Check API route
 app.get('/api/checkUniqueUsername/:username', userController.checkUniqueUsername);

controllers/bonfire.js

@@ -48,29 +48,32 @@ exports.returnBonfire = function(req, res, next) {
         "Establish your alibi for the past two hours",
         "Prove to mom that computers aren't just for games"
     ];
+
     if (bonfireNumber > highestBonfireNumber) { bonfireNumber = 0; }
-    Bonfire.find({}, null, { sort: { bonfireNumber: 1 } }, function(err, c) {
+    Bonfire.find({}, null, { sort: { bonfireNumber: 1 } }, function(err, bonfire) {
         if (err) {
             debug('bonfire err: ', err);
             next(err);
         }
+        res.render('bonfire/show', {
+            title: bonfire[bonfireNumber].name,
+            name: bonfire[bonfireNumber].name,
+            number: bonfire[bonfireNumber].bonfireNumber,
+            difficulty: bonfire[bonfireNumber].difficulty,
+            description: bonfire[bonfireNumber].description,
+            publicTests:  bonfire[bonfireNumber].publicTests,
+            privateTests:  bonfire[bonfireNumber].privateTests,
+            challengeSeed:  bonfire[bonfireNumber].challengeSeed,
+            challengeEntryPoint: bonfire[bonfireNumber].challengeEntryPoint,
+            //title: bonfire.name,
+            //name: bonfire.name,
+            //description: bonfire.description,
 
-        res.render('bonfires/show', {
+            //cc: req.user ? req.user.bonfiresHash : undefined,
-            title: 'bonfire: ' + c[bonfireNumber].name,
+            //points: req.user ? req.user.points : undefined,
-            name: c[bonfireNumber].name,
+            //verb: verbs[Math.floor(Math.random() * verbs.length)],
-            number: bonfireNumber,
+            //phrase: phrases[Math.floor(Math.random() * phrases.length)],
-            difficulty: c[bonfireNumber].difficulty,
+            bonfires: bonfire
-            description: c[bonfireNumber].description,
-            publicTests:  c[bonfireNumber].publicTests,
-            privateTests:  c[bonfireNumber].privateTests,
-            challengeSeed:  c[bonfireNumber].challengeSeed,
-            challengeEntryPoint: c[bonfireNumber].challengeEntryPoint,
-
-            cc: req.user ? req.user.bonfiresHash : undefined,
-            points: req.user ? req.user.points : undefined,
-            verb: verbs[Math.floor(Math.random() * verbs.length)],
-            phrase: phrases[Math.floor(Math.random() * phrases.length)],
-            bonfires: c
         });
     });
 };

models/Bonfire.js

@@ -6,9 +6,7 @@ var secrets = require('../config/secrets');
  * @type {exports.Schema}
  */
 
-//new Schema({ _id: String })
+
-//var ObjectId = require('mongoose').Types.ObjectId;
-//var myObjectId = ObjectId.fromString('myhexstring');
 var bonfireSchema = new mongoose.Schema({
 
     name: {

seed_data/seed.js

@@ -22,6 +22,7 @@ Challenge.remove({}, function(err, data) {
         }
     });
 });
+
 Bonfire.remove({}, function(err, data) {
     if (err) {
         console.error(err);

views/bonfire/bonfire.jade

@@ -12,7 +12,7 @@ block content
     link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
     link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
     script(src='/js/lib/codemirror/mode/javascript/javascript.js')
-    script(src='js/lib/jailed/jailed.js')
+    script(src='/js/lib/jailed/jailed.js')
     script(src='/js/lib/bonfire/bonfireInit.js')
     .row
         #mainEditorPanel.col-sm-12.col-md-7.col-xs-12

views/bonfire/show.jade

@@ -1,39 +1,43 @@
 extends ../layout
 block content
+
+    script(src='/js/lib/codemirror/lib/codemirror.js')
+    script(src='/js/lib/codemirror/addon/edit/closebrackets.js')
+    script(src='/js/lib/codemirror/addon/edit/matchbrackets.js')
+    script(src='/js/lib/codemirror/addon/lint/lint.js')
+    script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
+    script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
+    script(src='/js/lib/chai/chai.js')
+    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
+    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
+    script(src='/js/lib/codemirror/mode/javascript/javascript.js')
+    script(src='/js/lib/jailed/jailed.js')
+    script(src='/js/lib/bonfire/bonfireInit.js')
     .row
-        .col-sm-12.col-md-12.col-xs-12
+        #mainEditorPanel.col-sm-12.col-md-7.col-xs-12
-            .panel.panel-primary
+                .panel.panel-primary.panel-bonfire
                     .panel-heading.text-center #{name} (Level #{difficulty} bonfire)
                     .panel.panel-body
-                    .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
+                        form.code
                             h3 Details
-                        h4
+                            h5
                                 ol
                                     for sentence in description
                                         li!= sentence
-                        .ten-pixel-break
+                        .form-group.codeMirrorView
-                        .btn.btn-success.btn-big.btn-block.all-challenges Show me all the challenges
+                            textarea#codeEditor(autofocus=true)
-                #complete-dialog.modal(tabindex='-1')
+        #testCreatePanel.col-sm-12.col-md-5.col-xs-12
-                    .modal-dialog.animated.zoomIn.fast-animation
+            .panel.panel-primary.panel-bonfire
-                        .modal-content
+                .panel-heading.text-center Output
-                            .modal-header.challenge-list-header Nicely done!
+                .panel.panel-body
-                                a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
+                    #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
-                            .modal-body
+                    br
-                                .text-center
+                    form.code
-                                    .animated.zoomInDown.delay-half
+                        .form-group.codeMirrorView
-                                        span.landing-icon.ion-checkmark-circled.text-primary
+                            textarea#codeOutput
-                                - if (cc)
+                    br
-                                a.animated.fadeIn.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
+                    ul#testSuite.list-group
-                                    - if (points && points > 2)
+                    br
-                                    a.animated.fadeIn.btn.btn-lg.btn-block.btn-twitter(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20Free%20Code%20Camp%20Challenge%20%23#{number}:%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{number}&hashtags=learntocode, javascript" target="_blank")
+                    script(src='/js/lib/bonfire/bonfireFramework.js')
-                                        i.fa.fa-twitter  
-                                            = phrase
-                                - else
-                                a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
-                #all-challenges-dialog.modal(tabindex='-1')
-                    .modal-dialog.animated.fadeInUp.fast-animation
-                        .modal-content
-                            .modal-header.challenge-list-header Challenges
-                                a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
-                            .modal-body
-                                include ../partials/bonfires

views/partials/bonfires.jade

@@ -2,5 +2,44 @@ h3
     ol(start='0')
 for bonfire in bonfires
     li
-        a(href="/bonfire/#{bonfire.bonfireNumber}", class="#{ (cc && cc[bonfire.bonfireNumber] > 0) ? 'strikethrough' : '' }") #{bonfire.name}
+        a(href="/bonfire/#{bonfire.bonfireNumber}") #{bonfire.name}
-        |   (#{bonfire.time} mins)
+        |   (Level #{bonfire.difficulty})
+
+    block content
+    script(src='/js/lib/codemirror/lib/codemirror.js')
+    script(src='/js/lib/codemirror/addon/edit/closebrackets.js')
+    script(src='/js/lib/codemirror/addon/edit/matchbrackets.js')
+    script(src='/js/lib/codemirror/addon/lint/lint.js')
+    script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
+    script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
+    script(src='/js/lib/chai/chai.js')
+    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
+    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
+    script(src='/js/lib/codemirror/mode/javascript/javascript.js')
+    script(src='/js/lib/jailed/jailed.js')
+    script(src='/js/lib/bonfire/bonfireInit.js')
+    .row
+        #mainEditorPanel.col-sm-12.col-md-7.col-xs-12
+            .panel.panel-primary.panel-bonfire
+                .panel-heading.text-center Bonfire Playground
+                .panel.panel-body
+                    form.code
+                        .form-group.codeMirrorView
+                            textarea#codeEditor(autofocus=true)
+
+
+        #testCreatePanel.col-sm-12.col-md-5.col-xs-12
+            .panel.panel-primary.panel-bonfire
+                .panel-heading.text-center Output
+                .panel.panel-body
+                    #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
+                    br
+                    form.code
+                        .form-group.codeMirrorView
+                            textarea#codeOutput
+                    br
+                    ul#testSuite.list-group
+                    br
+                    script(src='/js/lib/bonfire/bonfireFramework.js')

views/partials/challenges.jade

@@ -2,5 +2,7 @@ h3
     ol(start='0')
         for challenge in challenges
             li
-                a(href="/bonfire/#{bonfire.bonfireNumber}", class="#{ (cc && cc[bonfire.bonfireNumber] > 0) ? 'strikethrough' : '' }") #{bonfire.name}
+                a(href="/challenges/#{challenge.challengeNumber}", class="#{ (cc && cc[challenge.challengeNumber] > 0) ? 'strikethrough' : '' }") #{challenge.name}
-                |   (Level #{bonfire.difficulty})
+                |   (#{challenge.time} mins)
+
+a.btn.btn-lg.btn-primary.btn-block(href="/done-with-first-100-hours", class="#{ ((cc && cc[53] === 0) || (!cc)) ? 'disabled' : '' }") I'm done with all the challenges!