Added a web editor as an alternative to uploading code files

almost · almost · commit 672f58cbe6fd · 2024-07-03T16:20:30.000+01:00
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "A code golf game server for JavaScript",
   "type": "module",
   "scripts": {
-    "start": "CG_ADMIN_PASSWORD=admin ts-node --esm --files --project tsconfig.json src/index.ts",
+    "start": "CG_ADMIN_PASSWORD=cheese ts-node --esm --files --project tsconfig.json src/index.ts",
     "tests": "jest --runInBand",
     "tests-watch": "jest --watch",
     "format": "prettier --write '**/*'",
diff --git a/public/css/app.css b/public/css/app.css
@@ -204,3 +204,47 @@ code {
   font-family: Courier, monospace;
   font-size: inherit;
 }
+
+.editor-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  flex-wrap: wrap;
+  background: rgb(255,255,255,0.9);
+}
+
+.editor {
+  flex-grow: 1;
+  min-width: 300px;
+}
+
+.right {
+  min-width: 200px;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.console {
+  flex: 1;
+  overflow: scroll;
+  min-height: 0;
+}
+
+.test-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.test-container input {
+  flex-grow: 1;
+}
+
+.controls {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
diff --git a/src/game/verifier.ts b/src/game/verifier.ts
@@ -81,9 +81,13 @@ process.on('message', (entry: VerifyJob) => {
               )
             : assertion.output;
 
-        if (assertion.sortOutput && Array.isArray(result) && Array.isArray(expected)) {
+        if (
+          assertion.sortOutput &&
+          Array.isArray(result) &&
+          Array.isArray(expected)
+        ) {
           result.sort();
-          expected.sort()
+          expected.sort();
         }
 
         if (!lodash.isEqual(result, expected)) {
diff --git a/src/routes/play.ts b/src/routes/play.ts
@@ -2,6 +2,9 @@ import fs from 'fs';
 import lodash from 'lodash';
 import express from 'express';
 import multiparty from 'multiparty';
+import Crypto from 'crypto';
+import { tmpdir } from 'os';
+import Path from 'path';
 
 import * as game from '../game/game.js';
 import { verify } from '../game/game-verifier.js';
@@ -81,6 +84,13 @@ app.get('/solution/:key', (req, res) => {
     .send(solution || 'No solution found');
 });
 
+function tmpFile(ext:string) {
+  return Path.join(
+    tmpdir(),
+    `archive.${Crypto.randomBytes(6).readUIntLE(0, 6).toString(36)}.${ext}`
+  );
+}
+
 app.post('/submit', (req, res) => {
   const redirect = (result: Partial<game.Entry>, err: string) => {
     const url = [
@@ -106,8 +116,12 @@ app.post('/submit', (req, res) => {
     const team = fields['team'][0];
     const key = fields['key'][0];
 
-    const file =
+    let file =
       files && files['file'] && files['file'][0] ? files['file'][0].path : null;
+    if (file == null) {
+      file = tmpFile('.js');
+      fs.writeFileSync(file, fields['code'][0]);
+    }
 
     const entry = {
       email,
diff --git a/views/play.html b/views/play.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
     <link href="css/app.css" rel="stylesheet" media="screen" />
-    <meta http-equiv="refresh" content="60">
+    <script src=" https://cdn.jsdelivr.net/npm/ace-builds@1.19.0/src-min-noconflict/ace.min.js "></script>
+    <link href=" https://cdn.jsdelivr.net/npm/ace-builds@1.19.0/css/ace.min.css " rel="stylesheet">
   </head>
   <body>
     <div class="container">
@@ -75,8 +76,30 @@ <h4>Oops, your entry is incorrect</h4>
                   onchange="javascript:this.form.submit();"
                 />
                 <input type="hidden" name="key" value="{{session.key}}" />
+                <input type="hidden" name="code" value="" />
+                <div id="editor-container" class="editor-container" style="display: none">
+                  <div id="editor" class="editor"></div>
+                  <div class="right">
+                    <div class="controls">
+                      <button type="submit" class="btn btn-lg btn-info" id="submit">Submit Entry</button>
+                      <div>
+                        Write your code in the editor. Hit "Submit Entry" to submit your entry to the leaderboard. Use the test field to try out your code and the results will appear below. If you reload the page we will remember the last code you entered.
+                      </div>
+                    </div>
+                    <div id="console" class="console"></div>
+                    <div class="test-container">
+                      <input id="test" value="{{ challenge.exampleTest }}{{ ^challenge.exampleTest }}play() {{/challenge.exampleTest}}"/>
+                      <button class="btn btn-lg btn-info" id="run-test">Run Test</button>
+                    </div>
+
+                  </div>
+                </div>
                 <div class="footer">
-                  <a href="#" class="btn btn-lg btn-info">Choose File</a>
+                  <div>
+                    You can upload a file from your computer with "Choose File" or you can edit online (or copy/paste) with "Web Editor"
+                  </div>
+                  <a href="#" class="btn btn-lg btn-info" id="choose">Choose File</a>
+                  <a href="#" class="btn btn-lg btn-info" id="open-editor">Web Editor</a>
                 </div>
               </form>
               {{/game.running}} {{^game.running}}
@@ -110,7 +133,7 @@ <h4>You can now view other solutions by clicking on them.</h4>
         offsetAddEntryHeight();
         $(window).on('resize', offsetAddEntryHeight);
 
-        $('.submit-form a').click(function(e) {
+        $('#choose').click(function(e) {
           e.preventDefault();
           $('.submit-form input[type="file"]').click();
         });
@@ -147,6 +170,59 @@ <h4>You can now view other solutions by clicking on them.</h4>
             clock.text([min, sec].join(':'));
           }, 1000);
         });
+
+
+
+        const editor = ace.edit("editor");
+        editor.setTheme("ace/theme/monokai");
+        editor.session.setMode("ace/mode/javascript");
+        editor.setValue(localStorage["code"] || "let play = () => {}");
+        function updateCode () {
+            localStorage["code"] = editor.getValue();
+            $('[name="code"]').val(editor.getValue());
+        }
+        updateCode();
+        editor.session.on('change', updateCode);
+
+        $('#open-editor').click(function(e) {
+          e.preventDefault();
+          if (!$('[name="email"]').val() || !$('[name="team"]').val()) {
+            alert("Please fill in a name and email first");
+            return;
+          }
+          $('[name="file"]').remove();
+          $('#editor-container').show();
+        });
+
+        function runTest() {
+          const oldConsoleLog = console.log;
+          console.log = function (...args) {
+            const output = args.join("");
+            const pre = document.createElement("pre");
+            pre.innerText = output;
+            $('#console').append(pre);
+            pre.scrollIntoView();
+          };
+          try {
+            console.log(eval(editor.getValue() + "\n;\n" + $('#test').val()));
+          } catch (e) {
+            console.log(e)
+          }
+          console.log = oldConsoleLog;
+        }
+
+        $('#test').keypress(function(e) {
+          if (e.which === 13) {
+            e.preventDefault();
+            runTest();
+          }
+        });
+
+        $('#run-test').click(function(e) {
+          e.preventDefault();
+          runTest();
+        });
+
       });
     </script>
   </body>

Original file line number	Diff line number	Diff line change
`@@ -81,9 +81,13 @@ process.on('message', (entry: VerifyJob) => {`
`81`	`81`	`)`
`82`	`82`	`: assertion.output;`
`83`	`83`
`84`		`- if (assertion.sortOutput && Array.isArray(result) && Array.isArray(expected)) {`
	`84`	`+ if (`
	`85`	`+ assertion.sortOutput &&`
	`86`	`+ Array.isArray(result) &&`
	`87`	`+ Array.isArray(expected)`
	`88`	`+ ) {`
`85`	`89`	`result.sort();`
`86`		`- expected.sort()`
	`90`	`+ expected.sort();`
`87`	`91`	`}`
`88`	`92`
`89`	`93`	`if (!lodash.isEqual(result, expected)) {`