sugarlabs · justin212407 · Mar 11, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 14, 2025
diff --git a/css/activities.css b/css/activities.css
@@ -2017,6 +2017,6 @@ table {
   font-weight: bold;
   z-index: 1000;
   text-align: center;
-  min-width: 250px;
-  max-width: 80%;
+  min-width: 350px;
+  max-width: 90%;
 }
diff --git a/css/play-only-mode.css b/css/play-only-mode.css
@@ -118,19 +118,79 @@
   }
 
 @media (max-width: 768px), (max-height: 600px) {
-    /* Enable the auxiliary button */
     .play-only #toggleAuxBtn {
         pointer-events: auto !important;
         opacity: 1 !important;  
     }
 
-    /* Hide the full auxiliary toolbar */
-    .play-only #aux-toolbar {
-        display: none !important;
+    .play-only #enableHorizScrollIcon {
+        display: none !important; 
+        visibility: hidden !important; 
+        height: 0 !important; 
+        width: 0 !important; 
+        pointer-events: none !important; 
+        overflow: hidden !important;
+    }   
+
+    .play-only #mergeWithCurrentIcon {
+        display: none !important; 
+        visibility: hidden !important; 
+        height: 0 !important; 
+        width: 0 !important; 
+        pointer-events: none !important; 
+        overflow: hidden !important;
+    }   
+
+    .play-only #wrapTurtle {
+        display: none !important; 
+        visibility: hidden !important; 
+        height: 0 !important; 
+        width: 0 !important; 
+        pointer-events: none !important; 
+        overflow: hidden !important;
+    }   
+
+    .play-only #chooseKeyIcon {
+        display: none !important; 
+        visibility: hidden !important; 
+        height: 0 !important; 
+        width: 0 !important; 
+        pointer-events: none !important; 
+        overflow: hidden !important;
     }
+
+    .play-only #advancedMode {
+        display: none !important; 
+        visibility: hidden !important; 
+        height: 0 !important; 
+        width: 0 !important; 
+        pointer-events: none !important; 
+        overflow: hidden !important;
+    }
+
+    .play-only [id="activity.textMsg"] {
+        position: fixed !important;
+        top: 50% !important;  
+        left: 50% !important; 
+        transform: translate(-50%, -50%) !important; 
+        max-width: 80% !important;
+        padding: 12px 18px !important;
+        background: rgba(33, 150, 243, 0.95) !important; 
+        color: #fff !important;
+        text-align: center !important;
+        border-radius: 8px !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
+        font-size: 16px !important;
+        z-index: 10000 !important; 
+        pointer-events: none !important; 
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }    
+
+
 }
 
-/* Make the container background invisible without affecting child elements */
 .play-only #buttoncontainerBOTTOM {
     background: transparent !important;
     border: none !important;
@@ -140,7 +200,6 @@
     box-shadow: none !important;
 }
 
-/* Ensure the Home button remains visible */
 .play-only #Home\ \[HOME\] {
     display: flex !important;
     position: fixed !important;

diff --git a/documentation/README.md b/documentation/README.md
@@ -45,6 +45,7 @@ You can run it from
 7. [Widget Palette](#7-widget-palette)
 8. [Stats](#8-stats)
 9. [Planet View](#9-planet-view)
+10. [Play Only Mode](#10-play-only-mode)
 
 ## <a>1. Getting Started</a>
 
@@ -697,3 +698,20 @@ can download.
 ![Planet](./planet-4.png)
 
 [Back to Table of Contents](#table-of-contents)
+
+## 10. Play Only Mode
+
+[Back to Table of Contents](#table-of-contents)
+
+This document outlines the behavior of Music Blocks' Play-Only Mode based on different screen sizes.
+
+### Screen Size Behavior Table
+
+| Screen Size                             | Behavior Summary  |
+|-----------------------------------------|-------------------|
+| <h4>Below 768px width OR below 600px height</h4>  ("Play-Only Mode") | - **Aux Menu Disabled**: The full auxiliary toolbar is hidden.  <br> - **Notification Shown**: A persistent banner notifies the user to use a larger display for the full experience.  <br> - **Horizontal Scrolling**: Enabled by default to accommodate smaller layouts.  <br> - **Hidden Elements**: Certain editing controls (e.g., block size, palette, grid) are hidden or collapsed.  |
+| <h4>Above 768px width OR below 600px height</h4> ("Full Desktop Layout") | - **Full Menus**: All toolbar items, palettes, and advanced features are visible.  <br> - **Horizontal Scrolling**: Off by default (unless user manually toggles).  <br> - **No Play-Only Banner**: Notification is not shown at large resolutions. |
+
+### Notes
+- The exact breakpoints (e.g., `X` for a larger desktop threshold) can be adjusted as needed.
+- Currently, `768px width` or `600px height` is the key cutoff for triggering Play-Only Mode.
diff --git a/index.html b/index.html
@@ -234,31 +234,32 @@
                 </div>
             </footer>
 
-            <dialog id="lilypondModal" class="modal" tabindex="-1">
-                <!-- Modal content for Lilypond save dialog -->
-                <div class="modal-content" tabindex="-1">
-                    <span class="close">&times;</span>
-                    <div id="fileNameText"></div>
-                    <input type="text" id="fileName" tabindex="-1">
-                    <p></p>
-                    <div id="titleText"></div>
-                    <input type="text" id="title" tabindex="-1">
-                    <p></p>
-                    <div id="authorText"></div>
-                    <input type="text" id="author" tabindex="-1">
-                    <p></p>
-                    <div id="MIDIText"></div>
-                    <input type="checkbox" id="MIDICheck" tabindex="-1">
-                    <p></p>
-                    <div id="guitarText"></div>
-                    <input type="checkbox" id="guitarCheck" tabindex="-1">
-                    <p></p>
-                    <p><button class="confirm-button" id="submitLilypond"></button></p>
-                    <!-- <button id="submitPDF"></button></p> -->
-                </div>
-            </dialog>
-            <div class="materialize-iso" tabindex="-1">
-                <nav id="toolbars" class="nav-wrapper">
+        <div id="lilypondModal" class="modal" tabindex="-1">
+            <!-- Modal content for Lilypond save dialog -->
+            <div class="modal-content" tabindex="-1">
+                <span class="close">&times;</span>
+                <div id="fileNameText"></div>
+                <input type="text" id="fileName" tabindex="-1" />
+                <p></p>
+                <div id="titleText"></div>
+                <input type="text" id="title" tabindex="-1" />
+                <p></p>
+                <div id="authorText"></div>
+                <input type="text" id="author" tabindex="-1" />
+                <p></p>
+                <div id="MIDIText"></div>
+                <input type="checkbox" id="MIDICheck" tabindex="-1" />
+                <p></p>
+                <div id="guitarText"></div>
+                <input type="checkbox" id="guitarCheck" tabindex="-1" />
+                <p></p>
+                <p><button id="submitLilypond"></button></p>
+                <!-- <button id="submitPDF"></button></p> -->
+            </div>
+        </div>
+
+        <div class="materialize-iso" tabindex="-1">
+            <nav id="toolbars" class="nav-wrapper" role="navigation">
                 <div class="blue nav-wrapper" tabindex="-1">
                         <div id="mb-logo" class="logo left tooltipped"
                             style="display: flex; align-items: center; line-height: 0; height: 100%; padding-right: 0;"
@@ -692,14 +693,15 @@
         document.addEventListener('MSFullscreenChange', handleFullscreenChange);
 
         function handleFullscreenChange() {
-            var iconCode = document.querySelector('#FullScrIcon');
-            count = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement ? 1 : 0;
-            iconCode.textContent = count ? '\ue5d1' : '\ue5d0';
+            // Add a timeout to ensure viewport dimensions are updated
+            setTimeout(() => {
+                togglePlayOnlyMode();
+            }, 100); // Delay to allow viewport dimensions to stabilize
         }
     </script>
 
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
+        document.addEventListener('DOMContentLoaded', function() {
             let persistentNotification = null;
 
             function showPersistentNotification() {
@@ -733,10 +735,11 @@
             }
 
             function togglePlayOnlyMode() {
-                const isSmallScreen = (window.innerWidth < 768) || (window.innerHeight < 600);
+                const isSmallScreen = (window.innerWidth < 768) || (window.innerHeight < 600); // Use viewport dimensions
                 const body = document.body;
                 const homeButton = document.getElementById("Home [HOME]");
                 const buttonContainer = document.getElementById("buttoncontainerBOTTOM");
+                const canvas = document.getElementById("canvas");
 
                 if (isSmallScreen) {
                     // Enable play-only mode
@@ -748,7 +751,9 @@
                         buttonContainer.style.justifyContent = "flex-end";
                         buttonContainer.style.alignItems = "center";
                     }
-                    if (homeButton) {
+
+                    // Only show the home button if the canvas is visible
+                    if (homeButton && canvas && canvas.style.display !== "none") {
                         homeButton.style.display = "flex";
                         homeButton.style.position = "fixed";
                         homeButton.style.right = "15px";
@@ -771,6 +776,7 @@
                     if (homeButton) homeButton.style = "";
                     if (buttonContainer) buttonContainer.style = "";
 
+                    // Show certain elements
                     showElementById("Show/hide blocks");
                     showElementById("Expand/collapse blocks");
                     showElementById("Decrease block size");
@@ -780,9 +786,22 @@
                 }
             }
 
+            function handleFullscreenChange() {
+                // Add a timeout to ensure viewport dimensions are updated
+                setTimeout(() => {
+                    togglePlayOnlyMode();
+                }, 100); // Delay to allow viewport dimensions to stabilize
+            }
+
             togglePlayOnlyMode();
 
             window.addEventListener("resize", togglePlayOnlyMode);
+
+            // Add fullscreenchange event listener to re-evaluate play-only mode
+            document.addEventListener("fullscreenchange", handleFullscreenChange);
+            document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+            document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+            document.addEventListener("MSFullscreenChange", handleFullscreenChange);
         });
     </script>