From 7419c855c63b7dc6a3744569b0f8905d8ef0f91c Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 9 May 2016 18:28:38 -0400
Subject: [PATCH] render p5 sketch, live, simplest case

---
 shared/components/Preview/Preview.jsx      | 31 +++++----------
 shared/components/Preview/PreviewFrame.jsx | 46 ++++++++++++++++++++++
 shared/containers/App/App.jsx              |  5 +--
 shared/redux/reducers/files.js             |  8 +++-
 4 files changed, 65 insertions(+), 25 deletions(-)
 create mode 100644 shared/components/Preview/PreviewFrame.jsx

diff --git a/shared/components/Preview/Preview.jsx b/shared/components/Preview/Preview.jsx
index d0a2ded0..12f98e0b 100644
--- a/shared/components/Preview/Preview.jsx
+++ b/shared/components/Preview/Preview.jsx
@@ -2,31 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 class Preview extends React.Component {
-	
 	componentDidMount() {
-		this.renderFrameContents();
-	}
-
-	renderFrameContents() {
-		let doc = ReactDOM.findDOMNode(this).contentDocument;
-    if(doc.readyState === 'complete') {
-       ReactDOM.render(this.props.children, doc.body);
-    } else {
-       setTimeout(this.renderFrameContents, 0);
-    }
-	}
-
-	componentDidUpdate() {
-		this.renderFrameContents();
-	}
-
-	componentWillUnmount() {
-		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+		console.log(ReactDOM.findDOMNode(this));
 	}
 
 	render() {
-    return <iframe sandbox="allow-same-origin"></iframe>;
-  }
+		return (
+			<div>
+				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js"></script>
+				<script type="text/javascript">
+					{this.props.content}
+				</script>
+			</div>
+		);
+	}
 }
 
 export default Preview;
\ No newline at end of file
diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
new file mode 100644
index 00000000..dfa5c6ec
--- /dev/null
+++ b/shared/components/Preview/PreviewFrame.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class PreviewFrame extends React.Component {
+	
+	componentDidMount() {
+		this.renderFrameContents();
+	}
+
+	renderFrameContents() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+    if(doc.readyState === 'complete') {
+    	// ReactDOM.render(this.props.children, doc.body);
+    	this.renderSketch();
+    } else {
+       setTimeout(this.renderFrameContents, 0);
+    }
+	}
+
+	renderSketch() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+		doc.write('');
+		doc.close();
+		let p5Script = doc.createElement('script');
+		p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
+		doc.body.appendChild(p5Script);
+
+		let sketchScript = doc.createElement('script');
+		sketchScript.textContent = this.props.content;
+		doc.body.appendChild(sketchScript);
+	}
+
+	componentDidUpdate() {
+		this.renderFrameContents();
+	}
+
+	componentWillUnmount() {
+		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+	}
+
+	render() {
+    return <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
+  }
+}
+
+export default PreviewFrame;
\ No newline at end of file
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index 645d9242..b5ae2aaa 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Editor from '../../components/Editor/Editor'
+import PreviewFrame from '../../components/Preview/PreviewFrame'
 import Preview from '../../components/Preview/Preview'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -12,9 +13,7 @@ class App extends React.Component {
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
-				<Preview>
-					<h1>Hello world!</h1>
-				</Preview>
+				<PreviewFrame content={this.props.file.content} />
 			</div>
 		);
 	}
diff --git a/shared/redux/reducers/files.js b/shared/redux/reducers/files.js
index 63f2fe3f..59656233 100644
--- a/shared/redux/reducers/files.js
+++ b/shared/redux/reducers/files.js
@@ -2,7 +2,13 @@ import * as ActionTypes from '../constants/constants';
 
 const initialState = {
 	name: "sketch.js",
-	content: "setup() { } draw() { }"
+	content: `function setup() { 
+	createCanvas(400, 400);
+} 
+
+function draw() { 
+	background(220);
+}`
 }
 
 const file = (state = initialState, action) => {