Mobile playground improvements (#22)

* Improve playground responsivenes on mobile

Editing is till really poor because monaco-editor does not really support mobile yet.
But reading expereince is improved by seperating input/output into two "tabs".

* Fixed content pane being hidden in desktop view

Author: lolleko

src/pages/play/Playground.tsx

@@ -14,6 +14,24 @@ import styles from "./styles.module.scss";
 import { consoleFeedTheme, jsonTreeTheme } from "./themes";
 import type { CustomTypeScriptWorker } from "./ts.worker";
 
+enum PanelKind {
+    Input,
+    Output,
+}
+interface PanelState {
+    activePanel: PanelKind;
+}
+interface PanelContext extends PanelState {
+    setActivePanel(panelID: PanelKind): void;
+}
+
+const PanelContext = React.createContext<PanelContext>(null!);
+
+function PanelContextProvider({ children }: { children: React.ReactNode }) {
+    const [activePanel, setActivePanel] = useState<PanelKind>(PanelKind.Input);
+
+    return <PanelContext.Provider value={{ activePanel, setActivePanel }}>{children}</PanelContext.Provider>;
+}
 interface EditorState {
     source: string;
     lua: string;
@@ -67,8 +85,10 @@ function InputPane() {
         [],
     );
 
+    const { activePanel } = useContext(PanelContext);
+
     return (
-        <div className={styles.contentPane}>
+        <div className={clsx(styles.contentPane, activePanel != PanelKind.Input && styles.contentPaneHiddenMobile)}>
             <MonacoEditor
                 theme={theme}
                 language="typescript"
@@ -107,9 +127,9 @@ function LuaOutput() {
     const { results } = useContext(EditorContext);
 
     return (
-        <div className={styles.editorOutput}>
-            <div className={styles.editorOutputLineNumbers}>{">_"}</div>
-            <div className={styles.editorOutputTerminal}>
+        <div className={styles.luaOutput}>
+            <div className={styles.luaOutputLineNumbers}>{">_"}</div>
+            <div className={styles.luaOutputTerminal}>
                 <ConsoleFeed
                     key={isDarkTheme} // It does not update styles without re-mount
                     logs={results as any}
@@ -134,8 +154,10 @@ function OutputPane() {
         return `https://sokra.github.io/source-map-visualization#base64,${inputs}`;
     }, [lua, sourceMap, source]);
 
+    const { activePanel } = useContext(PanelContext);
+
     return (
-        <div className={styles.contentPane}>
+        <div className={clsx(styles.contentPane, activePanel != PanelKind.Output && styles.contentPaneHiddenMobile)}>
             <div className={styles.outputEditor}>
                 <div style={{ height: "100%", display: isAstView ? "none" : "block" }}>
                     <MonacoEditor
@@ -159,7 +181,7 @@ function OutputPane() {
                         className={clsx("button button--outline button--primary", !isAstView && "button--active")}
                         onClick={toggleAstView}
                     >
-                        {isAstView ? "Lua AST" : "TEXT"}
+                        {isAstView ? "Text" : "Lua AST"}
                     </button>
                     <a className="button button--success" href={sourceMapUrl} target="_blank">
                         Source Map
@@ -178,6 +200,8 @@ function PlaygroundNavbar() {
     const tsMinor = tsVersion.split(".")[1];
     const tsLink = `https://www.typescriptlang.org/docs/handbook/release-notes/typescript-${tsMajor}-${tsMinor}.html`;
 
+    const { activePanel, setActivePanel } = useContext(PanelContext);
+
     return (
         <nav className={styles.navbar}>
             <div className={styles.navbarVersions}>
@@ -191,20 +215,36 @@ function PlaygroundNavbar() {
                     <b>v{tsVersion}</b>
                 </a>
             </div>
+            <div className={styles.navBarPanelSelection}>
+                <button
+                    className={clsx("button button--primary button--outline", activePanel == 0 && "button--active")}
+                    onClick={() => setActivePanel(PanelKind.Input)}
+                >
+                    TS Input
+                </button>
+                <button
+                    className={clsx("button button--primary button--outline", activePanel == 1 && "button--active")}
+                    onClick={() => setActivePanel(PanelKind.Output)}
+                >
+                    Lua Output
+                </button>
+            </div>
         </nav>
     );
 }
 
 export default function Playground() {
     return (
         <>
-            <PlaygroundNavbar />
-            <div className={styles.content}>
-                <EditorContextProvider>
-                    <InputPane />
-                    <OutputPane />
-                </EditorContextProvider>
-            </div>
+            <PanelContextProvider>
+                <PlaygroundNavbar />
+                <div className={styles.content}>
+                    <EditorContextProvider>
+                        <InputPane />
+                        <OutputPane />
+                    </EditorContextProvider>
+                </div>
+            </PanelContextProvider>
         </>
     );
 }

src/pages/play/styles.module.scss

@@ -38,6 +38,7 @@ $navbar-height: 50px;
     padding-left: 12px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 .navbarVersions {
@@ -46,6 +47,11 @@ $navbar-height: 50px;
     font-family: monospace;
 }
 
+.navBarPanelSelection {
+    display: none;
+    padding-right: 12px;
+}
+
 .content {
     width: 100%;
     height: calc(100vh - var(--ifm-navbar-height) - #{$navbar-height});
@@ -80,22 +86,64 @@ $output-height: 180px;
     }
 }
 
-.editorOutput {
+.luaOutput {
     border-top: 1px var(--monaco-accent) solid;
     height: $output-height;
     font-family: Menlo, Monaco, "Lucida Console", "Courier New", monospace;
     display: flex;
 }
 
-.editorOutputLineNumbers {
+.luaOutputLineNumbers {
     width: 40px;
     height: 100%;
     border-right: 1px var(--monaco-accent) solid;
     padding-top: 6px;
     padding-left: 10px;
 }
 
-.editorOutputTerminal {
+.luaOutputTerminal {
     width: 100%;
     overflow-y: auto;
 }
+
+@media only screen and (max-width: 400px) {
+    .navbarVersions {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 996px) {
+    .content {
+        flex-flow: column;
+    }
+
+    .navBarPanelSelection {
+        display: block;
+    }
+
+    .contentPane {
+        width: 100%;
+    }
+
+    .contentPaneHiddenMobile {
+        display: none;
+    }
+
+    .outputControls {
+        top: 0.5em;
+        right: 1em;
+        * {
+            --ifm-button-size-multiplier: 0.8;
+        }
+    }
+
+    $output-height-mobile: 100px;
+
+    .outputEditor {
+        height: calc(100% - #{$output-height-mobile});
+    }
+
+    .luaOutput {
+        height: $output-height-mobile;
+    }
+}