diff --git a/pages/ide/befunge93.tsx b/pages/ide/befunge93.tsx index 6734bd1..489b71d 100644 --- a/pages/ide/befunge93.tsx +++ b/pages/ide/befunge93.tsx @@ -2,7 +2,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/befunge93"; const LANG_ID = "befunge93"; const LANG_NAME = "Befunge-93"; @@ -13,12 +12,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/pages/ide/brainfuck.tsx b/pages/ide/brainfuck.tsx index 4706872..3b0d1a8 100644 --- a/pages/ide/brainfuck.tsx +++ b/pages/ide/brainfuck.tsx @@ -2,7 +2,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/brainfuck"; const LANG_ID = "brainfuck"; const LANG_NAME = "Brainfuck"; @@ -13,12 +12,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/pages/ide/chef.tsx b/pages/ide/chef.tsx index 8477fbd..45e7ff4 100644 --- a/pages/ide/chef.tsx +++ b/pages/ide/chef.tsx @@ -2,7 +2,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/chef"; const LANG_ID = "chef"; const LANG_NAME = "Chef"; @@ -13,12 +12,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/pages/ide/deadfish.tsx b/pages/ide/deadfish.tsx index e045944..3057a9a 100644 --- a/pages/ide/deadfish.tsx +++ b/pages/ide/deadfish.tsx @@ -2,7 +2,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/deadfish"; const LANG_ID = "deadfish"; const LANG_NAME = "Deadfish"; @@ -13,12 +12,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/pages/ide/rockstar.tsx b/pages/ide/rockstar.tsx index 71c5741..f27277a 100644 --- a/pages/ide/rockstar.tsx +++ b/pages/ide/rockstar.tsx @@ -3,7 +3,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/rockstar"; const LANG_ID = "$LANG_ID"; const LANG_NAME = "Rockstar"; @@ -14,12 +13,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/scripts/new-lang-template/ide-page.tsx b/scripts/new-lang-template/ide-page.tsx index 595648f..276598b 100644 --- a/scripts/new-lang-template/ide-page.tsx +++ b/scripts/new-lang-template/ide-page.tsx @@ -3,7 +3,6 @@ import React from "react"; import { NextPage } from "next"; import Head from "next/head"; import { Mainframe } from "../../ui/Mainframe"; -import { Header } from "../../ui/header"; import LangProvider from "../../languages/$LANG_ID"; const LANG_ID = "$LANG_ID"; const LANG_NAME = "$LANG_NAME"; @@ -14,12 +13,11 @@ const IDE: NextPage = () => { {LANG_NAME} | Esolang Park -
-
-
- -
-
+ ); }; diff --git a/ui/MainLayout.tsx b/ui/MainLayout.tsx index 8af54b3..7f750a4 100644 --- a/ui/MainLayout.tsx +++ b/ui/MainLayout.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component"; +import { Header } from "./header"; import { useDarkMode } from "./providers/dark-mode-provider"; // IDs of windows in the mosaic layout @@ -13,6 +14,8 @@ const WindowTitles = { }; type Props = { + langId: string; + langName: string; renderEditor: () => React.ReactNode; renderRenderer: () => React.ReactNode; renderInput: () => React.ReactNode; @@ -46,20 +49,27 @@ export const MainLayout = (props: Props) => { }; return ( - - className={mosaicClass} - initialValue={INITIAL_LAYOUT} - renderTile={(windowId, path) => ( - - path={path} - title={WindowTitles[windowId]} - toolbarControls={ - windowId === "editor" ? props.renderExecControls() : - } - > - {MOSAIC_MAP[windowId]()} - - )} - /> +
+
+
+ + className={mosaicClass} + initialValue={INITIAL_LAYOUT} + renderTile={(windowId, path) => ( + + path={path} + title={WindowTitles[windowId]} + toolbarControls={} + > + {MOSAIC_MAP[windowId]()} + + )} + /> +
+
); }; diff --git a/ui/Mainframe.tsx b/ui/Mainframe.tsx index 73b9b46..09ff6ef 100644 --- a/ui/Mainframe.tsx +++ b/ui/Mainframe.tsx @@ -10,6 +10,7 @@ import { RendererRef, RendererWrapper } from "./renderer-wrapper"; import { WorkerRuntimeError } from "../languages/worker-errors"; type Props = { + langId: string; langName: string; provider: LanguageProvider; }; @@ -22,10 +23,10 @@ type Props = { * small execution intervals if rendered on every execution. All state management * is delegated to imperatively controlled child components. */ -export const Mainframe = ({ langName, provider }: Props) => { +export const Mainframe = (props: Props) => { // Language provider and engine - const providerRef = React.useRef(provider); - const execController = useExecController(langName); + const providerRef = React.useRef(props.provider); + const execController = useExecController(props.langId); // Refs for controlling UI components const codeEditorRef = React.useRef(null); @@ -146,10 +147,12 @@ export const Mainframe = ({ langName, provider }: Props) => { return ( ( props.onChange(v)} rightElement={ms} allowNumericCharactersOnly @@ -55,9 +57,11 @@ const IntervalInput = (props: { /** Button for starting code execution */ const RunButton = ({ onClick }: { onClick: () => void }) => ( @@ -78,21 +82,24 @@ const DebugControls = (props: { return ( + + {props.langName} + ); - const langSection = ( -
{props.langName}
+ const controlsSection = ( +
{props.renderExecControls()}
); const infoSection = ( @@ -60,7 +76,7 @@ export const Header = (props: { langId: string; langName: string }) => { }} > {brandSection} - {langSection} + {controlsSection} {infoSection}