Merge branch 'main' into auth

src/components/EditorPanel.jsx

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

src/pages/AssignmentPage.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import "../scss/components/_assignment.scss";
+import { useEffect } from "react";
+
 
 const AssignmentPage = () => {
   const [studentName, setStudentName] = useState("");
@@ -13,6 +15,11 @@ const AssignmentPage = () => {
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
 
+  useEffect(() => {
+    document.title = "Assignment";
+  }, []);
+  
+
   const resetForm = () => {
     setStudentName("");
     setCampID("");
@@ -37,12 +44,10 @@ const AssignmentPage = () => {
     };
 
     if (editingIndex !== null) {
-      // Edit mode: update the project at the index
       const updatedProjects = [...projects];
       updatedProjects[editingIndex] = newProject;
       setProjects(updatedProjects);
     } else {
-      // New submission
       setProjects([...projects, newProject]);
     }
 
@@ -58,7 +63,7 @@ const AssignmentPage = () => {
     setProgramID(project.programID);
     setTitle(project.title);
     setDescription(project.description);
-    setFile(null); // File can't be set again for editing, usually. You could add note about this.
+    setFile(null);
     setEditingIndex(index);
     setShowModal(true);
   };
@@ -70,8 +75,10 @@ const AssignmentPage = () => {
 
   return (
     <div className="assignment-page">
-      <h2>📘 Assignments</h2>
+      <div className="assignment-header-box">
-      <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+        <h2>Assignments</h2>
+        <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      </div>
 
       {showModal && (
         <div className="modal-overlay">
@@ -80,110 +87,69 @@ const AssignmentPage = () => {
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input
+                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
-                  type="text"
-                  value={studentName}
-                  onChange={(e) => setStudentName(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input
+                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
-                  type="text"
-                  value={campID}
-                  onChange={(e) => setCampID(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input
+                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
-                  type="text"
-                  value={programID}
-                  onChange={(e) => setProgramID(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Password</label>
-                <input
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Assignment Title</label>
-                <input
+                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  required
-                />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea
+                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  required
-                ></textarea>
               </div>
 
               <div>
                 <label>File Upload (optional)</label>
-                <input
+                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
-                  type="file"
-                  onChange={(e) => setFile(e.target.files[0])}
-                />
               </div>
 
               <div className="modal-buttons">
                 <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
-                <button
+                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
-                  type="button"
-                  onClick={() => {
-                    resetForm();
-                    setShowModal(false);
-                  }}
-                >
-                  Cancel
-                </button>
               </div>
             </form>
           </div>
         </div>
       )}
 
-      <div className="project-list">
+      {projects.length > 0 && (
-  <h3>📋 Projects</h3>
+        <div className="project-list">
-  {projects.map((project, index) => (
+          {/* <h3>📋 Projects</h3> */}
-    <div key={index} className="project-item">
+          {projects.map((project, index) => (
-      <div className="project-meta">
+            <div key={index} className="project-item">
-        <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+              <div className="project-meta">
-      </div>
+                <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
-      <h4>{project.title}</h4>
+              </div>
-      <p>{project.description}</p>
+              <h4>{project.title}</h4>
-      {project.fileName && (
+              <p>{project.description}</p>
-        <p><strong>Uploaded File:</strong> {project.fileName}</p>
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
+
+              <div className="action-buttons">
+                <button onClick={() => handleEdit(index)}>✏️ Edit</button>
+                <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+                <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
+              </div>
+            </div>
+          ))}
+        </div>
       )}
-
-      <div className="action-buttons">
-        <button onClick={() => handleEdit(index)}>✏️ Edit</button>
-        <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-        <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
-      </div>
-    </div>
-  ))}
-</div>
-
     </div>
   );
 };

src/pages/CodeEditor.jsx

@@ -1,131 +1,203 @@
-// Page - Code Editor
 import { useEffect, useState } from "react";
-import CodeMirror from "@uiw/react-codemirror";
-import { javascript } from "@codemirror/lang-javascript";
-import { html } from "@codemirror/lang-html";
-import { css } from "@codemirror/lang-css";
-import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import EditorPanel from "../components/EditorPanel";
-import PreviewPanel from "../components/PreviewPanel";
 
 const PageCodeEditor = () => {
-
   const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n    return { 'move': 'up' }`);
 
-  // State for storing code in different tabs
-  const [htmlCode, setHtmlCode] = useState(
-    "<div>\n  <h1>Hello World</h1>\n  <p>Start editing to see some magic happen!</p>\n</div>"
-  );
-  const [cssCode, setCssCode] = useState(
-    "h1 {\n  color: #0070f3;\n}\n\np {\n  color: #444;\n}"
-  );
-  const [jsCode, setJsCode] = useState(
-    '// JavaScript goes here\nconsole.log("Hello from the editor!");'
-  );
-
-  // State for active tab
-  const [activeTab, setActiveTab] = useState("html");
-
-  // Combined code for preview
-  const combinedCode = `
-        <html>
-            <head>
-                <style>${cssCode}</style>
-            </head>
-            <body>
-                ${htmlCode}
-                <script>${jsCode}</script>
-            </body>
-        </html>
-    `;
-
   useEffect(() => {
-    document.title = "Code Editor";
+    document.title = "Snake Brain Editor";
   }, []);
 
-  // Function to handle which editor to show based on active tab
-  const renderEditor = () => {
-    switch (activeTab) {
-      case "html":
-        return (
-          <CodeMirror
-            value={htmlCode}
-            height="100%"
-            theme={vscodeDark}
-            extensions={[html()]}
-            onChange={(value) => setHtmlCode(value)}
-          />
-        );
-      case "css":
-        return (
-          <CodeMirror
-            value={cssCode}
-            height="100%"
-            theme={vscodeDark}
-            extensions={[css()]}
-            onChange={(value) => setCssCode(value)}
-          />
-        );
-      case "js":
-        return (
-          <CodeMirror
-            value={jsCode}
-            height="100%"
-            theme={vscodeDark}
-            extensions={[javascript()]}
-            onChange={(value) => setJsCode(value)}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
   return (
-    <main className="code-editor-page">
+    <main className="code-editor-page" style={{ paddingTop: '70px' }}>
-
+      <div
-      <div className="editor-section">
+        className="editor-page-layout"
-          <EditorPanel code={code} onChange={setCode} />
+        style={{
-      </div>
+          display: 'flex',
-      <div className="preview-section">
+          gap: '2rem',
-          <PreviewPanel code={code} />
+          padding: '2rem',
-      </div>
+          fontFamily: "'Fira Code', 'Courier New', monospace",
-
+        }}
-      <div className="editor-container">
+      >
-        <div className="editor-tabs">
+        {/* python editor */}
-          <button
+        <div
-            className={`tab ${activeTab === "html" ? "active" : ""}`}
+          className="box-panel"
-            onClick={() => setActiveTab("html")}
+          style={{
-          >
+            flex: 2,
-            HTML
+            background: 'linear-gradient(145deg, #0d0221, #1a1a1a)',
-          </button>
+            borderRadius: '12px',
-          <button
+            boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
-            className={`tab ${activeTab === "css" ? "active" : ""}`}
+            border: '1px solid #ff2a6d',
-            onClick={() => setActiveTab("css")}
+            padding: '1rem',
-          >
+            color: '#eee',
-            CSS
+          }}
-          </button>
+        >
-          <button
+          <div
-            className={`tab ${activeTab === "js" ? "active" : ""}`}
+            style={{
-            onClick={() => setActiveTab("js")}
+              backgroundColor: '#ff2a6d',
-          >
+              height: '6px',
-            JavaScript
+              borderRadius: '3px 3px 0 0',
-          </button>
+              marginBottom: '0.5rem',
-        </div>
+            }}
-        <div className="editor-content">{renderEditor()}</div>
-      </div>
-      <div className="preview-container">
-        <div className="preview-header">
-          <h3>Preview</h3>
-        </div>
-        <div className="preview-content">
-          <iframe
-            title="code-preview"
-            srcDoc={combinedCode}
-            sandbox="allow-scripts"
-            width="100%"
-            height="100%"
           />
+          <h3
+            className="panel-heading"
+            style={{
+              fontSize: '1.2rem',
+              color: '#05d9e8',
+              textShadow: '0 0 5px #05d9e8',
+              marginBottom: '1rem',
+            }}
+          >
+            🐍 Snake Brain (Python)
+          </h3>
+          <EditorPanel code={code} onChange={setCode} />
+        </div>
+
+        {/* live arena */}
+        <div
+          className="box-panel"
+          style={{
+            flex: 1,
+            background: '#1a1a1a',
+            borderRadius: '12px',
+            boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
+            border: '1px solid #d300c5',
+            padding: '1rem',
+            color: '#eee',
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: '#d300c5',
+              height: '6px',
+              borderRadius: '3px 3px 0 0',
+              marginBottom: '0.5rem',
+            }}
+          />
+          <h3
+            style={{
+              fontSize: '1.2rem',
+              color: '#d300c5',
+              textShadow: '0 0 5px #d300c5',
+              marginBottom: '1rem',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+            }}
+          >
+            🎯 Live Arena Output
+          </h3>
+
+          <h4 style={{ color: '#fff', textAlign: 'center', marginBottom: '1rem' }}>
+            Battlesnake Preview
+          </h4>
+
+          {/* 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>

src/scss/components/_assignment.scss

@@ -235,4 +235,65 @@
       transform: translateY(0);
     }
   }
-}
+}
+
+.assignment-header-box {
+  background: #0f0f1a;
+  border: 2px solid #00bfff;
+  border-radius: 12px;
+  padding: 50px;
+  text-align: center;
+  margin-bottom: 2rem;
+  // box-shadow: 0 0 20px #00bfff;
+  box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
+    border: 1px solid rgb(211, 0, 197);
+  animation: pulseNeonBlue 2s infinite alternate;
+
+  h2 {
+    color: #00bfff;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    // text-shadow: rgb(5, 217, 232) 0px 0px 5px;
+  }
+
+  button {
+    background-color: #000;
+    border: 2px solid #00bfff;
+    color: #00bfff;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #00bfff;
+      color: #000;
+    }
+  }
+}
+
+// @keyframes pulseNeonBlue {
+//   from {
+//     box-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff;
+//   }
+//   to {
+//     box-shadow: 0 0 25px #00bfff, 0 0 40px #00bfff;
+//   }
+// }
+
+@keyframes pulseNeonHybrid {
+  from {
+    box-shadow: 
+      0 0 10px rgba(211, 0, 197, 0.7),
+      0 0 20px rgba(255, 42, 109, 0.7),
+      0 0 10px rgba(0, 191, 255, 0.7);
+  }
+  to {
+    box-shadow: 
+      0 0 25px rgba(211, 0, 197, 0.9),
+      0 0 40px rgba(255, 42, 109, 0.9),
+      0 0 30px rgba(0, 191, 255, 0.9);
+  }
+}