Adjust start the demo game completion

digitalwarenkombinat · Oct 17, 2022 · f5f39e1 · f5f39e1
1 parent c2745ec
commit f5f39e1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/games/StartTheDemo.tsx b/src/components/games/StartTheDemo.tsx
@@ -45,6 +45,8 @@ const StartTheDemo = () => {
       textAlign="center"
       flexWrap="wrap"
       justifyContent="center"
+      maxWidth="lg"
+      mx="auto"
     >
       <Grid item sx={{ mt: 4 }}>
         <Typography

diff --git a/src/services/StartTheDemoSVG.tsx b/src/services/StartTheDemoSVG.tsx
@@ -3,9 +3,10 @@ import Popover from '@mui/material/Popover'
 import { useState } from 'react'
 import useStore from 'utils/store'
 import { useHasHydrated } from 'utils/useHasHydrated'
+import { completeMessage } from 'config/startthedemo'
 
 export const StartTheDemoSVG = ({ viewBox }) => {
-  const { items } = useStore()
+  const { allCorrectItemsActivated, language, items } = useStore()
   const hasHydrated = useHasHydrated()
   const [description, setDescription] = useState('')
 
@@ -40,6 +41,11 @@ export const StartTheDemoSVG = ({ viewBox }) => {
           }}
         >
           <Typography sx={{ p: 2 }}>{description}</Typography>
+          {hasHydrated && allCorrectItemsActivated() && (
+            <Typography sx={{ p: 2 }}>
+              {completeMessage[language]}
+            </Typography>
+          )}
         </Popover>
       )}
       <style>{`