Update interface.html - shadowclk

Add comments
Reduce timeout to 50ms

apps/shadowclk/interface.html

@@ -82,7 +82,6 @@
 
     #message-container {
       height: 40px;
-      /* adjust the height based on your desired fixed height */
       margin-top: 20px;
       text-align: center;
     }
@@ -106,6 +105,7 @@
   </div>
   <script>
     const messageDiv = document.getElementById('message');
+    // Create and add color buttons to the UI
     let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
     let colorButtonsContainer = document.getElementById('color-buttons-container');
     colors.forEach((color, i) => {
@@ -121,6 +121,7 @@
       });
     });
 
+    // Format the current time in the desired format
     function formatTime(date) {
       let hours = date.getHours();
       let minutes = date.getMinutes();
@@ -129,6 +130,7 @@
       return `${formattedHours}:${formattedMinutes}`;
     }
 
+    // Get the current date as a formatted string
     function getCurrentDate() {
       let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
       let suffixes = ["st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "st"];
@@ -140,12 +142,14 @@
       return `${month} ${day}${suffix}, ${year}`;
     }
 
+    // Get the current day of the week as a string
     function getCurrentDay() {
       let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
       let date = new Date();
       return days[date.getDay()];
     }
 
+    // Toggle the background color between dark and light
     function toggleBackground() {
       isDarkBg = !isDarkBg; // Toggle the background state
       let previewBox = document.getElementById("preview-box");
@@ -153,6 +157,7 @@
       drawText(selectedColor); // Redraw the text with updated color
     }
 
+    // Draw the time, date, and day of the week on the canvas
     function drawText(color) {
       let canvas = document.getElementById("preview-canvas");
       let ctx = canvas.getContext("2d");
@@ -218,6 +223,9 @@
       ctx.fillText(currentDay, xPos, yPos + 20);
     }
 
+    // Converts a hexadecimal color code to a 16-bit integer value.
+    // If the input hex string is in short format (#rgb), it's converted to long format (#rrggbb) first.
+    // Returns the 16-bit integer value representing the color.
     function hexToDec(hex) {
       if (hex.length === 4) {
         hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
@@ -249,6 +257,7 @@
       };
     }
 
+    // Save the provided theme to Bangle.js storage and set Shadow Clock as the default clock
     function saveThemeToSettings(theme) {
       Puck.eval('require("Storage").readJSON("setting.json", true)', (data) => {
         if (data) {
@@ -256,14 +265,11 @@
           if (!data.theme) {
             data.theme = {};
           }
-
           // Save all theme values
           for (let key in theme) {
             data.theme[key] = theme[key];
           }
-
           data.clock = "shadowclk.app.js"; // Set Shadow Clock as default
-
           Puck.write(`require("Storage").write("setting.json", ${JSON.stringify(data)});\n`, (result) => {
             console.log('Theme saved:', result);
           });
@@ -271,18 +277,20 @@
       });
     }
 
-    // Load Shadow Clock color and theme setting
+    // Initialize Shadow Clock color and theme settings with defaults
     let selectedColor = "#0ff";
     let isDarkBg = false;
 
+    // Load settings from Bangle.js storage
     function loadSettings(callback) {
       // Set a timeout for loading the settings
       const timeout = new Promise((_, reject) =>
-        setTimeout(() => reject(new Error("Timeout occurred")), 500)
+        setTimeout(() => reject(new Error("Timeout occurred")), 50)
       );
-
+      // Load settings from Bangle.js storage
       const loadSettingsFromStorage = new Promise((resolve) => {
-        Puck.eval('require("Storage").readJSON("shadowclk.json", true)', (data) => {
+        Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
+          let data = dataArray ? dataArray[0] : null;
           if (data) {
             // Apply color and theme from JSON
             const { color, theme } = data;
@@ -297,7 +305,7 @@
           resolve();
         });
       });
-
+      // Execute the callback after loading the settings, or use default values in case of a timeout or error
       Promise.race([loadSettingsFromStorage, timeout])
         .then(() => callback())
         .catch((error) => {
@@ -309,35 +317,35 @@
         });
     }
 
+    // Update the time display every second
     function updateTime() {
       setInterval(() => {
         drawText(selectedColor);
       }, 1000);
     }
 
+    // Display a message for a given duration and then remove it
     function displayMessage(text, timeout) {
       // Remove any existing message
       while (messageDiv.firstChild) {
         messageDiv.removeChild(messageDiv.firstChild);
       }
-
       // Create a new message element
       const message = document.createElement('p');
       message.innerHTML = text; // Use innerHTML instead of textContent
       message.style.fontSize = '24px';
       messageDiv.appendChild(message);
-
       // Remove the message element after the timeout
       setTimeout(() => {
         messageDiv.removeChild(message);
       }, timeout);
     }
 
+    // Attach an event listener to the 'upload' button to save theme and color settings to Bangle.js storage
     document.getElementById("upload").addEventListener("click", function () {
       // Save theme settings to Bangle.js
       let themeColors = createThemeColors(isDarkBg);
       saveThemeToSettings(themeColors);
-
       // Save Shadow Clock color setting
       let data = {
         color: selectedColor,
@@ -346,11 +354,11 @@
       Puck.write(`require("Storage").write("shadowclk.json", ${JSON.stringify(data)});\n`, (result) => {
         console.log('Color saved:', result);
       });
-
       // Display the message using displayMessage function
       displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
     });
 
+    // Load required fonts for the application
     function loadFonts() {
       return Promise.all([
         document.fonts.load('81px Londrina Solid'),