Gross

static/js/main.js

@@ -1,131 +1,139 @@
-const PROG_FACTORIAL = `YOU WON'T WANT TO MISS 'Hello, World!'
+const PROG_FIBONACCI = `
-
+DISCOVER HOW TO link WITH a
-DISCOVER HOW TO factorial WITH n
 RUMOR HAS IT
-    WHAT IF n IS ACTUALLY 0
+    DISCOVER HOW TO query WITH first
-        SHOCKING DEVELOPMENT 1
+    RUMOR HAS IT
-    LIES!
+        WHAT IF first IS ACTUALLY 1
-        SHOCKING DEVELOPMENT
+            SHOCKING DEVELOPMENT a
-            n TIMES factorial OF n MINUS 1
+        LIES!
-END OF STORY
+            SHOCKING DEVELOPMENT 2
-
-EXPERTS CLAIM result TO BE factorial OF 10
-YOU WON'T WANT TO MISS 'Result is'
-YOU WON'T WANT TO MISS result
-
-PLEASE LIKE AND SUBSCRIBE`;
-
-const PROG_FIBONACCI = `DISCOVER HOW TO fibonacci WITH a, b, n
-RUMOR HAS IT
-    WHAT IF n SMALLER THAN 1
-        SHOCKING DEVELOPMENT b
-    LIES! RUMOR HAS IT
-        YOU WON'T WANT TO MISS b
-        SHOCKING DEVELOPMENT
-            fibonacci OF b, a PLUS b, n MINUS 1
     END OF STORY
+    SHOCKING DEVELOPMENT query
 END OF STORY
 
-EXPERTS CLAIM limit TO BE 10
+EXPERTS CLAIM something TO BE link OF 3
-YOU WON'T WANT TO MISS 'First 10 Fibonacci numbers'
+YOU WON'T WANT TO MISS something OF 1
-EXPERTS CLAIM nothing TO BE fibonacci OF 0, 1, limit
+
+PLEASE LIKE AND SUBSCRIBE
+
+`;
+
+const PROG_FACTORIAL = `DISCOVER HOW TO link WITH a
+RUMOR HAS IT
+    DISCOVER HOW TO query WITH first
+    RUMOR HAS IT
+        WHAT IF first IS ACTUALLY 1
+            SHOCKING DEVELOPMENT 1
+        LIES!
+            SHOCKING DEVELOPMENT 2
+    END OF STORY
+    SHOCKING DEVELOPMENT query
+END OF STORY
+
+YOU WON'T WANT TO MISS link OF 1 OF 2
 
 PLEASE LIKE AND SUBSCRIBE`;
 
 const PROG_DEFAULT = PROG_FIBONACCI;
 
 const HEADLINES = [
-    `You Won't Believe What This Programming Language Can Do!`,
+  `You Won't Believe What This Programming Language Can Do!`,
-    `The Best Programming Language You Haven't Heard Of (It Will Surprise You!)`,
+  `The Best Programming Language You Haven't Heard Of (It Will Surprise You!)`,
-    `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`,
+  `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`,
-    `Programmer Who Made Everything Now Predicts the Next Big Language!`,
+  `Programmer Who Made Everything Now Predicts the Next Big Language!`,
-    `The Secret Programming Language Every 10x Programmer Recommends!`,
+  `The Secret Programming Language Every 10x Programmer Recommends!`,
-    `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`,
+  `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`,
-    `How To Lose Brain Fat With This Programming Language!`,
+  `How To Lose Brain Fat With This Programming Language!`,
-    `Your Friends Will Be Jealous About This New Programming Language!`,
+  `Your Friends Will Be Jealous About This New Programming Language!`,
-    `You Can Earn Millions With This Programming Language!`,
+  `You Can Earn Millions With This Programming Language!`,
-    `The Cure For Cancer Could Be Found With The Programming Language!`
+  `The Cure For Cancer Could Be Found With The Programming Language!`,
 ];
 
 function randomHeadline() {
-    return HEADLINES[~~(Math.random() * HEADLINES.length)];
+  return HEADLINES[~~(Math.random() * HEADLINES.length)];
 }
 
-const {
+const { Component } = window.Torus;
-    Component,
-} = window.Torus;
 
 class Editor extends Component {
-    init() {
+  init() {
-        this.prog = PROG_DEFAULT;
+    this.prog = PROG_DEFAULT;
-        // script appends to it
+    // script appends to it
-        this.output = '';
+    this.output = "";
-        this.errors = '';
+    this.errors = "";
 
-        this.handleRun = () => this.eval();
+    this.handleRun = () => this.eval();
-        this.handleInput = evt => {
+    this.handleInput = (evt) => {
-            this.prog = evt.target.value;
+      this.prog = evt.target.value;
-            this.render();
+      this.render();
-        }
+    };
-        this.handleKeydown = evt => {
+    this.handleKeydown = (evt) => {
-            if (evt.key === 'Tab') {
+      if (evt.key === "Tab") {
-                evt.preventDefault();
+        evt.preventDefault();
-                const idx = evt.target.selectionStart;
+        const idx = evt.target.selectionStart;
-                if (idx !== null) {
+        if (idx !== null) {
-                    const front = this.prog.substr(0, idx);
+          const front = this.prog.substr(0, idx);
-                    const back = this.prog.substr(idx);
+          const back = this.prog.substr(idx);
-                    this.prog = front + '    ' + back;
+          this.prog = front + "    " + back;
-                    this.render();
+          this.render();
-                    evt.target.setSelectionRange(idx + 4, idx + 4);
+          evt.target.setSelectionRange(idx + 4, idx + 4);
-                }
-            }
-        }
-        this.setFactorial = () => {
-            this.prog = PROG_FACTORIAL;
-            this.output = this.errors = '';
-            this.render();
-        }
-        this.setFibonacci= () => {
-            this.prog = PROG_FIBONACCI;
-            this.output = this.errors = '';
-            this.render();
         }
+      }
+    };
+    this.setFactorial = () => {
+      this.prog = PROG_FACTORIAL;
+      this.output = this.errors = "";
+      this.render();
+    };
+    this.setFibonacci = () => {
+      this.prog = PROG_FIBONACCI;
+      this.output = this.errors = "";
+      this.render();
+    };
+  }
+  eval() {
+    this.output = "";
+    this.errors = "";
+    try {
+      const tokens = tokenize(this.prog);
+      const nodes = new Parser(tokens).parse();
+      const env = new Environment({
+        print: (s) => {
+          console.log(s);
+          this.output += s.toString().toUpperCase() + "!\n";
+          this.render();
+        },
+        input: (s) => {
+          return prompt(s);
+        },
+      });
+      env.run(nodes);
+    } catch (e) {
+      this.errors = e.toString();
     }
-    eval() {
+    this.render();
-        this.output = '';
+  }
-        this.errors = '';
+  compose() {
-        try {
+    return jdom`<div class="editor fixed block">
-            const tokens = tokenize(this.prog);
-            const nodes = new Parser(tokens).parse();
-            const env = new Environment({
-                print: s => {
-                    this.output += s.toString().toUpperCase() + '!\n';
-                    this.render();
-                },
-                input: s => {
-                    return prompt(s);
-                },
-            });
-            env.run(nodes);
-        } catch (e) {
-            this.errors = e.toString();
-        }
-        this.render();
-    }
-    compose() {
-        return jdom`<div class="editor fixed block">
             <div class="controls">
                 <button class="block"
-                    onclick=${this.setFibonacci}>Fibonacci <span class="desktop">sample</span></button>
+                    onclick=${
+                      this.setFibonacci
+                    }>Fibonacci <span class="desktop">sample</span></button>
                 <button class="block"
-                    onclick=${this.setFactorial}>Factorial <span class="desktop">sample</span></button>
+                    onclick=${
+                      this.setFactorial
+                    }>Factorial <span class="desktop">sample</span></button>
                 <button class="accent block"
-                    onclick=${this.handleRun}>Run<span class="desktop"> this</span>!</button>
+                    onclick=${
+                      this.handleRun
+                    }>Run<span class="desktop"> this</span>!</button>
             </div>
             <div class="code">
                 <div class="filler">
-                    ${this.prog.split('\n')
+                    ${this.prog
-                        .map(line => jdom`<p>${line.trim() ? line : '-'}</p>`)}
+                      .split("\n")
+                      .map((line) => jdom`<p>${line.trim() ? line : "-"}</p>`)}
                 </div>
                 <textarea class="editor-input" cols="30" rows="10"
                     value=${this.prog}
@@ -134,32 +142,44 @@ class Editor extends Component {
                 </textarea>
             </div>
             <div class="output">
-                ${this.output ? this.output
+                ${
-                    .split('\n')
+                  this.output
-                    .map(line => jdom`<code class="output-line">${line}</code>`)
+                    ? this.output
-                    : jdom`<code class="no-output">No output.</code>`}
+                        .split("\n")
+                        .map(
+                          (line) =>
+                            jdom`<code class="output-line">${line}</code>`
+                        )
+                    : jdom`<code class="no-output">No output.</code>`
+                }
             </div>
-            ${this.errors ? jdom`<div class="errors">
+            ${
-                ${this.errors.split('\n').map(line => jdom`<code>${line}</code>`)}
+              this.errors
-            </div>` : null}
+                ? jdom`<div class="errors">
+                ${this.errors
+                  .split("\n")
+                  .map((line) => jdom`<code>${line}</code>`)}
+            </div>`
+                : null
+            }
         </div>`;
-    }
+  }
 }
 
 class App extends Component {
-    init() {
+  init() {
-        this.editor = new Editor();
+    this.editor = new Editor();
-    }
+  }
-    compose() {
+  compose() {
-        return jdom`<main>
+    return jdom`<main>
             <header>
                 <h1>${randomHeadline()}</h1>
                 <nav>
                     <a href="https://github.com/thesephist/tabloid"
                         target="_blank" noopener noreferer>GitHub</a>
-                    <a href="#" onclick=${evt => {
+                    <a href="#" onclick=${(evt) => {
-                        evt.preventDefault();
+                      evt.preventDefault();
-                        this.render();
+                      this.render();
                     }}>NEW headline!</a>
                     <a href="https://github.com/thesephist/tabloid/blob/master/README.md#language-overview"
                         target="_blank" noopener noreferer>Tutorial</a>
@@ -176,7 +196,7 @@ class App extends Component {
                 headlines.
             </p>
             <p>
-                Here are <strike>a few things</strike>${' '}<strong>the Top Five
+                Here are <strike>a few things</strike>${" "}<strong>the Top Five
                 Most Popular Quirks and Features</strong> of the Tabloid
                 programming language <strong>(Number Four Will Shock You!)</strong>
             </p>
@@ -242,7 +262,7 @@ class App extends Component {
             </p>
             <p>
                 Before making Tabloid, I also created a more <strike>useful and
-                well-designed</strike>${' '}<strong>boring and unpopular</strong>
+                well-designed</strike>${" "}<strong>boring and unpopular</strong>
                 programming language, called <a href="https://dotink.co/"
                 target="_blank">Ink</a>.
             </p>
@@ -331,7 +351,7 @@ class App extends Component {
                 </p>
             </footer>
         </main>`;
-    }
+  }
 }
 
 const app = new App();