morpheus

src/data/20.spawn-process.ts

@@ -4,7 +4,7 @@ export default {
   prevRoute: "10-connect-wallet",
   route: "20-spawn-process",
   nextRoute: "30-hello-ao",
-  title: "Time to bootup a process!",
+  title: "Time to bootup a process! 💡",
   content: `
 A process in AO is like a smart contract that's alive.
 

src/data/30.hello-ao.ts

@@ -4,7 +4,7 @@ export default {
   prevRoute: "20-spawn-process",
   route: "30-hello-ao",
   nextRoute: "40-calculate",
-  title: "Hello AO!",
+  title: "Hello AO! 🤩",
   content: `
 
 In the previous exercise, you spawned a process. Now it's time to write some code for it.

src/data/40.calculate.ts

@@ -4,7 +4,7 @@ export default {
   prevRoute: "30-hello-ao",
   route: "40-calculate",
   nextRoute: "50-variables",
-  title: "Let's Calculate!",
+  title: "Let's Calculate! 🧮",
   content: `
 Just like we printed something before, we can also do mathematical operations on AO using LUA
 

src/data/60.messaging.ts

@@ -3,7 +3,7 @@ import { TExerciseData } from "@/types";
 export default {
   prevRoute: "50-variables",
   route: "60-messaging",
-  nextRoute: "70-my-inbox",
+  nextRoute: "70-morpheus",
   title: "Sending Messages 💬",
   content: `
 Now that you know how to print stuff, do basic calculations and make variables,

src/data/70.morpheus.ts

@@ -0,0 +1,46 @@
+import { TExerciseData } from "@/types";
+
+export default {
+  prevRoute: "60-messaging",
+  route: "70-morpheus",
+  nextRoute: "80-my-inbox",
+  title: "Reb pill or blue pill? 💊",
+  content: `
+
+*"This is your last chance. After this, there is no turning back. You take the blue pill -
+the story ends, you wake up in your bed and believe whatever you want to believe. You take
+the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes"*
+
+---
+
+# TASK
+
+1. Use the process ID provided below and store it as a variable called "Morpheus".
+
+\`wu_tAUDUveetQZpcN8UxHt51d9dyUkI4Z-MfQV8LnUU\`
+
+2. Send a message to Morpheus
+
+\`Send({ Target = Morpheus, Data = "Morpheus?" })\`
+
+3. You will receive a reply from Morpheus. Print the message.
+
+---
+
+`,
+  defaultCode: `-- Declare the variable Morpheus below this line
+Morpheus = ...
+
+Send({
+  Target = Morpheus,
+  Data = "Wake up Neo!"
+})
+
+-- After you get a message from Morpheus
+-- Comment the above code and run the following:
+-- Inbox[#Inbox].Data
+`,
+  expectedResult: "I am here. You are finally awake. Are you ready to see how far the rabbit hole goes?",
+  fromId: "SELF",
+  validateTimestamp: false,
+} as TExerciseData;

src/data/70.inbox.ts → src/data/80.inbox.ts

@@ -1,9 +1,9 @@
 import { TExerciseData } from "@/types";
 
 export default {
+  prevRoute: "70-morpheus",
+  route: "80-my-inbox",
   nextRoute: "/",
-  route: "70-my-inbox",
-  prevRoute: "60-messaging",
   title: "Checking Inbox 📥",
   content: `
 So we know how to send messages, but how do we check what messages we have received?

src/data/index.ts

@@ -7,5 +7,6 @@ export default {
   "40-calculate": require("@/data/40.calculate").default,
   "50-variables": require("@/data/50.variables").default,
   "60-messaging": require("@/data/60.messaging").default,
-  "70-my-inbox": require("@/data/70.inbox").default,
+  "70-morpheus": require("@/data/70.morpheus").default,
+  "80-my-inbox": require("@/data/80.inbox").default,
 } as { [foo: string]: TExerciseData };

src/pages/index.tsx

@@ -7,20 +7,23 @@ export default function Home() {
 
   return (
     <div className="flex flex-col items-center justify-center gap-3 p-3">
-      <div className="text-3xl">Exercises:</div>
-      {/* <div className="grid grid-cols-12 gap-2 aspect-square"> */}
-      {Object.keys(data).map((e: string, _) => (
-        <Button
-          key={_}
-          variant="outline"
-          className="min-w-[269px]"
-          onClick={() => router.push(`/${data[e].route}`)}
-        >
-          {/* {_ + 1} */}
-          {data[e].title}
-        </Button>
-      ))}
-      {/* </div> */}
+      <div className="text-3xl">Welcome to Learn AO</div>
+      <div className="py-2">
+        These are a series of interactive exercises you can do to learn how to develop on AO step by step
+      </div>
+      <div className="grid grid-cols-4 gap-2">
+        {Object.keys(data).map((e: string, _) => (
+          <Button
+            key={_}
+            variant="outline"
+            className="min-w-[269px] font-mono p-10 relative"
+            onClick={() => router.push(`/${data[e].route}`)}
+          >
+            <div className="absolute top-2 left-3">{_ + 1}</div>
+            {data[e].title}
+          </Button>
+        ))}
+      </div>
     </div>
   );
 }