modified editor.jsx
This commit is contained in:
yoshi
parent
cc8d35b7c7
commit
262ad031ac
3 changed files with 166 additions and 190 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>
|
||||
|
|
|
|||
|
|
@ -3,124 +3,119 @@ import React, { useState } from 'react';
|
|||
export default function PreviewPanel({ code }) {
|
||||
const [gameUrl, setGameUrl] = 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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,65 @@
|
|||
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(
|
||||
`# NOW LOADING`
|
||||
);
|
||||
const appName = "snakeapi-demo-001";
|
||||
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("Network response was not ok");
|
||||
if (!res.ok) throw new Error("Failed to fetch notebook");
|
||||
return res.json();
|
||||
})
|
||||
.then((notebook) => {
|
||||
// extract code cell sources and join them
|
||||
const combined = notebook.cells
|
||||
.filter((cell) => cell.cell_type === "code")
|
||||
.map((cell) => cell.source.join(""))
|
||||
.join("\n\n");
|
||||
setCode(combined);
|
||||
})
|
||||
.catch((err) => console.error("Failed to fetch notebook:", err));
|
||||
}, []);
|
||||
.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",
|
||||
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",
|
||||
borderRadius: "10px",
|
||||
padding: "1rem",
|
||||
color: "#eee",
|
||||
minHeight: "80vh",
|
||||
|
|
@ -63,14 +78,38 @@ const PageCodeEditor = () => {
|
|||
🐍 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>
|
||||
|
||||
{/* <div className="preview-section">
|
||||
<PreviewPanel code={code} />
|
||||
</div> */}
|
||||
|
||||
|
||||
{/* live arena */}
|
||||
{/* Live Arena */}
|
||||
<div
|
||||
className="box-panel"
|
||||
style={{
|
||||
|
|
@ -95,77 +134,18 @@ const PageCodeEditor = () => {
|
|||
>
|
||||
🎯 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)",
|
||||
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>
|
||||
|
||||
{/* 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",
|
||||
}}
|
||||
>
|
||||
TEST MOVE
|
||||
</button>
|
||||
</div>
|
||||
<PreviewPanel code={code} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageCodeEditor;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue