mobile code editing

Author: munrocket

components/buttons/fullscreenbutton.tsx

@@ -12,10 +12,12 @@ export default function FullscreenButton() {
 
     return (
         <Button
-            onClick={() => {
-                setRequestFullscreen(true);
+            onClick={() => setRequestFullscreen(true)}
+            sx={{
+                color: theme.palette.dracula.cyan,
+                minWidth: 0,
+                padding: '2px'
             }}
-            sx={{ color: theme.palette.dracula.cyan }}
         >
             <FullscreenIcon />
         </Button>

components/buttons/reloadbutton.tsx

@@ -1,6 +1,7 @@
 'use client';
 import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded';
 import PlayDisabledRounded from '@mui/icons-material/PlayDisabledRounded';
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { useTheme } from '@mui/material/styles';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -27,13 +28,13 @@ export default function ReloadButton() {
                 setManualReload(true);
             }}
             title="Recompile <Alt + Enter>"
-            sx={
-                hotReload
-                    ? { color: theme.status.disabled }
-                    : { color: theme.palette.primary.light }
-            }
+            sx={{
+                color: theme.palette.primary[hotReload ? 'contrastText' : 'light']
+            }}
         >
-            <PlayIcon />
+            <Box sx={{ transform: 'scale(1.1)' }}>
+                <PlayIcon />
+            </Box>
         </Button>
     );
 }

components/buttons/scalebutton.tsx components/buttons/resolutionbutton.tsxcomponents/buttons/scalebutton.tsx renamed to components/buttons/resolutionbutton.tsx

@@ -5,24 +5,38 @@ import Button from '@mui/material/Button';
 import { useTheme } from '@mui/material/styles';
 import { useAtom, useAtomValue } from 'jotai';
 import { halfResolutionAtom } from 'lib/atoms/atoms';
+import dynamic from 'next/dynamic';
 
 const ScaleIcon = () => {
     const halfResolution = useAtomValue(halfResolutionAtom);
     return halfResolution ? <Sd /> : <Hd />;
 };
 
-export default function ScaleButton() {
+const Resolution = dynamic(() => import('components/resolution'), {
+    ssr: false
+});
+
+export default function ResolutionButton() {
     const [halfResolution, setHalfResolution] = useAtom(halfResolutionAtom);
     const theme = useTheme();
+
+    // Define styles outside the return for better readability
+    const buttonStyles = {
+        padding: '2px',
+        minWidth: 0,
+        color: halfResolution ? theme.palette.primary.contrastText : theme.palette.primary.light,
+        '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.08)'
+        }
+    };
+
     return (
         <Button
             onClick={() => setHalfResolution(!halfResolution)}
-            sx={
-                halfResolution
-                    ? { color: theme.palette.primary.contrastText }
-                    : { color: theme.palette.primary.light }
-            }
+            sx={buttonStyles}
+            aria-label={halfResolution ? 'Full resolution' : 'Half resolution'}
         >
+            <Resolution />
             <ScaleIcon />
         </Button>
     );

components/editor/editor.tsx

@@ -6,6 +6,7 @@ import Giscus from '@giscus/react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { User } from '@supabase/supabase-js';
@@ -15,7 +16,7 @@ import PlayPauseButton from 'components/buttons/playpausebutton';
 import RecordButton from 'components/buttons/recordbutton';
 import ReloadButton from 'components/buttons/reloadbutton';
 import ResetButton from 'components/buttons/resetbutton';
-import ScaleButton from 'components/buttons/scalebutton';
+import ResolutionButton from 'components/buttons/resolutionbutton';
 import VimButton from 'components/buttons/vimbutton';
 import EntryPointDisplay from 'components/editor/entrypointdisplay';
 import { MetadataEditor } from 'components/editor/metadataeditor';
@@ -43,21 +44,23 @@ interface EditorProps {
 
 function Comments() {
     return (
-        <Giscus
-            id="comments"
-            repo="compute-toys/comments"
-            repoId="R_kgDOKRTytw"
-            category="Announcements"
-            categoryId="DIC_kwDOKRTyt84CllQC"
-            mapping="pathname"
-            strict="0"
-            reactionsEnabled="1"
-            emitMetadata="1"
-            inputPosition="top"
-            theme="dark"
-            lang="en"
-            loading="lazy"
-        />
+        <Box sx={{ marginTop: { xs: '2em', sm: 0 } }}>
+            <Giscus
+                id="comments"
+                repo="compute-toys/comments"
+                repoId="R_kgDOKRTytw"
+                category="Announcements"
+                categoryId="DIC_kwDOKRTyt84CllQC"
+                mapping="pathname"
+                strict="0"
+                reactionsEnabled="1"
+                emitMetadata="1"
+                inputPosition="top"
+                theme="dark"
+                lang="en"
+                loading="lazy"
+            />
+        </Box>
     );
 }
 
@@ -74,9 +77,6 @@ export default function Editor(props: EditorProps) {
     }, []);
 
     const Timer = dynamic(() => import('components/timer'), { ssr: false });
-    const Resolution = dynamic(() => import('components/resolution'), {
-        ssr: false
-    });
 
     let metadataEditor: JSX.Element | null = null;
     if (supabase && !props.standalone) {
@@ -102,6 +102,40 @@ export default function Editor(props: EditorProps) {
         };
     }
 
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+    const monacoOptions = (isMobile: boolean) => ({
+        stopRenderingLineAfter: isMobile ? 500 : 1000,
+        fontSize: isMobile ? 12 : 12,
+        lineHeight: isMobile ? 16 : 18,
+        fontFamily: "'Fira Code', monospace",
+        'bracketPairColorization.enabled': true,
+        mouseWheelZoom: true,
+        minimap: { enabled: !isMobile },
+        scrollBeyondLastLine: !isMobile,
+        automaticLayout: true,
+        lineNumbersMinChars: isMobile ? 3 : 4
+    });
+
+    const monacoEditorWithButtons = (
+        <ItemWithTransitionSignal transitionAtom={saveColorTransitionSignalAtom}>
+            <div className="vim-status"></div>
+            <Monaco editorOptions={monacoOptions(isMobile)} />
+            <Box sx={{ paddingTop: '4px' }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Button style={{ pointerEvents: 'none' }} />
+                    <div>
+                        <ReloadButton />
+                        <HotReloadToggle />
+                        <Explainer />
+                    </div>
+                    <VimButton />
+                </Box>
+            </Box>
+        </ItemWithTransitionSignal>
+    );
+
     const leftPanel = (
         <div ref={renderParentNodeRef}>
             <ItemWithTransitionSignal transitionAtom={saveColorTransitionSignalAtom}>
@@ -117,61 +151,63 @@ export default function Editor(props: EditorProps) {
                         embed={props.embed}
                     />
                 </Frame>
-                <Grid container>
-                    <Grid item sx={{ textAlign: 'left' }} xs={2}>
-                        <Timer />
+                <Grid
+                    container
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'center', // Vertically centers
+                        justifyContent: 'center', // Horizontally centers
+                        height: '100%', // Ensures vertical alignment works
+                        padding: '5px 5px 4px 5px' // top right bottom left
+                    }}
+                >
+                    <Grid item xs={2}>
+                        <Stack
+                            direction="column"
+                            justifyContent="flex-start"
+                            alignItems="flex-start"
+                        >
+                            <Timer />
+                        </Stack>
                     </Grid>
-                    <Grid item xs={7}>
+                    <Grid item xs={8}>
                         <PlayPauseButton />
                         <ResetButton />
                         <RecordButton />
                     </Grid>
-                    <Grid item sx={{ textAlign: 'right' }} xs={3}>
-                        <Resolution />
-                        <ScaleButton />
-                        <FullscreenButton />
+                    <Grid item xs={2}>
+                        <Stack direction="column" justifyContent="flex-end" alignItems="flex-end">
+                            <ResolutionButton />
+                            <FullscreenButton />
+                        </Stack>
                     </Grid>
                 </Grid>
                 <UniformSliders />
             </ItemWithTransitionSignal>
             {metadataEditor}
-            {shaderID ? <Comments /> : null}
+
+            {/* Show code right after shader metadata on mobile */}
+            {isMobile && monacoEditorWithButtons}
+
+            {/* Don't show comments on mobile */}
+            {!isMobile && (shaderID ? <Comments /> : null)}
         </div>
     );
 
-    const theme = useTheme();
-
     const rightPanel = (
         <div>
-            <ItemWithTransitionSignal transitionAtom={saveColorTransitionSignalAtom}>
-                <div className="vim-status"></div>
-                <Monaco
-                    editorOptions={{
-                        stopRenderingLineAfter: 1000,
-                        fontFamily: "'Fira Code', monospace",
-                        'bracketPairColorization.enabled': true,
-                        mouseWheelZoom: true
-                        //fontLigatures: true,
-                    }}
-                />
-                <Box sx={{ paddingTop: '4px' }}>
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <Button style={{ pointerEvents: 'none' }} />{' '}
-                        {/* invisible button, used only for centering */}
-                        <div>
-                            <ReloadButton />
-                            <HotReloadToggle />
-                            <Explainer />
-                        </div>
-                        <VimButton />
-                    </Box>
-                </Box>
-            </ItemWithTransitionSignal>
+            {!isMobile && monacoEditorWithButtons}
             <Grid
                 container
                 spacing={2}
                 sx={{
-                    flexWrap: useMediaQuery(theme.breakpoints.up('sm')) ? 'nowrap' : 'wrap'
+                    flexWrap: useMediaQuery(theme.breakpoints.up('sm')) ? 'nowrap' : 'wrap',
+                    '@media (max-width: 600px)': {
+                        '& > .MuiGrid-item': {
+                            minHeight: 'none',
+                            maxHeight: '350px' // Prevents stretch on mobiles
+                        }
+                    }
                 }}
             >
                 <Grid item>
@@ -184,6 +220,7 @@ export default function Editor(props: EditorProps) {
                     <EntryPointDisplay />
                 </Grid>
             </Grid>
+            {isMobile && (shaderID ? <Comments /> : null)}
         </div>
     );
 

components/editor/explainer.tsx

@@ -11,20 +11,18 @@ import DraggableWindow from '../global/draggable-window';
 import { HiLite } from '../global/hilite';
 import Logo from '../global/logo';
 
-const EXPLAINER_INNER_HEIGHT = '570';
-
 const ExplainerBody = () => {
     const theme = useTheme();
     const prelude = useAtomValue(wgputoyPreludeAtom);
 
     return (
         <div
             style={{
+                // Styles for inner text (Chrome/Webkit/Mobiles)
                 textAlign: 'left',
-                width: 'min-content',
-                overflowY: 'auto',
+                width: '100%',
+                overflowY: 'unset',
                 padding: '8px',
-                height: `${EXPLAINER_INNER_HEIGHT}px`,
                 color: theme.palette.primary.main
             }}
         >
@@ -256,7 +254,21 @@ export default function Explainer() {
             <DraggableWindow
                 hidden={explainerHidden}
                 setHidden={setExplainerHidden}
-                sx={{ paddingTop: '8px' }}
+                sx={{
+                    //styles for the draggable window (Chrome/Webkit/Mobiles)
+                    paddingTop: '8px',
+                    width: '70vw',
+                    maxWidth: '800px',
+                    height: '80vh',
+                    overflowX: 'auto',
+                    zIndex: '9999999999',
+                    //mobile specific
+                    '@media (max-width: 600px)': {
+                        width: '97vw',
+                        height: '60vh',
+                        maxHeight: '80%'
+                    }
+                }}
             >
                 <ExplainerBody />
             </DraggableWindow>

components/resolution.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useAtomValue } from 'jotai';
 import { heightAtom, scaleAtom, widthAtom } from 'lib/atoms/atoms';
-import { Fragment } from 'react';
 import { theme } from 'theme/theme';
 
 export default function Resolution() {
@@ -11,11 +10,17 @@ export default function Resolution() {
 
     if (width > 0 && height > 0) {
         return (
-            <Fragment>
-                <span style={{ color: theme.palette.dracula.foreground }}>
-                    {Math.floor(width * scale)}x{Math.floor(height * scale)}
-                </span>
-            </Fragment>
+            <span
+                style={{
+                    color: theme.palette.dracula.foreground,
+                    paddingTop: '1px',
+                    paddingRight: '2px',
+                    lineHeight: '10px',
+                    display: 'inline-block'
+                }}
+            >
+                {Math.floor(width * scale)}x{Math.floor(height * scale)}
+            </span>
         );
     }
     return null;