simponic/tabloid-fake-closure
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gross

Browse Source
This commit is contained in:
Elizabeth Hunt 2023-04-05 09:52:07 -06:00
parent 21a0f4df60
commit 5719d7e118
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
2 changed files with 833 additions and 759 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1332
static/js/lang.js
View File

File diff suppressed because it is too large Load Diff

260
static/js/main.js
View File

@ -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 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 END OF STORY
SHOCKING DEVELOPMENT query
END OF STORY 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`; PLEASE LIKE AND SUBSCRIBE`;
const PROG_DEFAULT = PROG_FIBONACCI; const PROG_DEFAULT = PROG_FIBONACCI;
const HEADLINES = [ 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() { 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 { 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"> <div class="controls">
<button class="block" <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" <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" <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>
<div class="code"> <div class="code">
<div class="filler"> <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> </div>
<textarea class="editor-input" cols="30" rows="10" <textarea class="editor-input" cols="30" rows="10"
value=${this.prog} value=${this.prog}
@ -134,32 +142,44 @@ class Editor extends Component {
</textarea> </textarea>
</div> </div>
<div class="output"> <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> </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>`; </div>`;
} }
} }
class App extends Component { class App extends Component {
init() { init() {
this.editor = new Editor(); this.editor = new Editor();
} }
compose() { compose() {
return jdom`<main> return jdom`<main>
<header> <header>
<h1>${randomHeadline()}</h1> <h1>${randomHeadline()}</h1>
<nav> <nav>
<a href="https://github.com/thesephist/tabloid" <a href="https://github.com/thesephist/tabloid"
target="_blank" noopener noreferer>GitHub</a> 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> }}>NEW headline!</a>
<a href="https://github.com/thesephist/tabloid/blob/master/README.md#language-overview" <a href="https://github.com/thesephist/tabloid/blob/master/README.md#language-overview"
target="_blank" noopener noreferer>Tutorial</a> target="_blank" noopener noreferer>Tutorial</a>
@ -176,7 +196,7 @@ class App extends Component {
headlines. headlines.
</p> </p>
<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 Most Popular Quirks and Features</strong> of the Tabloid
programming language <strong>(Number Four Will Shock You!)</strong> programming language <strong>(Number Four Will Shock You!)</strong>
</p> </p>
@ -242,7 +262,7 @@ class App extends Component {
</p> </p>
<p> <p>
Before making Tabloid, I also created a more <strike>useful and 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/" programming language, called <a href="https://dotink.co/"
target="_blank">Ink</a>. target="_blank">Ink</a>.
</p> </p>
@ -331,7 +351,7 @@ class App extends Component {
</p> </p>
</footer> </footer>
</main>`; </main>`;
} }
} }
const app = new App(); const app = new App();