WebChucK IDE 2.1.5 [Draft]

public/examples/helloSineGUI.ck

@@ -3,7 +3,7 @@
  * via sliders and buttons. GUI float sliders go from [0.0,1.0]
  */
 
-/* Play a sine wave and control the frecuency with the GUI */
+/* Play a sine wave and control the frequency with the GUI */
 /*
     1. Open the GUI Panel below and hit "Generate GUI".
     2. Run the code.

public/favicon_io/site.webmanifest

@@ -1,19 +1,23 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "WebChucK IDE",
+  "short_name": "WebChucK IDE",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/favicon_io/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/favicon_io/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
-  "display": "standalone"
+  "display": "standalone",
+  "description": "A web-based integrated development environment (IDE) for ChucK, a programming language for real-time sound synthesis and music creation!",
+  "start_url": "/",
+  "lang": "en",
+  "dir": "ltr"
 }

src/components/examples/examples.ts

@@ -110,15 +110,15 @@ export default class Examples {
         Examples.newExample(
             "Hello Sine GUI",
             () => {
-                loadChuckFileFromURL("examples/helloSineGUI.ck")
+                loadChuckFileFromURL("examples/helloSineGUI.ck");
                 InputPanelHeader.setNotificationPing(0, true);
             },
             guiNested
         );
         Examples.newExample(
             "FM Synthesis GUI",
             () => {
-                loadChuckFileFromURL("examples/fmGUI.ck")
+                loadChuckFileFromURL("examples/fmGUI.ck");
                 InputPanelHeader.setNotificationPing(0, true);
             },
             guiNested
@@ -141,7 +141,7 @@ export default class Examples {
         Examples.newExample(
             "Keyboard Organ HID",
             () => {
-                loadChuckFileFromURL("examples/keyboardHID.ck")
+                loadChuckFileFromURL("examples/keyboardHID.ck");
                 InputPanelHeader.setNotificationPing(1, true);
             },
             hidNested

src/components/examples/moreExamples.ts

@@ -13,7 +13,8 @@ import ProjectSystem from "@/components/fileExplorer/projectSystem";
 import Examples from "./examples";
 import DropdownElement from "../navbar/dropdownElement";
 import * as JsSearch from "js-search";
-import { fetchDataFile } from "@/utils/fileLoader";
+import { isPlaintextFile } from "webchuck/dist/utils";
+import { File, fetchDataFile, fetchTextFile } from "@/utils/fileLoader";
 
 // JSON Structure
 interface MoreExamplesJSON {
@@ -322,8 +323,8 @@ export default class MoreExamples {
     }
 
     /**
-     * Create an item in the file explorer
-     * @param name
+     * Create a folder item in the file explorer
+     * @param name folder name
      */
     static createExplorerFolder(name: string) {
         const item = document.createElement("button");
@@ -335,6 +336,10 @@ export default class MoreExamples {
         MoreExamples.moreExamplesExplorer.appendChild(item);
     }
 
+    /**
+     * Create a file item in the file explorer
+     * @param file ChucKExample file
+     */
     static createExplorerFile(file: ChuckExample) {
         const item = document.createElement("button");
         item.classList.add("explorer-item");
@@ -368,7 +373,12 @@ export default class MoreExamples {
             MoreExamples.previewExample.code
         );
         MoreExamples.previewExample.data.forEach(async (url: string) => {
-            const file = await fetchDataFile(url);
+            let file: File | null = null;
+            if (isPlaintextFile(url)) {
+                file = await fetchTextFile(url);
+            } else {
+                file = await fetchDataFile(url);
+            }
             if (file !== null) {
                 ProjectSystem.addNewFile(file.name, file.data);
             }

src/components/inputPanel/inputPanelHeader.ts

@@ -41,7 +41,7 @@ export default class InputPanelHeader {
         InputPanelHeader.inputContainers.push(
             document.querySelector<HTMLDivElement>("#SensorContainer")!
         );
-        InputPanelHeader.inputPings.push(  
+        InputPanelHeader.inputPings.push(
             document.querySelector<HTMLSpanElement>("#SensorPing")!
         );
 
@@ -91,7 +91,9 @@ export default class InputPanelHeader {
      */
     static setNotificationPing(tabIndex: number, on: boolean) {
         for (let i = 0; i < InputPanelHeader.inputButtons.length; i++) {
-            InputPanelHeader.inputToggles[i].setNotificationPing(i == tabIndex && on);
+            InputPanelHeader.inputToggles[i].setNotificationPing(
+                i == tabIndex && on
+            );
         }
     }
 }

src/services/export/exportSnippets.ts

@@ -1,7 +1,8 @@
 export const MIXER_JS = `
       // MIXER CODE for GUI (if there are global variables)
+      const mixer = document.querySelector('#webchuck-gui');
       const sliders = [...chuckCode.matchAll(/\\bglobal float\\s+(\\w+)\\b/g)]
-      .map(([, variable]) => variable);
+          .map(([, variable]) => variable);
 
       if (sliders.length > 0) mixer.style.display = 'flex';
 

src/services/export/exportWebchuck.ts

@@ -100,13 +100,15 @@ async function exportWebchuck(
         description;
 
     // Check code for global variables to build mixer
-    const globals = getGlobalVariables(code);
-    let mixer_code = `const mixer = document.querySelector('#webchuck-gui');\n`;
-    mixer_code += globals.float.length > 0 ? MIXER_JS : ""; // only look at floats
-    wc_html = docFindReplace(wc_html, "{{{ MIXER_CODE }}}", mixer_code);
-    if (globals.float.length == 0) {
+    const mixerGlobals = getGlobalVariables(code);
+    let mixerCode = "";
+    if (mixerGlobals.float.length == 0) {
         wc_html.getElementById("webchuck-gui")?.remove();
+    } else {
+        mixerCode = MIXER_JS;
     }
+    // Set/clear mixer code
+    wc_html = docFindReplace(wc_html, "{{{ MIXER_CODE }}}", mixerCode);
 
     // Add in PRELOAD_FILES
     // get all projectFiles excluding the current active file