added monacoeditor quickly

src/components/EditorPanel.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Editor from '@monaco-editor/react';
+
+export default function EditorPanel({ code, onChange }) {
+  return (
+    <div className="editor-panel">
+      <Editor
+        height="100%"
+        defaultLanguage="python"
+        value={code}
+        onChange={v => onChange(v || '')}
+        theme="vs-dark"
+      />
+    </div>
+  );
+}

src/components/PreviewPanel.jsx

@@ -0,0 +1,141 @@
+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);
+    try {
+      const res = await fetch('/api/move', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, boardState: settings })
+      });
+      setMoveRes(await res.json());
+    } catch (err) {
+      console.error(err);
+    }
+    setLoadingMove(false);
+  };
+
+  const gameId = gameUrl.trim().split('/').pop();
+
+  return (
+    <div
+      className="preview-panel"
+      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
+    >
+      <h2>Battlesnake Preview</h2>
+
+      {/* game board URL */}
+      <form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+        <input
+          type="text"
+          placeholder="Game URL"
+          value={gameUrl}
+          onChange={(e) => setGameUrl(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <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>
+      </div>
+
+      {settings && gameId && (
+        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+          <iframe
+            src={`/proxy/?game=${gameId}&autoplay=false&showControls=true`}
+            style={{ width: '70%', 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>
+  );
+}

src/pages/CodeEditor.jsx

@@ -5,8 +5,13 @@ import { javascript } from "@codemirror/lang-javascript";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
+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' }`);
+
   // State for storing code in different tabs
   const [htmlCode, setHtmlCode] = useState(
     "<div>\n  <h1>Hello World</h1>\n  <p>Start editing to see some magic happen!</p>\n</div>"
@@ -78,6 +83,14 @@ const PageCodeEditor = () => {
 
   return (
     <main className="code-editor-page">
+
+      <div className="editor-section">
+          <EditorPanel code={code} onChange={setCode} />
+      </div>
+      <div className="preview-section">
+          <PreviewPanel code={code} />
+      </div>
+
       <div className="editor-container">
         <div className="editor-tabs">
           <button

src/routers/AppRouter.jsx

@@ -44,9 +44,9 @@ const AppRouter = () => {
           <Route
             path="/editor"
             element={
-              <ProtectedRoute>
+//              <ProtectedRoute>
                 <PageCodeEditor />
-              </ProtectedRoute>
+  //            </ProtectedRoute>
             }
           />