Merge branch 'master' into eanders-ms/kiosk-menu-button

microsoft · Oct 23, 2023 · d8a6cde · d8a6cde
2 parents 004854a + 81f2349
commit d8a6cde
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 31 deletions.
diff --git a/kiosk/src/Components/PlayingGame.tsx b/kiosk/src/Components/PlayingGame.tsx
@@ -19,7 +19,8 @@ export default function PlayingGame() {
             playSoundEffect("select");
             escapeGame();
         },
-        GamepadManager.GamepadControl.EscapeButton
+        GamepadManager.GamepadControl.EscapeButton,
+        GamepadManager.GamepadControl.ResetButton
     );
 
     const playUrl = useMemo(() => {
@@ -33,6 +34,7 @@ export default function PlayingGame() {
                 single: 1,
                 fullscreen: 1,
                 autofocus: 1,
+                loadingColor: "white",
                 // If we have the built game cached, we will send it to the
                 // simulator once it loads. The `server` flag inhibits the
                 // simulator from trying to build it.

diff --git a/kiosk/src/Services/GamepadManager.ts b/kiosk/src/Services/GamepadManager.ts
@@ -242,13 +242,13 @@ class GamepadManager {
             gamepad.axes &&
             gamepad.axes.length >= this.minAxisRequired &&
             gamepad.buttons &&
-            gamepad.buttons.length >= this.minButtonPinRequired &&
-            !!gamepad.mapping
+            gamepad.buttons.length >= this.minButtonPinRequired
         );
     }
 
     addGamepad(gamepad: Gamepad) {
         if (this.gamepadFilter(gamepad)) {
+            pxt.tickEvent("kiosk.gamepad.connected", { id: gamepad.id });
             this.gamepads.set(gamepad.index, true);
             this.gamepadStates.set(gamepad.index, {
                 state: { ...this.readGamepad(gamepad) },

diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
@@ -520,8 +520,8 @@
         min-width: inherit;
         max-width: inherit;
         width: @simulatorWidth;
-        height: calc(~'100%' - @mainMenuHeight);
         top: @mainMenuHeight;
+        bottom: 0;
         left: 0;
 
         .simPanel {

diff --git a/webapp/public/run.html b/webapp/public/run.html
@@ -121,6 +121,7 @@
         var codeFromSrc = /code(?:[:=])([^&?]+)/i.exec(window.location.href);
         var additionalSimParams = /simParams(?:[:=])([^&?]+)/i.exec(window.location.href)?.[1];
         var sendBuilt = !!/sendBuilt(?:[:=])1/i.test(window.location.href);
+        var loadingColor = /[\&\?]loadingColor=(#[0-9A-Fa-f]{3}|#[0-9A-Fa-f]{6}|[A-Za-z]+)\b/i.test(window.location.href)?.[1];
         var codeFromData = undefined;
         var assetJsonFromData = undefined;
         try {
@@ -134,6 +135,9 @@
         }
         var code = codeFromData || (codeFromSrc ? codeFromSrc[1] : undefined);
 
+        if (loading && loadingColor) {
+            loading.style.color = loadingColor;
+        }
 
         if (additionalSimParams) {
             additionalSimParams = decodeURIComponent(additionalSimParams);

diff --git a/webapp/src/components/tutorial/TutorialCallout.tsx b/webapp/src/components/tutorial/TutorialCallout.tsx
@@ -11,7 +11,7 @@ interface TutorialCalloutProps extends React.PropsWithChildren<{}> {
 }
 
 export function TutorialCallout(props: TutorialCalloutProps) {
-    const { children, className, buttonIcon, buttonLabel } = props;
+    const { children, className, buttonIcon, buttonLabel, onClick } = props;
     const [ visible, setVisible ] = React.useState(false);
     const [ maxHeight, setMaxHeight ] = React.useState("unset");
     const [ top, setTop ] = React.useState("unset");
@@ -20,6 +20,8 @@ export function TutorialCallout(props: TutorialCalloutProps) {
     const contentRef = React.useRef<HTMLDivElement>(null);
 
     React.useEffect(() => {
+        if (!visible) return undefined;
+
         function checkSize() {
             const lowerBuffer = (document.getElementById("editortools")?.clientHeight ?? 0) + 30;
             if (contentRef.current?.getBoundingClientRect().bottom >= window.innerHeight - lowerBuffer) {
@@ -39,41 +41,41 @@ export function TutorialCallout(props: TutorialCalloutProps) {
         if (contentRef.current) observer.observe(contentRef.current);
 
         checkSize();
-        return () => observer.disconnect();
-    });
 
-    const captureEvent = (e: any) => {
+        const closeOnOutsideClick = (e: PointerEvent) => {
+            if (!popupRef?.current?.contains(e.target as Node)) {
+                setVisible(false);
+            }
+        };
+
+        document.addEventListener("click", closeOnOutsideClick);
+
+        return () => {
+            observer.disconnect();
+            document.removeEventListener("click", closeOnOutsideClick);
+        }
+    }, [visible]);
+
+
+    const captureEvent = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         e.nativeEvent?.stopImmediatePropagation();
     }
 
-    const closeCallout = (e: any) => {
-        document.removeEventListener("click", closeCalloutIfClickedOutside, true);
+    const closeCallout = React.useCallback(() => {
         setVisible(false);
-    }
-
-    const closeCalloutIfClickedOutside = (e: PointerEvent) => {
-        if (!popupRef?.current?.contains(e.target as Node)) {
-            closeCallout(e);
-        }
-    }
+    }, []);
 
-    const toggleCallout = (e: any) => {
+    const toggleCallout = React.useCallback((e: React.MouseEvent) => {
         captureEvent(e);
-        if (!visible) {
-            document.addEventListener("click", closeCalloutIfClickedOutside, true);
-        } else {
-            document.removeEventListener("click", closeCalloutIfClickedOutside, true);
-        }
         setVisible(!visible);
-    }
+    }, [visible]);
 
-    const handleButtonClick = (e: any) => {
-        const { onClick } = props;
+    const handleButtonClick = React.useCallback((e: React.MouseEvent) => {
         if (onClick) onClick(visible);
         toggleCallout(e);
-    }
+    }, [onClick, visible]);
 
     const buttonTitle = lf("Click to show a hint!");
     return <div ref={popupRef} className={className}>

diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -51,14 +51,15 @@ export function TutorialContainer(props: TutorialContainerProps) {
     const showImmersiveReader = pxt.appTarget.appTheme.immersiveReader;
     const isHorizontal = props.tutorialSimSidebar || pxt.BrowserUtils.isTabletSize();
 
+    const container = React.useRef();
+
     React.useEffect(() => {
         const observer = new ResizeObserver(updateScrollGradient);
         observer.observe(document.body)
 
         // We also want to update the scroll gradient if the tutorial wrapper is resized by the user.
-        const parent = document.querySelector("#tutorialWrapper");
-        if (parent) {
-            observer.observe(parent);
+        if (container.current) {
+            observer.observe(container.current);
         }
 
         return () => observer.disconnect();
@@ -248,7 +249,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
     const hasHint = !!hintMarkdown;
 
 
-    return <div className="tutorial-container">
+    return <div className="tutorial-container" ref={container}>
         {!isHorizontal && stepCounter}
         <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient}>
             <div className={"tutorial-content-bkg"}>