Add a fullscreen button for the game div container (#2855)

* Add a fullscreen button for the game div container

* Modify code to use the useFullscreen hook from the @mantine/hooks package

* Bump dependencies

* Use `IconNames` instead of magic strings

---------

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
Co-authored-by: Lee Hyung Woon / 이형운 <leehyungwoonsamuel@gmail.com>

Author: 4 people

package.json

@@ -31,6 +31,7 @@
     "@blueprintjs/icons": "^5.5.0",
     "@blueprintjs/popover2": "^2.0.0",
     "@blueprintjs/select": "^5.0.0",
+    "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",

src/pages/academy/game/Game.tsx

@@ -1,3 +1,6 @@
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
@@ -50,9 +53,93 @@ function Game() {
     }
   }, [session, achievements, goals]);
 
+  // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
+  // It returns a ref to attach to the element that should be fullscreened,
+  // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
+  const {
+    ref: fullscreenRef,
+    toggle: toggleFullscreen,
+    fullscreen: isFullscreen
+  } = useFullscreen<HTMLDivElement>();
+
+  // This function is a wrapper around toggleFullscreen that also locks the screen orientation
+  // to landscape when entering fullscreen and unlocks it when exiting fullscreen
+  const enhancedToggleFullscreen = async () => {
+    toggleFullscreen();
+
+    if (window.screen.orientation) {
+      if (!isFullscreen) {
+        window.screen.orientation.lock('landscape');
+      } else {
+        window.screen.orientation.unlock();
+      }
+    }
+  };
+
+  const gameDisplayRef = React.useRef<HTMLDivElement | null>(null);
+
+  // This function sets the gameDisplayRef and also calls the ref callback from useFullscreen
+  // to attach the fullscreen logic to the game display element
+  const setGameDisplayRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      // Refs returned by useRef()
+      gameDisplayRef.current = node;
+
+      // Ref callback from useFullscreen
+      fullscreenRef(node);
+    },
+    [fullscreenRef]
+  );
+
+  // Logic for the fullscreen button to dynamically adjust its size, position and padding
+  // based on the size of the game display.
+  const [iconSize, setIconSize] = React.useState(0);
+  const [iconLeft, setIconLeft] = React.useState('0px');
+  const [iconPadding, setIconPadding] = React.useState('0px');
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (gameDisplayRef.current) {
+        const aspectRatio = 16 / 9;
+        const height = gameDisplayRef.current.offsetHeight;
+        const width = gameDisplayRef.current.offsetWidth;
+        const size = height / 40;
+        const padding = height / 50;
+        const leftOffset =
+          isFullscreen || height * aspectRatio > width ? 0 : (width - height * aspectRatio) / 2;
+        setIconSize(size);
+        setIconPadding(`${padding}px`);
+        setIconLeft(`${leftOffset}px`);
+      }
+    };
+
+    // When exiting fullscreen, the browser might not have completed the transition
+    // at the time handleResize is called, so the height of gameDisplayRef.current
+    // is still the fullscreen height.
+    // To fix this, we delay handleResize by 100ms.
+    const delayedHandleResize = () => {
+      setTimeout(handleResize, 100);
+    };
+
+    window.addEventListener('resize', delayedHandleResize);
+    delayedHandleResize();
+
+    return () => window.removeEventListener('resize', delayedHandleResize);
+  }, [isFullscreen]);
+
   return (
     <>
-      <div id="game-display"></div>
+      <div id="game-display" ref={setGameDisplayRefs}>
+        <Icon
+          id="fullscreen-button"
+          icon={isFullscreen ? IconNames.MINIMIZE : IconNames.FULLSCREEN}
+          color="white"
+          htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
+          size={iconSize}
+          onClick={enhancedToggleFullscreen}
+          style={{ left: iconLeft, padding: iconPadding }}
+        />
+      </div>
       {isTestStudent && (
         <div className="Horizontal">
           <button

src/styles/_game.scss

@@ -4,3 +4,9 @@
   width: 100%;
   align-items: center;
 }
+
+#fullscreen-button {
+  position: absolute;
+  cursor: pointer;
+  z-index: 100;
+}

yarn.lock

@@ -1919,6 +1919,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mantine/hooks@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.0.tgz#52f0fdc97e953798d2e632aa5e90959f389cbd1e"
+  integrity sha512-m99vMzeONMpBLv0Rcb2LD88xAhpvwVdTMBo/7WohBDYtk1shJKHAc/WbQ/cJPcNk11Bzp/mhx/EPNZfs9+NwZA==
+
 "@mapbox/node-pre-gyp@^1.0.0":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"