Add in-game auto-complete

documentation.html

@@ -4,7 +4,7 @@
     <title>Elevator Saga - help and API documentation</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="font-awesome-4.1-1.0/css/font-awesome.min.css" type="text/css" media="all">
-    <link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="style.css" type="text/css" media="all">
 
     <link rel="stylesheet" href="libs/highlight/styles/default.css" type="text/css" media="all">
@@ -46,15 +46,16 @@ <h2>Basics</h2>
             <p>
                 Your code must declare an object containing at least two functions called <span class="emphasis-color">init</span> and <span class="emphasis-color">update</span>. Like this:
             </p>
-            <div><pre><code>{
+            <div><pre><code>/** @type {Solution} */
+({
     init: function(elevators, floors) {
         // Do stuff with the elevators and floors, which are both arrays of objects
     },
     update: function(dt, elevators, floors) {
         // Do more stuff with the elevators and floors
         // dt is the number of game seconds that passed since the last time update was called
     }
-}</code></pre></div>
+})</code></pre></div>
             <p>These functions will then be called by the game during the challenge.<br>
             <span class="emphasis-color">init</span> will be called when the challenge starts, and <span class="emphasis-color">update</span> repeatedly during the challenge.
             </p>

index.html

@@ -4,7 +4,7 @@
     <title>Elevator Saga - the elevator programming game</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="font-awesome-4.1-1.0/css/font-awesome.min.css" type="text/css" media="all">
-    <link href='//fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="libs/codemirror/codemirror.css">
     <link rel="stylesheet" href="libs/codemirror/themes/solarized.css">
     <link rel="stylesheet" href="style.css" type="text/css" media="all">
@@ -13,10 +13,6 @@
     <script type="text/javascript" src="libs/lodash.min.js"></script>
     <script type="text/javascript" src="libs/riot.js"></script>
 
-    <script type="text/javascript" src="libs/codemirror/codemirror.js"></script>
-    <script type="text/javascript" src="libs/codemirror/addon/edit/closebrackets.js"></script>
-    <script type="text/javascript" src="libs/codemirror/mode/javascript/javascript.js"></script>
-
     <script type="text/javascript" src="libs/unobservable.js"></script>
 
     <script type="text/javascript" src="base.js"></script>
@@ -29,6 +25,7 @@
     <script type="text/javascript" src="presenters.js"></script>
     <script type="text/javascript" src="challenges.js"></script>
     <script type="text/javascript" src="fitness.js"></script>
+    <script type="text/javascript" src="types.js"></script>
     <script type="text/javascript" src="app.js"></script>
 
 
@@ -84,7 +81,8 @@ <h5 class="error" style="display: {errorDisplay}"><i class="fa fa-warning error-
     </script>
 
     <script type="text/plain" id="default-elev-implementation">
-{
+/** @type {Solution} */
+({
     init: function(elevators, floors) {
         var elevator = elevators[0]; // Let's use the first elevator
 
@@ -98,10 +96,11 @@ <h5 class="error" style="display: {errorDisplay}"><i class="fa fa-warning error-
     update: function(dt, elevators, floors) {
         // We normally don't need to do anything here
     }
-}
+})
     </script>
     <script type="text/plain" id="devtest-elev-implementation">
-{
+/** @type {Solution} */
+({
     init: function(elevators, floors) {
         var selectElevatorForFloorPickup = function(floorNum) {
             return _.max(elevators, function(e) {
@@ -130,7 +129,7 @@ <h5 class="error" style="display: {errorDisplay}"><i class="fa fa-warning error-
     },
     update: function(dt, elevators, floors) {
     }
-}
+})
     </script>
 
 
@@ -167,7 +166,7 @@ <h2>Your browser does not appear to support JavaScript. This page contains a bro
 
         <div class="codestatus"></div>
         <div class="code">
-            <textarea name="Code" id="code"></textarea>
+            <div id="editor"></div>
         </div>
         <button id="button_reset" style="float: left">Reset</button>
         <button id="button_resetundo" style="float: left">Undo reset</button>
@@ -188,6 +187,9 @@ <h4><a href="test/index.html">Run tests</a></h4>
         </div>
     </div>
 
+    <!-- Load Monaco Editor from CDN; from: https://log.schemescape.com/posts/web-development/embedding-monaco-from-cdn.html -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
+
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),