diff options
Diffstat (limited to 'static/js/main.js')
| -rw-r--r-- | static/js/main.js | 250 |
1 files changed, 135 insertions, 115 deletions
diff --git a/static/js/main.js b/static/js/main.js index e14b8a6..62c14a9 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,131 +1,139 @@ -const PROG_FACTORIAL = `YOU WON'T WANT TO MISS 'Hello, World!' - -DISCOVER HOW TO factorial WITH n +const PROG_FIBONACCI = ` +DISCOVER HOW TO link WITH a RUMOR HAS IT - WHAT IF n IS ACTUALLY 0 - SHOCKING DEVELOPMENT 1 - LIES! - SHOCKING DEVELOPMENT - n TIMES factorial OF n MINUS 1 + DISCOVER HOW TO query WITH first + RUMOR HAS IT + WHAT IF first IS ACTUALLY 1 + SHOCKING DEVELOPMENT a + LIES! + SHOCKING DEVELOPMENT 2 + END OF STORY + SHOCKING DEVELOPMENT query END OF STORY -EXPERTS CLAIM result TO BE factorial OF 10 -YOU WON'T WANT TO MISS 'Result is' -YOU WON'T WANT TO MISS result +EXPERTS CLAIM something TO BE link OF 3 +YOU WON'T WANT TO MISS something OF 1 -PLEASE LIKE AND SUBSCRIBE`; +PLEASE LIKE AND SUBSCRIBE + +`; -const PROG_FIBONACCI = `DISCOVER HOW TO fibonacci WITH a, b, n +const PROG_FACTORIAL = `DISCOVER HOW TO link WITH a 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 + 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 -EXPERTS CLAIM limit TO BE 10 -YOU WON'T WANT TO MISS 'First 10 Fibonacci numbers' -EXPERTS CLAIM nothing TO BE fibonacci OF 0, 1, limit +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!`, - `The Best Programming Language You Haven't Heard Of (It Will Surprise You!)`, - `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`, - `Programmer Who Made Everything Now Predicts the Next Big Language!`, - `The Secret Programming Language Every 10x Programmer Recommends!`, - `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`, - `How To Lose Brain Fat With This Programming Language!`, - `Your Friends Will Be Jealous About This New Programming Language!`, - `You Can Earn Millions With This Programming Language!`, - `The Cure For Cancer Could Be Found With The Programming Language!` + `You Won't Believe What This Programming Language Can Do!`, + `The Best Programming Language You Haven't Heard Of (It Will Surprise You!)`, + `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`, + `Programmer Who Made Everything Now Predicts the Next Big Language!`, + `The Secret Programming Language Every 10x Programmer Recommends!`, + `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`, + `How To Lose Brain Fat With This Programming Language!`, + `Your Friends Will Be Jealous About This New Programming Language!`, + `You Can Earn Millions With This 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 { - Component, -} = window.Torus; +const { Component } = window.Torus; class Editor extends Component { - init() { - this.prog = PROG_DEFAULT; - // script appends to it - this.output = ''; - this.errors = ''; + init() { + this.prog = PROG_DEFAULT; + // script appends to it + this.output = ""; + this.errors = ""; - this.handleRun = () => this.eval(); - this.handleInput = evt => { - this.prog = evt.target.value; - this.render(); - } - this.handleKeydown = evt => { - if (evt.key === 'Tab') { - evt.preventDefault(); - const idx = evt.target.selectionStart; - if (idx !== null) { - const front = this.prog.substr(0, idx); - const back = this.prog.substr(idx); - this.prog = front + ' ' + back; - this.render(); - evt.target.setSelectionRange(idx + 4, idx + 4); - } - } - } - this.setFactorial = () => { - this.prog = PROG_FACTORIAL; - this.output = this.errors = ''; - this.render(); + this.handleRun = () => this.eval(); + this.handleInput = (evt) => { + this.prog = evt.target.value; + this.render(); + }; + this.handleKeydown = (evt) => { + if (evt.key === "Tab") { + evt.preventDefault(); + const idx = evt.target.selectionStart; + if (idx !== null) { + const front = this.prog.substr(0, idx); + const back = this.prog.substr(idx); + this.prog = front + " " + back; + this.render(); + evt.target.setSelectionRange(idx + 4, idx + 4); } - 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 => { - this.output += s.toString().toUpperCase() + '!\n'; - this.render(); - }, - input: s => { - return prompt(s); - }, - }); - env.run(nodes); - } catch (e) { - this.errors = e.toString(); - } - 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(); } - compose() { - return jdom`<div class="editor fixed block"> + 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') - .map(line => jdom`<p>${line.trim() ? line : '-'}</p>`)} + ${this.prog + .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') - .map(line => jdom`<code class="output-line">${line}</code>`) - : jdom`<code class="no-output">No output.</code>`} + ${ + this.output + ? this.output + .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>`)} - </div>` : null} + ${ + this.errors + ? jdom`<div class="errors"> + ${this.errors + .split("\n") + .map((line) => jdom`<code>${line}</code>`)} + </div>` + : null + } </div>`; - } + } } class App extends Component { - init() { - this.editor = new Editor(); - } - compose() { - return jdom`<main> + init() { + this.editor = new Editor(); + } + compose() { + 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 => { - evt.preventDefault(); - this.render(); + <a href="#" onclick=${(evt) => { + evt.preventDefault(); + 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(); |