WHY WONT IT PARSE THE LAST FUCKING BYTE AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH

2025-10-10 23:21:49 -06:00
parent 69a89cf78e
commit fa16da8178
9 changed files with 1039 additions and 54 deletions
@@ -1,12 +1,114 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
    <meta charset="utf-8">
-    <title>FEWD Hello!</title>
-    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <title>WF Compiler Demo</title>
+    <link rel="stylesheet" href="./default.css">
 </head>
 <body>
-    <h1 x-data = "{message: 'Hello, Alpine!'}"
-        x-text = "message"></h1>
+    <div class="content">
+        <h1 class="content-title">WFC Demo</h1>
+
+        <div class="content-body">
+            <textarea id="wfc-output"
+                      disabled
+            ></textarea>
+            <input autofocus id="wfc-input"></textarea>
+
+            <h2>Settings</h2>
+            <input type="checkbox" checked id="auto-resize-output">Auto-resize output</input> <br>
+            <input type="checkbox" checked id="auto-scroll"       >Auto-scroll output to bottom</input>
+        </div>
+    </div>
+
+    <script>
+        let ielt = document.getElementById('wfc-input');
+        let oelt = document.getElementById('wfc-output');
+        let MAX_OELT_HEIGHT = 100;
+
+        function auto_resize_output() {
+            // if the user has manually resized their output, we do nothing
+            if (document.getElementById('auto-resize-output').checked) {
+                // resize it automagically up to 500px
+                if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
+                    oelt.style.height = String(oelt.scrollHeight) + 'px';
+                }
+                else {
+                    oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
+                }
+            }
+        }
+
+        function auto_scroll_to_bottom() {
+            if (document.getElementById('auto-scroll').checked) {
+                // scroll to bottom
+                oelt.scrollTop = oelt.scrollHeight;
+            }
+        }
+
+        function on_server_return(x) {
+            console.log('on_server_return:', x);
+        }
+
+        function on_some_bullshit(x) {
+            console.log('on_some_bullshit:', x);
+        }
+
+        function fetch_wfcin(user_line) {
+            let req_body_obj = {wfcin: user_line};
+            // let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
+            let req_body_str = JSON.stringify(req_body_obj);
+
+            let req_options  = {method:  'POST',
+                                headers: {'content-type': 'application/json'},
+                                body:    req_body_str};
+
+            let response_promise = fetch('/wfcin', req_options);
+
+            response_promise.then(on_server_return, on_some_bullshit);
+
+            // this is a promise for a response
+            //console.log(response_promise);
+        }
+
+        // when user hits any key
+        function on_input_key(evt) {
+            if (evt.key === 'Enter') {
+                // don't do default thing
+                evt.preventDefault();
+                // grab contents
+                let contents = ielt.value;
+                // if contents are nonempty
+                let nonempty_contents = contents.trim().length > 0;
+                if (nonempty_contents) {
+                    // put in output
+                    // if it's nonempty add a newline
+                    if (oelt.value.length > 0) {
+                        oelt.value += '\n';
+                    }
+                    oelt.value += '> ' + contents;
+                    oelt.hidden = false;
+
+                    // query backend for result
+                    fetch_wfcin(contents.trim());
+
+                    // clear input
+                    ielt.value = '';
+
+                    // auto-resize
+                    auto_resize_output();
+                    auto_scroll_to_bottom();
+
+
+                }
+            }
+        }
+
+        function main() {
+            ielt.addEventListener('keydown', on_input_key);
+        }
+
+        main();
+    </script>
 </body>
 </html>