error highlight, resizer.js improved

TeaByte · Jan 14, 2024 · 20f99f3 · 20f99f3
1 parent 0a50110
commit 20f99f3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "preact/hooks";
 import { useToast } from "./useToast.ts";
 import { doTests } from "./DoTest.ts";
 
-interface CounterProps {
+interface EditorProps {
   preCode: string;
   testcases: any[];
   slug: string;
@@ -13,7 +13,7 @@ interface Window {
   editor: any;
 }
 
-export default function Editor(props: CounterProps) {
+export default function Editor(props: EditorProps) {
   // set the precode in the editor when it's fully loaded
   useEffect(() => {
     const interval = setInterval(() => {
@@ -27,7 +27,8 @@ export default function Editor(props: CounterProps) {
   }, []);
 
   const [output, setOutput] = useState<string>("");
-  const [testing , setTesting] = useState<boolean>(false);
+  const [isError, setIsError] = useState<boolean>(false);
+  const [testing, setTesting] = useState<boolean>(false);
   const { showToast } = useToast();
 
   function handleCodeClear() {
@@ -88,10 +89,12 @@ export default function Editor(props: CounterProps) {
       if (code) {
         eval(code);
       }
+      setIsError(false);
       setOutput(capturedOutput.join("\n"));
       console.log = originalConsoleLog;
       return capturedOutput.join("\n");
     } catch (error) {
+      setIsError(true);
       setOutput(`${error}`);
       return `${error}`;
     }
@@ -102,7 +105,10 @@ export default function Editor(props: CounterProps) {
       <div class="flex flex-col gap-2 grow overflow-hidden mt-2 mx-2">
         <div dir="rtl" class="flex gap-2">
           <button
-            class="btn btn-info bg-[#68e4ff] hover:bg-[#68e4ff] hover:opacity-75 grow"
+            class={"btn btn-info hover:opacity-75 grow " +
+              (isError
+                ? "bg-error hover:bg-[#ff6868]"
+                : "bg-[#68e4ff] hover:bg-[#68e4ff]")}
             onClick={handleCodeRun}
           >
             تشغيل
@@ -118,11 +124,16 @@ export default function Editor(props: CounterProps) {
             onClick={handleCodeTest}
             disabled={testing}
           >
-            {testing ? <span class="loading loading-spinner loading-xs"></span> : null}
+            {testing
+              ? <span class="loading loading-spinner loading-xs"></span>
+              : null}
             اختبار
           </button>
         </div>
-        <pre className=" bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 grow">
+        <pre
+          className={" bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 grow " +
+            (isError ? "text-error" : "")}
+        >
 {output}
         </pre>
       </div>

diff --git a/static/resizer.js b/static/resizer.js
@@ -3,43 +3,35 @@ function isMobile() {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
+  let splitInstance;
   if (isMobile()) {
-    const splitInstance = Split(["#split-0", "#split-1"], {
+    splitInstance = Split(["#split-0", "#split-1"], {
       sizes: [0, 100],
       gutterAlign: "end",
       minSize: 0,
       gutterSize: 19,
     });
-    let isRight = true;
-    const openEditorButton = document.querySelector("#open-editor");
-    const pElement = openEditorButton.querySelector("p");
-    openEditorButton.addEventListener("touchend", function () {
-      if (isRight) {
-        splitInstance.setSizes([100, 0]);
-        isRight = false;
-        pElement.textContent = "فتح الدرس";
-      } else {
-        splitInstance.setSizes([0, 100]);
-        isRight = true;
-        pElement.textContent = "فتح المحرر";
-      }
-    });
   } else {
-    Split(["#split-0", "#split-1"], {
+    splitInstance = Split(["#split-0", "#split-1"], {
       sizes: [50, 50],
       gutterAlign: "end",
       minSize: 0,
       gutterSize: 19,
     });
   }
 
-  const split0 = document.getElementById("split-0");
-  const vsEditor = document.getElementById("editor");
-  setInterval(() => {
-    if (split0.offsetWidth < 20) {
-      vsEditor.style.display = "none";
+  let isRight = true;
+  const openEditorButton = document.querySelector("#open-editor");
+  const pElement = openEditorButton.querySelector("p");
+  openEditorButton.addEventListener("touchend", function () {
+    if (isRight) {
+      splitInstance.setSizes([100, 0]);
+      isRight = false;
+      pElement.textContent = "فتح الدرس";
     } else {
-      vsEditor.style.display = "block";
+      splitInstance.setSizes([0, 100]);
+      isRight = true;
+      pElement.textContent = "فتح المحرر";
     }
-  }, 50);
+  });
 });
diff --git a/static/styles.css b/static/styles.css
@@ -17,7 +17,7 @@ body, .markdown-body {
 
 .h-full-minus-bar {
   /* screen - navbar */
-  height: calc(100vh - 81px);
+  height: calc(100vh - 82px);
 }
 
 /* Monaco Editor */