🔎⚗️ ↝ Modifying a 3js package for generating worlds on the client

.gitignore

@@ -28,10 +28,13 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
+/.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+TODOs.md

components/Data/AccountAvatar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { Database } from "../../utils/database.types";
+
 type Profiles = Database['public']['Tables']['profiles']['Row']
 
 export default function AccountAvatar ({

components/Data/OffchainAccount.tsx

@@ -1,9 +1,16 @@
-import { useState, useEffect } from "react";
+import React, { useState, createRef, useEffect } from "react";
 import { useUser, useSupabaseClient, Session } from "@supabase/auth-helpers-react";
 import { Database } from '../../utils/database.types';
 import AccountAvatar from "./AccountAvatar";
+import { imagesCdnAddress } from "../../constants/cdn";
+import { v4 as uuidv4 } from 'uuid';
+import Link from "next/link";
+import { Container, Form, Button, Row, Col, Card } from "react-bootstrap";
+import PlanetEditor from "../../pages/generator/planet-editor";
+import { useScreenshot } from "use-react-screenshot";
 
 type Profiles = Database['public']['Tables']['profiles']['Row'];
+type Planets = Database['public']['Tables']['planets']['Row'];
 
 export default function OffchainAccount({ session }: { session: Session}) {
     const supabase = useSupabaseClient<Database>();
@@ -13,9 +20,21 @@ export default function OffchainAccount({ session }: { session: Session}) {
     const [website, setWebsite] = useState<Profiles['website']>(null); // I believe this is the email field
     const [avatar_url, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
     const [address, setAddress] = useState<Profiles['address']>(null); // This should be set by the handler eventually (connected address).
+    const [images, setImages] = useState([]);
+
+    // User planet
+    const [userIdForPlanet, setUserIdForPlanet] = useState<Planets['userId']>(null);
+    const [planetGeneratorImage, setPlanetGeneratorImage] = useState<Planets['screenshot']>(null);
+
+    const ref = createRef();
+    let width = '100%'
+    const [image, takeScreenShot] = useScreenshot();
+
+    const getImage = () => takeScreenShot(ref.current);
 
     useEffect(() => {
         getProfile();
+        console.log(user.id)
     }, [session]);
 
     async function getProfile() {
@@ -79,6 +98,141 @@ export default function OffchainAccount({ session }: { session: Session}) {
         }
     }
 
+    // Gallery components
+    // Retrieving gallery data for user
+    async function getImages() {
+        const { data, error } = await supabase
+            .storage
+            .from('images')
+            .list(user?.id + '/', {
+                limit: 100, // Get 100 images from this dir
+                offset: 0,
+                sortBy: {
+                    column: 'name',
+                    order: 'asc'
+                }
+            });
+
+        if ( data !== null ) {
+            setImages(data);
+        } else {
+            alert('Error loading images');
+            console.log(error);
+        }
+    }
+
+    async function uploadImage(e) {
+        let file = e.target.files[0];
+        const { data, error } = await supabase
+            .storage
+            .from('images')
+            .upload(user.id + '/' + uuidv4(), file);
+
+        if (data) {
+            getImages();
+        } else {
+            console.log(error);
+        }
+    }
+
+    async function uploadScreenshot(e) {
+        let file = image + '.png';
+        const { data, error } = await supabase
+            .storage
+            .from('images')
+            .upload(user.id + '/' + uuidv4(), file);
+
+        if (data) {
+            getImages();
+        } else {
+            console.log(error);
+        }
+    }
+
+    async function deleteImage (imageName) {
+        const { error } = await supabase
+            .storage
+            .from('images')
+            .remove([ user.id + '/' + imageName ])
+
+        if (error) {
+            alert (error);
+        } else {
+            getImages();
+        }
+    }
+
+    useEffect(() => {
+        if (user) { // Only get images IF the user exists and is logged in
+            getImages(); // Add a getPosts function to get a user's profile posts
+        }
+    }, [user]);
+
+    function convertURIToImageData(URI) {
+        return new Promise(function(resolve, reject) {
+          if (URI == null) return reject();
+          var canvas = document.createElement('canvas'),
+              context = canvas.getContext('2d'),
+              image = new Image();
+          image.addEventListener('load', function() {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            context.drawImage(image, 0, 0, canvas.width, canvas.height);
+            resolve(context.getImageData(0, 0, canvas.width, canvas.height));
+          }, false);
+          image.src = URI;
+        });
+    }
+
+    /* PLANET manipulation */
+    async function createPlanet({ // Maybe we should add a getPlanet (getUserPlanet) helper as well?
+        userId, temperature, radius, date, ticId
+    } : {
+        //id: Planets['id']
+        userId: Planets['userId'] // Check to see if this page gets the userId as well, or just the username. Foreign key still works regardless
+        temperature: Planets['temperature']
+        radius: Planets['radius']
+        date: Planets['date']
+        ticId: Planets['ticId']
+    }) {
+        try {
+            setLoading(true);
+            // Is the planet ID going to be based on the user id (obviously not in production, but in this version?)
+            const newPlanetParams = {
+                id: user.id, // Generate a random id later
+                // .. other params from database types
+            }
+        } catch (error) {
+            console.log(error);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function getUserPlanet() {
+        try {
+            setLoading(true);
+            if (!user) throw new Error('No user authenticated');
+            let { data, error, status } = await supabase
+                .from('planets')
+                .select(`id, userId, temperature, radius, ticId`)
+                .eq('userId', username)
+                .single()
+
+            if (error && status !== 406) {
+                throw error;
+            }
+
+            if (data) {
+                setUserIdForPlanet(data.userId);
+            }
+        } catch (error) {
+            console.log(error);
+        } finally {
+            setLoading(false);
+        }
+    }
+
     return (
         <div className="form-widget">
             <AccountAvatar
@@ -93,7 +247,7 @@ export default function OffchainAccount({ session }: { session: Session}) {
             <div>
                 <label htmlFor='email'>Email</label>
                 <input id='email' type='text' value={session.user.email} disabled />
-            </div>
+            </div><br />
             <div>
                 <label htmlFor='username'>Username</label>
                 <input
@@ -102,16 +256,16 @@ export default function OffchainAccount({ session }: { session: Session}) {
                     value={ username || '' }
                     onChange={(e) => setUsername(e.target.value)}
                 />
-            </div>
+            </div><br />
             <div>
                 <label htmlFor='website'>Website</label>
                 <input
                     id='website'
                     type='website'
                     value={ website || '' }
                     onChange={(e) => setWebsite(e.target.value)}
-                />
-            </div>
+                /><br />
+            </div><br />
             <div>
                 <label htmlFor='address'>Address</label>
                 <input
@@ -120,7 +274,7 @@ export default function OffchainAccount({ session }: { session: Session}) {
                     value={ address || '' }
                     onChange={(e) => setAddress(e.target.value)}
                 />
-            </div>
+            </div><br />
             <div>
                 <button
                     className="button primary block"
@@ -129,11 +283,54 @@ export default function OffchainAccount({ session }: { session: Session}) {
                 >
                     {loading ? 'Loading ...' : 'Update'}
                 </button>
+            </div><br />
+            <div>
+                <button style={{ marginBottom: "10px" }} onClick={getImage}>
+                    Take screenshot
+                </button>
+            </div>
+            <img width={width} src={image} alt={"ScreenShot"} />
+            <div
+                ref={ref as React.RefObject<HTMLDivElement>}
+                style={{
+                    border: "1px solid #ccc",
+                    padding: "10px",
+                    marginTop: "20px"
+                }}
+            >
+                <PlanetEditor />
             </div>
+            <br />
+            <Container className='container-sm mt-4 mx-auto border-5 border-emerald-500'>
+                <>
+                    <h1>Your photos</h1><br />
+                    <p>Upload image of your model for analysis</p>
+                    <Form.Group className="mb-3" style={{maxWidth: '500px'}}>
+                        <Form.Control type='file' accept='image/png, image/jpeg' onChange={(e) => uploadImage(e)} />
+                    </Form.Group><br />
+                    <Button variant='outline-info' onClick={() => uploadScreenshot(image)}>Upload planet metadata</Button>
+                    <br /><br /><hr /><br />
+                    <h3>Your images</h3>
+                    <Row className='g-4'>
+                        {images.map((image) => {
+                            return (
+                                <Col key={imagesCdnAddress + user.id + '/' + image.name}>
+                                    <Card>
+                                        <Card.Img variant='top' src={imagesCdnAddress + user.id + '/' + image.name} />
+                                        <Card.Body>
+                                            <Button variant='danger' onClick={() => deleteImage(image.name)}>Delete image</Button>
+                                        </Card.Body>
+                                    </Card>
+                                </Col>
+                            )
+                        })}
+                    </Row>
+                </>
+            </Container>
             <div>
-                <button className="button block" onClick={() => supabase.auth.signOut()}>
+                <Button variant='outline-info' onClick={() => supabase.auth.signOut()}>
                     Sign Out
-                </button>
+                </Button>
             </div>
         </div>
     )

components/Header.tsx

@@ -12,13 +12,22 @@ export default function Header () {
                         <img src="/logo.png" alt='logo' className={styles.logo}/>
                     </Link>
                     <Link href={'http://skinetics.tech'}>
-                        Portal
+                        🚀
                     </Link>
                     <Link href={'https://github.com/signal-k'}>
-                        Github
+                        ⌚️
+                    </Link>
+                    <Link href={'/generator'}>
+                        🪐 {/* Make submenu items */}
                     </Link>
                     <Link href={'/publications/create'}>
-                        Create
+                        🎨
+                    </Link>
+                    <Link href={'/gallery'}>
+                        🌌
+                    </Link>
+                    <Link href={'/auth/offchain'}>
+                        ⛓
                     </Link>
                 </div>
                 <div className={styles.right}>

components/Layout.tsx

@@ -0,0 +1,15 @@
+import NavigationCard from "./Sidebar";
+import styles from '../../styles/social-graph/Home.module.css';
+
+export default function Layout({ children }) {
+    <div className={styles.background}>
+        <div className={styles.header}>
+            <div className={styles.thing1}> {/* Sidebar */}
+                <NavigationCard />
+            </div>
+            <div className={styles.thing2}>
+                {children}
+            </div>
+        </div>
+    </div>
+}