From dc7adabc142b8063acd976f8a44ca21fa4e541ef Mon Sep 17 00:00:00 2001 From: Ava Wandersleben <78870469+Snoopy219@users.noreply.github.com> Date: Tue, 23 Jul 2024 14:00:01 -0400 Subject: [PATCH 1/3] self guided tour done --- package-lock.json | 14 ++ package.json | 1 + src/components/App/component.tsx | 5 +- src/components/Tutorial/component.tsx | 259 ++++++++++++++++++++++++++ src/components/Tutorial/index.ts | 1 + 5 files changed, 279 insertions(+), 1 deletion(-) create mode 100644 src/components/Tutorial/component.tsx create mode 100644 src/components/Tutorial/index.ts diff --git a/package-lock.json b/package-lock.json index 2eafe31..b5ccb74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "pyatch-vm": "^1.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-firebase-hooks": "^5.1.1", "react-split-pane": "^2.0.3", "react-split-pane-next": "^1.0.5", @@ -24375,6 +24376,19 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-firebase-hooks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/react-firebase-hooks/-/react-firebase-hooks-5.1.1.tgz", diff --git a/package.json b/package.json index e1b81fb..4f99256 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "pyatch-vm": "^1.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-firebase-hooks": "^5.1.1", "react-split-pane": "^2.0.3", "react-split-pane-next": "^1.0.5", diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index 8fc5a70..ab6cce5 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -1,12 +1,13 @@ import React from "react"; import { useState, useEffect } from "react"; import SpritePane from "../SpritePane"; -import { Button, Grid, Tooltip } from "@mui/material"; +import { Backdrop, Button, Grid, Tooltip } from "@mui/material"; import "./style.css"; import { TopBar } from "../TopBar"; import { EditorPane, EditorTabButton } from "../EditorPane"; import { VerticalButtons } from "../PatchButton"; import { ThemeProvider } from "@emotion/react"; +import { Tutorial } from "../Tutorial" import darkTheme from "../../themes/dark"; import lightTheme from "../../themes/light"; @@ -59,6 +60,7 @@ const App = () => { const patchVM = usePatchStore((state) => state.patchVM); const saveTargetThreads = usePatchStore((state) => state.saveTargetThreads); const editorTab = usePatchStore((state) => state.editorTab); + const [newUser, setNewUser] = React.useState(true); // Popover state const [anchorEl, setAnchorEl] = React.useState( @@ -229,6 +231,7 @@ const App = () => { + {usePatchStore((state) => state.patchReady) ? : <>} diff --git a/src/components/Tutorial/component.tsx b/src/components/Tutorial/component.tsx new file mode 100644 index 0000000..5dd742c --- /dev/null +++ b/src/components/Tutorial/component.tsx @@ -0,0 +1,259 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { styled, useTheme } from '@mui/material/styles'; +import MobileStepper from '@mui/material/MobileStepper'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; +import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; +import CancelIcon from '@mui/icons-material/Cancel'; +import RemoveIcon from '@mui/icons-material/Remove'; +import AddIcon from '@mui/icons-material/Add'; +import Draggable from 'react-draggable'; +import { Modal } from '@mui/base'; +import { Backdrop, css } from '@mui/material'; + +const steps = [ + { + label: 'Welcome to Patch!', + description: `I\’m Patch the Penguin and I can walk you through getting started to code amazing projects on Patch!`, + }, + { + label: 'Stage Area', + description: + 'This is the stage area where all the action happens! Try clicking the flag to see the sample code run!', + }, + { + label: 'Stage Area', + description: `That’s some crazy color changing! Click the stop sign to stop running your code.`, + }, + { + label: 'Editor Area', + description: `The editor area allows us to add code. + Try deleting the default code and adding “move(10)”. Start typing the “m” + and you will notice autocomplete options appear.`, + }, + { + label: 'Errors', + description: + 'What happens if you delete the last parentheses on the “move(10)” command? Patch is showing you an error by underlining the incorrect code.', + }, + { + label: 'Threads', + description: `But what if you would like multiple scripts to run at once? Try threads. First save your current thread by clicking the “save thread” button.`, + }, + { + label: 'Threads', + description: + 'Now click the “new thread” button to create a new thread for Patch the Penguin.', + }, + { + label: 'Threads', + description: `At the top of the new thread change the starting condition from “When Flag clicked” to “When key pressed”. Then choose the "UP ARROW" option.`, + }, + { + label: 'Threads', + description: + 'Now add code to make Patch move up whenever the up arrow is pressed. Type “changeY(10)” in the editor. Click the flag to run your code.', + }, + { + label: 'Sprites', + description: `Let’s give Patch a friend. In the sprite area click the plus button to add a sprite of your choice.`, + }, + { + label: 'Sounds', + description: `Let’s make the new sprite make a sound. Click on the sounds tab. Click on the plus button to add a sound.`, + }, + { + label: 'Sounds', + description: `Go back to the code editor to code the sound. Use the playSound function to play the sound you just added. Then run your project now to hear your sound.`, + }, + { + label: 'Save', + description: `Great! Let’s save your project to keep your progress. Press the File -> Save button to save your project.`, + }, + { + label: 'That\'s All!', + description: + 'That’s all for this tutorial. Have fun coding in Patch!', + }, +]; + +export function Tutorial() { + + const [selfGuided, setSelfGuided] = React.useState(false); + + function SelfGuidedTutorial() { + const theme = useTheme(); + const [activeStep, setActiveStep] = React.useState(0); + const [minimize, setMinimize] = React.useState(false); + const maxSteps = steps.length; + + const handleNext = () => { + if (activeStep == maxSteps - 1) { + setSelfGuided(false); + setOpen(true); + } else { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; + + const associatedImage = (currStep: number) => { + switch (currStep){ + case 0: + return(); + case 1: + return(); + case 2: + return(); + case 3: + return(); + case 4: + return(); + case 5: + return(); + case 6: + return(); + case 7: + return(); + case 8: + return(); + case 9: + return(); + case 10: + return(); + case 11: + return(); + case 12: + return(); + case 13: + return(); + + + } + } + + return ( + + + + {steps[activeStep].label} +
+ {minimize ? setMinimize(false)}/> : <> setMinimize(true)} />} + setSelfGuided(false)} /> +
+ + {minimize ? <> : + <> + {steps[activeStep].description} + {associatedImage(activeStep)} + + {activeStep === maxSteps - 1 ? "Finish" : "Next"} + {theme.direction === 'rtl' ? ( + + ) : ( + + )} + } + backButton={} />} + + ); + } + const [open, setOpen] = React.useState(true); + + const StyledBackdrop = styled(Backdrop)` + z-index: -1; + position: fixed; + inset: 0; + background-color: rgb(0 0 0 / 0.5); + -webkit-tap-highlight-color: transparent; + `; + + const style = { + position: 'absolute' as 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + color: "white" + }; + + const ModalContent = styled('div')( + ({ theme }) => css` + text-align: start; + position: relative; + display: flex; + flex-direction: column; + gap: 8px; + overflow: hidden; + padding: 24px; + + & .modal-title { + margin: 0; + line-height: 1.5rem; + margin-bottom: 8px; + } + + & .modal-description { + margin: 0; + line-height: 1.5rem; + font-weight: 400; + margin-bottom: 4px; + } + `, + ); + + + return (<> {setOpen(false)}} + slots={{ backdrop: StyledBackdrop }} + > +
+ + Welcome to Patch! How would you like to learn? + + + +
+ + {selfGuided ? : <>}); +} diff --git a/src/components/Tutorial/index.ts b/src/components/Tutorial/index.ts new file mode 100644 index 0000000..7e4ff23 --- /dev/null +++ b/src/components/Tutorial/index.ts @@ -0,0 +1 @@ +export * from './component'; \ No newline at end of file From 5d3654e1d748fa3d0d44299e3a5e8a85e52ba893 Mon Sep 17 00:00:00 2001 From: Ava Wandersleben <78870469+Snoopy219@users.noreply.github.com> Date: Tue, 23 Jul 2024 15:17:42 -0400 Subject: [PATCH 2/3] firebase implementation --- src/components/App/component.tsx | 5 +++- .../TopBar/SignUpButton/component.tsx | 1 + src/components/Tutorial/component.tsx | 30 +++++++++++++++---- src/hooks/useUser.ts | 5 ++-- src/types/userMeta.ts | 1 + 5 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index ab6cce5..df03588 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -41,6 +41,7 @@ import { LegalDialogueButton } from "./LegalDialogueButton"; import PatchFunctionJson from "../../assets/patch-api.json"; import Popover from "@mui/material/Popover"; +import { useUser } from "../../hooks/useUser"; interface Parameter { [key: string]: string; @@ -100,6 +101,8 @@ const App = () => { const open = Boolean(anchorEl); const id = open ? "simple-popover" : undefined; + const userData = useUser(); + console.log(userData.userMeta); return ( @@ -231,7 +234,7 @@ const App = () => { - {usePatchStore((state) => state.patchReady) ? : <>} + {usePatchStore((state) => state.patchReady) && (userData == null || userData.userMeta?.newUser) ? : <>} diff --git a/src/components/TopBar/SignUpButton/component.tsx b/src/components/TopBar/SignUpButton/component.tsx index 5a230ce..7f11ab7 100644 --- a/src/components/TopBar/SignUpButton/component.tsx +++ b/src/components/TopBar/SignUpButton/component.tsx @@ -41,6 +41,7 @@ export const SignUpButton = () => { projects: [], username: username, role: "user", + newUser: true }; const response = setDoc(reference, data, {merge: true, mergeFields: ["projects"]}); setProjectId("new"); diff --git a/src/components/Tutorial/component.tsx b/src/components/Tutorial/component.tsx index 5dd742c..23ce4f3 100644 --- a/src/components/Tutorial/component.tsx +++ b/src/components/Tutorial/component.tsx @@ -13,6 +13,8 @@ import AddIcon from '@mui/icons-material/Add'; import Draggable from 'react-draggable'; import { Modal } from '@mui/base'; import { Backdrop, css } from '@mui/material'; +import { useUser } from '../../hooks/useUser'; +import { updateDoc } from 'firebase/firestore'; const steps = [ { @@ -83,17 +85,30 @@ const steps = [ export function Tutorial() { const [selfGuided, setSelfGuided] = React.useState(false); + const [open, setOpen] = React.useState(true); function SelfGuidedTutorial() { const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); const [minimize, setMinimize] = React.useState(false); const maxSteps = steps.length; + const [show, setShow] = React.useState(true); - const handleNext = () => { + const userRef = useUser().userReference; + const userData = useUser().userMeta; + const handleNext = async () => { if (activeStep == maxSteps - 1) { - setSelfGuided(false); - setOpen(true); + setShow(false); + if (userRef != null) { + console.log("here"); + console.log("updating"); + updateDoc(userRef, { + newUser: false + }); + console.log(userData); + + } + } else { setActiveStep((prevActiveStep) => prevActiveStep + 1); } @@ -139,6 +154,7 @@ export function Tutorial() { } return ( + show ? @@ -194,10 +210,9 @@ export function Tutorial() { )} Back } />} - + : <> ); } - const [open, setOpen] = React.useState(true); const StyledBackdrop = styled(Backdrop)` z-index: -1; @@ -242,8 +257,11 @@ export function Tutorial() { ); + const userData = useUser().userMeta; + console.log(userData); + return (<> {setOpen(false)}} slots={{ backdrop: StyledBackdrop }} > diff --git a/src/hooks/useUser.ts b/src/hooks/useUser.ts index 2819e0b..71bc3b8 100644 --- a/src/hooks/useUser.ts +++ b/src/hooks/useUser.ts @@ -1,7 +1,7 @@ import { useAuthState } from "react-firebase-hooks/auth"; import { useDocumentDataOnce } from "react-firebase-hooks/firestore"; import { auth, db } from "../lib/firebase"; -import { FirestoreError, doc } from "firebase/firestore"; +import { DocumentReference, FirestoreError, doc } from "firebase/firestore"; import { User } from "firebase/auth"; import { UserMeta } from "../types/userMeta"; @@ -10,6 +10,7 @@ type UseUserReturn = { userMeta: UserMeta | null; loading: boolean; error: Error | FirestoreError | null | undefined; + userReference: DocumentReference | null; } export const useUser = (): UseUserReturn => { @@ -17,5 +18,5 @@ export const useUser = (): UseUserReturn => { const userReference = user ? doc(db, 'users', user.uid) : null; const [data, loading, error] = useDocumentDataOnce(userReference); - return { user: user ?? null, userMeta: data as UserMeta, loading, error }; + return { user: user ?? null, userMeta: data as UserMeta, loading, error, userReference: userReference ?? null }; } \ No newline at end of file diff --git a/src/types/userMeta.ts b/src/types/userMeta.ts index 7f82d4f..39d0c66 100644 --- a/src/types/userMeta.ts +++ b/src/types/userMeta.ts @@ -13,4 +13,5 @@ export type UserMeta = { username: string; role?: UserRole; projects: ProjectProfile[]; + newUser: boolean; } \ No newline at end of file From d2cf9689afa38d87f1fc9098206ecbcaa550675a Mon Sep 17 00:00:00 2001 From: Ava Wandersleben <78870469+Snoopy219@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:06:33 -0400 Subject: [PATCH 3/3] working --- src/components/App/component.tsx | 2 +- src/components/Tutorial/component.tsx | 624 ++++++++++++++++---------- 2 files changed, 398 insertions(+), 228 deletions(-) diff --git a/src/components/App/component.tsx b/src/components/App/component.tsx index df03588..5264fc7 100644 --- a/src/components/App/component.tsx +++ b/src/components/App/component.tsx @@ -234,7 +234,7 @@ const App = () => { - {usePatchStore((state) => state.patchReady) && (userData == null || userData.userMeta?.newUser) ? : <>} + {(usePatchStore((state) => state.patchReady) && (userData.user == null || userData.userMeta?.newUser)) ? : <>} diff --git a/src/components/Tutorial/component.tsx b/src/components/Tutorial/component.tsx index 23ce4f3..5bb318d 100644 --- a/src/components/Tutorial/component.tsx +++ b/src/components/Tutorial/component.tsx @@ -12,215 +12,354 @@ import RemoveIcon from '@mui/icons-material/Remove'; import AddIcon from '@mui/icons-material/Add'; import Draggable from 'react-draggable'; import { Modal } from '@mui/base'; -import { Backdrop, css } from '@mui/material'; +import { Backdrop, CardActions, CardContent, css } from '@mui/material'; import { useUser } from '../../hooks/useUser'; import { updateDoc } from 'firebase/firestore'; +import { EditorTab } from '../../store/patchEditorStore'; +import usePatchStore from '../../store'; +import { useEffect } from 'react'; +import { alignProperty } from '@mui/material/styles/cssUtils'; + +//steps for self guided tour const steps = [ - { - label: 'Welcome to Patch!', - description: `I\’m Patch the Penguin and I can walk you through getting started to code amazing projects on Patch!`, - }, - { - label: 'Stage Area', - description: - 'This is the stage area where all the action happens! Try clicking the flag to see the sample code run!', - }, - { - label: 'Stage Area', - description: `That’s some crazy color changing! Click the stop sign to stop running your code.`, - }, - { - label: 'Editor Area', - description: `The editor area allows us to add code. + { + label: 'Welcome to Patch!', + description: `I\’m Patch the Penguin and I can walk you through getting started to code amazing projects on Patch!`, + }, + { + label: 'Stage Area', + description: + 'This is the stage area where all the action happens! Try clicking the flag to see the sample code run!', + }, + { + label: 'Stage Area', + description: `That’s some crazy color changing! Click the stop sign to stop running your code.`, + }, + { + label: 'Editor Area', + description: `The editor area allows us to add code. Try deleting the default code and adding “move(10)”. Start typing the “m” and you will notice autocomplete options appear.`, - }, - { - label: 'Errors', - description: - 'What happens if you delete the last parentheses on the “move(10)” command? Patch is showing you an error by underlining the incorrect code.', - }, - { - label: 'Threads', - description: `But what if you would like multiple scripts to run at once? Try threads. First save your current thread by clicking the “save thread” button.`, - }, - { - label: 'Threads', - description: - 'Now click the “new thread” button to create a new thread for Patch the Penguin.', - }, - { - label: 'Threads', - description: `At the top of the new thread change the starting condition from “When Flag clicked” to “When key pressed”. Then choose the "UP ARROW" option.`, - }, - { - label: 'Threads', - description: - 'Now add code to make Patch move up whenever the up arrow is pressed. Type “changeY(10)” in the editor. Click the flag to run your code.', - }, - { - label: 'Sprites', - description: `Let’s give Patch a friend. In the sprite area click the plus button to add a sprite of your choice.`, - }, - { - label: 'Sounds', - description: `Let’s make the new sprite make a sound. Click on the sounds tab. Click on the plus button to add a sound.`, - }, - { - label: 'Sounds', - description: `Go back to the code editor to code the sound. Use the playSound function to play the sound you just added. Then run your project now to hear your sound.`, - }, - { - label: 'Save', - description: `Great! Let’s save your project to keep your progress. Press the File -> Save button to save your project.`, - }, - { - label: 'That\'s All!', - description: - 'That’s all for this tutorial. Have fun coding in Patch!', - }, + }, + { + label: 'Errors', + description: + 'What happens if you delete the last parentheses on the “move(10)” command? Patch is showing you an error by underlining the incorrect code.', + }, + { + label: 'Threads', + description: `But what if you would like multiple scripts to run at once? Try threads. First save your current thread by clicking the “save thread” button.`, + }, + { + label: 'Threads', + description: + 'Now click the “new thread” button to create a new thread for Patch the Penguin.', + }, + { + label: 'Threads', + description: `At the top of the new thread change the starting condition from “When Flag Clicked” to “When Key Pressed”. Then choose the "UP ARROW" option.`, + }, + { + label: 'Threads', + description: + 'Now add code to make Patch move up whenever the up arrow is pressed. Type “changeY(10)” in the editor. Click the flag to run your code.', + }, + { + label: 'Sprites', + description: `Let’s give Patch a friend. In the sprite area click the plus button to add a sprite of your choice.`, + }, + { + label: 'Sounds', + description: `Let’s make the new sprite make a sound. Click on the sounds tab. Click on the plus button to add a sound.`, + }, + { + label: 'Sounds', + description: `Go back to the code editor to code the sound. Use the playSound function to play the sound you just added. Then run your project now to hear your sound.`, + }, + { + label: 'Save', + description: `Great! Let’s save your project to keep your progress. Press the File -> Save button to save your project.`, + }, + { + label: 'That\'s All!', + description: + 'That’s all for this tutorial. Have fun coding in Patch!', + }, +]; + + +//steps for guided tour +const stepsHandHold = [ + { + label: 'Welcome to Patch!', + description: `I\’m Patch the Penguin and I can walk you through getting started to code amazing projects on Patch!`, + tab: EditorTab.CODE, + width: 0, + height: 0, + x: 0, + y: 0, + image: 0 + }, + { + label: 'Stage Area', + description: + 'This is the stage area where all the action happens! Clicking the flag makes the code run! The stop sign makes the code stop running.', + tab: EditorTab.CODE, + width: 600, + height: 500, + x: "calc(100% - 610px)", + y: "50px", + image: 1 + }, + { + label: 'Editor Area', + description: `The editor area allows us to add code. You will notice as you start typing autocomplete options appear.`, + tab: EditorTab.CODE, + width: "calc(100% - 700px)", + height: "80%", + x: "80px", + y: "100px", + image: 3 + }, + { + label: 'Errors', + description: + 'What happens if you have incorrect code? Patch will show you an error by underlining the incorrect code.', + tab: EditorTab.CODE, + width: "calc(100% - 700px)", + height: "75px", + x: "80px", + y: "150px", + image: 4 + }, + { + label: 'Threads', + description: `But what if you would like multiple scripts to run at once? Try threads. You can save you current thread by clicking the “save thread” button.`, + tab: EditorTab.CODE, + width: "200px", + height: "60px", + x: "calc(100% - 825px)", + y: "100px", + image: 5 + }, + { + label: 'Threads', + description: + 'The “new thread” button creates a new thread for the selected sprite.', + tab: EditorTab.CODE, + width: "200px", + height: "60px", + x: "calc(100% - 825px)", + y: "100px", + image: 6 + }, + { + label: 'Threads', + description: `You can also change the starting condition. At the top of the new thread for example, you can change the dropdown to say “When Flag Clicked” or “When Key Pressed”.`, + tab: EditorTab.CODE, + width: "calc(100% - 900px)", + height: "60px", + x: "80px", + y: "100px", + image: 7 + }, + { + label: 'Sprites', + description: `In the sprite area you can click the plus button to add a sprite of your choice.`, + tab: EditorTab.CODE, + width: 600, + height: 400, + x: "calc(100% - 610px)", + y: "550px", + image: 9 + }, + { + label: 'Sounds', + description: `You can also add sounds by clicking on the sounds tab. Click on the plus button to add a sound.`, + tab: EditorTab.SOUNDS, + width: 220, + height: 60, + x: "80px", + y: "50px", + image: 10 + }, + { + label: 'Save', + description: `Press the File -> Save button to save your project.`, + tab: EditorTab.CODE, + width: 140, + height: 50, + x: "75px", + y: "5px", + image: 12 + }, + { + label: 'That\'s All!', + description: + 'That’s all for this tutorial. Have fun coding in Patch!', + tab: EditorTab.CODE, + image: 0 + }, ]; + +//images for each step +const associatedImage = (currStep: number) => { + switch (currStep) { + case 0: + return (); + case 1: + return (); + case 2: + return (); + case 3: + return (); + case 4: + return (); + case 5: + return (); + case 6: + return (); + case 7: + return (); + case 8: + return (); + case 9: + return (); + case 10: + return (); + case 11: + return (); + case 12: + return (); + case 13: + return (); + + + } +} + + +//main function export function Tutorial() { const [selfGuided, setSelfGuided] = React.useState(false); + const [handHold, setHandHold] = React.useState(false); const [open, setOpen] = React.useState(true); + const [activeStep, setActiveStep] = React.useState(0); + const userRef = useUser().userReference; + const userData = useUser().userMeta; + const [show, setShow] = React.useState(true); + + const theme = useTheme(); + const [minimize, setMinimize] = React.useState(false); + //Template for self guided tour function SelfGuidedTutorial() { - const theme = useTheme(); - const [activeStep, setActiveStep] = React.useState(0); - const [minimize, setMinimize] = React.useState(false); const maxSteps = steps.length; - const [show, setShow] = React.useState(true); - - const userRef = useUser().userReference; - const userData = useUser().userMeta; - const handleNext = async () => { - if (activeStep == maxSteps - 1) { - setShow(false); - if (userRef != null) { - console.log("here"); - console.log("updating"); - updateDoc(userRef, { - newUser: false - }); - console.log(userData); - } - - } else { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - } - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const associatedImage = (currStep: number) => { - switch (currStep){ - case 0: - return(); - case 1: - return(); - case 2: - return(); - case 3: - return(); - case 4: - return(); - case 5: - return(); - case 6: - return(); - case 7: - return(); - case 8: - return(); - case 9: - return(); - case 10: - return(); - case 11: - return(); - case 12: - return(); - case 13: - return(); - - - } - } - return ( show ? - - - - {steps[activeStep].label} -
- {minimize ? setMinimize(false)}/> : <> setMinimize(true)} />} - setSelfGuided(false)} /> -
- - {minimize ? <> : - <> - {steps[activeStep].description} - {associatedImage(activeStep)} - - {activeStep === maxSteps - 1 ? "Finish" : "Next"} - {theme.direction === 'rtl' ? ( - - ) : ( - - )} - } - backButton={} />} - : <> + + + + {steps[activeStep].label} +
+ {minimize ? setMinimize(false)} /> : <> setMinimize(true)} />} + { setSelfGuided(false); handleSkip(); }} /> +
+ + {minimize ? <> : + <> + {steps[activeStep].description} + {associatedImage(activeStep)} + handleNextSelf(maxSteps)} + disabled={activeStep === maxSteps} + > + {activeStep === maxSteps - 1 ? "Finish" : "Next"} + {theme.direction === 'rtl' ? ( + + ) : ( + + )} + } + backButton={} />} + : <> ); - } + } - const StyledBackdrop = styled(Backdrop)` - z-index: -1; - position: fixed; - inset: 0; - background-color: rgb(0 0 0 / 0.5); - -webkit-tap-highlight-color: transparent; - `; + //template for guided tour + function HandHoldTutorial() { + const setEditorTab = usePatchStore((state) => state.setEditorTab); + useEffect(() => { + setEditorTab(stepsHandHold[activeStep].tab); + }, [activeStep]); + return (show ? theme.zIndex.drawer + 1 }} + open={true} + onClick={() => { }}> + + +
+ + + {stepsHandHold[activeStep].label} + + + {stepsHandHold[activeStep].description} + + {associatedImage(stepsHandHold[activeStep].image)} + + + +
+ : <>); + + } const style = { position: 'absolute' as 'absolute', @@ -228,50 +367,81 @@ export function Tutorial() { left: '50%', transform: 'translate(-50%, -50%)', width: 400, - color: "white" - }; + color: "white", + bgcolor: 'black', + display: "flex-col", + alignProperty: "center", + border: "1px solid rgba(255, 255, 255, 0.1)", + borderRadius: "5px", + padding: "5px", + + }; - const ModalContent = styled('div')( - ({ theme }) => css` - text-align: start; - position: relative; - display: flex; - flex-direction: column; - gap: 8px; - overflow: hidden; - padding: 24px; - - & .modal-title { - margin: 0; - line-height: 1.5rem; - margin-bottom: 8px; - } - - & .modal-description { - margin: 0; - line-height: 1.5rem; - font-weight: 400; - margin-bottom: 4px; - } - `, - ); + const StyledBackdrop = styled(Backdrop)` + z-index: -1; + position: fixed; + inset: 0; + background-color: rgb(0 0 0 / 0.5); + -webkit-tap-highlight-color: transparent; +`; + // const ModalContent = styled('div')( + // ({ theme }) => css` + // text-align: start; + // position: relative; + // display: flex; + // flex-direction: column; + // gap: 8px; + // overflow: hidden; + // padding: 24px; + // `, + // ); + + + const handleNextSelf = async (maxSteps: number) => { + if (activeStep == maxSteps - 1) { + setShow(false); + if (userRef != null) { + updateDoc(userRef, { + newUser: false + }); + } + + } else { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } + }; + + const handleBackSelf = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; + + const handleSkip = () => { + setOpen(false); + if (userRef != null) { + updateDoc(userRef, { + newUser: false + }); + } + } - const userData = useUser().userMeta; - console.log(userData); + //main return return (<> {setOpen(false)}} + onClose={() => { setOpen(false) }} slots={{ backdrop: StyledBackdrop }} - > -
- - Welcome to Patch! How would you like to learn? - - - + > +
+ + Welcome to Patch! How would you like to learn? + + + +
- - {selfGuided ? : <>}); + + {selfGuided ? : <>} + {handHold ? : <>} + ); }