Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
5719d7e118 |
1330
static/js/lang.js
1330
static/js/lang.js
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
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
|
||||
|
||||
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
|
||||
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 limit TO BE 10
|
||||
YOU WON'T WANT TO MISS 'First 10 Fibonacci numbers'
|
||||
EXPERTS CLAIM nothing TO BE fibonacci OF 0, 1, limit
|
||||
EXPERTS CLAIM something TO BE link OF 3
|
||||
YOU WON'T WANT TO MISS something OF 1
|
||||
|
||||
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!`,
|
||||
`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.setFibonacci= () => {
|
||||
this.prog = PROG_FIBONACCI;
|
||||
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.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.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();
|
||||
}
|
||||
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();
|
||||
|
Loading…
Reference in New Issue
Block a user