Finish textboxes and code functionality

Author: rmen527

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fontsource/fira-code": "^5.2.7",
     "@tailwindcss/vite": "^4.2.2",
+    "pyodide": "^0.29.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router": "^7.14.1",

package.json

@@ -0,0 +1,104 @@
+import { useState, useEffect, useRef } from "react";
+import { loadPyodide, type PyodideInterface } from "pyodide";
+
+interface CodeboxProps {
+  lightcol: string;
+  darkcol: string;
+  headerimage: string;
+  onOutput: (output: string) => void;
+}
+
+export default function Codebox(props: CodeboxProps) {
+
+    const [code, setCode] = useState("");
+
+    ////////
+    const [isRunning, setIsRunning] = useState(false);
+    const [pyodideReady, setPyodideReady] = useState(false);
+
+    // Store the Pyodide instance so we only load it once
+    const pyodideRef = useRef<PyodideInterface | null>(null);
+
+    // ←←← LOAD PYODIDE ONLY ONCE ←←←
+    useEffect(() => {
+        let mounted = true;
+
+        const initialize = async () => {
+        try {
+            const pyodide = await loadPyodide({
+            indexURL: "https://cdn.jsdelivr.net/pyodide/v0.29.3/full/",
+            });
+
+            if (mounted) {
+            pyodideRef.current = pyodide;
+            setPyodideReady(true);
+            }
+        } catch (err) {
+            console.error("Failed to load Pyodide", err);
+            props.onOutput?.("Failed to load Python runtime 😢");
+        }
+        };
+
+        initialize();
+
+        return () => {
+        mounted = false;
+        };
+    }, [props.onOutput]);
+
+    const runCode = async () => {
+        const pyodide = pyodideRef.current;
+        if (!pyodide) {
+        props.onOutput?.("Python runtime is still loading...");
+        return;
+        }
+
+        setIsRunning(true);
+        let output = "";
+
+        try {
+        // Capture print() output
+        pyodide.setStdout({
+            batched: (msg: string) => {
+            output += msg + "\n";
+            },
+        });
+
+        const result = await pyodide.runPythonAsync(code);
+
+        const fullOutput =
+            output.trim() +
+            (result !== undefined ? "\n" + String(result) : "");
+
+        props.onOutput?.(fullOutput || "Code executed successfully (no output)");
+        } catch (err: any) {
+        props.onOutput?.(`Error: ${err.message}`);
+        console.error(err);
+        } finally {
+        setIsRunning(false);
+        }
+    };
+    ////////
+
+    return (
+        <div style={{ backgroundColor: props.lightcol, boxShadow: `0 12px 0 ${props.darkcol}` }} className={`rounded-2xl overflow-hidden flex flex-col mt-25`}>
+            <div className="flex items-center justify-center p-4">
+                <img src={"/" + props.headerimage} alt={props.headerimage} className="relative h-12 w-auto object-contain" />
+            </div>
+
+            <textarea style={{ fontFamily: "'Fira Code', monospace", color: "white", backgroundColor: props.darkcol}} value={code} onChange={(e) => setCode(e.target.value)} placeholder="Write code here!" 
+                className="p-6 text-2xl mx-4 rounded-lg resize-none min-h-[300px]"></textarea>
+
+            <div className="m-4 mx-4 h-14">
+                <button
+                onClick={runCode}
+                disabled={!pyodideReady || isRunning}
+                style={{ backgroundColor: "#00A93D", boxShadow: `0 6px 0 #00531F`, opacity: !pyodideReady || isRunning ? 0.7 : 1}}
+                className="rounded-2xl hover:brightness-110 active:brightness-90"
+                >
+                    <img src="/run.png" alt="" className="h-14 px-6 py-3"/>
+                </button>
+            </div>
+        </div>
+    )
+}

public/logo.png

@@ -9,14 +9,13 @@ interface TextboxProps {
 
 export default function Textbox(props: TextboxProps) {
     return (
-        <div style={{ backgroundColor: props.lightcol }}>
-            <div>
-                <img src={"/" + props.headerimage} alt={props.headerimage} />
+        <div style={{ backgroundColor: props.lightcol, boxShadow: `0 12px 0 ${props.darkcol}` }} className={`rounded-2xl overflow-hidden`}>
+            <div className="flex items-center justify-center p-4">
+                <img src={"/" + props.headerimage} alt={props.headerimage} className="relative h-12 w-auto object-contain" />
             </div>
-            <div style={{ backgroundColor: props.darkcol }}>
-                <p style={{ fontFamily: "'Fira Code', Arial"}}>{props.text}</p>
+            <div style={{ backgroundColor: props.darkcol }} className="p-4 pb-12 mb-4 mx-4 rounded-lg">
+                <p style={{ fontFamily: "'Fira Code', monospace", color: "white"}} className="text-xl">{props.text}</p>
             </div>
-            
         </div>
     )
 }

src/components/Codebox.tsx

@@ -1,19 +1,23 @@
+import Codebox from "../../components/Codebox";
 import Textbox from "../../components/Textbox";
-
+import {useState} from "react"
 
 function Home() {
+  // code output
+  const [output, setOutput] = useState("Waiting for code...");
+
   return (
     // bg image
     <div className="relative min-h-screen bg-[url('/bg.png')] bg-cover bg-center bg-no-repeat overflow-hidden">
-      <div className="flex h-full w-full">
+      <div className="flex max-w-[1600px] mx-auto px-8 gap-10">
         {/* left */}
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col gap-6">
 
           {/* logo */}
-          <div><img src="logo.png" alt="Logo" /></div>
+          <div><img src="logo.png" alt="Logo" className="mx-auto w-140"/></div>
 
           {/* python and alien code */}
-          <div className="flex">
+          <div className="flex gap-6">
             <div className="flex-1">
               <Textbox
                 lightcol="#005DA9"
@@ -44,13 +48,18 @@ function Home() {
         </div>
 
         {/* right */}
-        <div className="flex-1">
-          <div>Code</div>
+        <div className="flex-1 flex flex-col gap-6">
+          <div>
+            <Codebox
+                lightcol="#5E5E5E"
+                darkcol="#2E2E2E"
+                headerimage="code.png" onOutput={setOutput}></Codebox>
+          </div>
           <div>
             <Textbox
                 lightcol="#5E5E5E"
                 darkcol="#2E2E2E"
-                text="Output"
+                text={output}
                 headerimage="output.png"
               />
           </div>

src/components/Textbox.tsx

@@ -8,4 +8,7 @@ export default defineConfig({
   base: process.env.GITHUB_REPOSITORY
     ? `/${process.env.GITHUB_REPOSITORY.split('/')[1]}/`
     : '/',
+  server: {
+    host: true
+  }
 })