From 0861b053d8f5bd13e8323115df11a37a2e77b706 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Sun, 19 May 2024 22:05:01 -0500
Subject: [PATCH] Implement stdout print

---
 src/components/InteractiveCode.astro   | 22 +++++++++++++++++++---
 src/pages/learn/basics/hello-world.mdx | 14 +++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/InteractiveCode.astro b/src/components/InteractiveCode.astro
index b875794..3125473 100644
--- a/src/components/InteractiveCode.astro
+++ b/src/components/InteractiveCode.astro
@@ -125,14 +125,17 @@ const codeHtml = highlightCode(trimAndDedent(code));
         </div>
     </div>
     <div class="border-t border-white p-1">
-        <button class="font-mono px-1 rounded bg-pink-950" @click="alpineNext($data)" :disabled="done && 'true'">
-            Step
+        <button class="font-mono px-1 rounded bg-pink-950 disabled:opacity-50 disabled:cursor-not-allowed" @click="alpineNext($data)" :disabled="done && 'true'">
+            Step: <span x-text="ip"></span>
+        </button>
+        <button class="font-mono px-1 rounded bg-pink-950" @click="alpineReset($data)">
+            Reset
         </button>
     </div>
 </div>
 
 <script>
-    type Instruction = "line" ;
+    type Instruction = "line" | "out" ;
     type AlpineState = {
         line: number,
         stdout: string,
@@ -155,6 +158,10 @@ const codeHtml = highlightCode(trimAndDedent(code));
                     data.line = Number(instructionArr[1]);
                     break;
                 }
+                case "out": {
+                    data.stdout += String(instructionArr[1])
+                    break;
+                }
             }
         }
 
@@ -166,4 +173,13 @@ const codeHtml = highlightCode(trimAndDedent(code));
     }
     // @ts-ignore
     window.alpineNext = alpineNext;
+    
+    function alpineReset(data: AlpineState) {
+        data.line = 0;
+        data.stdout = "";
+        data.ip = 0;
+        data.done = false;
+    }
+    // @ts-ignore
+    window.alpineReset = alpineReset;
 </script>
diff --git a/src/pages/learn/basics/hello-world.mdx b/src/pages/learn/basics/hello-world.mdx
index 778315c..592ad64 100644
--- a/src/pages/learn/basics/hello-world.mdx
+++ b/src/pages/learn/basics/hello-world.mdx
@@ -38,5 +38,17 @@ f(x, y)
 
     f(x, y)
     `}
-    steps={`[ [["line", 1]], [["line", 2]] ]`}
+    steps={`[
+        [["line", 1]],
+        [["line", 2]],
+        [["line", 8]],
+        [["line", 4]],
+        [["line", 5]],
+        [
+            ["out", "gaaaa 322 322"],
+            ["line", 6]
+        ],
+        [["line", 8]],
+        [["line", 0]]
+    ]`}
 ></InteractiveCode>