Merge pull request #354 from serlo/331-show-birdie-in-more-places

show birdie in more places

Author: Entkenntnis

src/components/BirdieOverlay.tsx

@@ -1,14 +1,24 @@
-import { faArrowRight, faCaretRight } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { FaIcon } from './ui/FaIcon'
-import { Play } from 'next/font/google'
-import { PlayerProfileStore } from '../../store/player-profile-store'
+import {
+  PlayerProfileStore,
+  updatePlayerProfileStore,
+} from '../../store/player-profile-store'
+import { ExerciseViewStore } from './exercise-view/state/exercise-view-store'
 
-export function BirdieOverlay({ context }: { context: 'map' }) {
+export function BirdieOverlay({ context }: { context: 'map' | 'exercise' }) {
   const birdieIntros = PlayerProfileStore.useState(s => s.birdieIntros)
 
   let text = ''
   let step = ''
 
+  const exerciseWithExample =
+    ExerciseViewStore.getRawState().hasExamplePrescreen
+
+  const tag = ExerciseViewStore.getRawState().tag
+
+  console.log(tag)
+
   if (context == 'map') {
     if (!birdieIntros.includes('map-1')) {
       text =
@@ -29,6 +39,29 @@ export function BirdieOverlay({ context }: { context: 'map' }) {
     }
   }
 
+  if (context == 'exercise') {
+    if (exerciseWithExample) {
+      if (!birdieIntros.includes('exercise-example-1')) {
+        text =
+          'Schau dir diese Beispiel-Aufgabe an. Unten findest du die Lösung dazu.'
+        step = 'exercise-example-1'
+      } else if (!birdieIntros.includes('exercise-example-2')) {
+        text =
+          'Wenn du die Lösung verstanden hast, gehe weiter zur nächsten Aufgabe.'
+        step = 'exercise-example-2'
+      }
+    } else if (tag == 'Grundlagen - Challenge 1#') {
+      if (!birdieIntros.includes('challenge-1')) {
+        text = 'Jetzt hast du schon die ersten Skills gemeistert!'
+        step = 'challenge-1'
+      } else if (!birdieIntros.includes('challenge-2')) {
+        text =
+          'Bist du bereit für die 1. Challenge? Hier kannst du zeigen, was du gelernt hast!'
+        step = 'challenge-2'
+      }
+    }
+  }
+
   if (!text) return null
 
   return (
@@ -41,7 +74,7 @@ export function BirdieOverlay({ context }: { context: 'map' }) {
           <button
             className="w-12 h-12 bg-blue-300 rounded-full hover:bg-blue-400 mt-5"
             onClick={() => {
-              PlayerProfileStore.update(s => {
+              updatePlayerProfileStore(s => {
                 s.birdieIntros.push(step)
               })
             }}

src/components/exercise-view/ExerciseViewLayout.tsx

@@ -5,6 +5,7 @@ import { ExerciseViewFooter } from './ExerciseViewFooter'
 import { ChatOverlay } from './ChatOverlay'
 import { CropImageOverlay } from './CropImageOverlay'
 import { EndScreen } from './EndScreen'
+import { BirdieOverlay } from '../BirdieOverlay'
 
 export function ExerciseViewLayout() {
   return (
@@ -20,6 +21,7 @@ export function ExerciseViewLayout() {
       </IonFooter>
       <ChatOverlay />
       <CropImageOverlay />
+      <BirdieOverlay context="exercise" />
       <EndScreen />
     </IonPage>
   )