Merge branch 'main' into auth
This commit is contained in:
JBB0807
commit
9c07472aca
4 changed files with 311 additions and 194 deletions
|
|
@ -3,13 +3,31 @@ 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h2>Assignments</h2>
|
||||
<button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div className="modal-overlay">
|
||||
|
|
@ -80,90 +87,51 @@ const AssignmentPage = () => {
|
|||
<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="text" 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 type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Assignment Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(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>
|
||||
<label>File Upload (optional)</label>
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => setFile(e.target.files[0])}
|
||||
/>
|
||||
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
|
||||
</div>
|
||||
|
||||
<div className="modal-buttons">
|
||||
<button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projects.length > 0 && (
|
||||
<div className="project-list">
|
||||
<h3>📋 Projects</h3>
|
||||
{/* <h3>📋 Projects</h3> */}
|
||||
{projects.map((project, index) => (
|
||||
<div key={index} className="project-item">
|
||||
<div className="project-meta">
|
||||
|
|
@ -171,9 +139,7 @@ const AssignmentPage = () => {
|
|||
</div>
|
||||
<h4>{project.title}</h4>
|
||||
<p>{project.description}</p>
|
||||
{project.fileName && (
|
||||
<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>
|
||||
|
|
@ -183,7 +149,7 @@ const AssignmentPage = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
<main className="code-editor-page" style={{ paddingTop: '70px' }}>
|
||||
<div
|
||||
className="editor-page-layout"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '2rem',
|
||||
padding: '2rem',
|
||||
fontFamily: "'Fira Code', 'Courier New', monospace",
|
||||
}}
|
||||
>
|
||||
{/* python editor */}
|
||||
<div
|
||||
className="box-panel"
|
||||
style={{
|
||||
flex: 2,
|
||||
background: 'linear-gradient(145deg, #0d0221, #1a1a1a)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
|
||||
border: '1px solid #ff2a6d',
|
||||
padding: '1rem',
|
||||
color: '#eee',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
height: '6px',
|
||||
borderRadius: '3px 3px 0 0',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
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">
|
||||
|
||||
<div className="editor-section">
|
||||
<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>
|
||||
<div className="preview-section">
|
||||
<PreviewPanel code={code} />
|
||||
|
||||
{/* 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>
|
||||
|
||||
<div className="editor-container">
|
||||
<div className="editor-tabs">
|
||||
<button
|
||||
className={`tab ${activeTab === "html" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("html")}
|
||||
{/* snake api */}
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid #ff2a6d',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1rem',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
HTML
|
||||
</button>
|
||||
<button
|
||||
className={`tab ${activeTab === "css" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("css")}
|
||||
>
|
||||
CSS
|
||||
</button>
|
||||
<button
|
||||
className={`tab ${activeTab === "js" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("js")}
|
||||
>
|
||||
JavaScript
|
||||
</button>
|
||||
</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%"
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -236,3 +236,64 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue