Added Major Modifications

- Added SEO Configurations
- Removed Obo Blocks Logo
- Closes #2 Canvas Clear Issue
- Closes #3 Interupt execution
- Fixed additional printing on the terminal when inputting something
- Added Execptional handlers for some situations
- Added Dropdown to select the background of the canvas

src/SEO/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: 

src/SEO/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+ xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+ http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+
+<url>
+ <loc>https://obocode.roboticgenacademy.com/</loc>
+ <lastmod>2024-05-30T08:20:01+00:00</lastmod>
+</url>
+
+
+</urlset>

src/index.js

@@ -5,10 +5,7 @@ import maze from "./assets/img/maze.png";
 import {
  editor,
  insertPythonSnippet,
- makeUneditable,
  saveAsPythonFile,
- loadModifiedCode,
- saveModifideCode,
 } from "./editor/editor";
 
 import Sk from "./skulpt/skulpt";
@@ -19,6 +16,12 @@ import { outputfun, builtinRead } from "./skulpt/functions";
 /* Define the global variables */
 
 let editable = false;
+let stopExecution = false;
+let isCodeRunning = false;
+let backgroundImageMap = {
+ "No-Background": "none",
+ "maze": maze,
+}
 
 // ----------------------------------------
 
@@ -28,8 +31,9 @@ const blocklyDiv = document.getElementById("editor");
 const copyButton = document.getElementById("copy-button");
 const runcodeButton = document.getElementById("run-button");
 const clearButton = document.getElementById("clear-button");
+const stopButton = document.getElementById("stop-button");
 const exportButton = document.getElementById("export-button");
-const backgroundButton = document.getElementById("background-button")
+const selectElement = document.getElementById('background-selection');
 const notification = document.getElementById("notification");
 const notificationText = document.getElementById("notificationText");
 const runButtonText = document.getElementById("run-text");
@@ -44,17 +48,34 @@ const terminal = document.getElementById("terminal-output");
 /* Funtion to run the code */
 async function runcode() {
  let code = editor.state.doc.toString();
- var codeRunner = Sk.misceval.asyncToPromise(function () {
- return Sk.importMainWithBody("<stdin>", false, code, true);
- });
- codeRunner.then(
- function (mod) {
- console.log("success");
- },
- function (err) {
- console.log(err.toString());
+ if (code === "") {
+ showNotification("No code to run");
+ return;
+ }
+ if (isCodeRunning) {
+ showNotification("Code is already running");
+ return;
+ }
+ isCodeRunning = true;
+ Sk.misceval
+ .asyncToPromise(() => Sk.importMainWithBody("<stdin>", false, code, true), {
+ "*": () => {
+ if (stopExecution) throw "Execution interrupted";
+ },
+ })
+ .catch((err) => {
+ let errorMsg = err.toString();
+ if (errorMsg === "Execution interrupted") {
+ showNotification("Code execution stopped");
+ stopExecution = false;
+ isCodeRunning = false;
+ return;
+ }
+ alert(errorMsg);
+ }).finally(() => {
+ isCodeRunning = false;
  }
- );
+  );
 }
 
 /* Function to copy the code */
@@ -89,7 +110,15 @@ Sk.configure({ output: outputfun, read: builtinRead });
 
 // ----------------------------------------
 
-/* Event Listeners */
+selectElement.addEventListener('change', function(event) {
+ const selectedValue = event.target.value;
+ if(selectedValue === 'No-Background') {
+ blocklyDiv.style.backgroundImage = 'none';
+ }
+ else {
+ blocklyDiv.style.backgroundImage = `url(${backgroundImageMap[selectedValue]})`;
+ }
+});
 
 copyButton.addEventListener("click", () => {
  let code = editor.state.doc.toString();
@@ -106,10 +135,32 @@ runcodeButton.addEventListener("click", () => {
 });
 
 clearButton.addEventListener("click", () => {
+ if (isCodeRunning) {
+ showNotification("Stop the code execution first");
+ return;
+ }
+ let canvasElements = document.getElementsByTagName("canvas");
+ for (let i = 0; i < canvasElements.length; i++) {
+ let context = canvasElements[i].getContext("2d");
+ context.save();
+ context.setTransform(1, 0, 0, 1, 0, 0);
+ context.clearRect(0, 0, canvasElements[i].width, canvasElements[i].height);
+ context.restore();
+ }
  terminal.innerHTML = "Python 3.10 \n>>> ";
  showNotification("Terminal cleared");
 });
 
+stopButton.addEventListener("click", () => {
+ if (!isCodeRunning) {
+ showNotification("No code is running");
+ return;
+ }
+ if (confirm("Do you want to stop the execution?")) {
+ stopExecution = true;
+ showNotification("Code execution stopped");
+ }
+});
 
 exportButton.addEventListener("click", () => {
  const content = editor.state.doc.toString();
@@ -121,14 +172,13 @@ exportButton.addEventListener("click", () => {
  showNotification("Code exported as script.py");
 });
 
-backgroundButton.addEventListener("click", () => {
- blocklyDiv.style.backgroundImage = `url(${maze})`;
- showNotification("Background changed");
- }
-);
-
 document.addEventListener("DOMContentLoaded", () => {
  showNotification("Welcome to Python Editor");
+ let codesnippet = 
+ `import turtle\ncolors = ['red', 'purple', 'blue', 'green', 'orange', 'yellow']\nt = turtle.Turtle()\nturtle.bgcolor('black')\nfor x in range(360):\n\tt.pencolor(colors[x%6])\n\tt.width(x//100 + 1)\n\tt.forward(x)\n\tt.left(59) 
+ `
+
+ insertPythonSnippet(codesnippet)
  terminal.innerHTML = "Python 3.10 \n>>> ";
  notification.style.transition = "opacity 0.5s ease-in-out";
 });

src/skulpt/functions.js

@@ -2,7 +2,11 @@
 let terminal = document.getElementById('terminal-output');
 
 function outputfun(text) {
+ if (text === undefined || text === null || text === '') {
+ return;
+ }
  terminal.innerHTML += text + '>>> ';
+
 }
 
 function inputfun() {

src/styles/index.css

@@ -65,34 +65,27 @@
  width: 100%;
 }
 
-
 .editor {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain;
  min-height: 400px;
  min-width: 400px;
 }
-.editing-image
-{
+.editing-image {
  height: 50%;
  opacity: 0;
- transition: 
- height 0.5s,
- opacity 1.5s;
+ transition: height 0.5s, opacity 1.5s;
 }
-.editing-image:active
-{
+.editing-image:active {
  height: 70%;
  opacity: 1;
 }
-.editing-image:hover
-{
+.editing-image:hover {
  height: 70;
  opacity: 1;
 }
 
-
 .code {
  grid-area: code;
  display: flex;
@@ -110,8 +103,6 @@
  resize: vertical;
 }
 
-
-
 div:nth-of-type(2)::-webkit-resizer {
  background: transparent;
 }
@@ -170,6 +161,26 @@ div:nth-of-type(2)::-webkit-resizer {
 #edit-button:hover {
  background-color: #1a3a59ec;
 }
+
+select {
+ appearance: none;
+ /* safari */
+ -webkit-appearance: none;
+ /* other styles for aesthetics */
+ width: 100%;
+ padding: 0.5em 2em 0.5em 1em;
+ border: none;
+ border-radius: 0.3rem;
+ color: #ffffff;
+ font-weight: 400;
+ font-size: medium;
+ background-color: #9d9d9d;
+}
+select:focus {
+ outline: none;
+ border-radius: 0.3rem;
+ border: none;
+}
 .code-snippet {
  display: flex;
  flex-direction: column;
@@ -246,9 +257,9 @@ div:nth-of-type(2)::-webkit-resizer {
  font-style: normal;
  grid-template-rows: 1fr 8fr 3fr;
  grid-template-areas:
- "navBar navBar navBar navBar"
- "code editor editor editor"
- "output editor editor editor";
+  "navBar navBar navBar navBar"
+  "code editor editor editor"
+  "output editor editor editor";
  grid-gap: 0.5rem;
  height: calc(100vh - 0.5rem);
 }

src/templates/index.html

@@ -4,16 +4,30 @@
  <meta charset="UTF-8" />
  <meta
  name="description"
- content="Obo Blocks : Convert Scratch Blocks to Python with Pydiode interpretation support and MicroPython extensions for seamless web-based Python execution."
+ content="Obo Code : Run Python Turtle library with Skulpt interpretation support"
  />
  <meta
  name="keywords"
- content="Obo Blocks,python,google,scratch,Blockly,visual programming,pyodide,web application,roboticgen academy,roboticgen"
+ content="Obo Code,python,skulpt,web application,roboticgen academy,roboticgen"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preload" as="image" href="academyLogo.webp" />
  <link rel="preload" as="image" href="OboCode.png" />
  <title>Obo Code</title>
+ <script type="text/javascript">
+ (function (c, l, a, r, i, t, y) {
+ c[a] =
+ c[a] ||
+ function () {
+ (c[a].q = c[a].q || []).push(arguments);
+ };
+ t = l.createElement(r);
+ t.async = 1;
+ t.src = "https://www.clarity.ms/tag/" + i;
+ y = l.getElementsByTagName(r)[0];
+ y.parentNode.insertBefore(t, y);
+ })(window, document, "clarity", "script", "mk0lg8m9x7");
+ </script>
  </head>
 
  <body>
@@ -43,19 +57,22 @@
  </nav>
 
  <div class="blocky-editor" id="blocky-editor">
-
  <div class="button-row">
- <label for="terminal-output" class="output-title">Turtle Workspace</label>
+ <label for="terminal-output" class="output-title"
+ >Turtle Workspace</label
+ >
  <div class="button-group">
- <a class="button" id="background-button"
- ><i id="background-clear" class="fa fa-trash"></i>
- <span id="background-text">Change Background</span></a
+ <select
+ class="button"
+ name="background-selection"
+ id="background-selection"
  >
+ <option selected value="No-Background">No Background</option>
+ <option value="maze">Maze</option>
+ </select>
  </div>
  </div>
- <div class="editor" id="editor"> 
-
- </div>
+ <div class="editor" id="editor"></div>
  </div>
  <div class="code" id="code" style="min-height: 10vh">
  <div class="button-row">
@@ -84,6 +101,10 @@
  ><i id="run-clear" class="fa fa-trash"></i>
  <span id="run-text">Clear</span></a
  >
+ <a class="button" id="stop-button"
+ ><i id="stop-clear" class="fa fa-trash"></i>
+ <span id="stop-text">Stop</span></a
+ >
  </div>
  </div>
  <div class="terminal-output-div">
@@ -101,29 +122,5 @@
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-TQ59G8QBC7"
  ></script>
- <script>
- window.dataLayer = window.dataLayer || [];
- function gtag() {
- dataLayer.push(arguments);
- }
- gtag("js", new Date());
-
- gtag("config", "G-TQ59G8QBC7");
- </script>
- <!-- Clarity tag -->
- <script type="text/javascript">
- (function (c, l, a, r, i, t, y) {
- c[a] =
- c[a] ||
- function () {
- (c[a].q = c[a].q || []).push(arguments);
- };
- t = l.createElement(r);
- t.async = 1;
- t.src = "https://www.clarity.ms/tag/" + i;
- y = l.getElementsByTagName(r)[0];
- y.parentNode.insertBefore(t, y);
- })(window, document, "clarity", "script", "m86gvlhvgc");
- </script>
  </body>
 </html>

webpack.config.js

@@ -73,6 +73,7 @@ module.exports = {
  patterns: [
  { from: "src/assets/img/academyLogo.webp", to: ""},
  { from: "src/assets/img/OboCode.png", to: ""},
+ { from: "src/SEO", to: ""},
  ]
  }),
  new MiniCssExtractPlugin({