implemented monacoEditor to make text editor much more advanced, rearranged screen elements

game.js

@@ -6,6 +6,7 @@ const gameCanvas = document.getElementById("gameCanvas");
 const ctx = gameCanvas.getContext("2d");
 
 const gameWorld = new GameWorld();
+let monacoEditor;
 
 let pyodideWorker = startPyodideWorker();
 let robots = null;//createInitialRobots();
@@ -114,7 +115,7 @@ function gameLoop(timestamp) {
     const deltaTime = timestamp - lastFrameTime;
     // If enough time has passed since the last frame, update and draw
     if (deltaTime >= targetInterval) {
-        lastFrameTime = timestamp; 
+        lastFrameTime = timestamp;
         if (!paused) {
             ctx.resetTransform();
             // Fill the entire visible canvas to remove artifacts
@@ -132,7 +133,7 @@ function gameLoop(timestamp) {
                 state: gameWorld
             });
 
-            
+
         }
     }
     requestAnimationFrame(gameLoop);
@@ -158,11 +159,13 @@ function updateSensorData() {
 //setInterval(updateSensorData, 2000); // Call every 2 seconds
 
 
-// ✅ Button Event Listeners
 document.getElementById("compile-button").addEventListener("click", () => {
     if (paused) return;
-    let code = document.getElementById("python-code").value;
+
+    // Use the Monaco Editor instance to get the code
+    let code = monacoEditor.getValue(); // Get text from the editor
     console.log(code);
+
     code = code.replace(/time\.sleep\(/g, "await time.sleep(");
     console.log(code);
     consoleElement.innerHTML = "";
@@ -172,6 +175,7 @@ document.getElementById("compile-button").addEventListener("click", () => {
     });
 });
 
+
 document.getElementById("pause-button").addEventListener("click", togglePause);
 document.getElementById("reset-button").addEventListener("click", resetGame);
 
@@ -218,3 +222,57 @@ gameCanvas.addEventListener("mouseup", () => {
     isPanning = false;
 });
 
+const textarea = document.getElementById('python-code');
+
+// textarea.addEventListener('keydown', function (event) {
+//     if (event.key === 'Tab') {
+//         event.preventDefault();
+//         const start = this.selectionStart;
+//         const end = this.selectionEnd;
+//         this.value = this.value.substring(0, start) + '   ' + this.value.substring(end);
+//         this.selectionStart = this.selectionEnd = start + 1;
+//     }
+// });
+
+// game.js
+
+export function initializeMonaco() {
+    require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs" } });
+
+    require(["vs/editor/editor.main"], function () {
+        // Store the editor instance in the global variable
+        monacoEditor = monaco.editor.create(document.getElementById("monaco-editor"), {
+            value: "# Type your Python code here\n",
+            language: "python",
+            theme: "vs-dark",
+            automaticLayout: true
+        });
+    });
+}
+
+function setupCanvas() {
+    const canvas = document.getElementById("gameCanvas");
+    const context = canvas.getContext("2d");
+
+    // Get the device pixel ratio
+    const dpr = window.devicePixelRatio || 1;
+
+    // Adjust the canvas size for high-DPI displays
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+
+    // Scale the drawing context
+    context.scale(dpr, dpr);
+
+    // Optional: Clear the canvas for better visuals
+    context.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+// Call this function when the page loads
+setupCanvas();
+
+
+
+
+

index.html

@@ -7,43 +7,81 @@
     <title>Pyodide Real-Time Python Execution with Console</title>
     <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs/loader.js"></script>
 
     <style>
-        #console {
+        /* Use a grid layout for the entire page */
+        body {
+            margin: 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr; /* Two equal columns */
+            grid-template-rows: auto 2fr 1fr; /* Header, main content, and console sections */
+            height: 100vh; /* Full viewport height */
+            font-family: Arial, sans-serif;
+        }
+
+        h1 {
+            grid-column: span 2; /* Header spans both columns */
+            text-align: center;
+            margin: 10px 0;
+        }
+
+        #monaco-editor {
+            grid-column: 1; /* Left column */
+            grid-row: 2 / span 2; /* Takes full left side */
+            border: 1px solid #ccc;
+            height: 100%; /* Fill available space */
+        }
+
+        #gameCanvas {
+            grid-column: 2; /* Right column */
+            grid-row: 2; /* Top two-thirds */
             width: 100%;
-            height: 200px;
+            height: 100%; /* Canvas stretches to fill the grid cell */
+            border: 1px solid black;
+        }
+
+        #console {
+            grid-column: 2; /* Right column */
+            grid-row: 3; /* Bottom one-third */
             background-color: black;
             color: white;
             font-family: monospace;
             padding: 10px;
             overflow-y: auto;
             border: 1px solid #ccc;
+            height: 100%;
         }
 
-        #gameCanvas {
+        button {
-            border: 1px solid black;
+            margin: 10px;
         }
     </style>
 </head>
 
 <body>
     <h1>Real-Time Python Execution</h1>
-    <textarea id="python-code" rows="10" cols="50" placeholder="Enter your Python code here..."></textarea>
-    <br><br>
-    <button id="compile-button">Compile and Run</button>
-    <button id="pause-button">Pause</button>
-    <button id="reset-button">Reset</button>
 
-    <br><br>
+    <!-- Monaco Editor -->
-    <h2>Console Output:</h2>
+    <div id="monaco-editor"></div>
+
+    <!-- Game Canvas -->
+    <canvas id="gameCanvas"></canvas>
+
+    <!-- Console Output -->
     <div id="console"></div>
 
-    <!-- Game canvas -->
+    <!-- Buttons -->
-    <h2>Robot Simulation</h2>
+    <div style="grid-column: span 2; text-align: center;">
-    <canvas id="gameCanvas" width="800" height="600"></canvas>
+        <button id="compile-button">Compile and Run</button>
+        <button id="pause-button">Pause</button>
+        <button id="reset-button">Reset</button>
+    </div>
 
-    <script type="module" src="game.js"></script>
+    <script type="module">
-        
+        import { initializeMonaco } from './game.js';
+        initializeMonaco();
+    </script>
 </body>
 
-</html>
+</html>

todo.md

@@ -1,10 +1,10 @@
 DO
 Create test level of a track with obstacles all around
-Improve the text editor to be larger, and maybe have some colour coding and allow tabs
 
 IN PROGRESS
 
 DONE
+Improve the text editor to be larger, and maybe have some colour coding and allow tabs
 Add robot.angle and other state variables
 Add robot sensor data connections to detect and change parameters
 Add pan and zoom to canvas