restore the multiplayer host button on the share page

docfiles/script.html

@@ -192,6 +192,11 @@
                         <i class="fas fa-clipboard-list" aria-hidden="true"></i>
                     </span>
                 </a>
+                <a id="multiplayer-share-button" class="common-button menu-button mobile-hidden" title="Host Multiplayer Game" role="menuitem" style="display: none;">
+                    <span class="common-button-flex">
+                        <i class="fas fa-users" aria-hidden="true"></i>
+                    </span>
+                </a>
                 <div class="common-menu-dropdown mobile-only">
                     <button id="overflow-menu" class="common-button menu-button" title="More..." role="menuitem" aria-expanded="false" aria-haspopup="true" aria-controls="overflow-menu-content">
                         <span class="common-button-flex">
@@ -221,6 +226,13 @@
                                     </span>
                                 </a>
                             </li>
+                            <li role="presentation">
+                                <a id="multiplayer-share-button-overflow" class="common-button common-menu-dropdown-item" title="Host Game" role="menuitem" aria-posinset="4" aria-setsize="4" style="display: none;">
+                                    <span class="common-button-flex">
+                                        <span class="common-button-label">Host Game</span>
+                                    </span>
+                                </a>
+                            </li>
                         </ul>
                     </div>
                 </div>

scriptPage/menu.ts

@@ -7,6 +7,7 @@ function initOverflowMenu() {
         document.getElementById("show-code-button-overflow"),
         document.getElementById("editCodeButton-overflow"),
         document.getElementById("share-eval-button-overflow"),
+        document.getElementById("multiplayer-share-button-overflow"),
     ];
 
     const onBlur = (e: FocusEvent) => {
@@ -29,6 +30,8 @@ function initOverflowMenu() {
     let isExpanded = false;
 
     const documentKeydownListener = (e: KeyboardEvent) => {
+        const activeItems = menuItems.filter(item => item.style.display !== "none");
+
         if (e.key === "Escape" || e.key === "Esc") {
             setExpanded(false);
             menuButton.focus();
@@ -37,17 +40,17 @@ function initOverflowMenu() {
             e.preventDefault();
             e.stopPropagation();
             const currentlyFocusedElement = document.activeElement;
-            const currentIndex = menuItems.indexOf(currentlyFocusedElement as HTMLElement);
-            const nextIndex = (currentIndex + 1) % menuItems.length;
-            menuItems[nextIndex].focus();
+            const currentIndex = activeItems.indexOf(currentlyFocusedElement as HTMLElement);
+            const nextIndex = (currentIndex + 1) % activeItems.length;
+            activeItems[nextIndex].focus();
         }
         else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
             e.preventDefault();
             e.stopPropagation();
             const currentlyFocusedElement = document.activeElement;
-            const currentIndex = menuItems.indexOf(currentlyFocusedElement as HTMLElement);
-            const nextIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
-            menuItems[nextIndex].focus();
+            const currentIndex = activeItems.indexOf(currentlyFocusedElement as HTMLElement);
+            const nextIndex = (currentIndex - 1 + activeItems.length) % activeItems.length;
+            activeItems[nextIndex].focus();
         }
     };
 

scriptPage/multiplayer.ts

@@ -1,8 +1,10 @@
-let multiplayerInitialized = false;
+if (!(window as any).multiplayerInitialized) {
+    (window as any).multiplayerInitialized = false;
+}
 
 function enableMultiplayerUI(info: PubInfo) {
-    if (multiplayerInitialized) return;
-    multiplayerInitialized = true;
+    if ((window as any).multiplayerInitialized) return;
+    (window as any).multiplayerInitialized = true;
 
     pxtTickEvent('share.isMultiplayerGame', { target: "arcade" });
 
@@ -12,18 +14,34 @@ function enableMultiplayerUI(info: PubInfo) {
         presenceBar.style.display = "block";
     }
 
+    const onClick = function () {
+        pxtTickEvent('share.multiplayerShareClick', { target: "arcade" });
+        const domain = pxt.BrowserUtils.isLocalHostDev() ? "http://localhost:3000" : "";
+        const multiplayerHostUrl = `${domain}${pxt.webConfig.relprefix}multiplayer?host=${info.projectId}`;
+
+        window.open(multiplayerHostUrl, "_blank");
+    }
+
+    // icon button
     const shareButton = document.getElementById("multiplayer-share-button");
     if (shareButton) {
-        shareButton.addEventListener("click", function () {
-            pxtTickEvent('share.multiplayerShareClick', { target: "arcade" });
-            const domain = pxt.BrowserUtils.isLocalHostDev() ? "http://localhost:3000" : "";
-            const multiplayerHostUrl = `${domain}${pxt.webConfig.relprefix}multiplayer?host=${info.projectId}`;
+        shareButton.addEventListener("click", onClick);
+        shareButton.style.display = "flex";
+    }
 
-            window.open(multiplayerHostUrl, "_blank");
-        });
-        shareButton.style.display = "block";
+    // overflow menu button
+    const overflowButton = document.getElementById("multiplayer-share-button-overflow");
+    if (overflowButton) {
+        overflowButton.addEventListener("click", onClick);
+        overflowButton.style.display = "block";
     }
 
+    // fix the aria-setsize for the overflow menu items since we're adding an additional item
+    const overflowItems = document.querySelectorAll(".common-menu-dropdown [aria-setsize]");
+    overflowItems.forEach(item => {
+        item.setAttribute("aria-setsize", "4");
+    });
+
     window.addEventListener('message', function (ev) {
         if (ev.data && ev.data.type === "status" && ev.data.state === "running") {
             const iframe = document.getElementsByTagName("iframe").item(0);