From 98b46f58fcd2a98bfa27412a9fd263e02b8216cb Mon Sep 17 00:00:00 2001
From: Jake <realrobotshk@gmail.com>
Date: Sun, 30 Mar 2025 22:10:40 +0800
Subject: [PATCH] implemented monacoEditor to make text editor much more
 advanced, rearranged screen elements

---
 game.js    | 66 ++++++++++++++++++++++++++++++++++++++++++++++---
 index.html | 72 +++++++++++++++++++++++++++++++++++++++++-------------
 todo.md    |  2 +-
 3 files changed, 118 insertions(+), 22 deletions(-)

diff --git a/game.js b/game.js
index 5cfdd96..5848b98 100644
--- a/game.js
+++ b/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();
+
+
+
+
+
diff --git a/index.html b/index.html
index 7f32990..a47d571 100644
--- a/index.html
+++ b/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 {
-            border: 1px solid black;
+        button {
+            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>
-    <h2>Console Output:</h2>
+    <!-- Monaco Editor -->
+    <div id="monaco-editor"></div>
+
+    <!-- Game Canvas -->
+    <canvas id="gameCanvas"></canvas>
+
+    <!-- Console Output -->
     <div id="console"></div>
 
-    <!-- Game canvas -->
-    <h2>Robot Simulation</h2>
-    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <!-- Buttons -->
+    <div style="grid-column: span 2; text-align: center;">
+        <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>
\ No newline at end of file
+</html>
diff --git a/todo.md b/todo.md
index 3e27120..c5289f3 100644
--- a/todo.md
+++ b/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