🌞🌻 ↝ [SSG-19]: Tutorial/help section added and reviewed

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 (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+                <Button size="icon" className="fixed bottom-4 bg-red-800 right-4 rounded-full">
+                    <HelpCircle className="h-5 w-5" />
+                    {/* <span className="sr-only">Help/Guide</span> */}
+                    {/* <span>Help/Guide</span> */}
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>
+                        {tutorialSteps[currentStep].title}
+                    </DialogTitle>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute right-4 top-4"
+                        onClick={handleClose}
+                    >
+                        <X className="h-4 w-4" />
+                        <span className="sr-only">Close</span>
+                    </Button>
+                </DialogHeader>
+                <div className="flex flex-col items-center gap-4">
+                    <img
+                        src={tutorialSteps[currentStep].image}
+                        alt={`Step ${currentStep + 1}`}
+                        className="rounded-lg object-cover"
+                        width={400}
+                        height={320}
+                    />
+                    <p className="text-center text-sm">
+                        {tutorialSteps[currentStep].content}
+                    </p>
+                    <div className="flex w-full justify-between">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleBack}
+                            disabled={currentStep === 0}
+                        >
+                            <ChevronLeftSquare className="mr-2 h-4 w-4" />
+                            Back
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleNext}
+                            disabled={currentStep === tutorialSteps.length - 1}
+                        >
+                            Next
+                            <ChevronRightSquare className="ml-2 h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};

app/components/(structures)/IndividualStructure.tsx

@@ -82,7 +82,7 @@ const IndividualStructure: React.FC<IndividualStructureProps> = ({
               <div className="flex items-center space-x-2">
                 <BuildingIcon className="w-8 h-8 text-[#a3be8c]" />
                 <div>
-                  <h1 className="text-2xl font-bold text-[#eceff4]">{name}, {structureId}</h1>
+                  <h1 className="text-2xl font-bold text-[#eceff4]">{name}</h1> {/* , {structureId} */}
                 </div>
               </div>
               <StarIcon className="w-6 h-6 text-[#ebcb8b]" />

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 })
                   <UserAnomaliesProvider>
                     <InventoryProvider>
                       {children}
+                      <TutorialPopup />
                       <Analytics />
                     </InventoryProvider>
                   </UserAnomaliesProvider>

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",

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==