Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modifired CodeEditor

Browse source
This commit is contained in:
yoshi 2025-05-05 10:05:48 -07:00
parent 0768c0e8e8
commit e9f95a333d
1 changed files with 97 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/pages/CodeEditor.jsx
View file

@ -2,20 +2,38 @@ import { useEffect, useState } from "react";
import EditorPanel from "../components/EditorPanel"; import EditorPanel from "../components/EditorPanel";
const PageCodeEditor = () => { const PageCodeEditor = () => {
const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n return { 'move': 'up' }`); const [code, setCode] = useState(
`# NOW LOADING`
);
const appName = "snakeapi-demo-001";
useEffect(() => { useEffect(() => {
document.title = "Snake Brain Editor"; document.title = "Snake Brain Editor";
fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
.then((res) => {
if (!res.ok) throw new Error("Network response was not ok");
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));
}, []); }, []);
return ( return (
<main className="code-editor-page" style={{ paddingTop: '70px' }}> <main className="code-editor-page" style={{ paddingTop: "70px" }}>
<div <div
className="editor-page-layout" className="editor-page-layout"
style={{ style={{
display: 'flex', display: "flex",
gap: '2rem', gap: "2rem",
padding: '2rem', padding: "2rem",
fontFamily: "'Fira Code', 'Courier New', monospace", fontFamily: "'Fira Code', 'Courier New', monospace",
}} }}
> >
@ -24,29 +42,21 @@ const PageCodeEditor = () => {
className="box-panel" className="box-panel"
style={{ style={{
flex: 2, flex: 2,
background: 'linear-gradient(145deg, #0d0221, #1a1a1a)', background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
borderRadius: '12px', borderRadius: "12px",
boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d', padding: "1rem",
border: '1px solid #ff2a6d', color: "#eee",
padding: '1rem', minHeight: "80vh",
color: '#eee', overflow: "auto",
}} }}
> >
<div
style={{
backgroundColor: '#ff2a6d',
height: '6px',
borderRadius: '3px 3px 0 0',
marginBottom: '0.5rem',
}}
/>
<h3 <h3
className="panel-heading" className="panel-heading"
style={{ style={{
fontSize: '1.2rem', fontSize: "1.2rem",
color: '#05d9e8', color: "#05d9e8",
textShadow: '0 0 5px #05d9e8', textShadow: "0 0 5px #05d9e8",
marginBottom: '1rem', marginBottom: "1rem",
}} }}
> >
🐍 Snake Brain (Python) 🐍 Snake Brain (Python)
@ -59,75 +69,65 @@ const PageCodeEditor = () => {
className="box-panel" className="box-panel"
style={{ style={{
flex: 1, flex: 1,
background: '#1a1a1a', background: "#1a1a1a",
borderRadius: '12px', borderRadius: "12px",
boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d', padding: "1rem",
border: '1px solid #d300c5', color: "#eee",
padding: '1rem', minHeight: "80vh",
color: '#eee',
}} }}
> >
<div
style={{
backgroundColor: '#d300c5',
height: '6px',
borderRadius: '3px 3px 0 0',
marginBottom: '0.5rem',
}}
/>
<h3 <h3
style={{ style={{
fontSize: '1.2rem', fontSize: "1.2rem",
color: '#d300c5', color: "#d300c5",
textShadow: '0 0 5px #d300c5', textShadow: "0 0 5px #d300c5",
marginBottom: '1rem', marginBottom: "1rem",
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
gap: '0.5rem', gap: "0.5rem",
}} }}
> >
🎯 Live Arena Output 🎯 Live Arena Output
</h3> </h3>
<h4 style={{ color: '#fff', textAlign: 'center', marginBottom: '1rem' }}> <h4 style={{ color: "#fff", textAlign: "center", marginBottom: "1rem" }}>
Battlesnake Preview Battlesnake Preview
</h4> </h4>
{/* game url*/} {/* game url */}
<div <div
style={{ style={{
background: 'rgba(255,255,255,0.05)', background: "rgba(255,255,255,0.05)",
border: '1px solid #ff2a6d', borderRadius: "8px",
borderRadius: '8px', padding: "1rem",
padding: '1rem', marginBottom: "1rem",
marginBottom: '1rem', textAlign: "center",
textAlign: 'center',
}} }}
> >
<input <input
type="text" type="text"
placeholder="Game URL" placeholder="Game URL"
style={{ style={{
background: 'transparent', background: "transparent",
border: 'none', border: "none",
color: '#fff', color: "#fff",
width: '100%', width: "100%",
textAlign: 'center', textAlign: "center",
fontFamily: "'Fira Code', monospace", fontFamily: "'Fira Code', monospace",
outline: 'none', outline: "none",
}} }}
/> />
<button <button
style={{ style={{
backgroundColor: '#ff2a6d', backgroundColor: "#ff2a6d",
color: '#fff', color: "#fff",
padding: '0.5rem 1rem', padding: "0.5rem 1rem",
border: 'none', border: "none",
borderRadius: '20px', borderRadius: "20px",
marginTop: '0.5rem', marginTop: "0.5rem",
cursor: 'pointer', cursor: "pointer",
width: '100%', width: "100%",
fontWeight: 'bold', fontWeight: "bold",
}} }}
> >
FETCH BOARD FETCH BOARD
@ -137,38 +137,37 @@ const PageCodeEditor = () => {
{/* snake api */} {/* snake api */}
<div <div
style={{ style={{
background: 'rgba(255,255,255,0.05)', background: "rgba(255,255,255,0.05)",
border: '1px solid #ff2a6d', borderRadius: "8px",
borderRadius: '8px', padding: "1rem",
padding: '1rem', marginBottom: "1rem",
marginBottom: '1rem', textAlign: "center",
textAlign: 'center',
}} }}
> >
<input <input
type="text" type="text"
placeholder="Your Snake API URL" placeholder="Your Snake API URL"
style={{ style={{
background: 'transparent', background: "transparent",
border: 'none', border: "none",
color: '#fff', color: "#fff",
width: '100%', width: "100%",
textAlign: 'center', textAlign: "center",
fontFamily: "'Fira Code', monospace", fontFamily: "'Fira Code', monospace",
outline: 'none', outline: "none",
}} }}
/> />
<button <button
style={{ style={{
backgroundColor: '#ff2a6d', backgroundColor: "#ff2a6d",
color: '#fff', color: "#fff",
padding: '0.5rem 1rem', padding: "0.5rem 1rem",
border: 'none', border: "none",
borderRadius: '20px', borderRadius: "20px",
marginTop: '0.5rem', marginTop: "0.5rem",
cursor: 'pointer', cursor: "pointer",
width: '100%', width: "100%",
fontWeight: 'bold', fontWeight: "bold",
}} }}
> >
CONNECT SNAKE API CONNECT SNAKE API
@ -178,21 +177,20 @@ const PageCodeEditor = () => {
{/* test move button */} {/* test move button */}
<div <div
style={{ style={{
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
marginTop: '2rem', marginTop: "2rem",
}} }}
> >
<button <button
style={{ style={{
backgroundColor: '#ff2a6d', backgroundColor: "#ff2a6d",
color: '#fff', color: "#fff",
padding: '0.5rem 2rem', padding: "0.5rem 2rem",
border: 'none', border: "none",
borderRadius: '20px', borderRadius: "20px",
fontWeight: 'bold', fontWeight: "bold",
cursor: 'pointer', cursor: "pointer",
boxShadow: '0 0 10px #ff2a6d',
}} }}
> >
TEST MOVE TEST MOVE