introduce debounce on output updates + linked box

codeeditor-app/elements/code-editor/code-editor.ts

@@ -3,6 +3,8 @@ import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
 import initScript from './injects/editor-init.txt';
+import spiralBoxesSolutionScript from './injects/spiral-boxes-solution.txt';
+import { debounceManager } from "../../../shared/ensure-debounce";
 
 export class CodeEditor extends BaseElement {
 
@@ -90,7 +92,15 @@ export class CodeEditor extends BaseElement {
                             label: 'rand',
                             detail: "gets a random number between two numbers",
                             kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'rand(${1:from}, ${1:to})',
+                            insertText: 'rand(${1:from}, ${2:to})',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'spiralBoxesSolutionSnippet',
+                            detail: "inserts solution of spiral boxes",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: spiralBoxesSolutionScript,
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         }
@@ -100,12 +110,16 @@ export class CodeEditor extends BaseElement {
         });
 
 
+        var debounce = debounceManager(1000);
         editor.onDidChangeModelContent((e) => {
             this.input = editor.getValue();
-            this.outputFrame.setScript(this.input);
+            debounce.ensureDebounce(() => {
+                this.outputFrame.setScript(this.input);
+            });
         });
 
         this.waitFor(this.outputFrame, () => {
+            console.log("setting script");
             this.outputFrame.setScript(this.input);
         });
 

codeeditor-app/elements/code-editor/injects/editor-init.txt

@@ -1,20 +1,4 @@
-const myDiv = document.createElement("div");
-myDiv.innerText = "hello moto";
-
-document.body.appendChild(myDiv);
-
-
-let i = 0;
-
-while (i < 10) {
-    console.log("hello " + i);
-    i++;
-}
-
-const obj = { hello: true, moto: "enabled" };
-
-console.log(obj);
-
-rect(10, 10, 100, 100);
-rect(rand(20, 70), rand(20, 70), 100, 100);
-rect(80, 80, 100, 100);
+box(10, 10, 20, 20);
+box(50, rand(100, 200), 20, 20);
+box(160, 50, 20, 20);
+box(center(), center(), 20, 20);

codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.txt

@@ -0,0 +1,47 @@
+const boxSize = 40;
+const stepSize = boxSize + boxSize / 4;
+let x = center() - boxSize / 2;
+let y = center() - boxSize / 2;
+let turns = 0;
+let currentDirection = 0;
+let currentStep = 1;
+let stepsInCurrentDirection = 1;
+
+while (!isOutsizeCanvas()) {
+    box(x, y, boxSize, boxSize);
+    moveAccordingToDirection();
+    setNextStepAndDirection();
+}
+
+function isOutsizeCanvas() {
+    return (x + stepSize) > width() ||
+           (y + stepSize) > height();
+}
+
+function moveAccordingToDirection() {
+    switch (currentDirection) {
+        case 0:
+            x += stepSize;
+            break;
+        case 1:
+            y -= stepSize;
+            break;
+        case 2:
+            x -= stepSize;
+            break;
+        case 3:
+            y += stepSize;
+            break;
+    }
+}
+
+function setNextStepAndDirection() {
+    if (currentStep % stepsInCurrentDirection == 0) {
+        currentDirection = (currentDirection + 1) % 4;
+        turns++;
+        if (turns % 2 == 0) {
+            stepsInCurrentDirection++;
+        }
+    }
+    currentStep++;
+}

codeeditor-app/elements/output-frame/output-frame.less

@@ -2,6 +2,7 @@ output-frame {
     width: 100%;
     height: 100%;
     display: block;
+    background-color: #f0f0f0;
 }
 
 output-frame > iframe {
@@ -9,4 +10,12 @@ output-frame > iframe {
     width: 100%;
     height: 100%;
     border: none;
+}
+
+
+
+@media (prefers-color-scheme: dark) {
+    output-frame {
+        background-color: #272727;
+    }
 }

codeeditor-app/elements/output-frame/output-frame.ts

@@ -1,6 +1,5 @@
 import { BaseElement } from "../../../shared/_base";
 import './output-frame.less';
-import { NotificationBubbles } from "../notification-bubbles/notification-bubbles";
 import { GetOutputFrameUrl } from "../../../shared/url-helpers";
 import { GetNotificationBubbles } from "../../../shared/getdom";
 import { postMessage } from "../../../shared/post-message";