Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
5719d7e118 |
1332
static/js/lang.js
1332
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!'
|
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();
|
||||||
|
Loading…
Reference in New Issue
Block a user