initial commit
This commit is contained in:
Jae Young Ahn
parent
bd9237f81a
commit
6141e6d1d9
9 changed files with 521 additions and 428 deletions
|
|
@ -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,
|
||||
horizontalScrollbarSize: 8,
|
||||
verticalScrollbarSize: 12,
|
||||
horizontalScrollbarSize: 12
|
||||
},
|
||||
lineNumbers: 'on',
|
||||
scrollBeyondLastLine: false,
|
||||
scrollBeyondLastLine: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
{/* <li>
|
||||
<Link
|
||||
to="/notebook"
|
||||
className={`navbar__link ${
|
||||
activeLink === "/notebook" ? "navbar__link--active" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="navbar__link-icon">📓</span>
|
||||
<span className="navbar__link-text"></span>
|
||||
NOTEBOOK
|
||||
<span className="navbar__link-hover"></span>
|
||||
</Link>
|
||||
</li> */}
|
||||
<li>
|
||||
<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>
|
||||
{user && user.role === "instructor" && (
|
||||
<li>
|
||||
<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>
|
||||
)}
|
||||
{user && user.role === "student" && (
|
||||
<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;
|
||||
//{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);
|
||||
// }
|
||||
export default Navbar;
|
||||
|
|
@ -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 fetchSetup = async (e) => {
|
||||
e.preventDefault();
|
||||
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);
|
||||
const fetchBoard = async () => {
|
||||
if (!gameUrl.trim()) return;
|
||||
setLoadingSetup(true);
|
||||
try {
|
||||
const res = await fetch('/api/move', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code, boardState: settings })
|
||||
});
|
||||
setMoveRes(await res.json());
|
||||
const res = await fetch(
|
||||
`/api/fetch-board?url=${encodeURIComponent(gameUrl.trim())}`
|
||||
);
|
||||
if (!res.ok) throw new Error('Fetch board failed');
|
||||
setSettings(await res.json());
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoadingSetup(false);
|
||||
}
|
||||
setLoadingMove(false);
|
||||
};
|
||||
|
||||
const gameId = gameUrl.trim().split('/').pop();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="preview-panel"
|
||||
style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
|
||||
>
|
||||
<h2>Battlesnake Preview</h2>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
background: '#1a1a1a',
|
||||
borderRadius: '12px',
|
||||
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 */}
|
||||
<form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
|
||||
<div style={{
|
||||
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)}
|
||||
style={{ flex: 1 }}
|
||||
onChange={e => setGameUrl(e.target.value)}
|
||||
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}>
|
||||
{loadingSetup ? 'Loading…' : 'Fetch Board'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* API server URL */}
|
||||
<form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your Snake API URL"
|
||||
value={snakeApiUrl}
|
||||
onChange={(e) => setSnakeApiUrl(e.target.value)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<button onClick={fetchSetup} disabled={!snakeApiUrl || loadingSetup}>
|
||||
{loadingSetup ? 'Loading…' : 'Connect Snake API'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Test Move */}
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<button onClick={testMove} disabled={!settings || loadingMove}>
|
||||
{loadingMove ? 'Testing…' : 'Test Move'}
|
||||
<button
|
||||
type="button"
|
||||
onClick={fetchBoard}
|
||||
disabled={!gameUrl.trim() || loadingSetup}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0.75rem',
|
||||
backgroundColor: '#ff2a6d',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{loadingSetup ? 'Loading…' : 'FETCH BOARD'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{settings && gameId && (
|
||||
<div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
|
||||
{/* <div style={{
|
||||
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`}
|
||||
style={{ width: '70%', height: '100%', border: 'none' }}
|
||||
src={`/proxy/?game=${encodeURIComponent(gameId)}&autoplay=false&showControls=true`}
|
||||
style={{ width: '100%', height: '100%', border: 'none' }}
|
||||
title="Battlesnake Board"
|
||||
/>
|
||||
|
||||
{/*<iframe
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (!res.ok) throw new Error("Failed to fetch");
|
||||
// if (user) {
|
||||
// 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 = {
|
||||
studentname: studentName,
|
||||
campid: campID,
|
||||
programid: programID,
|
||||
title,
|
||||
description,
|
||||
fileName: file ? file.name : null,
|
||||
};
|
||||
if (!user.userId) return alert("Please login to submit an assignment.");
|
||||
|
||||
//Create the form data needed for both create and edit
|
||||
const formData = new FormData();
|
||||
formData.append("studentname", studentName);
|
||||
formData.append("campid", campID);
|
||||
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);
|
||||
setProjects(updated);
|
||||
const project = projects[index];
|
||||
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 />
|
||||
</div>
|
||||
|
||||
<div className="password-field">
|
||||
<label>Password</label>
|
||||
<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>
|
||||
<input
|
||||
type="number"
|
||||
value={programID}
|
||||
onChange={(e) => setProgramID(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Assignment Title</label>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
|
||||
<label>App Name</label>
|
||||
<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}>
|
||||
{editingIndex !== null ? "Update" : "Submit"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { resetForm(); setShowModal(false); }} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
|
||||
<button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -185,48 +378,48 @@ const AssignmentPage = () => {
|
|||
|
||||
{projects.length > 0 && (
|
||||
<div className="project-list">
|
||||
{projects
|
||||
.filter((project) => {
|
||||
if (!searchTerm.trim()) return true;
|
||||
const regex = new RegExp(searchTerm, "i");
|
||||
return (
|
||||
regex.test(project.studentname || project.studentName || "") ||
|
||||
regex.test(project.campid || project.campID || "") ||
|
||||
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>
|
||||
{projects.map((project, index) => (
|
||||
<div key={index} className="project-item">
|
||||
<div className="project-meta">
|
||||
<strong>Student Name:</strong> {project.studentname || project.studentName} |{" "}
|
||||
<strong>CampID:</strong> {project.campid || project.campID} |{" "}
|
||||
<strong>ProgramID:</strong> {project.programid || project.programID}
|
||||
</div>
|
||||
|
||||
{project.title && <h4>{project.title}</h4>}
|
||||
{project.description && <p>{project.description}</p>}
|
||||
{project.title && <h4>{project.title}</h4>}
|
||||
{project.description && <p>{project.description}</p>}
|
||||
{project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
|
||||
|
||||
{project.fileName && (
|
||||
<p><strong>Uploaded File:</strong> {project.fileName}</p>
|
||||
)}
|
||||
|
||||
{project.assignmenturl && (
|
||||
<p className="assignment-links">
|
||||
<a href={project.assignmenturl} target="_blank" rel="noopener noreferrer">View Assignment</a>
|
||||
</p>
|
||||
)}
|
||||
{project.originalfile && (
|
||||
<p className="assignment-links">
|
||||
<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>
|
||||
)}
|
||||
{project.assignmenturl && (
|
||||
<p>
|
||||
<a
|
||||
href={project.assignmenturl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
View Assignment
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{project.originalfile && (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n return { 'move': 'up' }`);
|
||||
export default function PageCodeEditor() {
|
||||
|
||||
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',
|
||||
gap: '2rem',
|
||||
padding: '2rem',
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
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)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
|
||||
border: '1px solid #ff2a6d',
|
||||
padding: '1rem',
|
||||
color: '#eee',
|
||||
background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
|
||||
borderRadius: "10px",
|
||||
padding: "1rem",
|
||||
color: "#eee",
|
||||
minHeight: "80vh",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#ff2a6d',
|
||||
height: '6px',
|
||||
borderRadius: '3px 3px 0 0',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
/>
|
||||
<h3
|
||||
className="panel-heading"
|
||||
style={{
|
||||
fontSize: '1.2rem',
|
||||
color: '#05d9e8',
|
||||
textShadow: '0 0 5px #05d9e8',
|
||||
marginBottom: '1rem',
|
||||
fontSize: "1.2rem",
|
||||
color: "#05d9e8",
|
||||
textShadow: "0 0 5px #05d9e8",
|
||||
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',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
|
||||
border: '1px solid #d300c5',
|
||||
padding: '1rem',
|
||||
color: '#eee',
|
||||
background: "#1a1a1a",
|
||||
borderRadius: "12px",
|
||||
padding: "1rem",
|
||||
color: "#eee",
|
||||
minHeight: "80vh",
|
||||
}}
|
||||
>
|
||||
<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',
|
||||
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' }}>
|
||||
<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>
|
||||
<PreviewPanel code={code} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageCodeEditor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
|
||||
const { qrNumber, password } = state;
|
||||
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"
|
||||
placeholder="Assignment ID"
|
||||
name="assignmentId"
|
||||
value={state.assignmentId}
|
||||
type="number"
|
||||
placeholder="Assignment QR Number"
|
||||
name="qrNumber"
|
||||
value={state.qrNumber}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue