initial commit

.env

@@ -1,2 +1,2 @@
-#VITE_AUTH_URL="http://localhost:8080"
+VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
-VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
+VITE_ASSIGNMENT_URL="http://assignment-service.internal"

.env.development

@@ -1,2 +1,2 @@
 VITE_AUTH_URL="http://localhost:8080"
-#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"
+VITE_ASSIGNMENT_URL="http://localhost:8082"

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/Navbar.jsx

@@ -14,7 +14,7 @@ const Navbar = () => {
 
   async function handleLogout() {
     window.open(`${authUrl}/auth/logout`, "_self");
-  };
+  }
 
   useEffect(() => {
     // Set active link based on current path
@@ -114,32 +114,21 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li>
-        {/* will be decided later of we shall keep NOTEBOOK or not */}
+        {user && user.role === "instructor" && (
-        {/* <li>
+          <li>
-          <Link
+            <Link
-            to="/notebook"
+              to="/assignment"
-            className={`navbar__link ${
+              className={`navbar__link ${
-              activeLink === "/notebook" ? "navbar__link--active" : ""
+                activeLink === "/assignment" ? "navbar__link--active" : ""
-            }`}
+              }`}
-          >
+            >
-            <span className="navbar__link-icon">📓</span>
+              <span className="navbar__link-icon">🎯</span>
-            <span className="navbar__link-text"></span>
+              <span className="navbar__link-text">ASSIGNMENT</span>
-            NOTEBOOK
+              <span className="navbar__link-hover"></span>
-            <span className="navbar__link-hover"></span>
+            </Link>
-          </Link>
+          </li>
-        </li> */}
+        )}
-        <li>
+        {user && user.role === "student" && (        
-          <Link
-            to="/assignment"
-            className={`navbar__link ${
-              activeLink === "/assignment" ? "navbar__link--active" : ""
-            }`}
-          >
-            <span className="navbar__link-icon">🎯</span>
-            <span className="navbar__link-text">ASSIGNMENT</span>
-            <span className="navbar__link-hover"></span>
-          </Link>
-        </li>
         <li>
           <Link
             to="/editor"
@@ -152,6 +141,7 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li>
+        )}
         <li>
           {user ? (
             <a
@@ -184,22 +174,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
-//{user ? user.displayName : "NOTEBOOK"}
-
-//server side logout (was not working properly, so implemented client side logout)
-// const handleLogout = async () => {
-//   try {
-//     const res = await fetch("http://localhost:8080/auth/logout", {
-//       method: "GET",
-//       credentials: "include",
-//     });
-
-//     if (res.ok) {
-//       setUser(null);
-// } else {
-//   console.error("Logout failed");
-// }
-// } catch (error) {
-// console.error("Error during logout:", error);
-// }

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/AssignmentPage.jsx

@@ -2,36 +2,117 @@ import React, { useState, useEffect } from "react";
 import "../scss/components/_assignment.scss";
 
 const AssignmentPage = () => {
+  const [assignmentId, setAssignmentId] = useState("");
   const [studentName, setStudentName] = useState("");
   const [campID, setCampID] = useState("");
   const [programID, setProgramID] = useState("");
+  const [appName, setAppName] = useState("");
+  const [qrCodeNumber, setQrCodeNumber] = useState("");
   const [password, setPassword] = useState("");
-  const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [file, setFile] = useState(null);
+
   const [projects, setProjects] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
+
+  const [user, setUser] = useState([]);
+
+  const VITE_ASSIGNMENT_URL = import.meta.env.VITE_ASSIGNMENT_URL;
+  const authUrl = import.meta.env.VITE_AUTH_URL;
   const [searchTerm, setSearchTerm] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     document.title = "Assignment";
+    getCurrentUser();
     fetchAssignments();
   }, []);
 
+  useEffect(() => {
+    if (!appName) return; // Don't alert for empty name
+    const timer = setTimeout(() => {
+      fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByAppName/${appName}`)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Failed to fetch assignment by app name");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          if (data.exists) {
+            alert("This app name already exists. Please choose a different one.");
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching assignment by app name:", error);
+        });
+    }, 1000); // 1 second delay
+
+    return () => clearTimeout(timer); // Clear timeout on name change
+  }, [appName]);
+
+  useEffect(() => {
+    if (!qrCodeNumber) return; // Don't alert for empty QR code number
+    console.log("Checking QR code number:", qrCodeNumber); // Added console log
+    const timer = setTimeout(() => {
+      fetch(`${VITE_ASSIGNMENT_URL}/instructor/checkAssignmentByQRCode/${qrCodeNumber}`)
+      .then((response) => {
+      if (!response.ok) {
+      throw new Error("Failed to fetch assignment by QR code number");
+      }
+      return response.json();
+      })
+      .then((data) => {
+      console.log("QR code fetch result:", data); // Added console log
+      if (data.exists) {
+        alert("This QR code number already exists. Please choose a different one.");
+      }
+      })
+      .catch((error) => {
+      console.error("Error fetching assignment by QR code number:", error);
+      });
+    }, 1000); // 1 second delay
+
+    return () => clearTimeout(timer); // Clear timeout on QR code number change
+    }, [qrCodeNumber]);
+
+  const getCurrentUser = async () => {
+    try {
+      const authResponse = await fetch(`${authUrl}/auth/current_user`, {
+        credentials: "include",
+      });
+
+      const user = await authResponse.json();
+      setUser(user);
+    } catch (error) {
+      console.error("Error fetching current user:", error);
+    }
+  };
+
   const fetchAssignments = async () => {
     try {
-      const res = await fetch("http://localhost:8082/instructor/list/9");
+      // if (user) {
-      if (!res.ok) throw new Error("Failed to fetch");
+      // console.log("Current user:", user, `${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`);
+      // const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/${user.userId}`, {
+      //   // credentials: "include",
+      // });
+      //replace this with commented code above to get the instructor id from the auth service
+      const res = await fetch(`${VITE_ASSIGNMENT_URL}/instructor/list/9`, {
+        // credentials: "include",
+      });
 
+      if (!res.ok) throw new Error("Failed to fetch");
       const data = await res.json();
+
+      // Optional: Remove duplicate assignment IDs if needed
       const unique = Array.from(
         new Map(data.map((item) => [item.assignmentid, item])).values()
       );
 
       setProjects(unique);
+      // }
     } catch (error) {
       console.error("Error fetching assignments:", error);
     }
@@ -42,24 +123,24 @@ const AssignmentPage = () => {
     setCampID("");
     setProgramID("");
     setPassword("");
-    setTitle("");
     setDescription("");
     setFile(null);
     setEditingIndex(null);
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    setLoading(true);
 
-    const newProject = {
+    if (!user.userId) return alert("Please login to submit an assignment.");
-      studentname: studentName,
+
-      campid: campID,
+    //Create the form data needed for both create and edit
-      programid: programID,
+    const formData = new FormData();
-      title,
+    formData.append("studentname", studentName);
-      description,
+    formData.append("campid", campID);
-      fileName: file ? file.name : null,
+    formData.append("programid", programID);
-    };
+    formData.append("qrcodenumber", qrCodeNumber);
+    formData.append("password", password);
+    formData.append("description", description);
 
     setTimeout(() => {
       if (editingIndex !== null) {
@@ -75,14 +156,76 @@ const AssignmentPage = () => {
       setShowModal(false);
       setLoading(false);
     }, 2000);
+    if (editingIndex !== null) {
+      //edit mode
+      await fetch(`${VITE_ASSIGNMENT_URL}/instructor/update/${assignmentId}`, {
+        method: "PUT",
+        body: formData,
+      })
+        .then((response) => {
+          
+          if (!response.ok) {
+            console.error("Failed to edit assignment:", response.statusText);
+            throw new Error("Failed to edit assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment edited successfully:", data);
+        })
+        .catch((error) => {
+          console.error("Error submitting assignment:", error);
+          alert(`Failed to submit assignment. ${error.message}`);
+        });
+    } else {
+      //create mode
+      formData.append("instructorid", 9);
+      formData.append("appname", appName);
+
+      if (file) {
+        formData.append("file", file, file.name);
+      } else {
+        throw new Error("Failed to submit assignment: file not found.");
+      }
+
+      await fetch(`${VITE_ASSIGNMENT_URL}/instructor/create`, {
+        method: "POST",
+        body: formData,
+      })
+        .then((response) => {
+          if (!response.ok) {
+            console.error("Failed to submit assignment:", response.statusText);
+            throw new Error("Failed to submit assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment submitted successfully:", data);
+        })
+        .catch((error) => {
+          console.error("Error submitting assignment:", error);
+          alert(`Failed to submit assignment. ${error.message}`);
+        });
+    }
+
+    alert(
+      editingIndex !== null ? "Assignment updated!" : "Assignment submitted!"
+    );
+
+    fetchAssignments(); // Refresh the assignments list
+    resetForm();
+    setShowModal(false);
   };
 
   const handleEdit = (index) => {
     const project = projects[index];
+    setAssignmentId(project.assignmentid || project.assignmentId || "");
+    setAppName(project.appname || project.appName || "");
+    setQrCodeNumber(project.qrcodenumber || project.qrCodeNumber || "");
+    setPassword(project.passwordhash || project.password || "");
     setStudentName(project.studentname || project.studentName || "");
     setCampID(project.campid || project.campID || "");
     setProgramID(project.programid || project.programID || "");
-    setTitle(project.title || "");
     setDescription(project.description || "");
     setFile(null);
     setEditingIndex(index);
@@ -90,15 +233,51 @@ const AssignmentPage = () => {
   };
 
   const handleDelete = (index) => {
-    const updated = projects.filter((_, i) => i !== index);
+    const project = projects[index];
-    setProjects(updated);
+    if (window.confirm("Are you sure you want to delete this assignment?")) {
+      fetch(`${VITE_ASSIGNMENT_URL}/instructor/delete/${project.assignmentid}`, {
+        method: "DELETE",
+      })
+        .then((response) => {
+          if (!response.ok) {
+            console.error("Failed to delete assignment:", response.statusText);
+            throw new Error("Failed to delete assignment");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          console.log("Assignment deleted successfully:", data);
+          alert("Assignment deleted successfully!");
+          fetchAssignments(); // Refresh the assignments list
+        })
+        .catch((error) => {
+          console.error("Error deleting assignment:", error);
+          alert(`Failed to delete assignment. ${error.message}`);
+        });
+    }
   };
 
   return (
     <div className="assignment-page">
       <div className="assignment-header-box">
         <h2>Assignments</h2>
-        <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+        <button
+          onClick={() => {
+            resetForm();
+            setShowModal(true);
+          }}
+        >
+          ➕ Add New
+        </button>
+      </div>
+
+      <div className="assignment-search-box">
+        <input
+          type="text"
+          placeholder="🔍︎ Search"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
       </div>
 
       <div className="assignment-search-box">
@@ -113,49 +292,74 @@ const AssignmentPage = () => {
       {showModal && (
         <div className="modal-overlay">
           <div className="modal">
-            <h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
+            <h3>
+              {editingIndex !== null ? "Edit Assignment" : "New Assignment"}
+            </h3>
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
+                <input
+                  type="text"
+                  value={studentName}
+                  onChange={(e) => setStudentName(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
+                <input
+                  type="number"
+                  value={campID}
+                  onChange={(e) => setCampID(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
+                <input
-              </div>
+                  type="number"
-
+                  value={programID}
-              <div className="password-field">
+                  onChange={(e) => setProgramID(e.target.value)}
-                <label>Password</label>
+                  required
-                <div className="input-wrapper">
+                />
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                  />
-                  <span
-                    className="eye-icon"
-                    onClick={() => setShowPassword((prev) => !prev)}
-                  >
-                    {showPassword ? "Hide" : "Show"}
-                  </span>
-                </div>
               </div>
 
               <div>
-                <label>Assignment Title</label>
+                <label>App Name</label>
-                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
+                <input
+                  type="text"
+                  value={appName}
+                  onChange={(e) => setAppName(e.target.value)}
+                  required
+                  disabled={editingIndex !== null}
+                  s
+                />
+              </div>
+
+              <div>
+                <label>Password</label>
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+              </div>
+
+              <div>
+                <label>Password</label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  required
+                ></textarea>
               </div>
 
               <div>
@@ -163,20 +367,9 @@ const AssignmentPage = () => {
                 <input type="file" onChange={(e) => setFile(e.target.files[0])} />
               </div>
 
-              {loading && (
-                <div className="spinner-container">
-                  <div className="spinner"></div>
-                  <p>Uploading...</p>
-                </div>
-              )}
-
               <div className="modal-buttons">
-                <button type="submit" disabled={loading}>
+                <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
-                  {editingIndex !== null ? "Update" : "Submit"}
+                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
-                </button>
-                <button type="button" onClick={() => { resetForm(); setShowModal(false); }} disabled={loading}>
-                  Cancel
-                </button>
               </div>
             </form>
           </div>
@@ -185,48 +378,48 @@ const AssignmentPage = () => {
 
       {projects.length > 0 && (
         <div className="project-list">
-          {projects
+          {projects.map((project, index) => (
-            .filter((project) => {
+            <div key={index} className="project-item">
-              if (!searchTerm.trim()) return true;
+              <div className="project-meta">
-              const regex = new RegExp(searchTerm, "i");
+                <strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
-              return (
+                <strong>CampID:</strong> {project.campid || project.campID} |{" "}
-                regex.test(project.studentname || project.studentName || "") ||
+                <strong>ProgramID:</strong> {project.programid || project.programID}
-                regex.test(project.campid || project.campID || "") ||
+              </div>
-                regex.test(project.programid || project.programID || "") ||
-                regex.test(project.title || "") ||
-                regex.test(project.description || "") ||
-                regex.test(project.fileName || "") ||
-                regex.test(project.assignmenturl || "") ||
-                regex.test(project.originalfile || "") ||
-                regex.test(project.editablefile || "")
-              );
-            })
-            .map((project, index) => (
-              <div key={index} className="project-item">
-                <div className="project-meta">
-                  <p><strong>Student Name:</strong> {project.studentname || project.studentName}</p>
-                  <p><strong>CampID:</strong> {project.campid || project.campID}</p>
-                  <p><strong>ProgramID:</strong> {project.programid || project.programID}</p>
-                </div>
 
-                {project.title && <h4>{project.title}</h4>}
+              {project.title && <h4>{project.title}</h4>}
-                {project.description && <p>{project.description}</p>}
+              {project.description && <p>{project.description}</p>}
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
 
-                {project.fileName && (
+              {project.assignmenturl && (
-                  <p><strong>Uploaded File:</strong> {project.fileName}</p>
+                <p>
-                )}
+                  <a
-
+                    href={project.assignmenturl}
-                {project.assignmenturl && (
+                    target="_blank"
-                  <p className="assignment-links">
+                    rel="noopener noreferrer"
-                    <a href={project.assignmenturl} target="_blank" rel="noopener noreferrer">View Assignment</a>
+                  >
-                  </p>
+                    View Assignment
-                )}
+                  </a>
-                {project.originalfile && (
+                </p>
-                  <p className="assignment-links">
+              )}
-                    <a href={project.originalfile} target="_blank" rel="noopener noreferrer">Original File</a>{" "}
+              {project.originalfile && (
-                    <a href={project.editablefile} target="_blank" rel="noopener noreferrer">Editable File</a>
+                <p>
-                  </p>
+                  <a
-                )}
+                    href={project.originalfile}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Original File
+                  </a>{" "}
+                  |{" "}
+                  <a
+                    href={project.editablefile}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Editable File
+                  </a>
+                </p>
+              )}
 
                 <div className="action-buttons">
                   <button onClick={() => handleEdit(index)}>✏️ View Edit</button>

src/pages/CodeEditor.jsx

@@ -1,207 +1,154 @@
-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 { qrCodeNumber: routeId } = useParams();
+  // console.log("Assignment ID:", assignmentId);
+  const qrCodeNumber = routeId || "2256";
+  console.log("QR Code Number:", qrCodeNumber);
+
+  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/${qrCodeNumber}`)
+      .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));
+  }, [qrCodeNumber]);
+
+  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;

src/pages/SignIn.jsx

@@ -5,7 +5,7 @@ const authUrl = import.meta.env.VITE_AUTH_URL;
 
 function SignInForm() {
   const [state, setState] = React.useState({
-    assignmentID: "",
+    qrNumber: "",
     password: "",
   });
   const handleChange = (evt) => {
@@ -19,8 +19,8 @@ function SignInForm() {
   const handleOnSubmit = (evt) => {
     evt.preventDefault();
 
-    const { assignmentId, password } = state;
+    const { qrNumber, password } = state;
-    console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
+    console.log(`You are loggind in with email: ${qrNumber} and password: ${password}`);
 
     console.log("Submitting login request with state:", state);
     fetch(`${authUrl}/auth/student/login`, {
@@ -59,10 +59,10 @@ function SignInForm() {
         </div> */}
 
         <input
-          type="assignmentId"
+          type="number"
-          placeholder="Assignment ID"
+          placeholder="Assignment QR Number"
-          name="assignmentId"
+          name="qrNumber"
-          value={state.assignmentId}
+          value={state.qrNumber}
           onChange={handleChange}
         />
         <input

src/scss/page/_login.scss

@@ -29,7 +29,7 @@
 
 body {
   background: transparent;
-  background-image: url("../../../public/images/grid-background.jpg");
+  background-image: url("/images/grid-background.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;