diff --git a/.DS_Store b/.DS_Store index 0d1420b4..74e3a94f 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/app/components/(dialogue)/helpButton.tsx b/app/components/(dialogue)/helpButton.tsx new file mode 100644 index 00000000..e0344b96 --- /dev/null +++ b/app/components/(dialogue)/helpButton.tsx @@ -0,0 +1,142 @@ +"use client"; + +import React, { useState } from "react"; +import { HelpCircle, ChevronLeftSquare, ChevronRightSquare, X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; + +const tutorialSteps = [ + { + title: "Welcome to Star Sailors!", + content: "This game can get a bit confusing, so we've prepared a quick guide to help you get started. A lot of the game is changing as we get more feedback and growth so if things change or you get stuck, just check back in with this guide area.", + image: "/assets/Backdrops/background1.jpg", + }, + { + title: "Your planet - Earth", + content: "You've just signed up and begun your journey on Earth! You should see a similar layout to the one below - this is where you can access your structures to make classifications and discoveries. Depending on the project you chose during sign up, you may have a LIDAR (weather station), a Telescope, or a Zoodex (animal classification) module. Click on your structure to get started", + image: "/assets/Docs/Guide/OnEarth.png", + }, + { + title: "Your first structure", + content: "As you can see, I've chosen the Telescope, and there are a few options that are available to me. Depending on which mission you have, there may be one or many options available. To make your first classification, click on the top rectangular button (in my case, it's labelled 'Discover Planets'). You can then choose which data source or project you want to work with, and then the fun begins:", + image: '/assets/Docs/Guide/StructureModal.png', + }, + { + title: "Selecting data source", + content: "Once you've selected your project, you'll be given a tutorial to follow that will teach you how to make a classification and what to look out for.", + image: '/assets/Docs/Guide/TutorialExample.png', + }, + { + title: 'Making your first classification', + content: "For the starter projects, you'll have a series of images to follow and classify. You can make a quick classification by selecting some options in the screen below, and you have the optoin to add some more comments and detail in the text box. When you've done that, click Submit! button", + image: '/assets/Docs/Guide/FirstClassification.png', + }, + { + title: "Researching next steps", + content: "Now that you've made your first classification, you can keep working and discover new anomalies with your structure, as well as researching new structures to work with. If you'd like to find some new projects, click on the + button and create a Research Station", + image: '/assets/Docs/Guide/EditMode.png', + }, + { + title: "Researching new missions", + content: "If you'd like to keep working with the same structure/discipline but want some new data sources, click into your Structure and then click the 'Research' button, which allows you to choose some new projects. These new projects, once researched, can then be accessed in the same way as your first project ", + image: '/assets/Docs/Guide/ResearchMissions.png', + }, + { + title: "Researching new structures", + content: "For every classification you make, you earn points. You can spend these points on new structures and equipments. If you've had enough of Earth and would like to explore, research and create a launchpad by first selecting it in the Research Station and then building it in the Edit Menu, accessed by clicking the + button in the center of the screen " , + image: "/assets/Docs/Guide/ResearchModal.png", + }, + { + title: "Chapter 2", + content: "Chapter 2 begins when you feel ready to step off Earth and start exploring the Solar System. This unlocks new missions and new data for existing missions. Research and create a launchpad to start this process", + image: '/assets/Docs/Guide/TravelInfo.png', + }, + { + title: "Travelling", + content: "You can browse through the list of planets your ship is capable of reaching from the launchpad on Earth and what missions are available. When you're satisfied, click on 'Travel to this planet' button and then select the mission that interests you!", + image: '/assets/Docs/Guide/AvailableMissions.png', + }, + { + title: "You're ready", + content: 'If you run into any issues, please contact liam@skinetics.tech' ,// or use the contact form + image: '/assets/Backdrops/garden.png', + }, +]; + +export default function TutorialPopup() { + const [isOpen, setIsOpen] = useState(false); + const [currentStep, setCurrentStep] = useState(0); + + const handleNext = () => { + setCurrentStep((prev) => Math.min(prev + 1, tutorialSteps.length - 1)); + }; + + const handleBack = () => { + setCurrentStep((prev) => Math.max(prev - 1, 0)); + }; + + const handleClose = () => { + setIsOpen(false); + setCurrentStep(0); + }; + + return ( + + + + + + + + {tutorialSteps[currentStep].title} + + + +
+ {`Step +

+ {tutorialSteps[currentStep].content} +

+
+ + +
+
+ + + ); +}; \ No newline at end of file diff --git a/app/components/(structures)/IndividualStructure.tsx b/app/components/(structures)/IndividualStructure.tsx index a26f5c6f..36f965df 100644 --- a/app/components/(structures)/IndividualStructure.tsx +++ b/app/components/(structures)/IndividualStructure.tsx @@ -82,7 +82,7 @@ const IndividualStructure: React.FC = ({
-

{name}, {structureId}

+

{name}

{/* , {structureId} */}
diff --git a/app/layout.tsx b/app/layout.tsx index 2c14c183..acde2b34 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -12,6 +12,7 @@ import { UserAnomaliesProvider } from "@/context/UserAnomalies"; import { bgImage, backgroundImages } from "@/constants/backgrounds"; import { Analytics } from "@vercel/analytics/react" import { MissionProvider } from "@/context/MissionContext"; +import TutorialPopup from "./components/(dialogue)/helpButton"; // import { CreateStructureWithItemRequirementinfo } from "@/components/Gameplay/Inventory/Structures/Structure"; export default function RootLayout({ children }: { children: React.ReactNode }) { @@ -72,6 +73,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {children} + diff --git a/package.json b/package.json index 6f2f2a04..a500124d 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@material-tailwind/react": "^2.1.9", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-avatar": "^1.1.0", - "@radix-ui/react-dialog": "^1.1.1", + "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", diff --git a/public/assets/Docs/Guide/AvailableMissions.png b/public/assets/Docs/Guide/AvailableMissions.png new file mode 100644 index 00000000..5e412a5f Binary files /dev/null and b/public/assets/Docs/Guide/AvailableMissions.png differ diff --git a/public/assets/Docs/Guide/EditMode.png b/public/assets/Docs/Guide/EditMode.png new file mode 100644 index 00000000..19d57caf Binary files /dev/null and b/public/assets/Docs/Guide/EditMode.png differ diff --git a/public/assets/Docs/Guide/FirstClassification.png b/public/assets/Docs/Guide/FirstClassification.png new file mode 100644 index 00000000..b6988c87 Binary files /dev/null and b/public/assets/Docs/Guide/FirstClassification.png differ diff --git a/public/assets/Docs/Guide/OnEarth.png b/public/assets/Docs/Guide/OnEarth.png new file mode 100644 index 00000000..97889729 Binary files /dev/null and b/public/assets/Docs/Guide/OnEarth.png differ diff --git a/public/assets/Docs/Guide/ResearchMissions.png b/public/assets/Docs/Guide/ResearchMissions.png new file mode 100644 index 00000000..b0dc1029 Binary files /dev/null and b/public/assets/Docs/Guide/ResearchMissions.png differ diff --git a/public/assets/Docs/Guide/ResearchModal.png b/public/assets/Docs/Guide/ResearchModal.png new file mode 100644 index 00000000..4f5a3cd5 Binary files /dev/null and b/public/assets/Docs/Guide/ResearchModal.png differ diff --git a/public/assets/Docs/Guide/StructureModal.png b/public/assets/Docs/Guide/StructureModal.png new file mode 100644 index 00000000..b27b6de2 Binary files /dev/null and b/public/assets/Docs/Guide/StructureModal.png differ diff --git a/public/assets/Docs/Guide/TravelInfo.png b/public/assets/Docs/Guide/TravelInfo.png new file mode 100644 index 00000000..fd10f0aa Binary files /dev/null and b/public/assets/Docs/Guide/TravelInfo.png differ diff --git a/public/assets/Docs/Guide/TutorialExample.png b/public/assets/Docs/Guide/TutorialExample.png new file mode 100644 index 00000000..fcfe7f5c Binary files /dev/null and b/public/assets/Docs/Guide/TutorialExample.png differ diff --git a/yarn.lock b/yarn.lock index 74fdcb7b..f92e2afd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1620,7 +1620,7 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a" integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q== -"@radix-ui/react-dialog@^1.1.1": +"@radix-ui/react-dialog@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c" integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==