From 232cda93b41e874cc4f6f6f55adcd67ae72c251d Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Sat, 2 Jan 2021 17:20:13 +0100
Subject: [PATCH] Added @paddim8/kalk to kalk_web

---
 kalk_web/src/Calculator.svelte | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/kalk_web/src/Calculator.svelte b/kalk_web/src/Calculator.svelte
index b1ab107..27676a3 100644
--- a/kalk_web/src/Calculator.svelte
+++ b/kalk_web/src/Calculator.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
     let outputLines: string[] = [];
-    function handleKeyDown(event: KeyboardEvent) {
+    let kalkContext;
+    function handleKeyDown(event: KeyboardEvent, kalk) {
         if (event.key == "Enter") {
             const target = event.target as HTMLInputElement;
-            outputLines = [...outputLines, target.innerHTML];
+            const input = target.textContent;
+
+            // Calculate
+            if (!kalkContext) kalkContext = new kalk.Context();
+            const output = kalkContext.evaluate(input).toString();
+
+            outputLines = [...outputLines, input, output];
             target.innerHTML = "";
         }
     }
@@ -12,7 +19,6 @@
         const target = event.target as HTMLInputElement;
         const cursorPos = getCursorPos(target);
         const [highlighted, offset] = highlight(target.textContent);
-        console.log(highlighted);
         target.innerHTML = highlighted;
         setCursorPos(target, cursorPos - offset);
     }
@@ -188,11 +194,13 @@
     </div>
     <div class="input-area">
         <span class="prompt">&gt;&gt;&nbsp;</span>
-        <div
-            contenteditable="true"
-            class="input"
-            on:keydown={handleKeyDown}
-            on:input={handleInput}
-            role="textbox" />
+        {#await import('@paddim8/kalk') then kalk}
+            <div
+                contenteditable="true"
+                class="input"
+                on:keydown={(event) => handleKeyDown(event, kalk)}
+                on:input={handleInput}
+                role="textbox" />
+        {/await}
     </div>
 </div>