Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Move header into Mainframe and controls to header

Browse Source
This commit is contained in:
Nilay Majorwar 2022-02-03 00:44:26 +05:30
parent 0befc7369a
commit 2db1e77a83
10 changed files with 99 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pages/ide/befunge93.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/befunge93"; import LangProvider from "../../languages/befunge93";
const LANG_ID = "befunge93"; const LANG_ID = "befunge93";
const LANG_NAME = "Befunge-93"; const LANG_NAME = "Befunge-93";
@ -13,12 +12,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

12
pages/ide/brainfuck.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/brainfuck"; import LangProvider from "../../languages/brainfuck";
const LANG_ID = "brainfuck"; const LANG_ID = "brainfuck";
const LANG_NAME = "Brainfuck"; const LANG_NAME = "Brainfuck";
@ -13,12 +12,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

12
pages/ide/chef.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/chef"; import LangProvider from "../../languages/chef";
const LANG_ID = "chef"; const LANG_ID = "chef";
const LANG_NAME = "Chef"; const LANG_NAME = "Chef";
@ -13,12 +12,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

12
pages/ide/deadfish.tsx
View File

@ -2,7 +2,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/deadfish"; import LangProvider from "../../languages/deadfish";
const LANG_ID = "deadfish"; const LANG_ID = "deadfish";
const LANG_NAME = "Deadfish"; const LANG_NAME = "Deadfish";
@ -13,12 +12,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

12
pages/ide/rockstar.tsx
View File

@ -3,7 +3,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/rockstar"; import LangProvider from "../../languages/rockstar";
const LANG_ID = "$LANG_ID"; const LANG_ID = "$LANG_ID";
const LANG_NAME = "Rockstar"; const LANG_NAME = "Rockstar";
@ -14,12 +13,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

12
scripts/new-lang-template/ide-page.tsx
View File

@ -3,7 +3,6 @@ import React from "react";
import { NextPage } from "next"; import { NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Mainframe } from "../../ui/Mainframe"; import { Mainframe } from "../../ui/Mainframe";
import { Header } from "../../ui/header";
import LangProvider from "../../languages/$LANG_ID"; import LangProvider from "../../languages/$LANG_ID";
const LANG_ID = "$LANG_ID"; const LANG_ID = "$LANG_ID";
const LANG_NAME = "$LANG_NAME"; const LANG_NAME = "$LANG_NAME";
@ -14,12 +13,11 @@ const IDE: NextPage = () => {
<Head> <Head>
<title>{LANG_NAME} | Esolang Park</title> <title>{LANG_NAME} | Esolang Park</title>
</Head> </Head>
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}> <Mainframe
<Header langId={LANG_ID} langName={LANG_NAME} /> langId={LANG_ID}
<div style={{ flexGrow: 1 }}> langName={LANG_NAME}
<Mainframe langName={LANG_ID} provider={LangProvider} /> provider={LangProvider}
</div> />
</div>
</> </>
); );
}; };

40
ui/MainLayout.tsx
View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component"; import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component";
import { Header } from "./header";
import { useDarkMode } from "./providers/dark-mode-provider"; import { useDarkMode } from "./providers/dark-mode-provider";
// IDs of windows in the mosaic layout // IDs of windows in the mosaic layout
@ -13,6 +14,8 @@ const WindowTitles = {
}; };
type Props = { type Props = {
langId: string;
langName: string;
renderEditor: () => React.ReactNode; renderEditor: () => React.ReactNode;
renderRenderer: () => React.ReactNode; renderRenderer: () => React.ReactNode;
renderInput: () => React.ReactNode; renderInput: () => React.ReactNode;
@ -46,20 +49,27 @@ export const MainLayout = (props: Props) => {
}; };
return ( return (
<Mosaic<keyof typeof MOSAIC_MAP> <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
className={mosaicClass} <Header
initialValue={INITIAL_LAYOUT} langId={props.langId}
renderTile={(windowId, path) => ( langName={props.langName}
<MosaicWindow<number> renderExecControls={props.renderExecControls}
path={path} />
title={WindowTitles[windowId]} <div style={{ flexGrow: 1 }}>
toolbarControls={ <Mosaic<keyof typeof MOSAIC_MAP>
windowId === "editor" ? props.renderExecControls() : <span /> className={mosaicClass}
} initialValue={INITIAL_LAYOUT}
> renderTile={(windowId, path) => (
{MOSAIC_MAP[windowId]()} <MosaicWindow<number>
</MosaicWindow> path={path}
)} title={WindowTitles[windowId]}
/> toolbarControls={<span />}
>
{MOSAIC_MAP[windowId]()}
</MosaicWindow>
)}
/>
</div>
</div>
); );
}; };

11
ui/Mainframe.tsx
View File

@ -10,6 +10,7 @@ import { RendererRef, RendererWrapper } from "./renderer-wrapper";
import { WorkerRuntimeError } from "../languages/worker-errors"; import { WorkerRuntimeError } from "../languages/worker-errors";
type Props<RS> = { type Props<RS> = {
langId: string;
langName: string; langName: string;
provider: LanguageProvider<RS>; provider: LanguageProvider<RS>;
}; };
@ -22,10 +23,10 @@ type Props<RS> = {
* small execution intervals if rendered on every execution. All state management * small execution intervals if rendered on every execution. All state management
* is delegated to imperatively controlled child components. * is delegated to imperatively controlled child components.
*/ */
export const Mainframe = <RS extends {}>({ langName, provider }: Props<RS>) => { export const Mainframe = <RS extends {}>(props: Props<RS>) => {
// Language provider and engine // Language provider and engine
const providerRef = React.useRef(provider); const providerRef = React.useRef(props.provider);
const execController = useExecController(langName); const execController = useExecController(props.langId);
// Refs for controlling UI components // Refs for controlling UI components
const codeEditorRef = React.useRef<CodeEditorRef>(null); const codeEditorRef = React.useRef<CodeEditorRef>(null);
@ -146,10 +147,12 @@ export const Mainframe = <RS extends {}>({ langName, provider }: Props<RS>) => {
return ( return (
<MainLayout <MainLayout
langId={props.langId}
langName={props.langName}
renderEditor={() => ( renderEditor={() => (
<CodeEditor <CodeEditor
ref={codeEditorRef} ref={codeEditorRef}
languageId={langName} languageId={props.langName}
defaultValue={providerRef.current.sampleProgram} defaultValue={providerRef.current.sampleProgram}
tokensProvider={providerRef.current.editorTokensProvider} tokensProvider={providerRef.current.editorTokensProvider}
onValidateCode={execController.validateCode} onValidateCode={execController.validateCode}

23
ui/execution-controls.tsx
View File

@ -15,10 +15,11 @@ const styles = {
}, },
inputWrapper: { inputWrapper: {
/** /**
* As of Dec'21, NumericInput doesn't have `small` prop yet, * As of Feb'22, NumericInput doesn't have `small` prop yet,
* so we instead use `transform` to hack up a smaller input. * so we instead use `transform` to hack up a slightly smaller input.
*/ */
transform: "scale(0.8)", transform: "scale(0.9)",
marginLeft: 10,
}, },
input: { input: {
width: 125, width: 125,
@ -44,6 +45,7 @@ const IntervalInput = (props: {
clampValueOnBlur clampValueOnBlur
style={styles.input} style={styles.input}
disabled={props.disabled} disabled={props.disabled}
title="Adjust the execution interval"
onValueChange={(v) => props.onChange(v)} onValueChange={(v) => props.onChange(v)}
rightElement={<Tag minimal>ms</Tag>} rightElement={<Tag minimal>ms</Tag>}
allowNumericCharactersOnly allowNumericCharactersOnly
@ -55,9 +57,11 @@ const IntervalInput = (props: {
/** Button for starting code execution */ /** Button for starting code execution */
const RunButton = ({ onClick }: { onClick: () => void }) => ( const RunButton = ({ onClick }: { onClick: () => void }) => (
<Button <Button
small outlined
intent="success"
onClick={onClick} onClick={onClick}
rightIcon={<Icon icon="play" intent="success" />} rightIcon={<Icon icon="play" intent="success" />}
title="Run your code"
> >
Run code Run code
</Button> </Button>
@ -78,21 +82,24 @@ const DebugControls = (props: {
return ( return (
<ButtonGroup> <ButtonGroup>
<Button <Button
small outlined
title={paused ? "Pause" : "Resume"} intent="primary"
title={paused ? "Resume" : "Pause"}
disabled={pauseDisabled} disabled={pauseDisabled}
onClick={paused ? props.onResume : props.onPause} onClick={paused ? props.onResume : props.onPause}
icon={<Icon icon={paused ? "play" : "pause"} intent="primary" />} icon={<Icon icon={paused ? "play" : "pause"} intent="primary" />}
/> />
<Button <Button
small outlined
intent="warning"
title="Step" title="Step"
onClick={props.onStep} onClick={props.onStep}
disabled={stepDisabled} disabled={stepDisabled}
icon={<Icon icon="step-forward" intent="warning" />} icon={<Icon icon="step-forward" intent="warning" />}
/> />
<Button <Button
small outlined
intent="danger"
title="Stop" title="Stop"
onClick={props.onStop} onClick={props.onStop}
icon={<Icon icon="stop" intent="danger" />} icon={<Icon icon="stop" intent="danger" />}

28
ui/header.tsx
View File

@ -1,8 +1,8 @@
import { Button, Card, Icon } from "@blueprintjs/core";
import Image from "next/image"; import Image from "next/image";
import logoImg from "./assets/logo.png"; import logoImg from "./assets/logo.png";
import { GitHubIcon } from "./custom-icons"; import { GitHubIcon } from "./custom-icons";
import { useDarkMode } from "./providers/dark-mode-provider"; import { useDarkMode } from "./providers/dark-mode-provider";
import { Button, Card, Icon, Tag } from "@blueprintjs/core";
/** Link to the project's GitHub repository */ /** Link to the project's GitHub repository */
const REPO_LINK = "https://github.com/nilaymaj/esolang-park"; const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
@ -11,22 +11,38 @@ const REPO_LINK = "https://github.com/nilaymaj/esolang-park";
const NOTES_LINK = (id: string) => const NOTES_LINK = (id: string) =>
`https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`; `https://github.com/nilaymaj/esolang-park/blob/main/languages/${id}/README.md`;
export const Header = (props: { langId: string; langName: string }) => { type Props = {
langId: string;
langName: string;
renderExecControls: () => React.ReactNode;
};
export const Header = (props: Props) => {
const DarkMode = useDarkMode(); const DarkMode = useDarkMode();
const brandSection = ( const brandSection = (
<div style={{ flex: 1, textAlign: "left" }}> <div
style={{
flex: 1,
textAlign: "left",
display: "flex",
alignItems: "center",
}}
>
<Button minimal large> <Button minimal large>
<div style={{ display: "flex", alignItems: "center" }}> <div style={{ display: "flex", alignItems: "center" }}>
<Image src={logoImg} alt="logo" width={20} height={20} /> <Image src={logoImg} alt="logo" width={20} height={20} />
<span style={{ marginLeft: 10 }}>Esolang Park</span> <span style={{ marginLeft: 10 }}>Esolang Park</span>
</div> </div>
</Button> </Button>
<Tag large minimal style={{ marginLeft: 10 }}>
{props.langName}
</Tag>
</div> </div>
); );
const langSection = ( const controlsSection = (
<div style={{ flex: 0, textAlign: "center" }}>{props.langName}</div> <div style={{ textAlign: "center" }}>{props.renderExecControls()}</div>
); );
const infoSection = ( const infoSection = (
@ -60,7 +76,7 @@ export const Header = (props: { langId: string; langName: string }) => {
}} }}
> >
{brandSection} {brandSection}
{langSection} {controlsSection}
{infoSection} {infoSection}
</Card> </Card>
</div> </div>