[3851] - Feat/send changes of adding block

dockerfile

@@ -1,14 +1,17 @@
-
-FROM python:latest
-
+# First stage: Build stage
+FROM python:latest AS build
 
 WORKDIR /app
 
+COPY . .
 
-COPY .  .
+# Second stage: Final stage
+FROM python:latest
 
+WORKDIR /app
 
-EXPOSE 3000
+COPY --from=build /app /app
 
+EXPOSE 3000
 
 CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]

guide/README.md

@@ -1475,7 +1475,7 @@ While a bit fanciful, this example, which can be run by clicking on
 the link below, takes musical paint in a novel direction.
 
 [RUN
-LIVE](https://walterbender.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True)
+LIVE](https://sugarlabs.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True)
 
 ## <a name="ENSEMBLE">3.8 Ensemble</a>
 

guide/guide.html

@@ -215,6 +215,7 @@ <h2 id="2-making-sounds"><a name="NOTES">2. Making Sounds</a></h2>
           <a href="#3-programming-with-music">Next Section (3. Programming with Music)</a>
         </p>
         <p>
+
           Music Blocks incorporates many common elements of music, such as
           <a href="#22-pitch-blocks">pitch</a>, <a href="#21-note-value-blocks">rhythm</a>,
           <a href="#341-set-volume-and-crescendo">volume</a>, and, to some degree,
@@ -2406,7 +2407,7 @@ <h3 id="37-interactions"><a name="INTERACTIONS">3.7 Interactions</a></h3>
         </p>
         <p>
           <a
-            href="https://walterbender.github.io/musicblocks/index.html?id=1523896294964170&amp;run=True&amp;run=True"
+            href="https://sugarlabs.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True"
             >RUN LIVE</a
           >
         </p>

index.html

@@ -796,6 +796,16 @@
                                 >
                                     <a style="color: transparent;">space&nbsp;&nbsp;&nbsp;</a>
                                 </li>
+                                <li>
+                                    <a
+                                        id="collaborateIcon"
+                                        class="tooltipped"
+                                        data-position="bottom"
+                                        ><i class="material-icons md-48"
+                                            >groups</i
+                                        ></a
+                                    >
+                                </li>
                                 <li>
                                     <a
                                         id="restoreIcon"

js/activity.js

@@ -551,6 +551,39 @@ class Activity {
             })
         }
 
+        // Initialize the collaboration
+        this._initiateCollaboration = () => {
+            this.collaboration.startCollaboration();
+            this.blocks.isLocalUpdate = true;
+        };
+
+        // Render the project from received data
+        this.renderProjectFromData = (update) => {
+            const data = JSON.parse(update);
+            document.body.style.cursor = "wait";
+            // this.doLoadAnimation();
+            this.blocks.isLocalUpdate = false;
+
+            // Render the blocks
+            for (const name in this.palettes.dict) {
+                this.palettes.dict[name].hideMenu(true);
+            }
+
+            this.stage.removeAllEventListeners("trashsignal");
+
+            // Wait for the old blocks to be removed.
+            // eslint-disable-next-line no-unused-vars
+            const __listener = (event) => {
+                this.blocks.loadNewBlocks(data);
+                this.stage.removeAllEventListeners("trashsignal");
+            };
+
+            this.stage.addEventListener("trashsignal", __listener, false);
+            this.sendAllToTrash(false, false);
+            this._allClear(false);
+            this.refreshCanvas();
+        };
+
         /**
         * Sets up plugin and palette boilerplate.
         * This function initializes various properties related to the plugin objects,
@@ -3347,6 +3380,11 @@ class Activity {
             this.refreshCanvas();
         };
 
+        // Start the collaboration
+        const initiateCollaboration = (activity) => {
+            activity._initiateCollaboration();
+        }
+
         this.handleKeyDown = (event) => {
 
             if (event.ctrlKey && event.key === "z") {
@@ -5377,6 +5415,7 @@ class Activity {
 
             this.pasteBox = new PasteBox(this);
             this.languageBox = new LanguageBox(this);
+            this.collaboration = new Collaboration(this);
 
             // Show help on startup if first-time user.
             if (this.firstTimeUser) {
@@ -5425,6 +5464,7 @@ class Activity {
             if (_THIS_IS_MUSIC_BLOCKS_) {
                 this.toolbar.renderChooseKeyIcon(chooseKeyMenu);
             }
+            this.toolbar.renderCollaborateIcon(initiateCollaboration);
             this.toolbar.renderJavaScriptIcon(toggleJSWindow);
             this.toolbar.renderLanguageSelectIcon(this.languageBox);
             this.toolbar.renderWrapIcon();

js/blocks.js

@@ -168,6 +168,8 @@ class Blocks {
 
         this.selectedBlocks = [];
 
+        this.isLocalUpdate = false;
+
         /**
          * We stage deletion of prototype action blocks on the palette so
          * as to avoid palette refresh race conditions.
@@ -3066,6 +3068,14 @@ class Blocks {
             this.visible = true;
         };
 
+        // Emit a message when a new block is created
+        this.emitAddedBlock = () => {
+            if(this.activity.collaboration.hasCollaborationStarted){
+                const update = this.activity.collaboration.convertBlockListToHtml();
+                this.activity.collaboration.socket.emit("new-block-added", update);
+            }
+        };
+
         /**
          * Make a new block with connections
          * @param - name - new variable
@@ -3168,6 +3178,15 @@ class Blocks {
 
             /** and we need to load the images into the container. */
             myBlock.imageLoad();
+
+            /** Signal that a new block is created  */
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                if(this.isLocalUpdate){
+                    setTimeout(() => {
+                        this.emitAddedBlock();
+                    }, 200);
+                };
+            };
             return myBlock;
         };
 
@@ -6525,6 +6544,10 @@ class Blocks {
                     }
                 }
             }
+
+            if(this.activity.collaboration.hasCollaborationStarted){
+                this.isLocalUpdate = true;
+            }
         };
 
         /**

js/collaboration/collaboration.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // Copyright (c) 2024 Ajeet Pratap Singh
 //
 // This program is free software; you can redistribute it and/or
@@ -14,42 +15,64 @@
 
 /* eslint-disable no-undef */
 
-const RETRIES = 5;
-const DELAY_DURATION = 2000;
-let attempts = 0;
 
-function stopConnection(socket) {
-    if(attempts >= RETRIES){
-        console.log("Maximum calls to make connection exceeded. Stopped making calls");
-        socket.disconnect();
+class Collaboration {
+    constructor(activity) {
+        this.activity = activity;
+        this.RETRIES = 5;
+        this.DELAY_DURATION = 2000;
+        this.attempts = 0;
+        this.socket = null;
+        this.blockList = this.activity.blocks.blockList;
+        this.PORT = "http://localhost:8080/";
+        this.hasCollaborationStarted = false;
+        this.updatedProjectHtml = null;
     }
-}
 
-function makeConnection(){
+    // Convert the blockList into html
+    convertBlockListToHtml = () => {
+        this.updatedProjectHtml = this.activity.prepareExport();
+        return this.updatedProjectHtml;
+    };
 
-    // connect to the local server
-    const socket = io("http://localhost:8080/");
-    socket.on("connect", () => {
-        try{
-            console.log("connected to the server");
-        } catch(error){
-            console.log("Connection failed", error);
+    // Stop making calls to the socket server
+    stopConnection = (socket) => {
+        if (this.attempts >= this.RETRIES) {
+            console.log("Maximum calls to make connection exceeded. Stopped making calls");
+            socket.disconnect();
         }
-    });
+    };
 
-    socket.on("connect_error", (error) => {
-        attempts++;
-        console.log("Failed to connect to the socket server. Retrying in few seconds...");
-        setTimeout(stopConnection(socket), DELAY_DURATION);
-    });
-}
+    // Make calls to the socket server
+    makeConnection = () => {
+        // connect to the local server
+        const socket = io(this.PORT);
+        socket.on("connect", () => {
+            this.socket = socket;
+            try {
+                console.log("connected to the server");
+                this.hasCollaborationStarted = true;
+            } catch (error) {
+                console.log("Connection failed", error);
+            }
+        });
 
-function startCollaboration(){
-    document.addEventListener("DOMContentLoaded", () => {
-        makeConnection();
-        // initialiseDoc();
-    });
-}
+        socket.on("connect_error", () => {
+            this.attempts++;
+            console.log("Failed to connect to the socket server. Retrying in few seconds...");
+            setTimeout(this.stopConnection(socket), this.DELAY_DURATION);
+        });
 
-startCollaboration();
+        socket.on("new-block-added", (update) => {
+            this.activity.textMsg("New block added. rendering...");
+            setTimeout(this.activity.hideMsgs, 10000);
+            this.activity.renderProjectFromData(update);
+        });
+    };
+
+    // Start the collaboration
+    startCollaboration = () => {
+        this.makeConnection();
+    };
+}
 

js/toolbar.js

@@ -48,10 +48,10 @@ class Toolbar {
                 ["mb-logo", _("About Music Blocks")],
                 ["play", _("Play")],
                 ["stop", _("Stop")],
-                ["record",_("Record")],
+                ["record", _("Record")],
                 ["Full Screen", _("Full screen")],
                 ["FullScreen", _("Full screen")],
-		["Toggle Fullscreen", _("Toggle Fullscreen")],
+                ["Toggle Fullscreen", _("Toggle Fullscreen")],
                 ["newFile", _("New project")],
                 ["load", _("Load project from file")],
                 ["saveButton", _("Save project")],
@@ -71,6 +71,7 @@ class Toolbar {
                 ["chooseKeyIcon", _("Set Pitch Preview")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
                 ["restoreIcon", _("Restore")],
+                ["collaborateIcon", _("Collaborate")],
                 ["beginnerMode", _("Switch to beginner mode")],
                 ["advancedMode", _("Switch to advanced mode")],
                 ["languageSelectIcon", _("Select language")],
@@ -132,6 +133,7 @@ class Toolbar {
                 _("Set Pitch Preview"),
                 _("JavaScript Editor"),
                 _("Restore"),
+                _("Collaborate"),
                 _("Switch to beginner mode"),
                 _("Switch to advanced mode"),
                 _("Select language"),
@@ -177,7 +179,7 @@ class Toolbar {
                 ["record", _("Record")],
                 ["Full Screen", _("Full Screen")],
                 ["FullScreen", _("Full Screen")],
-		["Toggle Fullscreen", _("Toggle Fullscreen")],
+                ["Toggle Fullscreen", _("Toggle Fullscreen")],
                 ["newFile", _("New project")],
                 ["load", _("Load project from file")],
                 ["saveButton", _("Save project")],
@@ -196,6 +198,7 @@ class Toolbar {
                 ["mergeWithCurrentIcon", _("Merge with current project")],
                 ["toggleJavaScriptIcon", _("JavaScript Editor")],
                 ["restoreIcon", _("Restore")],
+                ["collaborateIcon", _("Collaborate")],
                 ["beginnerMode", _("Switch to beginner mode")],
                 ["advancedMode", _("Switch to advanced mode")],
                 ["languageSelectIcon", _("Select language")],
@@ -252,6 +255,7 @@ class Toolbar {
                 _("Merge with current project"),
                 _("JavaScript Editor"),
                 _("Restore"),
+                _("Collaboration"),
                 _("Switch to beginner mode"),
                 _("Switch to advanced mode"),
                 _("Select language"),
@@ -892,6 +896,13 @@ class Toolbar {
         };
     }
 
+    renderCollaborateIcon(onclick) {
+        const collaborateIcon = docById("collaborateIcon");
+        collaborateIcon.onclick = () => {
+            onclick(this.activity);
+        }
+    }
+
     /**
      * Renders the choose key icon with the provided onclick handler.
      * 

js/turtledefs.js

@@ -16,7 +16,7 @@
    _, ADVANCEDBUTTON, BIGGERBUTTON, CARTESIANBUTTON, CLEARBUTTON,
    COLLAPSEBLOCKSBUTTON, COLLAPSEBUTTON, GOHOMEBUTTON, HELPBUTTON,
    HIDEBLOCKSBUTTON, LANGUAGEBUTTON, LOADBUTTON, MENUBUTTON,
-   NEWBUTTON, PLANETBUTTON, PLUGINSDELETEBUTTON, RESTORETRASHBUTTON,
+   NEWBUTTON, PLANETBUTTON, PLUGINSDELETEBUTTON, RESTORETRASHBUTTON,COLLABORATEBUTTON
    RHYTHMPALETTEICON, RUNBUTTON, SAVEBUTTON, SCROLLUNLOCKBUTTON,
    SHORTCUTSBUTTON, SLOWBUTTON, SMALLERBUTTON, STATSBUTTON,
    STEPBUTTON, STOPTURTLEBUTTON, WRAPTURTLEBUTTON, _THIS_IS_TURTLE_BLOCKS_,
@@ -728,6 +728,16 @@ const createHelpContent = (activity) => {
                 base64Encode(RESTORETRASHBUTTON))
 
     ]);
+
+    HELPCONTENT.push([
+        _("Collaborate"),
+        _("Start collaboration on a project"),
+        "data:image/svg+xml;base64," +
+            window.btoa(
+                base64Encode(COLLABORATEBUTTON))
+
+    ]);
+
     HELPCONTENT.push([
         _("Switch mode"),
         _("Switch between beginner and advance modes."),