added udels editor and header

website/src/repl/Repl.jsx

@@ -39,6 +39,7 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
 import { getMetadata } from '../metadata_parser';
+import UdelsEditor from '@components/Udels/UdelsEditor';
 
 const { latestCode } = settingsMap.get();
 
@@ -234,7 +235,14 @@ export function Repl({ embedded = false }) {
     handleEvaluate,
   };
 
-  const showPanel = !isEmbedded || isUdels();
+  if (isUdels()) {
+    return (
+      <UdelsEditor context={context} error={error} init={init} editorRef={editorRef} containerRef={containerRef} />
+    );
+  }
+
+  const showPanel = !isEmbedded;
+
   return (
     <ReplContext.Provider value={context}>
       <div className={cx('h-full flex flex-col relative')}>

website/src/repl/components/BigPlayButton.jsx

@@ -0,0 +1,22 @@
+import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+
+// type Props = {
+//   started: boolean;
+//   handleTogglePlay: () => void;
+// };
+export default function BigPlayButton(Props) {
+  const { started, handleTogglePlay } = Props;
+  if (started) {
+    return;
+  }
+
+  return (
+    <button
+      onClick={() => handleTogglePlay()}
+      className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
+    >
+      <PlayCircleIcon className="w-6 h-6" />
+      <span>play</span>
+    </button>
+  );
+}

website/src/repl/components/Code.jsx

@@ -0,0 +1,23 @@
+
+
+// type Props = {
+//   containerRef:  React.MutableRefObject<HTMLElement | null>,
+//   editorRef:  React.MutableRefObject<HTMLElement | null>,
+//   init: () => void
+// }
+export function Code(Props) {
+const {editorRef, containerRef, init} = Props;
+
+  return (
+    <section
+      className={'text-gray-100 cursor-text pb-0 overflow-auto grow'}
+      id="code"
+      ref={(el) => {
+        containerRef.current = el;
+        if (!editorRef.current) {
+          init();
+        }
+      }}
+    ></section>
+  );
+}

website/src/repl/components/UserFacingErrorMessage.jsx

@@ -0,0 +1,8 @@
+// type Props = { error: Error | null };
+export default function UserFacingErrorMessage(Props) {
+  const { error } = Props;
+  if (error == null) {
+    return;
+  }
+  return <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>;
+}

website/src/repl/panel/NumberInput.jsx

@@ -0,0 +1,62 @@
+function Button(Props) {
+  const { children, onClick } = Props;
+
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      data-input-counter-increment="counter-input"
+      class="flex-shrink-0  bg-gray-700 hover:bg-gray-600 border-gray-600 inline-flex items-center justify-center border rounded-md h-5 w-5  focus:ring-gray-700 focus:ring-2 focus:outline-none"
+    >
+      {children}
+    </button>
+  );
+}
+export default function NumberInput(Props) {
+  const { value = 0, setValue, max, min} = Props;
+
+  return (
+    <div class="relative flex items-center">
+      <Button onClick={() => setValue(value - 1)}>
+        <svg
+          class="w-2.5 h-2.5 text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 2"
+        >
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16" />
+        </svg>
+      </Button>
+      <input
+        min={min}
+        max={max}
+        type="text"
+        data-input-counter
+        class="flex-shrink-0 text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center"
+        placeholder=""
+        value={value}
+        onChange={e => setValue(e.target.value)}
+      />
+      <Button onClick={() => setValue(value + 1)}> 
+        <svg
+          class="w-2.5 h-2.5 text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 18"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 1v16M1 9h16"
+          />
+        </svg>
+      </Button>
+    </div>
+  );
+ 
+  
+}