index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code Editor</title>

    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>


<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!-- Toggle bar which appears when less than the appropriate size -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/">Try It</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Pong</li>
                        <li><a href="#">You're reading it!</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" class="view-api" title="View API" data-toggle="modal" data-target="#apiModal">
                        <span class="glyphicon glyphicon-question-sign"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script id="api-detail" type="text/template">
    <div>
        <!-- TODO Is there a more idiomatic way of dealing with this? -->
        <% if(name == "Available Entities") { %>
            <%= description %>
            <% _.each(todoNameMe, function(value, key) { %>
                <div>
                    <h3><%= key %></h3>
                    <%= value.description %>
                    <h4>Available Attributes</h4>
                    <div>
                        <table class="table table-striped">
                            <thead>
                            <td>Name</td>
                            <td>Description</td>
                            <td>Default</td>
                            </thead>
                            <% _.each(value.defaults, function(value, key) { %>
                                    <tr>
                                        <td><%= key %></td>
                                        <td><%= value.description %></td>
                                        <td><%= value.default %></td>
                                    </tr>
                            <% }) %>
                        </table>
                    </div>

                </div>
            <% }) %>
        <% } %>

        <% if(name == "Colors") { %>
            <% _.each(todoNameMe, function(value, key) { %>
                <div>
                    <%= key %> - <%= value %>
                </div>
            <% }) %>
        <% } %>

        <% if(name == "Keys") { %>
            <% _.each(todoNameMe, function(value, key) { %>
            <div>
                <%= key %>
            </div>
            <% }) %>
        <% } %>
    </div>
</script>

<script id="code-editor-template" type="text/template">
    <div class="text-right">
        <a title="View API" class="copyCode" title="Copy-Code">
            <span class="glyphicon glyphicon-pencil"></span>
            <span></span>
        </a>
    </div>
    <div <%= "id='" + id + "'" %>><%= code %></div>
</script>


<script id="api-overview" type="text/template">
    <div class="panel panel-default">
        <div class="panel-heading more">
            <%= name %> - <%= description %>
        </div>
        <!-- Lazily populated -->
        <div class="panel-body more-detail">
        </div>
    </div>
</script>

<div class="modal fade" id="apiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Api Overview</h4>
            </div>
            <div class="modal-body">
                The following functions have been defined for this demonstration.
                <div intepreter-api>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="view">


<div id="tutorial-box">
    <div class="col-md-4">
        <div class="page">
            <h2>Welcome</h2>
            Let's learn how to code, click the next button to begin!
        </div>
        <div class="page">
            <h2>Introduction</h2>
            <div>Programming can be fun and challenging. Let's look at the 'Hello World' example below</div>

            <div code-example>
                log("Hello World")
            </div>

            <div>
                You can copy this code into the editor using the copy button provided above the code example.
                When copied into the main editor, this code can be ran by pressing the <a href="#" highlight-target="#run-code">Run Code button </a>.
            </div>
            <br />
            <div>
                This code, when ran, will output the message 'Hello World' to the <a href="#" highlight-target="#debug-window">console output</a>.
            </div>

        </div>
        <div class="page">
            <h2>Creating Shapes</h2>
            <div>You can also create shapes! For instance you can create a Rectangle with the following code</div>

            <div code-example>
                var rectangle = Rectangle({
                    x: 10,
                    y: 20
                });
            </div>

            <div>
                You can create various entities (shapes) such as Circles and Text.
                These are shown within the <a href="#" class="view-api" title="View API" data-toggle="modal" data-target="#apiModal">API</a>.
            </div>

            <div code-example>
                var circle = Circle({
                    x: 50,
                    y: 50,
                    color: Colors.RED
                });
            </div>

        </div>

        <div class="page">
            <h2>Loops</h2>

            <div>Loops are able to run a block of code multiple times. For instance, this code can count up to 10</div>

            <div code-example>
                var count = 0;

                while(count < 10) {
                    // Add one to the variable count
                    count++;
                    log("Adding 1 to the count " + count)
                }

                log("The final value is " + count)
            </div>

            <div>
                Remember that these log messages will be added to the <a href="#" highlight-target="#debug-window">console</a>.
            </div>

        </div>

        <div class="page">
            <h2>Movement!</h2>
            <div>Once an entity, such as a Circle is created, we can update its value within an 'update' function. As part of this update function we can logically update entities. In this example we increase the location of our circle by 5 on each update.</div>

            <div code-example>
                var velocity_x = 5;
                var velocity_y = 5;
                var circle = Circle({
                    x: 10,
                    y: 20
                });

                function update() {
                    circle.x += velocity_x;
                    circle.y += velocity_y;
                }
            </div>

            <div>
                We could update the code to to make sure it always stays within the bounds of the screen.
                The size of the canvas is accessible via the world object.
            </div>

            <div code-example>
                var WORLD_WIDTH = world.width;
                var WORLD_HEIGHT = world.height;

                var velocity_x = 5;
                var velocity_y = 5;

                var circle = Circle({
                    x: 10,
                    y: 20,
                    radius:10
                });

                function update() {
                    circle.x += velocity_x;
                    circle.y += velocity_y;

                    if(circle.x < 0 || circle.x > WORLD_WIDTH) {
                        velocity_x *= -1;
                    }

                    if(circle.y < 0 || circle.y > WORLD_HEIGHT) {
                        velocity_y *= -1;
                    }
                }
            </div>

        </div>

        <div class="page">
            <h2>The End</h2>
            <div>We hope you enjoyed yourself. It is possible to use all of the previous steps and create both basic and advanced programs!</div>
            <div>Here is a simple game of pong!</div>
            <div code-example>
                log("Started Game!");

                world.color = Colors.GREY;
                var WORLD_WIDTH = world.width;
                var WORLD_HEIGHT = world.height;

                // Keeping track of the scores
                var playerScore = 0;
                var computerScore = 0;

                var playerPaddle = Rectangle({
                    x: 10, y: (WORLD_HEIGHT / 2) - (80 / 2),
                    width: 20, height: 80,
                    color: Colors.GREEN,
                    velocity: 10
                });

                var computerPaddle = Rectangle({
                    x: WORLD_WIDTH - 30, y: (WORLD_HEIGHT / 2) - (80 / 2),
                    width: 20, height: 80,
                    color: Colors.GREEN,
                    velocity: 6
                });

                var score = Text({
                    x: (WORLD_WIDTH / 2) - 80,
                    y: 24,
                    text: "Player " + playerScore + " - Computers " + computerScore
                });

                var ball_radius = 10;
                var ball_velocity = 10;
                var ball = Circle({
                    x: (WORLD_WIDTH / 2) - (ball_radius / 2),
                    y: (WORLD_HEIGHT / 2) - (ball_radius / 2),
                    radius: ball_radius,
                    x_velocity: -ball_velocity,
                    y_velocity: ball_velocity
                });

                // Start the ball in the middle
                resetBall();

                function update() {
                    // Update the ball's position
                    updateBall();

                    // Check to see if anyone has one, and restart the game if they have
                    checkWinners();

                    // Human Controlling
                    movePlayer();

                    // Computer AI Mechanism for the paddle
                    moveComputer();
                }

                function movePlayer() {
                    if (keysDown.contains(Keys.UP) && (playerPaddle.y) > 0) {
                        playerPaddle.y -= playerPaddle.velocity;
                    }

                    if (keysDown.contains(Keys.DOWN) && (playerPaddle.y + playerPaddle.height) < WORLD_HEIGHT) {
                        playerPaddle.y += playerPaddle.velocity;
                    }
                }

                function moveComputer() {
                    var centerOfPaddle = computerPaddle.y + (computerPaddle.height / 2)

                    // Only begin to move the computer if the ball is more than half way across the game
                    if (ball.x > WORLD_WIDTH / 2) {
                        if (ball.y > centerOfPaddle) {
                            computerPaddle.y += computerPaddle.velocity;
                        } else {
                            computerPaddle.y -= computerPaddle.velocity;
                        }
                    }
                }

                function updateBall() {
                    // Update the ball position
                    ball.x += ball.x_velocity;
                    ball.y += ball.y_velocity;

                    // Check if we need to bounce on the top or bottom
                    if (ball.y <= 0 || ball.y >= WORLD_HEIGHT) {
                        ball.y_velocity *= -1;
                    }

                    // Check if we have bounced off a paddle or computer
                    if (ball.collidesWith(playerPaddle) || ball.collidesWith(computerPaddle)) {
                        ball.x_velocity *= -1;
                    }
                }

                function checkWinners() {
                    var ballPastPlayer = ball.x < 0;
                    var ballPastComputer = ball.x > WORLD_WIDTH;
                    if (ballPastPlayer || ballPastComputer) {
                        log("Game Lost!")

                        // Decide who gets the points!
                        if (ballPastPlayer) {
                            computerScore++;
                        } else if (ballPastComputer) {
                            playerScore++;
                        }

                        // Update the score text
                        score.text = "Player " + playerScore + " - Computers " + computerScore;
                        resetBall();
                    }
                }

                function resetBall() {
                    // restart the ball position in the center of the world
                    ball.x = (WORLD_WIDTH / 2) - (ball_radius / 2);
                    ball.y = (WORLD_HEIGHT / 2) - (ball_radius / 2);

                    ball.x_velocity = -ball_velocity;
                    ball.y_velocity = ball_velocity;
                }
            </div>
        </div>

        <div class="text-center" style="margin-top: 20px">
            <input type="button" class="btn btn-default previousPage" value="previous"/>
            <input type="button" class="btn btn-default nextPage" value="next"/>
        </div>
    </div>
</div>

<div class="col-md-8">

    <div>
        <a href="#"
           id="run-code"
           intepreter-runner
           intepreter-code-box="code-box"
           intepreter-target="#code-result"
           intepreter-debugger="#debug-window"
           intepreter-stop="#stop">
            <span class="glyphicon glyphicon-refresh"></span>
            <span>Run Code </span>
        </a>

        <a href="#" id="stop">
            <span class="glyphicon glyphicon-exclamation-sign red"></span>
            <span>Stop Code</span>
        </a>
    </div>


    <div>
        <div id="code-box">

        </div>
    </div>
    <div>
        <div class="text-center">Canvas</div>
        <div id="code-result" class="environment">
            Waiting for new program...
        </div>
    </div>

    <div>
        <div class="text-center">Log output</div>
        <div id="debug-window" class="logging-container">
            Waiting for new program...
        </div>
    </div>

</div>
</div>

</body>
<script>
    var editorStyle = "ace/theme/dawn";
</script>

<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="bower_components/underscore/underscore.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/backbone/backbone.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    localStorage.latestCode = localStorage.latestCode || "";
    $("#code-box").html(localStorage.latestCode);

    var editor = ace.edit("code-box");
    editor.setTheme(editorStyle);
    editor.getSession().setMode("ace/mode/javascript");


    editor.getSession().on('change', function(e) {
        localStorage.latestCode = editor.getSession().getValue();
    });
</script>
<script src="js/coderunner.js"></script>
<script src="js/binding.js"></script>
<script src="js/backbone.js"></script>
<script>
    // Fake a click of the run button for debugging purposes
    /*setTimeout(function () {
     var runners = document.querySelectorAll("[intepreter-runner]");
     [].forEach.bind(runners, function (runner) {
     runner.click()
     })()
     }, 100);*/
</script>
</html>