Update playground

Reviewed-on: max/sols.dev#2

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "pkgs"]
+	path = pkgs
+	url = https://chookspace.com/solstice/pkgs

docs/highlight.js

@@ -0,0 +1,118 @@
+// Solstice Syntax Highlighter
+// Add this script to your HTML file before the closing </body> tag
+
+document.addEventListener('DOMContentLoaded', function() {
+    highlightAllCode();
+});
+
+function highlightAllCode() {
+    const codeElements = document.querySelectorAll('pre.code code');
+    codeElements.forEach(element => {
+        // Get the text content (this automatically decodes HTML entities)
+        const code = element.textContent;
+        element.innerHTML = highlightSolstice(code);
+    });
+}
+
+function highlightSolstice(code) {
+    let result = '';
+    let i = 0;
+    
+    // Tokenize the code
+    while (i < code.length) {
+        let matched = false;
+        
+        // Check for comments
+        if (code.substr(i, 2) === '//') {
+            let end = code.indexOf('\n', i);
+            if (end === -1) end = code.length;
+            result += `<span class="comment">${escapeHtml(code.substring(i, end))}</span>`;
+            i = end;
+            matched = true;
+        }
+        
+        // Check for strings
+        else if (code[i] === '"') {
+            let end = i + 1;
+            while (end < code.length && code[end] !== '"') {
+                if (code[end] === '\\') end++; // Skip escaped characters
+                end++;
+            }
+            end++; // Include closing quote
+            result += `<span class="string">${escapeHtml(code.substring(i, end))}</span>`;
+            i = end;
+            matched = true;
+        }
+        
+        // Check for numbers
+        else if (/\d/.test(code[i])) {
+            let end = i;
+            while (end < code.length && /[\d.]/.test(code[end])) {
+                end++;
+            }
+            result += `<span class="number">${code.substring(i, end)}</span>`;
+            i = end;
+            matched = true;
+        }
+        
+        // Check for keywords, types, built-ins, and identifiers
+        else if (/[a-zA-Z_]/.test(code[i])) {
+            let end = i;
+            while (end < code.length && /[a-zA-Z0-9_]/.test(code[end])) {
+                end++;
+            }
+            const word = code.substring(i, end);
+            
+            // Check what type of word it is
+            if (['def', 'if', 'while', 'return', 'ground', 'puts', 'def', 'struct', 'new', 'use'].includes(word)) {
+                result += `<span class="keyword">${word}</span>`;
+            } else if (['input', 'print', 'println'].includes(word)) {
+                result += `<span class="builtin">${word}</span>`;
+            } else if (['int', 'double', 'string', 'char', 'bool'].includes(word)) {
+                result += `<span class="type">${word}</span>`;
+            } else if (['true', 'false'].includes(word)) {
+                result += `<span class="boolean">${word}</span>`;
+            } else {
+                // Check if it's a function call (followed by '(')
+                let j = end;
+                while (j < code.length && /\s/.test(code[j])) j++;
+                if (code[j] === '(') {
+                    result += `<span class="function">${word}</span>`;
+                } else {
+                    result += word;
+                }
+            }
+            i = end;
+            matched = true;
+        }
+        
+        // Check for operators
+        else if ('+-*/=!<>:'.includes(code[i])) {
+            let op = code[i];
+            if (i + 1 < code.length && '='.includes(code[i + 1])) {
+                op += code[i + 1];
+                i++;
+            }
+            result += `<span class="operator">${escapeHtml(op)}</span>`;
+            i++;
+            matched = true;
+        }
+        
+        // Everything else (whitespace, braces, etc.)
+        if (!matched) {
+            result += escapeHtml(code[i]);
+            i++;
+        }
+    }
+    
+    return result;
+}
+
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}

docs/index.css

@@ -78,3 +78,42 @@ h2 {
 h3 {
     font-size: 25px;
 }
+
+/* Syntax highlighting styles for Solstice */
+.comment {
+    color: #6c757d;
+    font-style: italic;
+}
+
+.string {
+    color: #98c379;
+}
+
+.number {
+    color: #d19a66;
+}
+
+.keyword {
+    color: #c678dd;
+    font-weight: bold;
+}
+
+.builtin {
+    color: #61afef;
+}
+
+.type {
+    color: #e5c07b;
+}
+
+.boolean {
+    color: #d19a66;
+}
+
+.operator {
+    color: #56b6c2;
+}
+
+.function {
+    color: #61afef;
+}

docs/index.html

@@ -6,6 +6,7 @@
         <title>Solstice Docs</title>
         <link rel="stylesheet" href="https://sols.dev/index.css">
         <link rel="stylesheet" href="index.css">
+        <script src="highlight.js"></script>
     </head>
     <body>
         <div class="box">
@@ -17,23 +18,31 @@
                         <li><strong><a href="#type_system">Type System</a></strong></li>
                         <li><a href="#value_types">Value Types</a></li>
                         <li><a href="#type_checker">Type Checker</a></li>
+                        <li><a href="#object_types">Types of Functions, Templates, and Objects</a></li>
+                        <li><strong><a href="#structs">Structs, Templates and Objects</a></strong></li>
+                        <li><strong><a href="#inline_ground">Inline Ground</a></strong></li>
                         <li><strong><a href="#builtins">Built In Functions</a></strong></li>
                         <li><a href="#input_string_msg__string">input(string msg) string</a></li>
+                        <li><a href="#print_string_msg__string">print(string msg) string</a></li>
+                        <li><a href="#println_string_msg__string">println(string msg) string</a></li>
+                        <li><strong><a href="#nativecompiler">Native Compiler</a></strong></li>
                     </ul>
                 </div>
                 <div class="content">
                     <h1>Solstice Docs</h1>
                     <p>Welcome to the Solstice docs! Feel free to read in whichever order you like, or come back when you feel like it. You can read these head to tail if you want to understand the whole of the language as well.</p>
-                    <p>See a mistake? Report it at <a href="https://chsp.au/max/sols.dev">this site's repository</a>.
+                    <p>See a mistake? Report it at <a href="https://chookspace.com/max/sols.dev">this site's repository</a>.
                     <p>Happy coding!</p>
                     <div id="core_concepts">
                         <h2>Core Concepts</h2>
                         <p>Solstice is a high level programming language. It compiles to Ground's bytecode.</p>
                         <h3>The <code>solstice</code> command</h3>
                         <p>Solstice's compiler is invoked via the <code>solstice</code> command. It provides some options:</p>
+                        <p>Note: For now, as we transition to the C-based compiler, Solstice does not support extra flags, and can only run and print code (printing with the -p flag)</p>
                         <ul>
                             <li><code>-o</code> or <code>--output</code>: Tells Solstice where to output a compiled file.</li>
-                            <li><code>-t</code> or <code>--type</code>: Tells Solstice the type of file to output.<br>At present, Solstice only supports Ground source files as an output type, but more types may be added in future.</li> 
+                            <li><code>-t</code> or <code>--type</code>: Tells Solstice the type of file to output.
+                                This can either be "ground" or "program". "ground" outputs a .grnd program, and "program" outputs a compiled native executable. See <a href="#nativecompiler">here</a> for details.</li> 
                         </ul>
                         <p>Example usage:</p>
                         <pre class="code"><code>solstice fib.sols -o fib.grnd</code></pre>
@@ -57,16 +66,20 @@ puts true
 puts "You can print out anything with puts!"</code></pre>
                         <h3>Variables</h3>
                         <p>Solstice variables are quite simple. Assign values with <code>=</code>, and read them with the variable name.</p>
-                        <pre class="code"><code>x = 5<br>puts x</code></pre>
+                        <pre class="code"><code>x = 5
+puts x</code></pre>
                         <p>Types are automatically inferred by Solstice.</p>
                         <h3>Maths</h3>
                         <p>You can use <code>+</code> (add), <code>-</code> (subtract), <code>*</code> (multiply), and <code>/</code> (divide) to do math.</p>
                         <p>Math operations take two values on either side, and perform the operation. Order of operations is supported.</p> 
-                        <pre class="code"><code>x = 5 + 3<br>y = 10<br>puts x + y</code></pre>
+                        <pre class="code"><code>x = 5 + 3
+y = 10
+puts x + y</code></pre>
                         <h3>Control Flow and Equalities</h3>
                         <p>Solstice supports <code>if</code> and <code>while</code> statements, as well as the <code>==</code>, <code>!=</code>, <code>></code>, <code>>=</code>, <code><</code>, and <code><=</code> operations.</p>
                         <p>Conditionals work just like maths: two values on either side, check whether the condition is correct or not based on those values, and output a boolean.</p>
-                        <pre class="code"><code>puts 5 == 5<br>puts 5 != 5</code></pre>
+                        <pre class="code"><code>puts 5 == 5
+puts 5 != 5</code></pre>
                         <p><code>if</code> and <code>while</code> statements take a conditional, and then a code block afterwards. See these examples:</p>
                         <pre class="code"><code>x = 5
 if x &gt; 10 {
@@ -88,7 +101,9 @@ while number &lt; 10 {
                         </code>
                         <h3>Functions</h3>
                         <p><strong>Note:</strong> Functions in Solstice are currently in beta. Type checking for functions is currently experimental, and arguments may not work as intended. Be warned!</p>
-                        <p>In Solstice, function definitions have a syntax like this: <pre class="code"><code>def functionName(type arg1, type arg2, type arg3) returnType {<br>    // code goes here<br>}</code></pre></p>
+                        <p>In Solstice, function definitions have a syntax like this: <pre class="code"><code>def functionName(type arg1, type arg2, type arg3) returnType {
+    // code goes here
+}</code></pre></p>
                         <p>Your types can be <code>int</code>, <code>double</code>, <code>string</code>, <code>bool</code>, or <code>char</code> (see the "Type System" section for more details)</p>
                         <p>Return a value (which must be the same type as your <code>returnType</code>) with <code>return value</code>.</p>
                         <p>Here's an example function:</p>
@@ -97,6 +112,11 @@ while number &lt; 10 {
 }</code></pre>
                         <h3>Calling Functions</h3>
                         <p>Function calling is done like in most other programming languages, with the syntax <code>function(arg1, arg2, arg3)</code>.</p>
+                        <h3>Importing Other Code</h3>
+                        <p>Solstice allows you to write libraries in Solstice, or write wrappers for Ground libraries. Use the <code>use</code> keyword, followed by an identifier to import the library.</p>
+                        <pre class="code"><code>use io
+
+println("Hello!")</code></pre>
                         <h3>That's it!</h3>
                         <p>You now know everything you need to know about Solstice to start programming! You can continue reading for more information.</p>
                     </div>
@@ -113,6 +133,15 @@ while number &lt; 10 {
                                 <li><code>bool</code>: Either true or false</li>
                             </ul>
                         </div>
+                        <div id="object_types">
+                            <h3>Types of Functions, Templates, and Objects</h3>
+                            <p>The type signature of a function looks like this:</p>
+                            <pre class="code"><code>fun(argType, argType, argType) returnType</code></pre>
+                            <p>The type signature of a template looks like this:</p>
+                            <pre class="code"><code>template(fieldType fieldName, fieldType fieldName, fieldType fieldName)</code></pre>
+                            <p>The type signature of an object looks like this:</p>
+                            <pre class="code"><code>object(fieldType fieldName, fieldType fieldName, fieldType fieldName)</code></pre>
+                        </div>
                         <div id="type_checker">
                             <h3>Type Checker</h3>
                             <p>Solstice statically checks types at compile time to ensure your data is used as intended. These are the details of the type checker.</p>
@@ -125,13 +154,69 @@ while number &lt; 10 {
                             </ul>
                         </div>
                     </div>
+                    <div id="structs">
+                        <h2>Structs, templates and objects</h2>
+                        <p><strong>Note:</strong> Structs, templates, and objects in Solstice are currently in beta. A lot of work in the type checker has been done, but accessing fields is still an issue.</p>
+                        <p>In Solstice, you can create a struct to group various bits of data together. You can specify default values for each field with <code>:</code> or <code>=</code>.</p>
+                        <pre class="code"><code>struct Person {
+    name: "John"
+    age: 32
+}</code></pre>
+                        <p>This struct generates a template named "Person" which can be used later to generate new objects.</p>
+                        <p>You can use the <code>new</code> operator to create new instances of templates.</p>
+                        <pre class="code"><code>max = new Person</code></pre>
+                    </div>
+                    <div id="inline_ground">
+                        <h2>Inline Ground</h2>
+                        <p>Since Solstice is built atop Ground, you can write Ground code inside Solstice code, usually to wrap a Ground function for the Solstice standard library.</p>
+                        <p>Inline Ground is not vetted by the type checker. <strong>Be careful when modifying existing variables with inline ground!</strong> The type checker is not aware of any values created inside inline Ground.</p>
+                        <p>If you would like the Solstice type checker to be aware of values created by Ground, initialise a variable with a blank of whatever type is made by Ground.</p>
+                        <p>Variable names are the same inside inline Ground as they are in Solstice. Read Ground's syntax guide for an understanding on how it should work <a href="https://chookspace.com/ground/cground/src/branch/master/docs/syntax.md">here</a>.</p>
+                        <pre class="code"><code>ground {
+    set &x 5
+    println $x
+}</code></pre>
+                    </div>
                     <div id="builtins">
                         <h2>Built In Functions</h2>
+                        <h3><code>io</code> library</h3>
                         <div id="input_string_msg__string">
-                            <h3>input(string msg) string</h3>
+                            <h4>input(string msg) string</h4>
                             <p>Gets user input from the console until the next line. The msg is used as a prompt for the user. Returns inputted characters from the console.</p>
-                            <pre class="code"><code>guess = input("What is the password? ")<br>if guess == "password123" {<br>    puts "Good job!"<br>}</code></pre>
+                            <pre class="code"><code>use io
+
+guess = input("What is the password? ")
+if guess == "password123" {
+    puts "Good job!"
+}</code></pre>
                         </div>
+                        <div id="print_string_msg__string">
+                            <h4>print(string msg) string</h4>
+                            <p>Prints a string to the console.</p>
+                            <pre class="code"><code>use io
+
+print("Hello, World!")</code></pre>
+                        </div>
+                        <div id="println_string_msg__string">
+                            <h4>println(string msg) string</h4>
+                            <p>Prints a string to the console. Appends a new line afterwards.</p>
+                            <pre class="code"><code>use io
+
+println("Hello, World!")</code></pre>
+                        </div>
+                    </div>
+                    <div id="nativecompiler">
+                        <h2>Native Compiler</h2>
+                        <p>Ground has recently added a Ground->Native compiler which allows much faster execution of Ground programs.</p>
+                        <p>However, this is quite early in development, and only supports some features:</p>
+                        <ul>
+                            <li>int data type - No other data type is currently supported.</li>
+                            <li>No functions at present</li>
+                        </ul>
+                        <p>To try the native compiler, use this command:</p>
+                        <pre class="code"><code>solstice program.sols --output program --type native</code></pre>
+                        <h3>Debugging</h3>
+                        <p>Solstice will create a temporary folder in your current directory which you can remove called ".(outputname)_solsbuild". In this folder is the assembly and object file generated by the compiler. If you think that there's a bug with Ground or Solstice, you can use these to find the issue.</p>
                     </div>
                 </div>
             </div>

index.html

@@ -14,7 +14,7 @@
                     <img src="https://sols.dev/solstice.svg" width="200" height="200" alt="Solstice logo"></img>
                     <h1>Solstice</h1>
                     <p class="big">A programming language focused on ease of use.</p>
-                    <button onclick="window.location.href = 'https://chsp.au/max/solstice'">View Code</button>
+                    <button onclick="window.location.href = 'https://chookspace.com/max/solstice'">View Code</button>
                     <button onclick="window.location.href = '#installing'">Install</button>
                     <button onclick="window.location.href = '/playground'">Try Online</button>
                     <button onclick="window.location.href = '/docs'">View Docs</button>
@@ -25,11 +25,11 @@
                 <div class="feature-row">
                     <div class="feature">
                         <h3>Small and fast</h3>
-                        <p>Solstice's compiler is 1833 lines of C++, and compiles code at lightning speed.</p>
+                        <p>Solstice's compiler is ~3500 lines of C, and compiles code at lightning speed.</p>
                     </div>
                     <div class="feature">
                         <h3>Built on Ground</h3>
-                        <p>Solstice compiles for the Ground VM, a speedy, light platform.</p>
+                        <p>Solstice compiles for the Ground VM, a speedy, light platform. It can even compile to a native executable.</p>
                     </div>
                     <div class="feature">
                         <h3>Simple syntax</h3>
@@ -62,7 +62,10 @@ puts a</code></pre>
                     <div class="feature">
                         <h3>Guess The Password</h3>
                         <pre class="code">
-<code>accessNotGranted = true
+<code>
+use io
+
+accessNotGranted = true
 
 while accessNotGranted {
     password = input("Password: ")
@@ -90,12 +93,12 @@ while number < 100000 {
             </div>
             <div class="box" id="installing">
                 <h2>Getting Solstice</h2>
-                <p>Solstice is an in-development language, and you can find the latest code on the <a href="https://chsp.au/max/solstice">Git repository</a>. At present, the stability of Solstice is questionable, so don't trust it to handle your nuclear codes or anything like that yet.</p>
+                <p>Solstice is an in-development language, and you can find the latest code on the <a href="https://chookspace.com/max/solstice">Git repository</a>. At present, the stability of Solstice is questionable, so don't trust it to handle your nuclear codes or anything like that yet.</p>
                 <p>This script will automatically build and install Solstice and Ground from source for you, or update them if they are already installed.</p>
                 <pre class="code" style="overflow-y: auto">
 <code>bash -c "$(curl -fsSL https://sols.dev/install.sh)"</code></pre>
-                <p>If you find any issues while trying Solstice, please report them <a href="https://chsp.au/max/solstice/issues">here</a>! Solstice needs all the help it can get.</p>
+                <p>If you find any issues while trying Solstice, please report them <a href="https://chookspace.com/max/solstice/issues">here</a>! Solstice needs all the help it can get.</p>
-                <p>Stable-ish builds are avaliable in <a href="https://chsp.au/max/solstice/releases">the releases tab</a> of the Git repository. These builds are likely to be more stable, but don't treat them as a stable branch yet.</p>
+                <p>Stable-ish builds are avaliable in <a href="https://chookspace.com/max/solstice/releases">the releases tab</a> of the Git repository. These builds are likely to be more stable, but don't treat them as a stable branch yet.</p>
                 <p>Once you've installed, <a href="/docs">read the docs</a> to get started.</p>
             </div>
         </div>

install.sh

@@ -18,9 +18,9 @@ then
     exit 0;
 fi
 
-if ! command -v gmake 2>&1 >/dev/null
+if ! command -v make 2>&1 >/dev/null
 then
-    echo "gmake is not installed on your system. Install it with your package manager (or on macOS use xcode-select)"
+    echo "make is not installed on your system. Install it with your package manager (or on macOS use xcode-select)"
     exit 0;
 fi
 
@@ -60,8 +60,7 @@ then
     git clone https://chookspace.com/max/solstice
     cd solstice
     make
-    sudo mkdir -p /usr/local/bin
+    sudo make install
-    sudo cp solstice /usr/local/bin/solstice
     echo "Success!"
     exit 0
 fi
@@ -80,11 +79,13 @@ then
 fi
 echo "Updating Ground..."
 git pull
-make
+make clean
+make both
 sudo make install
 cd ..
 echo "Updating Solstice..."
 cd solstice
 git pull
+make clean
 make
-sudo cp solstice /usr/local/bin/solstice
+sudo make install

node_modules/.mf/cf.json

@@ -1 +1 @@
-{"httpProtocol":"HTTP/1.1","clientAcceptEncoding":"gzip, deflate, br","requestPriority":"","edgeRequestKeepAliveStatus":1,"requestHeaderNames":{},"clientTcpRtt":15,"colo":"SYD","asn":1221,"asOrganization":"Telstra Limited","country":"AU","isEUCountry":false,"city":"Sydney","continent":"OC","region":"New South Wales","regionCode":"NSW","timezone":"Australia/Sydney","longitude":"151.20732","latitude":"-33.86785","postalCode":"1001","tlsVersion":"TLSv1.3","tlsCipher":"AEAD-AES256-GCM-SHA384","tlsClientRandom":"VnosRll56NurYMmPAR45l8rG4I2Nklvmcb+fGaOXVTI=","tlsClientCiphersSha1":"kXrN3VEKDdzz2cPKTQaKzpxVTxQ=","tlsClientExtensionsSha1":"1eY97BUYYO8vDaTfHQywB1pcNdM=","tlsClientExtensionsSha1Le":"u4wtEMFQBY18l3BzHAvORm+KGRw=","tlsExportedAuthenticator":{"clientHandshake":"1dfbe7451ef201532a216471f87886dfd3d290b649ac6787f187e7a296c886e53a496bd6b59c693b87f2d5b78c90e5b4","serverHandshake":"f7b332d2f13f55a5ccd91cff8554173516c5141b77e217c37b7a2b1ee552da7c6a7abbb66b27c722d1adbfd96266d778","clientFinished":"01042563ecd01453b385f6679691fe23b1ba391e1d3faa8accca1c80dad3e39e69f8ceb924a9640b7b527f1c2dbddab9","serverFinished":"38937607097ad8fc3847b2cf632b60444be3233468e24bceaaf05ea263c7ea5bb3e8c62fedc65ad96ce62ffd3db9937e"},"tlsClientHelloLength":"1603","tlsClientAuth":{"certPresented":"0","certVerified":"NONE","certRevoked":"0","certIssuerDN":"","certSubjectDN":"","certIssuerDNRFC2253":"","certSubjectDNRFC2253":"","certIssuerDNLegacy":"","certSubjectDNLegacy":"","certSerial":"","certIssuerSerial":"","certSKI":"","certIssuerSKI":"","certFingerprintSHA1":"","certFingerprintSHA256":"","certNotBefore":"","certNotAfter":""},"verifiedBotCategory":"","botManagement":{"corporateProxy":false,"verifiedBot":false,"jsDetection":{"passed":false},"staticResource":false,"detectionIds":{},"score":99}}
+{"httpProtocol":"HTTP/1.1","clientAcceptEncoding":"gzip, deflate, br","requestPriority":"","edgeRequestKeepAliveStatus":1,"requestHeaderNames":{},"clientTcpRtt":26,"colo":"SYD","asn":9443,"asOrganization":"Vocus","country":"AU","isEUCountry":false,"city":"Sydney","continent":"OC","region":"New South Wales","regionCode":"NSW","timezone":"Australia/Sydney","longitude":"151.20732","latitude":"-33.86785","postalCode":"1001","tlsVersion":"TLSv1.3","tlsCipher":"AEAD-AES256-GCM-SHA384","tlsClientRandom":"q+XTQrmbIX2iNNAi+8RaMkPlVKucfKu2QjNQej35Jo8=","tlsClientCiphersSha1":"kXrN3VEKDdzz2cPKTQaKzpxVTxQ=","tlsClientExtensionsSha1":"1eY97BUYYO8vDaTfHQywB1pcNdM=","tlsClientExtensionsSha1Le":"u4wtEMFQBY18l3BzHAvORm+KGRw=","tlsExportedAuthenticator":{"clientHandshake":"918753d88f16497a81bec58c93db6eb95382e6cc3fef5af6c045f00ddd7b4ff09bca2042e3e9a2809bd9e43d17a91692","serverHandshake":"0ec75818c051cc9c6548de819406a93217de79a9d796a3632a1987dcada263f5cbc07cccf47598c74ac989687992921e","clientFinished":"f14e7fd18d6916fedd649672b8eda2fce6b0e2210de45f35605155815ed0be3b6868e8798f35e8f8aba21beabbab48d2","serverFinished":"46f06972f7ed47a394e7b635e7762eddf8df855ef2a2a1ce30d44c672eb4a115903238c40a834112f656434d29485f2f"},"tlsClientHelloLength":"1603","tlsClientAuth":{"certPresented":"0","certVerified":"NONE","certRevoked":"0","certIssuerDN":"","certSubjectDN":"","certIssuerDNRFC2253":"","certSubjectDNRFC2253":"","certIssuerDNLegacy":"","certSubjectDNLegacy":"","certSerial":"","certIssuerSerial":"","certSKI":"","certIssuerSKI":"","certFingerprintSHA1":"","certFingerprintSHA256":"","certNotBefore":"","certNotAfter":""},"verifiedBotCategory":"","botManagement":{"corporateProxy":false,"verifiedBot":false,"jsDetection":{"passed":false},"staticResource":false,"detectionIds":{},"score":99}}

playground/index.html

@@ -19,8 +19,7 @@
             
             <textarea class="code" id="editor" spellcheck="false" placeholder="Enter Solstice code here..." rows="20">
 puts "Hello from Solstice via WebAssembly!"
-puts "Let's do some math:"
+</textarea>
-puts 10 + 20 + 12</textarea>
 
             <div id="controls">
                 <button id="runBtn" style="font-size: 20px;">Loading WASM...</button>
@@ -29,57 +28,32 @@ puts 10 + 20 + 12</textarea>
             <h3>Output:</h3>
             <pre class="code" id="output">Output will appear here. Click "Run Code" to run!</pre>
 
-            <script type="module">
+            <script src="playground.js"></script>
-                import createSolsticeModule from './playground.js';
+            <script>
-
-                let solsticeModule = null;
                 const outputDiv = document.getElementById('output');
+                const codeArea = document.getElementById('editor');
                 const runBtn = document.getElementById('runBtn');
-                const editor = document.getElementById('editor');
 
-                // Initialize the Emscripten module
+                // Emscripten provides a 'Module' object that fires 'onRuntimeInitialized'
-                createSolsticeModule({
+                Module.onRuntimeInitialized = () => {
-                    // Redirect stdout to our output div
+                    outputDiv.innerText = "Ready to run.";
-                    print: (text) => {
+                    runBtn.innerText = "Run";
-                        outputDiv.textContent += text + "\n";
-                        console.log(text);
-                    },
-                    // Redirect stderr to our output div (and console)
-                    printErr: (text) => {
-                        outputDiv.textContent += "[stderr] " + text + "\n";
-                        console.error(text);
-                    }
-                }).then((instance) => {
-                    solsticeModule = instance;
-                    runBtn.textContent = "Run Code";
-                    runBtn.disabled = false;
-                    console.log("Solstice WASM module loaded successfully");
-                }).catch(err => {
-                    console.error("Failed to load WASM module:", err);
-                    outputDiv.innerHTML = '<span class="error">Error loading WASM module. See console for details.</span>';
-                    runBtn.textContent = "Load Failed";
-                });
 
-                runBtn.addEventListener('click', () => {
+                    runBtn.addEventListener('click', () => {
-                    if (!solsticeModule) return;
+                        const source = codeArea.value;
 
-                    outputDiv.textContent = ""; // Clear previous output
+                        // Use 'ccall' to call the C function:
-                    const code = editor.value;
+                        // ccall(name, returnType, [argTypes], [args])
-
+                        const result = Module.ccall(
-                    try {
+                            'solstice_run', // C function name
-                        // Call the C++ function 'run_source' exported via EMSCRIPTEN_KEEPALIVE
+                            'string',       // Return type
-                        // int run_source(char* code)
+                            ['string'],     // Argument types
-                        solsticeModule.ccall(
+                            [source]        // Arguments
-                            'run_source', // function name
-                            'number',     // return type
-                            ['string'],   // argument types
-                            [code]        // arguments
                         );
-                    } catch (e) {
+
-                        outputDiv.innerHTML += `\n<span class="error">[Runtime Error] ${e}</span>`;
+                        outputDiv.innerText = result;
-                        console.error(e);
+                    });
-                    }
+            };
-                });
             </script>
         </div>
     </body>