sand pack editor

torinmb · torinmb · commit 1165f457ad7c · 2023-07-18T01:23:21.000-04:00
diff --git a/components/spStarterTempaltes.tsx b/components/spStarterTempaltes.tsx
@@ -0,0 +1,59 @@
+export const minimalRendererIndexHTML = `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Shader Park</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="/styles.css">
+    </head>
+
+    <body>
+        <canvas class="my-canvas"></canvas>
+        <script type="module">
+            import { sculptToMinimalRenderer } from 'https://unpkg.com/shader-park-core/dist/shader-park-core.esm.js';
+
+            fetch('./spCode.txt')
+            .then(response => response.text())
+            .then(spCode => {
+                let canvas = document.querySelector('.my-canvas');
+                // This converts your Shader Park code into a shader and renders it to the my-canvas element
+                sculptToMinimalRenderer(canvas, spCode);
+            });
+        </script>
+    </body>
+</html>
+`;
+
+export const shaderParkStartCode = `rotateY(mouse.x * PI / 2 + time * .5);
+rotateX(mouse.y * PI / 2);
+metal(.5);
+shine(.4);
+color(getRayDirection() + .2);
+rotateY(getRayDirection().y * 4 + time);
+boxFrame(vec3(.4), .02);
+expand(.02);
+blend(nsin(time) * .6);
+sphere(.2);   
+`;
+
+export const minimalRendererCSS = `
+
+body {
+    font-family: helvetica, arial, sans-serif;
+    width: 100vw; 
+    height: 100vh; 
+    margin : 0px; 
+    padding : 0px; 
+    border : 0px; 
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    margin : 0px;
+    padding : 0px;
+    border : 0px;
+    background-color : transparent;
+}
+`
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.6.9",
     "@headlessui/react": "^1.6.6",
     "@heroicons/react": "^1.0.6",
     "@tailwindcss/aspect-ratio": "^0.4.0",
@@ -16,7 +17,7 @@
     "react-dom": "18.1.0",
     "react-firebase-hooks": "^5.0.3",
     "react-firebaseui": "^6.0.0",
-    "shader-park-core": "^0.1.30"
+    "shader-park-core": "^0.1.41"
   },
   "devDependencies": {
     "@types/node": "17.0.35",
diff --git a/pages/new.tsx b/pages/new.tsx
@@ -0,0 +1,58 @@
+import type { NextPage } from 'next'
+import SculptureCard from "../components/sculptureCard"
+import firebaseApp from '../firebase/clientApp'
+import { Sandpack } from "@codesandbox/sandpack-react";
+import { minimalRendererIndexHTML, shaderParkStartCode, minimalRendererCSS } from '../components/spStarterTempaltes';
+
+import { ref, getDatabase, query, orderByChild } from 'firebase/database';
+import { useList } from 'react-firebase-hooks/database';
+
+const database = getDatabase(firebaseApp);
+
+const Explore: NextPage = () => {
+    
+    var dbRef = ref(database, 'sculptures')
+    // const dbQuery = dbRef.orderBy("timestamp");
+    const mostViewedPosts = query(dbRef, orderByChild('favorites'));
+
+
+    // let [snapshots, loading, error] = useList(ref(database, 'sculptures'));
+    let [snapshots, loading, error] = useList(mostViewedPosts);
+    if(!loading && snapshots) {
+
+        snapshots = snapshots?.reverse().slice(0, 100);
+        console.log(snapshots[0].val())
+        return (
+            // <Sandpack />
+            <Sandpack
+            template="static"
+            files={{
+                "/index.html": minimalRendererIndexHTML,
+                "/spCode.txt": shaderParkStartCode,   
+                "/styles.css" : minimalRendererCSS
+        }}
+            options={{
+                // visibleFiles: ["/spCode.js", "/index.html", "/style.css"],
+                visibleFiles: ["/spCode.txt"],
+                initMode: "immediate",
+                activeFile: "/spCode.txt",
+                showLineNumbers: true, // default - true
+                showInlineErrors: true, // default - false
+                recompileMode: 'immediate',
+                // recompileDelay: 300,
+                // wrapContent: true, // default - false
+                editorHeight: 800, // default - 300
+                editorWidthPercentage: 50, // default - 50
+            }}
+            />
+        )
+        
+    } else {
+        return (
+            <span>List: Loading...</span>
+        )
+    }
+
+}
+
+export default Explore
diff --git a/pages/sculpture/[id].tsx b/pages/sculpture/[id].tsx
@@ -21,7 +21,6 @@ const Sculpture = (props: any) => {
         let sculp = snapshot.val();
         if(sculp) {
             shaderSource = sculp.shaderSource;
-            console.log('sculp', sculp)
             if(!triggerOnce && shaderSource.length) {
                 triggerOnce = true;
                 const divElement = canvasRef.current;
diff --git a/yarn.lock b/yarn.lock
