add tutorialstore

src/components/Studio/Mapstories/EditMapstoryView/helpMessages.tsx

@@ -0,0 +1,49 @@
+import { StoryStep } from '@prisma/client'
+import { useBoundStore } from '@/src/lib/store/store'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+
+type HelpMessagesProps = {
+  currentStep: StoryStep
+  firstStepId: string | undefined
+}
+
+export default function HelpMessages({
+  currentStep,
+  firstStepId,
+}: HelpMessagesProps) {
+  const titleSlide = useBoundStore(state => state.titleslide)
+  const setTitleSlide = useBoundStore(state => state.setTitleSlide)
+  const noMarkerOnSlide = useBoundStore(state => state.noMarkerOnSlide)
+  const setNoMarkerOnSlide = useBoundStore(state => state.setNoMarkerOnSlide)
+  const dragMarker = useBoundStore(state => state.dragMarker)
+  const setDragMarker = useBoundStore(state => state.setDragMarker)
+
+  let message, onClick
+
+  if (titleSlide && currentStep.id === firstStepId) {
+    message = 'Dies ist deine Titelfolie.'
+    onClick = () => setTitleSlide(false)
+  } else if (noMarkerOnSlide && !currentStep?.feature) {
+    message = 'Klicke auf die Karte um deinen Marker hinzuzufügen'
+    onClick = () => setNoMarkerOnSlide(false)
+  } else if (
+    dragMarker &&
+    currentStep?.feature &&
+    currentStep.id !== firstStepId
+  ) {
+    message = 'Verschiebe den roten Marker um dessen Position zu ändern'
+    onClick = () => setDragMarker(false)
+  } else {
+    return null
+  }
+
+  return (
+    <span className="flex">
+      {message}
+      <XMarkIcon
+        className="ml-2 h-4 w-5 hover:cursor-pointer"
+        onClick={onClick}
+      />
+    </span>
+  )
+}

src/components/Studio/Mapstories/EditMapstoryView/index.tsx

@@ -7,6 +7,7 @@ import useStory from '@/src/lib/api/story/useStory'
 import { Spinner } from '@/src/components/Elements/Spinner'
 import { StudioShell } from '../../Shell'
 import EditMapstoryMap from './EditMapstoryMap'
+import HelpMessages from './helpMessages'
 
 type EditMapstoryViewProps = {
   story: Story & {
@@ -21,7 +22,6 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
   const path = usePathname()
 
   const { story: currentStory } = useStory(story.id)
-
   useEffect(() => {
     const stepId = path?.split('/').at(-1)
     const currentStep = currentStory?.steps?.find(s => s.id === stepId)
@@ -46,16 +46,11 @@ export default function EditMapstoryView({ story }: EditMapstoryViewProps) {
     <StudioShell>
       <div className="re-studio-height-full-screen absolute top-0 z-10 w-full overflow-hidden rounded-lg shadow">
         <div className="absolute top-0 z-20  w-full ">
-          <div className=" mapboxgl-ctrl-group mx-auto mt-2 w-fit px-3 py-1 text-center text-sm text-black">
-            {currentStep.id === story.firstStepId ? (
-              <span>Dies ist deine Titelfolie. </span>
-            ) : !currentStep?.feature ? (
-              <span>Klicke auf die Karte um deinen Marker hinzuzufügen</span>
-            ) : (
-              <span>
-                Verschiebe den roten Marker um dessen Position zu ändern
-              </span>
-            )}
+          <div className=" mapboxgl-ctrl-group mx-auto mt-2 w-max px-3 py-1 text-center text-sm text-black">
+            <HelpMessages
+              currentStep={currentStep}
+              firstStepId={story.firstStepId ?? undefined}
+            />
           </div>
         </div>
 

src/lib/store/CombinedState.ts

@@ -0,0 +1,5 @@
+import { UIState } from './ui'
+import { TutorialState } from './tutorial'
+import { StoryState } from './story'
+
+export type CombinedState = UIState & TutorialState & StoryState

src/lib/store/store.ts

@@ -1,13 +1,16 @@
 import { create } from 'zustand'
-import { StoryState, useStoryStore } from './story'
-import { UIState, useUIStore } from './ui'
+import { useStoryStore } from './story'
+import { useUIStore } from './ui'
 import { persist } from 'zustand/middleware'
+import { useTutorialStore } from './tutorial'
+import { CombinedState } from './CombinedState'
 
 export const useBoundStore = create(
-  persist<StoryState & UIState>(
+  persist<CombinedState>(
     (set, get, api) => ({
       ...useStoryStore(set, get, api),
       ...useUIStore(set, get, api),
+      ...useTutorialStore(set, get, api),
     }),
     {
       name: 'bound-store',

src/lib/store/story.ts

@@ -1,5 +1,5 @@
 import { StateCreator } from 'zustand'
-import { UIState } from './ui'
+import { CombinedState } from './CombinedState'
 
 export interface StoryState {
   storyID: string
@@ -13,7 +13,7 @@ export interface StoryState {
 }
 
 export const useStoryStore: StateCreator<
-  StoryState & UIState,
+  CombinedState,
   [],
   [],
   StoryState

src/lib/store/tutorial.ts

@@ -0,0 +1,26 @@
+import { StateCreator } from 'zustand'
+import { UIState } from './ui'
+import { StoryState } from './story'
+
+export interface TutorialState {
+  titleslide: boolean
+  noMarkerOnSlide: boolean
+  dragMarker: boolean
+  setTitleSlide: (titleslide: boolean) => void
+  setNoMarkerOnSlide: (noMarkerOnSlide: boolean) => void
+  setDragMarker: (dragMarker: boolean) => void
+}
+
+export const useTutorialStore: StateCreator<
+  StoryState & UIState & TutorialState,
+  [],
+  [],
+  TutorialState
+> = set => ({
+  titleslide: true,
+  setTitleSlide: (titleslide: boolean) => set({ titleslide }),
+  noMarkerOnSlide: true,
+  setNoMarkerOnSlide: (noMarkerOnSlide: boolean) => set({ noMarkerOnSlide }),
+  dragMarker: true,
+  setDragMarker: (dragMarker: boolean) => set({ dragMarker }),
+})

src/lib/store/ui.ts

@@ -1,13 +1,13 @@
 import { StateCreator } from 'zustand'
-import { StoryState } from './story'
+import { CombinedState } from './CombinedState'
 
 export interface UIState {
   language: string
   setLanguage: (lng: string) => void
 }
 
 export const useUIStore: StateCreator<
-  StoryState & UIState,
+  CombinedState,
   [],
   [],
   UIState