Permalink
Browse files

Rearrange output into 3 columns, enable real-time editing, enable rea…

…l-time input manipulation. Fixes #78. Fixes #79. Fixes #88. Fixes #90. Fixes #91.
  • Loading branch information...
1 parent 8725799 commit 5cccd59e56e3620d1d4a2ccf1d6bd5357f134493 @jeresig jeresig committed Mar 9, 2012
Showing with 197 additions and 109 deletions.
  1. +35 −6 css/style.css
  2. +108 −89 js/play-ui.js
  3. +54 −14 js/utils.js
View
@@ -6,10 +6,13 @@ body {
#canvas-editor, #editor, #canvas, #play-overlay, #play-page .extra-editor {
position: relative;
- width: 640px;
height: 360px;
+ /*
+ width: 640px;
top: 0px;
left: 0px;
+ */
+ /*width: 100%;*/
}
#canvas, #play-overlay {
@@ -43,10 +46,12 @@ body {
#editor-box, #tests-box, #output-box, #solution-box {
overflow: hidden;
- position: absolute;
border-bottom: none;
+ /*
+ position: absolute;
top: 0px;
left: 0px;
+ */
}
#play-page .extra-editor {
@@ -103,7 +108,7 @@ body {
#output div input.text {
font-family: Monaco, Courier New;
font-size: 12px;
- width: 175px;
+ width: 125px;
}
.toolbar {
@@ -178,11 +183,13 @@ a.ui-button:visited:hover {
}
#tests {
+ font-size: 12px;
+ /*
position: absolute;
width: 300px;
- font-size: 12px;
top: 0px;
right: -308px;
+ */
}
#tests textarea {
@@ -265,7 +272,8 @@ a.ui-button:visited:hover {
}
#play-page #exercise-tabs {
- width: 948px;
+ /*width: 948px;*/
+ width: 1184px;
}
#play-page #code {
@@ -323,7 +331,7 @@ a.ui-button:visited:hover {
#play-page #main-tabs-nav {
border-bottom-color: #327E04; /*#D4CCB0;*/ /*#2779AA;*/
- width: 942px;
+ /*width: 942px;*/
}
#play-page .#main-tabs-nav li.ui-tabs-selected {
@@ -607,4 +615,25 @@ div#exercise-page {
.hotnumber .ui-slider-handle {
width: 8px;
+}
+
+.container-fluid > .sidebar {
+ display: none;
+}
+
+div.container-fluid > div.content {
+ margin-left: 0px;
+}
+
+#output.side {
+ /*
+ position: absolute;
+ width: 360px;
+ */
+ height: 360px;
+ border: 1px solid #D4CCB0;
+}
+
+#output-test {
+ display: none;
}
View
@@ -4,14 +4,21 @@ var Exercise,
curProblem,
errors,
curPosition,
+ toExec,
DEBUG = false;
$(function(){
// Start the editor and canvas drawing area
var editor = new Editor( "editor" );
Canvas.init();
- $("#editor").data( "editor", editor );
+ $("#editor")
+ .data( "editor", editor )
+ .hotNumber();
+
+ editor.editor.on( "change", function() {
+ toExec = editor.editor.getSession().getValue();
+ });
// Set up toolbar buttons
$(document).buttonize();
@@ -197,94 +204,7 @@ $(function(){
return false;
});
- $("#run-code").bind( "buttonClick", function() {
- var userCode = $("#editor").editorText(),
- validate = curProblem.validate,
- // TODO: Generate this list dynamically
- pass = JSHINT( "/*global input:false, inputNumber:false, print:false*/\n" + userCode ),
- hintData = JSHINT.data(),
- session = $("#editor").data( "editor" ).editor.getSession();
-
- extractResults( userCode );
-
- clear();
- $("#output-nav").addClass( "ui-state-disabled" );
- $("#results .desc").empty();
- $("#results").hide();
-
- session.clearAnnotations();
-
- errors = [];
-
- var doRunTests = !!(pass && !hintData.implieds);
-
- if ( doRunTests ) {
- $("#show-errors").addClass( "ui-state-disabled" );
- $("#editor-box").hideTip( "Error" );
-
- // Run the tests
- runTests( userCode, curProblem );
-
- // Then run the user code
- clear();
- runCode( userCode );
-
- if ( outputs.length > 0 ) {
- focusOutput();
-
- } else {
- focusProblem();
- }
- }
-
- if ( !doRunTests || errors.length ) {
- $("#show-errors").removeClass( "ui-state-disabled" );
-
- for ( var i = 0; i < JSHINT.errors.length; i++ ) {
- var error = JSHINT.errors[ i ];
-
- if ( error && error.line && error.character &&
- error.reason && !/unable to continue/i.test( error.reason ) ) {
-
- errors.push({
- row: error.line - 2,
- column: error.character - 1,
- text: error.reason,
- type: "error",
- lint: error
- });
- }
- }
-
- if ( hintData.implieds ) {
- for ( var i = 0; i < hintData.implieds.length; i++ ) {
- var implied = hintData.implieds[i];
-
- for ( var l = 0; l < implied.line.length; l++ ) {
- errors.push({
- row: implied.line[l] - 2,
- column: 0,
- text: "Using an undefined variable '" + implied.name + "'.",
- type: "error",
- lint: implied
- });
- }
- }
- }
-
- errors = errors.sort(function( a, b ) {
- return a.row - b.row;
- });
-
- session.setAnnotations( errors );
-
- $("#editor-box").showTip( "Error", errors, setCursor );
-
- if ( !doRunTests ) {
- $("#results").fadeOut( 400 );
- }
- }
- });
+ $("#run-code").bind( "buttonClick", execCode );
$("#editor-box-tabs")
.tabs({
@@ -360,6 +280,105 @@ $(function(){
}
});
+setInterval(function() {
+ if ( window.input != null && toExec != null ) {
+ execCode( toExec === true ? $("#editor").editorText() : toExec );
+ toExec = null;
+ curProblem.focusLine = null;
+ }
+}, 100 );
+
+var execCode = function( userCode ) {
+ var validate = curProblem.validate,
+ // TODO: Generate this list dynamically
+ pass = JSHINT( "/*global input:false, inputNumber:false, print:false*/\n" + userCode ),
+ hintData = JSHINT.data(),
+ session = $("#editor").data( "editor" ).editor.getSession();
+
+ if ( !curProblem.inputs ) {
+ curProblem.inputs = [];
+ }
+
+ extractResults( userCode );
+
+ $("#output-nav").addClass( "ui-state-disabled" );
+ $("#results .desc").empty();
+ $("#results").hide();
+
+ session.clearAnnotations();
+
+ errors = [];
+
+ var doRunTests = !!(pass && !hintData.implieds);
+
+ if ( doRunTests ) {
+ $("#show-errors").addClass( "ui-state-disabled" );
+ $("#editor-box").hideTip( "Error" );
+
+ // Run the tests
+ runTests( userCode, curProblem );
+
+ // Then run the user code
+ clear();
+ runCode( userCode );
+
+ if ( outputs.length > 0 ) {
+ focusOutput();
+
+ } else {
+ focusProblem();
+ }
+ }
+
+ if ( !doRunTests || errors.length ) {
+ $("#show-errors").removeClass( "ui-state-disabled" );
+
+ for ( var i = 0; i < JSHINT.errors.length; i++ ) {
+ var error = JSHINT.errors[ i ];
+
+ if ( error && error.line && error.character &&
+ error.reason && !/unable to continue/i.test( error.reason ) ) {
+
+ errors.push({
+ row: error.line - 2,
+ column: error.character - 1,
+ text: error.reason,
+ type: "error",
+ lint: error
+ });
+ }
+ }
+
+ if ( hintData.implieds ) {
+ for ( var i = 0; i < hintData.implieds.length; i++ ) {
+ var implied = hintData.implieds[i];
+
+ for ( var l = 0; l < implied.line.length; l++ ) {
+ errors.push({
+ row: implied.line[l] - 2,
+ column: 0,
+ text: "Using an undefined variable '" + implied.name + "'.",
+ type: "error",
+ lint: implied
+ });
+ }
+ }
+ }
+
+ errors = errors.sort(function( a, b ) {
+ return a.row - b.row;
+ });
+
+ session.setAnnotations( errors );
+
+ //$("#editor-box").showTip( "Error", errors, setCursor );
+
+ if ( !doRunTests ) {
+ $("#results").fadeOut( 400 );
+ }
+ }
+};
+
var openExercise = function( exercise ) {
Exercise = exercise;
Oops, something went wrong.

0 comments on commit 5cccd59

Please sign in to comment.