From 0d4aad83da113804c3e05a040e2dc5dd46363685 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Sun, 19 May 2024 22:11:19 -0500
Subject: [PATCH] Implement state

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

diff --git a/src/components/InteractiveCode.astro b/src/components/InteractiveCode.astro
index 3125473..b39811c 100644
--- a/src/components/InteractiveCode.astro
+++ b/src/components/InteractiveCode.astro
@@ -106,6 +106,7 @@ const codeHtml = highlightCode(trimAndDedent(code));
         ip: 0,
         inst: ${steps},
         done: false,
+        state: {},
     }`}
 >
     <span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span>
@@ -120,7 +121,9 @@ const codeHtml = highlightCode(trimAndDedent(code));
         <div>
             <div class="p-1 border-b border-white">state</div>
             <div class="h-24 p-1">
-                x = 20
+                <template x-for="(value, key) in state">
+                    <div x-text="key + ' = ' + value"></div>
+                </template>
             </div>
         </div>
     </div>
@@ -135,13 +138,14 @@ const codeHtml = highlightCode(trimAndDedent(code));
 </div>
 
 <script>
-    type Instruction = "line" | "out" ;
+    type Instruction = "line" | "out" | "set";
     type AlpineState = {
         line: number,
         stdout: string,
         ip: number,
-        inst: Array<Array<[Instruction, number]>>
+        inst: Array<Array<[Instruction, string, string | undefined]>>
         done: boolean,
+        state: {[key: string]: string},
     }
 
     /// Executes the instruction following the state of the machine.
@@ -162,11 +166,14 @@ const codeHtml = highlightCode(trimAndDedent(code));
                     data.stdout += String(instructionArr[1])
                     break;
                 }
+                case "set": {
+                    data.state[String(instructionArr[1])] = String(instructionArr[2]);
+                    break;
+                }
             }
         }
 
         if (data.ip >= len) {
-            console.log("done");
             data.done = true;
             return;
         }
@@ -179,6 +186,7 @@ const codeHtml = highlightCode(trimAndDedent(code));
         data.stdout = "";
         data.ip = 0;
         data.done = false;
+        data.state = {};
     }
     // @ts-ignore
     window.alpineReset = alpineReset;
diff --git a/src/pages/learn/basics/hello-world.mdx b/src/pages/learn/basics/hello-world.mdx
index 592ad64..ba6f9e3 100644
--- a/src/pages/learn/basics/hello-world.mdx
+++ b/src/pages/learn/basics/hello-world.mdx
@@ -16,32 +16,27 @@ Then run `thp hello.thp`
 
 ## Try
 
-```thp
-val x = 322
-val y = 322
-
-fun f(Int x, Int y) {
-    print("gaaaa {x} {y}")
-}
-
-f(x, y)
-```
-
 <InteractiveCode 
     code={`
     val x = 322
     var y = 322
 
-    fun f(Int x, Int y) {
-        print("gaaaa {x} {y}")
+    fun f(Int a, Int b) {
+        print("hello {a} {b}")
     }
 
     f(x, y)
     `}
     steps={`[
         [["line", 1]],
-        [["line", 2]],
-        [["line", 8]],
+        [
+            ["line", 2],
+            ["set", "x", "322"]
+        ],
+        [
+            ["line", 8],
+            ["set", "y", "322"]
+        ],
         [["line", 4]],
         [["line", 5]],
         [