Fixed jumpers issue

- also discovered & fixed a couple of other issues
- slight revision on design - removed the bg image which imho looks better

packages/web/components/Landing/LandingHeader.tsx

@@ -201,7 +201,7 @@ export const LandingHeader: React.FC = () => {
             </NavLink>
 
             <NavLink target="onboard" toggle={toggle} setToggle={setToggle}>
-              8. Wake up, Anon...
+              7. Wake up, Anon...
             </NavLink>
 
             <NavLink target="join-us" toggle={toggle} setToggle={setToggle}>

packages/web/components/Landing/Onboard.tsx

@@ -1,5 +1,4 @@
-import { Box, Container } from '@metafam/ds';
-import BackgroundImage from 'assets/landing/sections/section-6-rerender-001.png';
+import { Container } from '@metafam/ds';
 import { FullPageContainer } from 'components/Container';
 import { GameContextProvider } from 'contexts/GameContext';
 import React from 'react';
@@ -19,7 +18,7 @@ export const Onboard: React.FC = () => {
       fontSize={{ base: 'xl', md: '5xl' }}
       spacing={12}
       px={{ base: 3, lg: 12 }}
-      py="8rem"
+      py="6rem"
       minH={{ base: 'unset', md: '100vh' }}
     >
       <Container
@@ -34,8 +33,8 @@ export const Onboard: React.FC = () => {
           <OnboardingGame />
         </GameContextProvider>
       </Container>
-      <Rain top={-12} />
-      <Box
+      <Rain top={-12} effectOpacity={0.3} />
+      {/* <Box
         backgroundImage={BackgroundImage}
         backgroundBlendMode="normal"
         backgroundSize={{ base: '170%', lg: 'contain' }}
@@ -50,7 +49,7 @@ export const Onboard: React.FC = () => {
         right={0}
         bottom={0}
         zIndex={1}
-      />
+      /> */}
       <LandingNextButton py={2} section="join-us" />
     </FullPageContainer>
   );

packages/web/components/Landing/OnboardingGame/Game.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  BoxedNextImage,
   Button,
   keyframes,
   ListItem,
@@ -8,11 +7,11 @@ import {
   UnorderedList,
 } from '@metafam/ds';
 import externalLinkIcon from 'assets/landing/external-link-icon.png';
-import octoImg from 'assets/octopus.png';
 import { CONFIG } from 'config';
 import { useGame } from 'contexts/GameContext';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+import { MdRestartAlt } from 'react-icons/md';
 import {
   safelyParseContent,
   safelyParseTextForTyping,
@@ -55,6 +54,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     useState<CurrentSectionDialogueChoices['currentChoices']>();
   const [isLoading, setIsLoading] = useState(true);
   const [isTyping, setIsTyping] = useState(true);
+  const [hasError, setHasError] = useState(false);
   const [gameDataState, setGameDataState] = useState<GamePropertiesType | null>(
     null,
   );
@@ -74,15 +74,17 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     }
   `;
   const typingAnimation = `${blink} 1s steps(10, start) infinite`;
-  const pulseAnimation = `${blink} 2s infinite`;
+  // const pulseAnimation = `${blink} 2s infinite`;
 
   /** Function to async fetch `CONFIG.onboardingGameDataURL` as json and return the data */
   const fetchGameData = useCallback(async () => {
     try {
+      setHasError(false);
       // setIsLoading(true);
-      console.log('fetchGameData');
+      console.log('fetchGameData...');
 
       const response = await fetch(CONFIG.onboardingGameDataURL);
+      console.log('fetchGameData RES', response.status);
       const data = (await response.json()) as GameProperties;
       console.log('fetchGameData', data);
       const {
@@ -95,8 +97,6 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
         attributes,
         components,
       } = data;
-      // setGameDataState(data);
-      // setIsLoading(false);
       return {
         name,
         assets,
@@ -108,9 +108,8 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
         components,
       } as GameProperties;
     } catch (error) {
-      console.error(error);
-
-      // setIsLoading(false);
+      console.log('fetch error: ', { error });
+      setHasError(true);
       return {
         name: '',
         assets: {},
@@ -127,12 +126,14 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
   /** Sets the starting point for the game (startingElement or saved state) */
   const initGame = () => {
     setIsLoading(true);
-    // if (gameDataState === null) {
-    // return element;
+
     fetchGameData()
       .then((data) => {
-        if (data) {
+        if (data.name.length > 0) {
           setGameDataState(data);
+
+          console.log('fetched data', data);
+
           const state = gameState();
 
           const element =
@@ -148,26 +149,23 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
           console.log('elementData', elementData);
 
           setCurrentElement(elementData);
-          // setCurrentConnections(
-          //   data.connections[elementData.elementId] || [],
-          // );
-          // setCurrentJumpers(data.jumpers[elementData.elementId] || []);
-          // setCurrentDialogue(elementData.dialogue);
-          // setCurrentChoices(elementData.choices);
-          // setIsLoading(false);
+          console.log('currentElement set', currentElement);
+
           return elementData;
         }
-        throw new Error('No data found');
+        throw new Error('No game data found');
       })
       .then((data) => {
         if (data) {
+          console.log('data', data);
+
           makeCurrentSectionDialogue(data);
-          console.log('currentElement', currentElement, data);
+          console.log('section data', { currentElement, data });
           setIsLoading(false);
         }
       })
       .catch((error) => {
-        console.error(error);
+        console.log('initGame error: ', { error });
         setIsLoading(false);
       })
       .finally(() => {});
@@ -192,12 +190,15 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
           return connectionData;
         });
 
-        // console.log('getConnections', { connectionIds, elementConnections });
+        console.log('got connections', { connectionIds, elementConnections });
+
         setCurrentConnections(elementConnections);
         return elementConnections;
       }
+
       throw new Error('No connections found');
     } catch (error) {
+      setCurrentConnections([]);
       // console.log('getConnections ', { error });
       return undefined;
     }
@@ -236,29 +237,6 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     }
   };
 
-  /** Effect to make `scrollerRef` the same height as `scrollContentRef`
-   *  so we get a scrollbar for the overflowing content */
-  // useEffect(() => {
-  //   if (typeof window !== 'undefined') {
-  //     if (scrollContentRef.current !== null && scrollerRef.current !== null) {
-  //       console.log('scrollContentRef', scrollContentRef.current, scrollerRef.current);
-
-  //       document.addEventListener('load', () => {
-  //         console.log('listening', scrollContentRef.current, scrollerRef.current);
-  //         if (scrollContentRef.current !== null && scrollerRef.current !== null) {
-
-  //           scrollerRef.current.style.height = `${scrollContentRef.current.offsetHeight}px`;
-  //         }
-  //       })
-  //     }
-  //   }
-  //     return (): void => {
-
-  //         // scrollContentRef.current.removeEventListener('onchange')
-  //     }
-
-  // }, []);
-
   /** Welcome back for returning players */
   useEffect(() => {
     const state = gameState();
@@ -269,7 +247,6 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
         setWelcomeBack(false);
       }, 6000);
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameDataState]);
 
@@ -279,7 +256,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  /** Call to get connections when the current element changes */
+  /** Call to get connections when the currentElement changes */
   useEffect(() => {
     if (currentElement !== undefined && currentElement.outputs !== null) {
       // setCurrentConnections([])
@@ -288,10 +265,13 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentElement]);
 
-  /** Call to get jumpers when the current element changes */
+  /** Call to get jumpers when the currentConnections change */
   useEffect(() => {
     if (currentConnections !== undefined && currentConnections.length > 0) {
       // setCurrentJumpers([])
+
+      console.log('jumpers uef: Current connections', currentConnections);
+
       const jumpers: any[] = currentConnections.filter(
         (
           connection: ConnectionStateItem,
@@ -312,7 +292,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentElement]);
+  }, [currentConnections]);
 
   interface CurrentSectionDialogueChoices {
     currentDialogue: JSX.Element[];
@@ -325,62 +305,79 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     section: CurrentElementState,
   ): CurrentSectionDialogueChoices => {
     const { content, title } = section;
-    const string = `${title ?? '<p></p>'}${content ?? '<p></p>'}`;
+    const string = `${title ? '<p></p>' : '<p></p>'}${content ?? '<p></p>'}`;
     const parsedContent: any = safelyParseTextForTyping(string);
     const dialogue: any[] = [];
     const choices: any[] = [];
-
-    /**
-     * if it is set, take the parsedContent, find & push paragraphs that contain *no* links as child elements
-     * into the `dialogue` array.
-     * if the paragraph has a link, push it into the `choices` array.
-     */
-    if (parsedContent.length > 0) {
-      console.log('parsedContent', parsedContent);
-      parsedContent.forEach((paragraph: JSX.Element) => {
-        const { children } = paragraph.props;
-        console.log('children', children);
-
-        if (children) {
-          const hasLink = children.type === 'a';
-          if (!hasLink) {
-            console.log('no link', paragraph);
-
-            dialogue.push(paragraph);
-          } else {
-            console.log('has link', children);
-            choices.push(children);
+    try {
+      /**
+       * if it is set, take the parsedContent, find & push paragraphs that contain *no* links as child elements
+       * into the `dialogue` array.
+       * if the paragraph has a link, push it into the `choices` array.
+       */
+      if (parsedContent.length > 0) {
+        console.log('parsedContent', parsedContent);
+        parsedContent.forEach((paragraph: JSX.Element) => {
+          const { children } = paragraph.props;
+          if (children) {
+            const hasLink = children.type === 'a';
+            if (!hasLink) {
+              // console.log('no link', paragraph);
+              dialogue.push(paragraph);
+            } else {
+              // console.log('has link', children);
+              choices.push(children);
+            }
           }
-        }
-        return paragraph;
-      });
+          return paragraph;
+        });
+        setCurrentDialogue(dialogue);
+        setCurrentChoices(choices);
+        console.log('makeCurrentSectionDialogue', { dialogue, choices });
+        return {
+          currentDialogue: dialogue,
+          currentChoices: choices,
+        };
+      }
+      if (dialogue.length === 0 && choices.length === 0) {
+        throw new Error('No dialogue or choices found');
+      }
+
+      return {
+        currentDialogue: [],
+        currentChoices: [],
+      };
+    } catch (error) {
+      console.log('makeCurrentSectionDialogue error', { error });
+      return {
+        currentDialogue: [],
+        currentChoices: [],
+      };
     }
-    setCurrentDialogue(dialogue);
-    setCurrentChoices(choices);
-    console.log('makeCurrentSectionDialogue', { dialogue, choices });
-    return {
-      currentDialogue: dialogue,
-      currentChoices: choices,
-    };
   };
 
   /** Handles the typing effect.
-   * TODO: probs should be extracteed to a separate component/function */
+   * TODO: probs should be extracted to a separate component/function
+   */
   useEffect(() => {
     if (typeof window !== 'undefined' && currentDialogue !== undefined) {
       // makeCurrentSectionDialogue(currentElement);
       setIsTyping(true);
       const elementsToType = document.querySelectorAll('.typing-text');
-      // console.log('elementsToType', elementsToType);
-
       const phrases: string[] = [];
-      elementsToType.forEach((element) => {
-        if (element.textContent !== null) {
-          phrases.push(element.textContent);
+      const links: Element[] = [];
+      for (let a = 0; a < elementsToType.length; a++) {
+        if (elementsToType[a].textContent !== null) {
+          if (elementsToType[a].children.length > 0) {
+            for (let b = 0; b < elementsToType[a].children.length; b++) {
+              if (elementsToType[a].children[b].hasAttribute('href')) {
+                links.push(elementsToType[a].children[b]);
+              }
+            }
+          }
+          phrases.push(elementsToType[a].textContent as string);
         }
-        // eslint-disable-next-line no-param-reassign
-        element.textContent = '';
-      });
+      }
 
       let i = 0;
       let j = 0;
@@ -404,6 +401,20 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
               elementsToType[i].classList.remove('typing');
               elementsToType[i].classList.add('typed');
             }
+
+            if (links.length > 0) {
+              // for every link, find the matching text in elementsToType[i] and replace it with the anchor tag
+              for (let k = 0; k < links.length; k++) {
+                const link = links[k];
+                const element = elementsToType[i];
+                const linkText = link.textContent;
+                const textToFind = linkText ?? '';
+                element.innerHTML = element.innerHTML.replace(
+                  textToFind,
+                  link.outerHTML,
+                );
+              }
+            }
             currentPhrase = [];
             j = 0;
             i++;
@@ -416,7 +427,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
           }
         }
 
-        const randomiseSpeed = Math.random() * (100 - 5) + 5;
+        const randomiseSpeed = Math.random() * (40 - 2) + 2;
         setTimeout(loop, randomiseSpeed);
       };
       loop();
@@ -425,61 +436,25 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
   }, [isLoading, currentElement]);
 
   const handleProgress = (elementId: string) => {
-    let hasRun = false;
-    let elId: string = elementId;
     setIsLoading(true);
-    console.log('hasrun', hasRun);
+    handleChoice(elementId)
+      .then((data) => {
+        const nextElement =
+          data !== undefined
+            ? { ...gameDataState?.elements[data], elementId: data }
+            : undefined;
+        if (nextElement !== undefined) {
+          // console.log('NewElement', nextElement);
 
-    console.log('handleProgress', { elementId, currentJumpers });
-    const jumperOrElement = (id: string) => {
-      console.log('jumperOrElement', { id, currentJumpers });
-
-      if (currentJumpers !== undefined && currentJumpers.length > 0) {
-        for (let i = 0; i < currentJumpers.length; i++) {
-          console.log('currentJumpers[i]', currentJumpers[i]);
-
-          const jumper = currentJumpers[i];
-          if (jumper.jumperId === id) {
-            console.log('jumper translate', jumper.elementId);
-
-            elId = jumper.elementId;
-          }
-          console.log('jumper', { id, jumper, elId });
+          setCurrentElement(nextElement);
+          makeCurrentSectionDialogue(nextElement);
         }
-      }
-      console.log('element', { id, elId });
-
-      elId = id;
-      hasRun = true;
-    };
-
-    jumperOrElement(elId);
-
-    if (hasRun) {
-      console.log('hasRun', elId);
-
-      handleChoice(elId)
-        .then((data) => {
-          console.log('handleChoice returned', { data });
-
-          const nextElement =
-            data !== undefined
-              ? { ...gameDataState?.elements[data], elementId: data }
-              : undefined;
-          if (nextElement !== undefined) {
-            console.log('nextElement', nextElement);
-
-            setCurrentElement(nextElement);
-            makeCurrentSectionDialogue(nextElement);
-          }
-          setIsLoading(false);
-        })
-        .catch((err) => {
-          console.log('handleProgress error: ', { err });
-          setIsLoading(false);
-        });
-      hasRun = false;
-    }
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        console.log('handleProgress error: ', { err });
+        setIsLoading(false);
+      });
   };
 
   return (
@@ -509,12 +484,12 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
       {!isLoading && gameDataState !== null ? (
         <Box
           position="fixed"
-          bottom="22%"
+          bottom="18%"
           flexDirection="column"
           justifyContent="flex-start"
           color="var(--chakra-colors-landing550)"
           textShadow={`0 0 10px var(--chakra-colors-landing500)`}
-          maxW="3xl"
+          maxW="4xl"
           height="100vh"
           maxH="66vh"
           overflowY="auto"
@@ -547,6 +522,28 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
             height="full"
             opacity={onScreen ? 1 : 0}
             transition="opacity 0.5s 0.2s ease-in"
+            sx={{
+              a: {
+                position: 'relative',
+                display: 'inline-flex',
+                lineHeight: '1.7rem',
+                color: 'var(--chakra-colors-landing550)',
+                borderBottom: '2px solid var(--chakra-colors-landing550)',
+                '&::after': {
+                  content: '" "',
+                  display: 'inline-block',
+                  mx: 1,
+                  width: '0.5rem',
+                  height: '0.5rem',
+                  backgroundImage: `url(${externalLinkIcon})`,
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  filter:
+                    'drop-shadow(0 0 0.5rem var(--chakra-colors-landing500))',
+                },
+              },
+            }}
           >
             <Box
               className="question"
@@ -562,14 +559,29 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                   fontSize: 'large',
                   lineHeight: '1.7rem',
                   marginBottom: '1rem',
-                  // opacity: isLoading ? 0 : 1,
-                  // transform: isLoading
-                  //   ? 'translate3d(0, -10px, 0)'
-                  //   : 'translate3d(0, 0, 0)',
-                  // transition:
-                  //   'transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in',
                 },
-
+                blockquote: {
+                  position: 'relative',
+                  fontSize: 'large',
+                  lineHeight: '1.7rem',
+                  marginBottom: '1rem',
+                  pl: 10,
+                  // borderLeft: '5px solid var(--chakra-colors-landing550)',
+                  '&::before': {
+                    content: '"\u275D"',
+                    display: 'block',
+                    position: 'absolute',
+                    top: 3,
+                    left: 2,
+                    fontSize: '6xl',
+                  },
+                },
+                a: {
+                  '&::after': {
+                    content: '" "',
+                    right: -10,
+                  },
+                },
                 '.typing-text': {
                   '&.typed': {
                     display: 'block',
@@ -596,7 +608,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
               <Box
                 opacity={welcomeBack ? 1 : 0}
                 transition="all 0.3s ease"
-                fontSize="3xl"
+                fontSize="2xl"
                 width="100%"
                 visibility={welcomeBack ? 'visible' : 'hidden'}
                 aria-hidden={welcomeBack ? 'false' : 'true'}
@@ -606,7 +618,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
               >
                 Welcome back Anon!
               </Box>
-
+              {/* {currentElement?.elementId && <p>Current element { currentElement.elementId}</p>} */}
               {currentElement &&
                 currentDialogue !== undefined &&
                 currentDialogue.map((dialogue) => dialogue)}
@@ -624,34 +636,6 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                   fontSize: 'large',
                   lineHeight: '1.7rem',
                   marginBottom: '1rem',
-                  // opacity: isLoading ? 0 : 1,
-                  // transform: isLoading
-                  //   ? 'translate3d(0, -10px, 0)'
-                  //   : 'translate3d(0, 0, 0)',
-                  // transition:
-                  //   'transform 0.3s 0.1s ease-in-out, opacity 0.5s 0.2s ease-in',
-                },
-                a: {
-                  position: 'relative',
-                  display: 'inline-flex',
-                  lineHeight: '1.7rem',
-                  color: 'var(--chakra-colors-landing550)',
-                  borderBottom: '2px solid var(--chakra-colors-landing550)',
-                  '&::after': {
-                    content: '" "',
-                    display: 'block',
-                    position: 'absolute',
-                    right: -5,
-                    top: 0,
-                    width: '0.75rem',
-                    height: '0.75rem',
-                    backgroundImage: `url(${externalLinkIcon})`,
-                    backgroundRepeat: 'no-repeat',
-                    backgroundSize: '0.75rem',
-                    backgroundPosition: 'center',
-                    filter:
-                      'drop-shadow(0 0 0.5rem var(--chakra-colors-landing500))',
-                  },
                 },
               }}
             >
@@ -689,9 +673,21 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                 {currentConnections && currentConnections.length > 0 ? (
                   currentConnections.map(
                     (connection: ConnectionStateItem, i: number) => {
-                      const { label } = connection as ConnectionStateItem;
+                      const { label, targetid } =
+                        connection as ConnectionStateItem;
                       const btnText = safelyParseContent(label) as ReactElement;
-                      // console.log('btnText', btnText.props.children);
+
+                      const target = () => {
+                        if (currentJumpers && currentJumpers.length > 0) {
+                          for (let j = 0; j < currentJumpers.length; j++) {
+                            if (currentJumpers[j].jumperId === targetid) {
+                              return currentJumpers[j].elementId;
+                            }
+                          }
+                        }
+                        return targetid;
+                      };
+                      const targetId = target();
 
                       return (
                         <ListItem
@@ -708,7 +704,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                           }s ease-in, transform 0.2s 0.${i * 3}s ease-in-out`}
                         >
                           <Button
-                            onClick={() => handleProgress(connection.targetid)}
+                            onClick={() => handleProgress(targetId)}
                             variant="ghost"
                             px={0}
                             py={0}
@@ -737,50 +733,89 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                               ? btnText.props.children
                               : 'What else?'}
                           </Button>
+                          {/* {connection.targetType === 'jumpers' ? <Box as="p"
+                            sx={{
+                            fontSize: 'sm',
+                            color: 'cyan',
+                            }}>Jumper: {connection.targetid} <br />
+                            ConnectionId: {connection.connectionId} <br />
+                            Target Element: {targetId}</Box> : <Box as="p"
+                            sx={{
+                            fontSize: 'sm',
+                            color: 'white',
+                            }}>ConnectionId: {connection.connectionId} <br />
+                            Target Element: {targetId}</Box>} */}
                         </ListItem>
                       );
                     },
                   )
                 ) : (
                   <Box>
-                    <Text mb={5}>Tumbleweed rolls by...</Text>
+                    <Text mb={5}>The End...</Text>
                   </Box>
                 )}
               </UnorderedList>
               <Button
+                position="fixed"
+                bottom={10}
+                right={0}
                 variant="ghost"
-                display="inline-block"
+                display="inline-flex"
+                alignItems={'center'}
                 fontWeight="normal"
                 transition="all 0.3s ease"
-                textShadow={`0 0 8px var(--chakra-colors-landing500)`}
-                borderBottom="2px solid var(--chakra-colors-landing550)"
+                textShadow={`0 0 8px var(--chakra-colors-landing400)`}
+                border="2px solid transparent"
+                color={'var(--chakra-colors-landing350)'}
                 _hover={{
                   backgroundColor: 'transparent',
-                  color: 'var(--chakra-colors-landing500)',
-                  borderBottom: '2px solid var(--chakra-colors-landing500)',
+                  color: 'var(--chakra-colors-landing300)',
+                  // border: '2px solid var(--chakra-colors-landing300)',
+                  svg: {
+                    filter:
+                      'drop-shadow(0 0 10px var(--chakra-colors-landing300))',
+                  },
                 }}
                 borderRadius="inherit inherit 0 0"
                 wordBreak="break-word"
-                px={0}
+                px={3}
                 textAlign="left"
                 fontSize="large"
                 onClick={handleReset}
               >
-                Start again
+                <MdRestartAlt
+                  size="lg"
+                  filter="drop-shadow(0 0 10px var(--chakra-colors-diamond)"
+                />
+                {/* Reboot system */}
               </Button>
             </Box>
           </Box>
         </Box>
       ) : (
-        // </Box>
-        <BoxedNextImage
-          src={octoImg}
-          animation={pulseAnimation}
+        <Box
           position="relative"
-          width="50%"
-          maxW="lg"
-          height="33%"
-        />
+          display="flex"
+          flexFlow="column wrap"
+          alignContent="center"
+          justifyContent="center"
+          alignItems="center"
+          width="100%"
+          height="100%"
+          textAlign="center"
+        >
+          <Box
+            as="p"
+            fontSize="xl"
+            mt={6}
+            color="var(--chakra-colors-landing550)"
+            textShadow={`0 0 8px var(--chakra-colors-landing500)`}
+          >
+            {hasError
+              ? 'Fatal exception. System shutting down...'
+              : 'Incoming communication...'}
+          </Box>
+        </Box>
       )}
     </Box>
   );

packages/web/components/Landing/OnboardingGame/Rain.tsx

@@ -63,7 +63,7 @@ export function Rain({
           height="100%"
           zIndex={z ? z + 2 : 2}
           backgroundColor="purpleTag30"
-          backdropFilter="blur(5px)"
+          backdropFilter="blur(7px)"
           pointerEvents="none"
         />
       ) : undefined}

packages/web/components/Landing/OnboardingGame/rain.ts

@@ -26,9 +26,19 @@ class RainSymbol {
       'ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ';
     const futhark = 'ÆÐENØÞÞØÆ';
     const nums = '0123456789';
-    // const emojis = '🌞🌝🌚🌑🌒🌓🌔🌕🌖🌗🌘🌙🌛🌜🌚🌙🌘🌗🌖🌕🌔🌓🌒🌑🌐🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜🌝🌞';
+    const emojis = '🐙';
+    const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>/?`~';
+
     this.characters =
-      katakana + latin + nums + ukranian + greek + futhark + germanAndFrench;
+      katakana +
+      latin +
+      nums +
+      ukranian +
+      greek +
+      futhark +
+      germanAndFrench +
+      emojis +
+      symbols;
     this.x = x;
     this.y = y;
     this.fontSize = fontSize;

packages/web/config.ts

@@ -32,5 +32,5 @@ export const CONFIG = {
   web3StorageToken: process.env.WEB3_STORAGE_TOKEN || '',
   openseaApiKey: process.env.OPENSEA_API_KEY || '',
   onboardingGameDataURL:
-    'https://ipfs.fleek.co/ipfs/bafybeidysjcfocrgyww66v4kvxg5ooollmatz7eebgwzxa4dqnek4l32t4',
+    'https://ipfs.fleek.co/ipfs/bafybeig5n6md7kemfjgdbguiepzisrt2y6icxhsj65kyrirs3kqgpv56eu',
 };

packages/web/contexts/GameContext.tsx

@@ -42,7 +42,7 @@ export const GameContextProvider: React.FC = ({ children }) => {
   const fetchGameData = useCallback(async () => {
     try {
       setIsLoading(true);
-      console.log('fetchGameData');
+      console.log('Fetchng GameData...');
 
       const response = await fetch(CONFIG.onboardingGameDataURL);
       const data = (await response.json()) as GameProperties;
@@ -132,15 +132,10 @@ export const GameContextProvider: React.FC = ({ children }) => {
     }
 
     const state = get('OnboardingGameState');
-    console.log('get game state', state);
+    console.log('Saved position', state);
     return state;
   };
 
-  const fakeLoading = (delay: number) =>
-    new Promise((resolve) => {
-      setTimeout(resolve, delay);
-    });
-
   /** Callback function to handle the users choices.
    *
    *  Takes the connected element id from the element's output and routes to the next step
@@ -150,7 +145,7 @@ export const GameContextProvider: React.FC = ({ children }) => {
       try {
         console.log('handleChoice', target);
 
-        await fakeLoading(500);
+        // await fakeLoading(500);
 
         if (target) gameState(target);
         const success = gameState() === target;