StarBattleLab · itadrous73 · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025 · Sep 8, 2025
diff --git a/Extensions/discord.html b/Extensions/discord.html
@@ -1,17 +1,17 @@
 <!-- ===============================================================================
 
   *                                                                              
-  *  Title: Parse the Stars - Discord Community Hub                              
+  *  Title: Starbattle.org - Discord Community Hub                              
   *                                                                              
   *  @author Isaiah Tadrous                                                       
-  *  @version 1.0.1                                                               
+  *  @version 1.1.0                                                               
   *                                                                              
   * -------------------------------------------------------------------------------
   *                                                                              
   *  Description:                                                                
   *                                                                              
   *  This HTML file runs a single-page web application that acts as a community  
-  *  hub for the "Parse the Stars" Discord server, which focuses on the Star     
+  *  hub for the Starbattle Discord server, which focuses on the Star     
   *  Battle puzzle game. Built using React and styled with Tailwind CSS, the     
   *  app loads entirely in the browser from a single HTML file.                  
   *                                                                              
@@ -36,6 +36,9 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link rel="icon" type="image/png" href="../Icons/favicon-96x96.png" sizes="96x96" />
+	<link rel="icon" type="image/svg+xml" href="../Icons/favicon.svg" />
+	<link rel="shortcut icon" href="../Icons/favicon.ico" />
     <title>Discord Community Hub</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
@@ -211,12 +214,12 @@
 				<
 				div className = "flex items-center gap-3 mb-8" >
 				<
-				img src = "https://cdn.discordapp.com/icons/1392611643476672583/b4b4aa5c8b8ed72ce9d8e6e77ae40664.png?size=60&quality=lossless"
+				img src = "https://cdn.discordapp.com/icons/1392611643476672583/59e15dd0ffe4a6cfce9702858b9dbeb2.png?size=600&quality=lossless"
 				alt = "Logo"
-				className = "w-12 h-12 rounded-full" / >
+				className = "w-16 h-16 rounded-full" / > 
+				<h1 className = "text-3xl font-bold text-white" > StarBattle < /h1>
+				</div>	
 				<
-				h1 className = "text-xl font-bold text-white" > Parse the Stars < /h1> <
-				/div> <
 				nav className = "flex-grow" >
 				<
 				ul className = "space-y-2" > {
@@ -894,4 +897,3 @@
 </body>
 
 </html>
-
diff --git a/Icons/apple-touch-icon.png b/Icons/apple-touch-icon.png
diff --git a/Icons/favicon-96x96.png b/Icons/favicon-96x96.png
diff --git a/Icons/favicon.ico b/Icons/favicon.ico
diff --git a/Icons/favicon.svg b/Icons/favicon.svg
diff --git a/Icons/web-app-manifest-192x192.png b/Icons/web-app-manifest-192x192.png
diff --git a/Icons/web-app-manifest-512x512.png b/Icons/web-app-manifest-512x512.png
diff --git a/Main/index.html b/Main/index.html
@@ -4,7 +4,7 @@
  * 
  *  @author Joseph Bryant
  *  @refactored by Isaiah Tadrous
- *  @version 2.2.0
+ *  @version 2.3.0
  * 
  * -------------------------------------------------------------------------------
  * 
@@ -28,17 +28,25 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Star Battle Playground</title>
 
+	<link rel="icon" type="image/png" href="../Icons/favicon-96x96.png" sizes="96x96" />
+	<link rel="icon" type="image/svg+xml" href="../Icons/favicon.svg" />
+
     <!-- Redirection Script -->
     <script>
-        (function() {
-            // On initial load, check if the screen is in portrait mode (height > width).
-            if (window.innerHeight > window.innerWidth) {
-                // If so, redirect to the mobile site.
-                // We use replace() to prevent the desktop page from being added to the session history.
-                window.location.replace('./mobile/index.html');
-            }
-        })();
-    </script>
+	    (function() {
+	        // On initial load, check if the screen is in portrait mode (height > width).
+	        if (window.innerHeight > window.innerWidth) {
+	            // Get the current URL's query string (e.g., "?sbn=...")
+	            const queryString = window.location.search;
+
+	            // Construct the new URL for the mobile site, appending the query string.
+	            const mobileUrl = './mobile/index.html' + queryString;
+
+	            // Redirect to the mobile site, preserving the URL parameters.
+	            window.location.replace(mobileUrl);
+	        }
+	    })();
+	</script>
 
     <link rel="stylesheet" href="tailwind.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">

diff --git a/Main/mobile/PWA/install-prompting.js b/Main/mobile/PWA/install-prompting.js
@@ -0,0 +1,209 @@
+/**
+ * **********************************************************************************
+ * Title: Safari Progressive Web App Installation System
+ * **********************************************************************************
+ * @author Isaiah Tadrous
+ * @version 2.2.1
+ * *-------------------------------------------------------------------------------
+ * Cross-platform PWA installation system specifically designed for Safari browsers.
+ * Automatically detects Safari environments and presents user-friendly installation
+ * prompts with step-by-step instructions for adding the web application to the
+ * device home screen. Features responsive design, modal overlays, and proper
+ * event handling for optimal user experience across iOS and macOS Safari.
+ * **********************************************************************************
+ */
+
+// Detect Safari browser environment and check installation status
+const isSafariCheck = /^((?!chrome|android|crios|fxios|opios).)*safari/i.test(navigator.userAgent) &&
+                      navigator.vendor && navigator.vendor.indexOf('Apple') > -1;
+const isInstalled = 'standalone' in window.navigator && window.navigator.standalone;
+
+if (isSafariCheck && !isInstalled) {
+    console.log('Safari detected - initializing install prompting');
+
+    let promptShown = false;
+
+    function showPrompt() {
+        if (promptShown) return;
+        promptShown = true;
+
+        // Remove any existing prompts
+        document.getElementById('safari-install-prompt')?.remove();
+
+        const prompt = document.createElement('div');
+        prompt.id = 'safari-install-prompt';
+        prompt.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: linear-gradient(135deg, #0976ea 0%, #0d47a1 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            z-index: 10000;
+            animation: slideUp 0.4s ease-out;
+            width: 90%;
+            max-width: 850px;
+        `;
+
+        prompt.innerHTML = `
+            <div style="display: flex; align-items: center; gap: 15px;">
+                <div>
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="7,10 12,15 17,10"/>
+                        <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                </div>
+                <div style="flex: 1;">
+                    <div style="font-weight: 600; margin-bottom: 5px;">Install StarBattle App</div>
+                    <div style="font-size: 0.9rem; opacity: 0.9;">Get instant access and play offline!</div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px; margin-top: 15px;">
+                <button id="install-yes" style="
+                    flex: 1; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
+                    color: white; padding: 10px 15px; border-radius: 6px; font-weight: 600;
+                    cursor: pointer; transition: all 0.2s;
+                ">Install</button>
+                <button id="install-no" style="
+                    background: transparent; border: 1px solid rgba(255,255,255,0.3);
+                    color: white; padding: 10px 15px; border-radius: 6px;
+                    cursor: pointer; transition: all 0.2s;
+                ">Later</button>
+            </div>
+        `;
+
+        addStyles();
+        document.body.appendChild(prompt);
+
+        // Handle button clicks
+        prompt.querySelector('#install-yes').addEventListener('click', () => {
+            prompt.remove();
+            showInstructions();
+        });
+
+        prompt.querySelector('#install-no').addEventListener('click', () => {
+            prompt.remove(); // Dismiss prompt for current session without persistence
+        });
+    }
+
+    function showInstructions() {
+        const overlay = document.createElement('div');
+        overlay.style.cssText = `
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.6);
+            z-index: 9998;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            backdrop-filter: blur(4px);
+        `;
+
+        const modal = document.createElement('div');
+        modal.style.cssText = `
+            background: linear-gradient(135deg, #0976ea 0%, #0d47a1 100%);
+            color: white;
+            padding: 24px;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+            width: 100%;
+            max-width: 500px;
+            animation: zoomIn 0.3s ease-out;
+        `;
+
+        modal.innerHTML = `
+            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+                    <polyline points="16,6 12,2 8,6"/>
+                    <line x1="12" y1="2" x2="12" y2="15"/>
+                </svg>
+                <div>
+                    <div style="font-weight: 600; margin-bottom: 5px;">Install Instructions</div>
+                    <div style="font-size: 0.9rem; opacity: 0.9;">Follow these steps:</div>
+                </div>
+            </div>
+            <ol style="line-height: 1.8; padding-left: 20px; margin: 0 0 20px 0;">
+                <li style="margin-bottom: 8px;">Tap the <strong>Share</strong> button at the bottom of Safari</li>
+                <li style="margin-bottom: 8px;">Scroll down and tap <strong>"Add to Home Screen"</strong></li>
+                <li>Tap <strong>"Add"</strong> to install the app</li>
+            </ol>
+            <button id="close-instructions" style="
+                width: 100%;
+                background: rgba(255,255,255,0.2);
+                border: 1px solid rgba(255,255,255,0.3);
+                color: white;
+                padding: 12px 20px;
+                border-radius: 8px;
+                cursor: pointer;
+                font-weight: 600;
+                transition: all 0.2s;
+            ">Got it!</button>
+        `;
+
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+
+        // Handle close events
+        modal.querySelector('#close-instructions').addEventListener('click', () => overlay.remove());
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) overlay.remove();
+        });
+    }
+
+    function addStyles() {
+        if (document.getElementById('install-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'install-styles';
+        style.textContent = `
+            @keyframes slideUp {
+                from { transform: translateX(-50%) translateY(100%); opacity: 0; }
+                to { transform: translateX(-50%) translateY(0); opacity: 1; }
+            }
+            @keyframes zoomIn {
+                from { opacity: 0; transform: scale(0.9); }
+                to { opacity: 1; transform: scale(1); }
+            }
+            #install-yes:hover, #install-no:hover, #close-instructions:hover {
+                background: rgba(255,255,255,0.3) !important;
+                transform: translateY(-1px);
+            }
+            @media (max-width: 360px) {
+                #safari-install-prompt {
+                    left: 10px !important;
+                    right: 10px !important;
+                    transform: none !important;
+                    max-width: none !important;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    function init() {
+        setTimeout(showPrompt, 700);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    // Development and debugging interface for prompt management
+    window.safariInstallPrompt = {
+        show: showPrompt,
+        stats: () => ({
+            promptShown
+        })
+    };
+
+} else {
+    console.log('Not Safari or already installed - install prompting disabled');
+}
diff --git a/Main/mobile/PWA/manifest.json b/Main/mobile/PWA/manifest.json
@@ -1,21 +1,56 @@
 {
-    "name": "StarBattle.org",
-    "short_name": "StarBattles",
-    "start_url": "index.html",
-    "display": "fullscreen",
-    "background_color": "#374151",
-    "theme_color": "#1F2937",
-    "description": "Starbattle.org Playground!",
-    "icons": [
-        {
-            "src": "icons/icon-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "icons/icon-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ]
+  "name": "StarBattle.org",
+  "short_name": "StarBattle",
+  "start_url": "../index.html",
+  "scope": "../",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "background_color": "#1F2937",
+  "theme_color": "#1F2937",
+  "description": "Starbattle.org Playground!",
+  "categories": [
+    "games",
+    "puzzle",
+    "logic",
+    "brain-training",
+    "queens",
+    "star",
+    "starbattle",
+    "starbattles"
+  ],
+  "icons": [
+    {
+      "src": "../icons/favicon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "../icons/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "../icons/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "../icons/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "../icons/icon-dark-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "monochrome"
+    },
+    {
+      "src": "../icons/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ]
 }