r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

🚧 make mobile IDE screen start the sketch

Browse source
This commit is contained in:
ghalestrilo 2020-06-18 22:00:24 -03:00
parent e11756d769
commit 8a067a8787
2 changed files with 47 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/modules/IDE/pages/IDEViewMobile.jsx
View file

@ -52,7 +52,7 @@ const isUserOwner = ({ project, user }) => (project.owner && project.owner.id ==
const IDEViewMobile = (props) => { const IDEViewMobile = (props) => {
const { const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
} = props; } = props;
const [tmController, setTmController] = useState(null); const [tmController, setTmController] = useState(null);
@ -74,7 +74,13 @@ const IDEViewMobile = (props) => {
<IconButton onClick={() => setOverlay('preferences')}> <IconButton onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" /> <PreferencesIcon focusable="false" aria-hidden="true" />
</IconButton> </IconButton>
<Link to="/mobile/preview"> <Link
to="/mobile/preview"
onClick={() => {
alert('starting sketch');
startSketch();
}}
>
<IconButton> <IconButton>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" /> <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton> </IconButton>
@ -181,6 +187,8 @@ IDEViewMobile.propTypes = {
updatedAt: PropTypes.string updatedAt: PropTypes.string
}).isRequired, }).isRequired,
startSketch: PropTypes.func.isRequired,
updateLintMessage: PropTypes.func.isRequired, updateLintMessage: PropTypes.func.isRequired,
clearLintMessage: PropTypes.func.isRequired, clearLintMessage: PropTypes.func.isRequired,

75
client/modules/Mobile/MobileSketchView.jsx
View file

@ -8,6 +8,8 @@ import Header from '../../components/mobile/Header';
import PreviewFrame from '../IDE/components/PreviewFrame'; import PreviewFrame from '../IDE/components/PreviewFrame';
import Screen from '../../components/mobile/MobileScreen'; import Screen from '../../components/mobile/MobileScreen';
import * as ProjectActions from '../IDE/actions/project'; import * as ProjectActions from '../IDE/actions/project';
import * as IDEActions from '../IDE/actions/ide';
import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files'; import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files';
@ -39,13 +41,16 @@ const MobileSketchView = (props) => {
// const files = useSelector(state => state.files); // const files = useSelector(state => state.files);
const { const {
htmlFile, jsFiles, cssFiles, files, params, getProject htmlFile, jsFiles, cssFiles, files, params
} = props; } = props;
useEffect(() => { // Actions
console.log(params); const { getProject, startSketch } = props;
getProject(params.project_id, params.username);
}, []); // useEffect(() => {
// console.log(params);
// getProject(params.project_id, params.username);
// }, []);
return ( return (
<Screen> <Screen>
@ -55,42 +60,35 @@ const MobileSketchView = (props) => {
</IconLinkWrapper> </IconLinkWrapper>
<div> <div>
<h2>Hello</h2> <h2>Hello</h2>
{/* <h3>{selectedFile.name}</h3> */} <h3><br /></h3>
</div> </div>
{/* <div style={{ marginLeft: '2rem' }}>
<IconButton onClick={() => setOverlay('preferences')}>
<PreferencesIcon focusable="false" aria-hidden="true" />
</IconButton>
<IconButton onClick={() => setOverlay('runSketch')}>
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
</IconButton>
</div> */}
</Header> </Header>
<Content> <Content>
<h1>Hello</h1> <h1>Hello</h1>
<PreviewFrame <main className="preview-frame-holder">
htmlFile={htmlFile}
jsFiles={jsFiles} <PreviewFrame
cssFiles={cssFiles} fullView
files={files} isPlaying
head={ htmlFile={htmlFile}
<link type="text/css" rel="stylesheet" href="/preview-styles.css" /> jsFiles={jsFiles}
} cssFiles={cssFiles}
fullView files={files}
isPlaying head={<link type="text/css" rel="stylesheet" href="/preview-styles.css" />}
isAccessibleOutputPlaying={false} isAccessibleOutputPlaying={false}
textOutput={false} textOutput={false}
gridOutput={false} gridOutput={false}
soundOutput={false} soundOutput={false}
dispatchConsoleEvent={noop} previewIsRefreshing={false}
endSketchRefresh={noop}
previewIsRefreshing={false} dispatchConsoleEvent={noop}
setBlobUrl={noop} endSketchRefresh={noop}
stopSketch={noop} setBlobUrl={noop}
expandConsole={noop} stopSketch={noop}
clearConsole={noop} expandConsole={noop}
/> clearConsole={noop}
/>
</main>
</Content> </Content>
</Screen>); </Screen>);
}; };
@ -121,6 +119,7 @@ MobileSketchView.propTypes = {
name: PropTypes.string.isRequired name: PropTypes.string.isRequired
})).isRequired, })).isRequired,
getProject: PropTypes.func.isRequired, getProject: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
}; };
function mapStateToProps(state) { function mapStateToProps(state) {
@ -134,7 +133,7 @@ function mapStateToProps(state) {
} }
function mapDispatchToProps(dispatch) { function mapDispatchToProps(dispatch) {
return bindActionCreators(ProjectActions, dispatch); return bindActionCreators({ ...ProjectActions, ...IDEActions }, dispatch);
} }
export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView); export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView);