From bd8bb31f9c031820edeef23ce83b18a540e939fe Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Thu, 21 Mar 2024 13:20:44 -0400 Subject: [PATCH 01/11] posibly working with netlify? --- app/pages/PageEnigma/js/api_manager.js | 4 +--- app/pages/PageEnigma/js/editor.js | 13 ++++++++----- app/pages/PageEnigma/js/serialization.js | 17 +++++++---------- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/app/pages/PageEnigma/js/api_manager.js b/app/pages/PageEnigma/js/api_manager.js index b0f5ee2ee6..50edff4d19 100644 --- a/app/pages/PageEnigma/js/api_manager.js +++ b/app/pages/PageEnigma/js/api_manager.js @@ -13,9 +13,7 @@ class MediaUploadManager { method: 'POST', mode: 'cors', headers: { - 'Authorization': `Bearer ${this.sessionToken}`, // Assuming the session token is a Bearer token - 'Access-Control-Allow-Origin': 'http://localhost:3000', - 'Access-Control-Allow-Credentials': true + 'Authorization': `Bearer ${this.sessionToken}`, }, body: formData, }); diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index 23c6e03093..8acc2bf024 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -61,14 +61,12 @@ class Editor { this.rendering = false; // API. - this.api_manager = new MediaUploadManager(); - - - this.locked = false; + this.api_manager = new MediaUploadManager("eyJhbGciOiJIUzI1NiJ9.eyJjb29raWVfdmVyc2lvbiI6IjIiLCJzZXNzaW9uX3Rva2VuIjoic2Vzc2lvbl9kaDRuazE2OHI3OWI4emNjeWJiNGNzYnEiLCJ1c2VyX3Rva2VuIjoidXNlcl9uczg3MWt5OW56OXB3In0.xwgWhGQ6oHOd6irj-CzJZkZlmCirDwM8BGnBPHbs0UE"); // Debug & Movement. this.stats = null; this.orbit = null; + this.locked = false; // Recording params. this.capturer = null; @@ -302,10 +300,15 @@ class Editor { this.control.detach(this.selected); this.activeScene.scene.remove(this.control); this.activeScene.scene.remove(this.activeScene.gridHelper); - this.save_manager.save(this.activeScene.scene); + this.save_manager.save(this.activeScene.scene, this._save_to_cloud.bind(this)); this.activeScene._createGrid(); } + _save_to_cloud(blob) { + console.log("Posting to cloud!"); + this.api_manager.uploadMedia(blob, "test.bin"); + } + load() { let uploadedFile = document.getElementById("load-upload").files[0]; this.save_manager.load(uploadedFile, this.load_callback.bind(this)); diff --git a/app/pages/PageEnigma/js/serialization.js b/app/pages/PageEnigma/js/serialization.js index 5fc32ee4d7..686940b242 100644 --- a/app/pages/PageEnigma/js/serialization.js +++ b/app/pages/PageEnigma/js/serialization.js @@ -8,7 +8,7 @@ class SaveManager { this.scene = null; } - save(scene, scene_data) { + save(scene, scene_callback) { let gltfExporter = new GLTFExporter(); gltfExporter.parse( scene, @@ -18,6 +18,8 @@ class SaveManager { let blob = new Blob([jsonString], {type: 'application/octet-stream'}) let blobUrl = URL.createObjectURL(blob); + scene_callback(blob); + let a = document.createElement('a'); const now = new Date(); @@ -51,18 +53,13 @@ class SaveManager { reader.onload = function(e) { const contents = e.target.result; - const loader = new THREE.GLTFLoader(); + const loader = new GLTFLoader(); loader.parse(contents, '', function(gltf) { - scene.add(gltf.scene); + console.log(gltf); + load_callback(gltf.scene); }); }; - reader.readAsArrayBuffer(file); - - //const loader = new GLTFLoader(); - //loader.load(uploadedFile, function ( gltf ) { - // console.log(gltf); - // load_callback(gltf.scene); - //}); + reader.readAsArrayBuffer(uploadedFile); } download(data, filename, type) { From 109d901ad3fbdce33da2f63e4158859ecd75ca44 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Thu, 21 Mar 2024 14:00:50 -0400 Subject: [PATCH 02/11] working on api. --- app/pages/PageEnigma/js/api_manager.js | 10 ++++++++-- app/pages/PageEnigma/js/editor.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/pages/PageEnigma/js/api_manager.js b/app/pages/PageEnigma/js/api_manager.js index 50edff4d19..8f8463f920 100644 --- a/app/pages/PageEnigma/js/api_manager.js +++ b/app/pages/PageEnigma/js/api_manager.js @@ -7,13 +7,19 @@ class MediaUploadManager { async uploadMedia(blob, fileName) { const url = `${this.baseUrl}/v1/media_uploads/upload`; + let uuid = crypto.randomUUID(); + const formData = new FormData(); + formData.append('uuid_idempotency_token', uuid); formData.append('file', blob, fileName); + formData.append('source', 'file'); const response = await fetch(url, { method: 'POST', - mode: 'cors', + mode: "cors", + credentials: "include", headers: { - 'Authorization': `Bearer ${this.sessionToken}`, + "accept": "application/json", + "content-type": "multipart/form-data" }, body: formData, }); diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index 8acc2bf024..e0c93f38ef 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/app/pages/PageEnigma/js/editor.js @@ -61,7 +61,7 @@ class Editor { this.rendering = false; // API. - this.api_manager = new MediaUploadManager("eyJhbGciOiJIUzI1NiJ9.eyJjb29raWVfdmVyc2lvbiI6IjIiLCJzZXNzaW9uX3Rva2VuIjoic2Vzc2lvbl9kaDRuazE2OHI3OWI4emNjeWJiNGNzYnEiLCJ1c2VyX3Rva2VuIjoidXNlcl9uczg3MWt5OW56OXB3In0.xwgWhGQ6oHOd6irj-CzJZkZlmCirDwM8BGnBPHbs0UE"); + this.api_manager = new MediaUploadManager(); // Debug & Movement. this.stats = null; From 6a50feea35ee7e8d99c6201b5a87030bbe1afb2e Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 21 Mar 2024 15:09:47 -0400 Subject: [PATCH 03/11] buttons, and topbar scafoldding --- .gitignore | 2 +- app/components/Button.tsx | 21 ++++++++++++--- app/components/ButtonLink.tsx | 45 +++++++++++++++++++++++++++++++ app/contexts/TopBarInner.tsx | 6 +++++ app/contexts/TopbarMidSection.tsx | 3 --- app/pages/PageCube/PageCube.tsx | 36 ++++++++++++++++++++++--- app/root.tsx | 15 ++++++++--- app/routes/Cube.tsx | 3 ++- app/routes/_index.tsx | 13 ++++++++- app/template/TopBar/TopBar.tsx | 13 ++++++++- 10 files changed, 139 insertions(+), 18 deletions(-) create mode 100644 app/components/ButtonLink.tsx create mode 100644 app/contexts/TopBarInner.tsx delete mode 100644 app/contexts/TopbarMidSection.tsx diff --git a/.gitignore b/.gitignore index aa5a7831fa..5f99d7ed8b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules - +/~/ /.cache /public/build /build diff --git a/app/components/Button.tsx b/app/components/Button.tsx index ce52235d12..206f0ee6c2 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -3,20 +3,33 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface ButtonProps extends React.ButtonHTMLAttributes { icon?: IconDefinition; + variant?: "primary"|"secondary"; } export const Button = ({ icon, children, className : propsClassName, + variant = 'primary', ...rest }:ButtonProps)=>{ + function getVariantClassNames(variant: string){ + switch(variant){ + case "secondary":{ + return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; + } + case "primary": + default:{ + return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600"; + } + } + }; const className = ` - bg-brand-primary hover:bg-brand-primary-400 - text-white text-sm font-semibold + text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm - focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-600 - ` + (propsClassName ? ` ${propsClassName}` : null); + focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 + ` + getVariantClassNames(variant) + + (propsClassName ? ` ${propsClassName}` : null); return( + + ); + } \ No newline at end of file diff --git a/app/contexts/TopBarInner.tsx b/app/contexts/TopBarInner.tsx new file mode 100644 index 0000000000..5bc2a3a9ac --- /dev/null +++ b/app/contexts/TopBarInner.tsx @@ -0,0 +1,6 @@ +import { ReactNode, createContext } from "react"; + +export const TopBarInnerContext = createContext<{ + TopBarInner: JSX.Element | null; + setTopBarInner: (el: JSX.Element | null)=>void; +} | null>(null); \ No newline at end of file diff --git a/app/contexts/TopbarMidSection.tsx b/app/contexts/TopbarMidSection.tsx deleted file mode 100644 index 092e27c488..0000000000 --- a/app/contexts/TopbarMidSection.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ReactNode, createContext } from "react"; - -export const TopBarMidSection = createContext(null); \ No newline at end of file diff --git a/app/pages/PageCube/PageCube.tsx b/app/pages/PageCube/PageCube.tsx index 4105732d29..12c5938ef5 100644 --- a/app/pages/PageCube/PageCube.tsx +++ b/app/pages/PageCube/PageCube.tsx @@ -1,13 +1,26 @@ import { - useRef, - useEffect, - useState, useCallback, + useContext, + useEffect, + useLayoutEffect, + useRef, + useState, } from 'react'; +import { + faChevronLeft +} from "@fortawesome/free-solid-svg-icons"; + +import { Button } from '~/components/Button'; +import { ButtonLink } from '~/components/ButtonLink'; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; + import { SceneWithCube } from './SceneWithCube'; export const PageCube = () => { + + const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + const mountRef = useRef(null); const sceneRef = useRef(null); const [{ @@ -45,10 +58,25 @@ export const PageCube = () => { }; }, []); + useLayoutEffect(()=>{ + if(setTopBarInner){ + const BackButton = ( + + Back to Dashboard + + ); + setTopBarInner(BackButton); + } + },[setTopBarInner]); + return ( <>
- +

{rotationX ? rotationX : ""}

{rotationY ? rotationY : ""}

diff --git a/app/root.tsx b/app/root.tsx index 3feb117533..01b934e202 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { LinksFunction } from "@remix-run/deno"; import { Links, @@ -11,7 +12,8 @@ import tailwindCss from "./styles/tailwind.css?url"; import normalizeCss from "./styles/normalize.css?url"; import { TopBar } from "./template/TopBar"; -import { TopBarMidSection } from "./contexts/TopbarMidSection"; +import { TopBarInnerContext } from '~/contexts/TopBarInner'; + export const links : LinksFunction = () => [{ rel: "stylesheet", @@ -22,6 +24,8 @@ export const links : LinksFunction = () => [{ }]; export default function App() { + const [topBarInnerComponent, setTopBarInnerComponent] = useState(null); + return ( @@ -31,8 +35,13 @@ export default function App() { - - + + + + diff --git a/app/routes/Cube.tsx b/app/routes/Cube.tsx index 4fa19f67b5..909c2f0521 100644 --- a/app/routes/Cube.tsx +++ b/app/routes/Cube.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { PageCube } from "../pages/PageCube"; import { Button } from '~/components/Button'; export default function Cube(){ + const pausedRiddle = true; const [riddle, setRiddle] = useState(""); const [submitted, setSubmitted] = useState(false); @@ -17,7 +18,7 @@ export default function Cube(){ alert("What is the price for your blind eye?") } - if(submitted){ + if(submitted || pausedRiddle){ return }else{ return( diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 7c9037bbfd..4676568346 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,4 +1,10 @@ +import { + useContext, + useLayoutEffect, +} from "react"; import type { MetaFunction } from "@remix-run/deno"; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; + import sonic from "./_assets/sonic-the-hedgehog-classic-sonic.gif"; export const meta: MetaFunction = () => { @@ -8,8 +14,13 @@ export const meta: MetaFunction = () => { ]; }; - export default function Index() { + const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + useLayoutEffect(()=>{ + if(setTopBarInner){ + setTopBarInner(null); + } + },[setTopBarInner]); return (
{ +import { TopBarInnerContext } from '~/contexts/TopBarInner'; +export const TopBar = () => { return (
+ ) } + +const TopBarInner = ()=>{ + const { TopBarInner } = useContext(TopBarInnerContext) || {} + return(TopBarInner); +} \ No newline at end of file From a6946616d9300394619fdae2e6fa6066bdc25903 Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 21 Mar 2024 15:12:02 -0400 Subject: [PATCH 04/11] typo --- app/routes/Cube.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/routes/Cube.tsx b/app/routes/Cube.tsx index 909c2f0521..0431699d12 100644 --- a/app/routes/Cube.tsx +++ b/app/routes/Cube.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { PageCube } from "../pages/PageCube"; import { Button } from '~/components/Button'; export default function Cube(){ - const pausedRiddle = true; + const pausedRiddle = false; const [riddle, setRiddle] = useState(""); const [submitted, setSubmitted] = useState(false); From f24d1d25edb8a91de8a67643e23bc361a5675e9a Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 21 Mar 2024 16:38:40 -0400 Subject: [PATCH 05/11] better buttons --- app/components/Button.tsx | 12 +++----- app/components/ButtonLink.tsx | 14 ++++------ app/contexts/TopBarInner.tsx | 2 +- app/pages/PageEnigma/PageEnigma.tsx | 43 +++++++++++++++++++++++++---- app/root.tsx | 4 ++- app/routes/ColourGuide.tsx | 10 +++++++ app/routes/ComponentLibrary.tsx | 11 ++++++++ app/template/TopBar/TopBar.tsx | 5 +++- tailwind.config.ts | 1 + 9 files changed, 77 insertions(+), 25 deletions(-) diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 206f0ee6c2..ebf50212fb 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -16,20 +16,16 @@ export const Button = ({ function getVariantClassNames(variant: string){ switch(variant){ case "secondary":{ - return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; + return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; } case "primary": default:{ - return "bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600"; + return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600"; } } }; - const className = ` - text-sm font-semibold - rounded-md px-3.5 py-2.5 shadow-sm - focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 - ` + getVariantClassNames(variant) - + (propsClassName ? ` ${propsClassName}` : null); + const className = "text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" + getVariantClassNames(variant) + + (propsClassName ? ` ${propsClassName}` : ""); return( + +
+ ); + setTopBarInner(TopBarInnerButtons); + } + },[setTopBarInner]); + const handleButtonSave = ()=>{ editorRef.current?.save(); } @@ -53,7 +86,7 @@ export const PageEnigma = () => { return(
-
+
diff --git a/app/root.tsx b/app/root.tsx index 01b934e202..ab4531f17b 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -39,8 +39,10 @@ export default function App() { TopBarInner: topBarInnerComponent, setTopBarInner: setTopBarInnerComponent }}> - +
+ + diff --git a/app/routes/ColourGuide.tsx b/app/routes/ColourGuide.tsx index e69de29bb2..6d71323ce7 100644 --- a/app/routes/ColourGuide.tsx +++ b/app/routes/ColourGuide.tsx @@ -0,0 +1,10 @@ + + +export default function ColourGuide () { + return( + <> +

Primary / Sunglo

+

Secondary / Gunpowder

+ + ); +}; \ No newline at end of file diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx index e69de29bb2..41bbfb7f8d 100644 --- a/app/routes/ComponentLibrary.tsx +++ b/app/routes/ComponentLibrary.tsx @@ -0,0 +1,11 @@ +import { Button } from "~/components/Button"; +import { ButtonLink } from "~/components/ButtonLink"; + +export default function ComponentLibrary () { + return( + <> + + Button with Link + + ); +}; \ No newline at end of file diff --git a/app/template/TopBar/TopBar.tsx b/app/template/TopBar/TopBar.tsx index 85cecf0fa7..09fe014343 100644 --- a/app/template/TopBar/TopBar.tsx +++ b/app/template/TopBar/TopBar.tsx @@ -6,7 +6,10 @@ import { TopBarInnerContext } from '~/contexts/TopBarInner'; export const TopBar = () => { return ( -
+