Clean up guide
This commit is contained in:
parent
dca4889e74
commit
de8c3e3ad3
@ -45,9 +45,8 @@ const SyntaxCheckSection = () => {
|
||||
>
|
||||
<p>
|
||||
Esolang Park checks the syntax of your source code{" "}
|
||||
<b>while you're typing</b>. Any errors in the syntax of your program are
|
||||
marked in the editor with a (mostly) useful error message, without
|
||||
needing to run the program.
|
||||
<b>while {"you're"} typing</b>. Any errors in the syntax of your program
|
||||
are highlighted in the editor.
|
||||
</p>
|
||||
</SideBySideSection>
|
||||
);
|
||||
@ -62,8 +61,7 @@ const BreakpointsSection = () => {
|
||||
<p>
|
||||
Esolang Park allows you to <b>set debugging breakpoints in your code</b>
|
||||
. When you run your program and execution reaches a line with
|
||||
breakpoint, the program will pause and you can inspect the state of the
|
||||
program.
|
||||
breakpoint, the program will pause and you can inspect its state.
|
||||
</p>
|
||||
<p>
|
||||
Click on the left of any line number to set a breakpoint on that line.
|
||||
@ -94,7 +92,7 @@ const ExecControlsSection = () => {
|
||||
</div>
|
||||
<BigText>
|
||||
<p>
|
||||
When your run a program, the "Run code" button changes to the
|
||||
When your run a program, the {'"Run code"'} button changes to the
|
||||
execution controls. Pause execution to{" "}
|
||||
<b>
|
||||
inspect the runtime state, start stepping through execution, change
|
||||
@ -104,34 +102,13 @@ const ExecControlsSection = () => {
|
||||
</p>
|
||||
<p>
|
||||
The execution interval dictates how fast your program should be run by
|
||||
Esolang Park. The smallest execution interval currently supported is
|
||||
5ms.
|
||||
Esolang Park. This must be at least 5ms.
|
||||
</p>
|
||||
</BigText>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const InfoSection = () => {
|
||||
return (
|
||||
<SideBySideSection
|
||||
title={""}
|
||||
image={<Image src={infoBtnImg} alt="info buttons" />}
|
||||
>
|
||||
<p>
|
||||
Click the document button to read a short introduction and view
|
||||
reference links for the esolang. This also contains{" "}
|
||||
<b>notes about the implementation of this esolang</b>, including any
|
||||
incompatibilities and quirks you should take care of while debugging
|
||||
your code.
|
||||
</p>
|
||||
<p>
|
||||
Click the question mark button to <b>view this guide</b> at any point.
|
||||
</p>
|
||||
</SideBySideSection>
|
||||
);
|
||||
};
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
@ -146,33 +123,11 @@ export const FeaturesGuide = (props: Props) => {
|
||||
style={{ overflowY: "auto" }}
|
||||
>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<BigText>
|
||||
<p>
|
||||
Esolang Park is an online <b>interpreter and debugger interface</b>{" "}
|
||||
for esoteric programming languages. Think Repl.it, but a simpler
|
||||
version for esoteric languages, with a visual debugger catered to
|
||||
each language, that runs in your browser.
|
||||
</p>
|
||||
<p>
|
||||
The goal of Esolang Park is to be a platform for esolang enthusiasts
|
||||
to test and debug their code more easily, as well as for other
|
||||
people to discover and play around with esoteric languages without
|
||||
leaving the browser.
|
||||
</p>
|
||||
<p>
|
||||
Esolang Park is <b>very early in development</b>, things are by no
|
||||
means optimal, and there are most certainly bugs hanging around in
|
||||
the source code. If you catch one, please create an issue on GitHub!
|
||||
</p>
|
||||
</BigText>
|
||||
<Divider style={{ margin: 20 }} />
|
||||
<SyntaxCheckSection />
|
||||
<Divider style={{ margin: 20 }} />
|
||||
<BreakpointsSection />
|
||||
<Divider style={{ margin: 20 }} />
|
||||
<ExecControlsSection />
|
||||
<Divider style={{ margin: 20 }} />
|
||||
<InfoSection />
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user