JB Balahadia
GitHub
commit
7e98ed6fe0
3 changed files with 200 additions and 275 deletions
|
|
@ -1,207 +1,151 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import EditorPanel from "../components/EditorPanel";
|
||||
import PreviewPanel from "../components/PreviewPanel";
|
||||
|
||||
const PageCodeEditor = () => {
|
||||
const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n return { 'move': 'up' }`);
|
||||
export default function PageCodeEditor() {
|
||||
const { assignmentId: routeId } = useParams();
|
||||
const assignmentId = routeId || "52";
|
||||
|
||||
const [appName, setAppName] = useState("");
|
||||
const [code, setCode] = useState("# NOW LOADING");
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Snake Brain Editor";
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`https://assignment-service.fly.dev/student/assignment/${assignmentId}`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch assignment");
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => setAppName(data.appname))
|
||||
.catch((err) => console.error("Assignment fetch error:", err));
|
||||
}, [assignmentId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!appName) return;
|
||||
fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error("Failed to fetch notebook");
|
||||
return res.json();
|
||||
})
|
||||
.then((notebook) => {
|
||||
const combined = notebook.cells
|
||||
.filter((cell) => cell.cell_type === "code")
|
||||
.map((cell) => cell.source.join(""))
|
||||
.join("\n\n");
|
||||
setCode(combined);
|
||||
})
|
||||
.catch((err) => console.error("Notebook fetch error:", err));
|
||||
}, [appName]);
|
||||
|
||||
return (
|
||||
<main className="code-editor-page" style={{ paddingTop: '70px' }}>
|
||||
<main className="code-editor-page" style={{ paddingTop: "35px" }}>
|
||||
<div
|
||||
className="editor-page-layout"
|
||||
style={{
|
||||
display: 'flex',
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue