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

194
src/pages/CodeEditor.jsx
View file

@ -2,20 +2,38 @@ import { useEffect, useState } from "react";
import EditorPanel from "../components/EditorPanel";
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(() => {
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 (
<main className="code-editor-page" style={{ paddingTop: '70px' }}>
<main className="code-editor-page" style={{ paddingTop: "70px" }}>
<div
className="editor-page-layout"
style={{
display: 'flex',
gap: '2rem',
padding: '2rem',
display: "flex",
gap: "2rem",
padding: "2rem",
fontFamily: "'Fira Code', 'Courier New', monospace",
}}
>
@ -24,29 +42,21 @@ const PageCodeEditor = () => {
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: "12px",
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)
@ -59,75 +69,65 @@ const PageCodeEditor = () => {
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',
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',
background: "transparent",
border: "none",
color: "#fff",
width: "100%",
textAlign: "center",
fontFamily: "'Fira Code', monospace",
outline: 'none',
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',
backgroundColor: "#ff2a6d",
color: "#fff",
padding: "0.5rem 1rem",
border: "none",
borderRadius: "20px",
marginTop: "0.5rem",
cursor: "pointer",
width: "100%",
fontWeight: "bold",
}}
>
FETCH BOARD
@ -137,38 +137,37 @@ const PageCodeEditor = () => {
{/* snake api */}
<div
style={{
background: 'rgba(255,255,255,0.05)',
border: '1px solid #ff2a6d',
borderRadius: '8px',
padding: '1rem',
marginBottom: '1rem',
textAlign: 'center',
background: "rgba(255,255,255,0.05)",
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',
background: "transparent",
border: "none",
color: "#fff",
width: "100%",
textAlign: "center",
fontFamily: "'Fira Code', monospace",
outline: 'none',
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',
backgroundColor: "#ff2a6d",
color: "#fff",
padding: "0.5rem 1rem",
border: "none",
borderRadius: "20px",
marginTop: "0.5rem",
cursor: "pointer",
width: "100%",
fontWeight: "bold",
}}
>
CONNECT SNAKE API
@ -178,21 +177,20 @@ const PageCodeEditor = () => {
{/* test move button */}
<div
style={{
display: 'flex',
justifyContent: 'center',
marginTop: '2rem',
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',
backgroundColor: "#ff2a6d",
color: "#fff",
padding: "0.5rem 2rem",
border: "none",
borderRadius: "20px",
fontWeight: "bold",
cursor: "pointer",
}}
>
TEST MOVE