Merge pull request #15 from JBB0807/monacoeditor2

Ready for merging

src/components/EditorPanel.jsx

@@ -4,12 +4,13 @@ import Editor from '@monaco-editor/react';
 export default function EditorPanel({ code, onChange }) {
   return (
     <div style={{
+      fontSize: '15px',
       border: '1px solid #444',
       borderRadius: '8px',
       backgroundColor: '#1e1e1e',
-      height: '400px',
+      height: '90%',
       boxShadow: '0 0 10px rgba(255, 0, 255, 0.2)',
-      overflow: 'hidden',
+      overflow: 'hidden'
     }}>
       <Editor
         height="100%"
@@ -18,15 +19,15 @@ export default function EditorPanel({ code, onChange }) {
         onChange={v => onChange(v || '')}
         theme="vs-dark"
         options={{
-          fontSize: 16,
+          fontSize: 20,
           padding: { top: 10, bottom: 10 },
           minimap: { enabled: false },
           scrollbar: {
-            verticalScrollbarSize: 8,
+            verticalScrollbarSize: 12,
-            horizontalScrollbarSize: 8,
+            horizontalScrollbarSize: 12
           },
           lineNumbers: 'on',
-          scrollBeyondLastLine: false,
+          scrollBeyondLastLine: false
         }}
       />
     </div>

src/components/PreviewPanel.jsx

@@ -2,140 +2,120 @@ import React, { useState } from 'react';
 
 export default function PreviewPanel({ code }) {
   const [gameUrl, setGameUrl] = useState('');
-  const [snakeApiUrl, setSnakeApiUrl] = useState('');
   const [settings, setSettings] = useState(null);
-  const [moveRes, setMoveRes] = useState(null);
   const [loadingSetup, setLoadingSetup] = useState(false);
-  const [loadingMove, setLoadingMove] = useState(false);
 
-
+  const fetchBoard = async () => {
-    const fetchSetup = async (e) => {
+    if (!gameUrl.trim()) return;
-      e.preventDefault();
+    setLoadingSetup(true);
-      setLoadingSetup(true);
-      try {
-        const res = await fetch(
-          `/api/fetch-board?url=${encodeURIComponent(gameUrl.trim())}`
-        );
-        setSettings(await res.json());
-        setMoveRes(null);
-      } catch (err) {
-        console.error(err);
-      }
-      setLoadingSetup(false);
-    };
-
-  const testMove = async (e) => {
-    e.preventDefault();
-    if (!settings) return;
-    setLoadingMove(true);
     try {
-      const res = await fetch('/api/move', {
+      const res = await fetch(
-        method: 'POST',
+        `/api/fetch-board?url=${encodeURIComponent(gameUrl.trim())}`
-        headers: { 'Content-Type': 'application/json' },
+      );
-        body: JSON.stringify({ code, boardState: settings })
+      if (!res.ok) throw new Error('Fetch board failed');
-      });
+      setSettings(await res.json());
-      setMoveRes(await res.json());
     } catch (err) {
       console.error(err);
+    } finally {
+      setLoadingSetup(false);
     }
-    setLoadingMove(false);
   };
 
   const gameId = gameUrl.trim().split('/').pop();
 
   return (
-    <div
+    <div style={{
-      className="preview-panel"
+      flex: 1,
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+      background: '#1a1a1a',
-    >
+      borderRadius: '12px',
-      <h2>Battlesnake Preview</h2>
+      boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
+      border: '1px solid #d300c5',
+      padding: '1rem',
+      color: '#eee',
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box'
+    }}>
+      <div style={{
+        backgroundColor: '#d300c5',
+        height: '6px',
+        borderRadius: '3px 3px 0 0',
+        marginBottom: '0.5rem'
+      }} />
+      <h3 style={{
+        fontSize: '1.2rem',
+        margin: '0 0 1rem',
+        color: '#d300c5',
+        textShadow: '0 0 5px #d300c5',
+        textAlign: 'center'
+      }}>
+        🎯 Live Arena Output
+      </h3>
 
-      {/* game board URL */}
+      <div style={{
-      <form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+        background: 'rgba(255,255,255,0.05)',
+        border: '1px solid #ff2a6d',
+        borderRadius: '8px',
+        padding: '1rem',
+        marginBottom: '1rem'
+      }}>
         <input
           type="text"
           placeholder="Game URL"
           value={gameUrl}
-          onChange={(e) => setGameUrl(e.target.value)}
+          onChange={e => setGameUrl(e.target.value)}
-          style={{ flex: 1 }}
+          style={{
+            width: '100%',
+            padding: '0.5rem',
+            marginBottom: '0.75rem',
+            border: 'none',
+            borderRadius: 4,
+            background: 'transparent',
+            color: '#fff',
+            outline: 'none'
+          }}
         />
-        <button onClick={fetchSetup} disabled={!gameUrl || loadingSetup}>
+        <button
-          {loadingSetup ? 'Loading…' : 'Fetch Board'}
+          type="button"
-        </button>
+          onClick={fetchBoard}
-      </form>
+          disabled={!gameUrl.trim() || loadingSetup}
-
+          style={{
-      {/* API server URL */}
+            width: '100%',
-      <form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+            padding: '0.75rem',
-        <input
+            backgroundColor: '#ff2a6d',
-          type="text"
+            border: 'none',
-          placeholder="Your Snake API URL"
+            borderRadius: '20px',
-          value={snakeApiUrl}
+            color: '#fff',
-          onChange={(e) => setSnakeApiUrl(e.target.value)}
+            fontWeight: 'bold',
-          style={{ flex: 1 }}
+            cursor: 'pointer'
-        />
+          }}
-        <button onClick={fetchSetup} disabled={!snakeApiUrl || loadingSetup}>
+        >
-          {loadingSetup ? 'Loading…' : 'Connect Snake API'}
+          {loadingSetup ? 'Loading…' : 'FETCH BOARD'}
-        </button>
-      </form>
-
-      {/* Test Move */}
-      <div style={{ marginBottom: '1rem' }}>
-        <button onClick={testMove} disabled={!settings || loadingMove}>
-          {loadingMove ? 'Testing…' : 'Test Move'}
         </button>
       </div>
 
-      {settings && gameId && (
+      {/* <div style={{
-        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+        background: 'rgba(255,255,255,0.05)',
+        border: '1px solid #ff2a6d',
+        borderRadius: '8px',
+        padding: '1rem',
+        marginBottom: '1rem'
+      }}>
+      </div> */}
+
+      <div style={{
+        flex: 1,
+        overflow: 'hidden',
+        borderRadius: '8px'
+      }}>
+        {settings && gameId && (
           <iframe
-            src={`/proxy/?game=${gameId}&autoplay=false&showControls=true`}
+            src={`/proxy/?game=${encodeURIComponent(gameId)}&autoplay=false&showControls=true`}
-            style={{ width: '70%', height: '100%', border: 'none' }}
+            style={{ width: '100%', height: '100%', border: 'none' }}
             title="Battlesnake Board"
           />
-
+        )}
-          {/*<iframe
+      </div>
-            src={`/board/index.html?game=${gameId}&autoplay=true&showControls=true`}
-            style={{ width: '70%', height: '100%', border: 'none' }}
-            title="Battlesnake Board"
-          />*/}
-
-          <div
-            style={{
-              width: '30%',
-              display: 'flex',
-              flexDirection: 'column',
-              overflow: 'auto',
-              background: '#222',
-              color: '#eee',
-              padding: '1rem'
-            }}
-          >
-            {moveRes && (
-              <pre
-                style={{
-                  background: moveRes.error ? '#500' : '#050',
-                  color: '#fff',
-                  padding: '0.5rem',
-                  marginBottom: '1rem',
-                  overflowX: 'auto'
-                }}
-              >
-                {JSON.stringify(moveRes, null, 2)}
-              </pre>
-            )}
-            <pre
-              style={{
-                flex: 1,
-                margin: 0,
-                padding: '0.5rem',
-                overflow: 'auto'
-              }}
-            >
-              {JSON.stringify(settings, null, 2)}
-            </pre>
-          </div>
-        </div>
-      )}
     </div>
   );
 }

src/pages/CodeEditor.jsx

@@ -1,207 +1,151 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import EditorPanel from "../components/EditorPanel";
+import PreviewPanel from "../components/PreviewPanel";
 
-const PageCodeEditor = () => {
+export default function PageCodeEditor() {
-  const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n    return { 'move': 'up' }`);
+  const { assignmentId: routeId } = useParams();
+  const assignmentId = routeId || "52";
+
+  const [appName, setAppName] = useState("");
+  const [code, setCode] = useState("# NOW LOADING");
 
   useEffect(() => {
     document.title = "Snake Brain Editor";
   }, []);
 
+  useEffect(() => {
+    fetch(`https://assignment-service.fly.dev/student/assignment/${assignmentId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch assignment");
+        return res.json();
+      })
+      .then((data) => setAppName(data.appname))
+      .catch((err) => console.error("Assignment fetch error:", err));
+  }, [assignmentId]);
+
+  useEffect(() => {
+    if (!appName) return;
+    fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch notebook");
+        return res.json();
+      })
+      .then((notebook) => {
+        const combined = notebook.cells
+          .filter((cell) => cell.cell_type === "code")
+          .map((cell) => cell.source.join(""))
+          .join("\n\n");
+        setCode(combined);
+      })
+      .catch((err) => console.error("Notebook fetch error:", err));
+  }, [appName]);
+
   return (
-    <main className="code-editor-page" style={{ paddingTop: '70px' }}>
+    <main className="code-editor-page" style={{ paddingTop: "35px" }}>
       <div
         className="editor-page-layout"
         style={{
-          display: 'flex',
+          display: "flex",
-          gap: '2rem',
+          gap: "1rem",
-          padding: '2rem',
+          width: "120rem",
+          padding: "1rem",
           fontFamily: "'Fira Code', 'Courier New', monospace",
         }}
       >
-        {/* python editor */}
+        {/* Python Editor */}
         <div
           className="box-panel"
           style={{
             flex: 2,
-            background: 'linear-gradient(145deg, #0d0221, #1a1a1a)',
+            background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
-            borderRadius: '12px',
+            borderRadius: "10px",
-            boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
+            padding: "1rem",
-            border: '1px solid #ff2a6d',
+            color: "#eee",
-            padding: '1rem',
+            minHeight: "80vh",
-            color: '#eee',
+            overflow: "auto",
           }}
         >
-          <div
-            style={{
-              backgroundColor: '#ff2a6d',
-              height: '6px',
-              borderRadius: '3px 3px 0 0',
-              marginBottom: '0.5rem',
-            }}
-          />
           <h3
             className="panel-heading"
             style={{
-              fontSize: '1.2rem',
+              fontSize: "1.2rem",
-              color: '#05d9e8',
+              color: "#05d9e8",
-              textShadow: '0 0 5px #05d9e8',
+              textShadow: "0 0 5px #05d9e8",
-              marginBottom: '1rem',
+              marginBottom: "1rem",
             }}
           >
             🐍 Snake Brain (Python)
           </h3>
           <EditorPanel code={code} onChange={setCode} />
+          <div style={{ marginTop: "1rem", display: "flex" }}>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Save
+            </button>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                marginLeft: "1rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Deploy
+            </button>
+          </div>
         </div>
 
-        {/* live arena */}
+        {/* Live Arena */}
         <div
           className="box-panel"
           style={{
             flex: 1,
-            background: '#1a1a1a',
+            background: "#1a1a1a",
-            borderRadius: '12px',
+            borderRadius: "12px",
-            boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
+            padding: "1rem",
-            border: '1px solid #d300c5',
+            color: "#eee",
-            padding: '1rem',
+            minHeight: "80vh",
-            color: '#eee',
           }}
         >
-          <div
-            style={{
-              backgroundColor: '#d300c5',
-              height: '6px',
-              borderRadius: '3px 3px 0 0',
-              marginBottom: '0.5rem',
-            }}
-          />
           <h3
             style={{
-              fontSize: '1.2rem',
+              fontSize: "1.2rem",
-              color: '#d300c5',
+              color: "#d300c5",
-              textShadow: '0 0 5px #d300c5',
+              textShadow: "0 0 5px #d300c5",
-              marginBottom: '1rem',
+              marginBottom: "1rem",
-              display: 'flex',
+              display: "flex",
-              alignItems: 'center',
+              alignItems: "center",
-              gap: '0.5rem',
+              gap: "0.5rem",
             }}
           >
             🎯 Live Arena Output
           </h3>
-
+          <h4
-          <h4 style={{ color: '#fff', textAlign: 'center', marginBottom: '1rem' }}>
+            style={{
+              color: "#fff",
+              textAlign: "center",
+              marginBottom: "1rem",
+            }}
+          >
             Battlesnake Preview
           </h4>
-
+          <PreviewPanel code={code} />
-          {/* game url*/}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid #ff2a6d',
-              borderRadius: '8px',
-              padding: '1rem',
-              marginBottom: '1rem',
-              textAlign: 'center',
-            }}
-          >
-            <input
-              type="text"
-              placeholder="Game URL"
-              style={{
-                background: 'transparent',
-                border: 'none',
-                color: '#fff',
-                width: '100%',
-                textAlign: 'center',
-                fontFamily: "'Fira Code', monospace",
-                outline: 'none',
-              }}
-            />
-            <button
-              style={{
-                backgroundColor: '#ff2a6d',
-                color: '#fff',
-                padding: '0.5rem 1rem',
-                border: 'none',
-                borderRadius: '20px',
-                marginTop: '0.5rem',
-                cursor: 'pointer',
-                width: '100%',
-                fontWeight: 'bold',
-              }}
-            >
-              FETCH BOARD
-            </button>
-          </div>
-
-          {/* snake api */}
-          <div
-            style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid #ff2a6d',
-              borderRadius: '8px',
-              padding: '1rem',
-              marginBottom: '1rem',
-              textAlign: 'center',
-            }}
-          >
-            <input
-              type="text"
-              placeholder="Your Snake API URL"
-              style={{
-                background: 'transparent',
-                border: 'none',
-                color: '#fff',
-                width: '100%',
-                textAlign: 'center',
-                fontFamily: "'Fira Code', monospace",
-                outline: 'none',
-              }}
-            />
-            <button
-              style={{
-                backgroundColor: '#ff2a6d',
-                color: '#fff',
-                padding: '0.5rem 1rem',
-                border: 'none',
-                borderRadius: '20px',
-                marginTop: '0.5rem',
-                cursor: 'pointer',
-                width: '100%',
-                fontWeight: 'bold',
-              }}
-            >
-              CONNECT SNAKE API
-            </button>
-          </div>
-
-          {/* test move button */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginTop: '2rem',
-            }}
-          >
-            <button
-              style={{
-                backgroundColor: '#ff2a6d',
-                color: '#fff',
-                padding: '0.5rem 2rem',
-                border: 'none',
-                borderRadius: '20px',
-                fontWeight: 'bold',
-                cursor: 'pointer',
-                boxShadow: '0 0 10px #ff2a6d',
-              }}
-            >
-              TEST MOVE
-            </button>
-          </div>
         </div>
       </div>
     </main>
   );
-};
+}
-
-export default PageCodeEditor;