fix(overlay): update layout to improve UX on lower viewports (#1079)

* fix(overlay): update layout to improve UX on lower viewports * tech(i18n): add missing i18n * chore(i18n): add keys as comments * tech(overlay): remove absolute positioned mm window * tech(quest): remove deselecting quest * tech(overlay): fix login alert styles * tech(overlay): add t override * tech(overlay): update steam breakpoint
HyperPlay-Gaming · Sep 25, 2024 · 38be9f3 · 38be9f3
1 parent 364c53c
commit 38be9f3
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -169,7 +169,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hyperplay/chains": "^0.3.0",
     "@hyperplay/check-disk-space": "^3.5.2",
-    "@hyperplay/quests-ui": "^0.0.20",
+    "@hyperplay/quests-ui": "^0.0.21",
     "@hyperplay/ui": "^1.7.18",
     "@hyperplay/utils": "^0.0.16",
     "@mantine/carousel": "^7.12.0",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -765,7 +765,7 @@
         "readyForClaim": "Ready for claim",
         "reputation": "Reputation",
         "reward": "Reward",
-        "signIn": "Sign in",
+        "signIn": "Log in",
         "sync": "Sync",
         "type": {
             "playstreak": "Play Streak"

diff --git a/src/frontend/ExtensionManager/components/ExtensionContents/index.tsx b/src/frontend/ExtensionManager/components/ExtensionContents/index.tsx
@@ -3,6 +3,8 @@ import { motion, AnimatePresence } from 'framer-motion'
 import extensionState from 'frontend/state/ExtensionState'
 import ExtensionContentsStyles from './index.module.scss'
 
+const trueAsStr = 'false' as unknown as boolean | undefined
+
 //Module type augmentation necessary to use experimental feature nodeintegrationinsubframes
 //https://www.electronjs.org/docs/latest/api/webview-tag
 /* eslint-disable react/no-unknown-property */
@@ -22,36 +24,47 @@ const animation = {
   transition: { duration: 0.2 }
 }
 
+export function ExtensionPopup() {
+  return (
+    <webview
+      nodeintegrationinsubframes="true"
+      webpreferences="contextIsolation=true, nodeIntegration=true"
+      src={`chrome-extension://${extensionState.extensionId}/popup.html`}
+      className={ExtensionContentsStyles.mmWindow}
+      allowpopups={trueAsStr}
+    ></webview>
+  )
+}
+
+export function ExtensionNotification() {
+  return (
+    <webview
+      nodeintegrationinsubframes="true"
+      webpreferences="contextIsolation=true, nodeIntegration=true"
+      src={`chrome-extension://${extensionState.extensionId}/notification.html`}
+      className={ExtensionContentsStyles.mmWindow}
+      allowpopups={trueAsStr}
+    ></webview>
+  )
+}
+
 export default function ExtensionContents() {
-  const trueAsStr = 'false' as unknown as boolean | undefined
   return (
     <AnimatePresence>
       {extensionState.isPopupOpen ? (
         <motion.div
           {...animation}
           className={ExtensionContentsStyles.mmWindowContainer}
         >
-          <webview
-            nodeintegrationinsubframes="true"
-            webpreferences="contextIsolation=true, nodeIntegration=true"
-            src={`chrome-extension://${extensionState.extensionId}/popup.html`}
-            className={ExtensionContentsStyles.mmWindow}
-            allowpopups={trueAsStr}
-          ></webview>
+          <ExtensionPopup />
         </motion.div>
       ) : null}
       {extensionState.isNotificationOpen ? (
         <motion.div
           {...animation}
           className={ExtensionContentsStyles.mmWindowContainer}
         >
-          <webview
-            nodeintegrationinsubframes="true"
-            webpreferences="contextIsolation=true, nodeIntegration=true"
-            src={`chrome-extension://${extensionState.extensionId}/notification.html`}
-            className={ExtensionContentsStyles.mmWindow}
-            allowpopups={trueAsStr}
-          ></webview>
+          <ExtensionNotification />
         </motion.div>
       ) : null}
     </AnimatePresence>

diff --git a/src/frontend/ExtensionManager/index.module.scss b/src/frontend/ExtensionManager/index.module.scss
@@ -1,14 +1,4 @@
 .mmContainer {
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  bottom: 0px;
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  z-index: 100000;
-  top: var(--top-navbar-height);
   background-color: transparent;
   border: none;
   outline: none;

diff --git a/src/frontend/ExtensionManager/index.tsx b/src/frontend/ExtensionManager/index.tsx
@@ -4,13 +4,14 @@ import { observer } from 'mobx-react-lite'
 import extensionState from 'frontend/state/ExtensionState'
 import OverlayState from 'frontend/state/OverlayState'
 import ContextProvider from 'frontend/state/ContextProvider'
-import ExtensionContents from './components/ExtensionContents'
+import ExtensionContents, {
+  ExtensionPopup
+} from './components/ExtensionContents'
 
 const ExtensionManager = function () {
   const rootRef = useRef<HTMLDialogElement | null>(null)
   const { connectivity } = useContext(ContextProvider)
   const isOffline = connectivity.status !== 'online'
-
   const mmContainerStyle = {} as React.CSSProperties
 
   const isOverlay =
@@ -41,14 +42,7 @@ const ExtensionManager = function () {
   }
 
   if (isOverlay) {
-    return (
-      <div
-        className={ExtensionManagerStyles.mmContainer}
-        style={mmContainerStyle}
-      >
-        <ExtensionContents />
-      </div>
-    )
+    return <ExtensionPopup />
   }
 
   /* eslint-disable react/no-unknown-property */

diff --git a/src/frontend/OverlayManager/Overlay/index.module.scss b/src/frontend/OverlayManager/Overlay/index.module.scss
@@ -1,5 +1,13 @@
 $topNavBarHeight: 30px;
 
+.root {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
 .txnToastContainer {
   position: absolute;
   right: 10px;
@@ -35,3 +43,26 @@ $topNavBarHeight: 30px;
   right: 0;
   z-index: 2;
 }
+
+.contentContainer {
+  z-index: 3;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-2lg);
+  gap: var(--space-xl);
+  margin: auto;
+  max-height: 100%;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: var(--space-xs);
+  justify-content: flex-end;
+}
+
+.rightSideContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2lg);
+}
diff --git a/src/frontend/OverlayManager/Overlay/index.tsx b/src/frontend/OverlayManager/Overlay/index.tsx
@@ -34,27 +34,6 @@ export const Overlay = observer(function ({
     })
   }, [])
 
-  let exitGameButtonStyle = {
-    top: 'var(--space-md)',
-    right: 'var(--space-md)',
-    position: 'absolute',
-    zIndex: 200,
-    display: 'flex',
-    gap: 'var(--space-sm)'
-  } as React.CSSProperties
-
-  if (
-    OverlayState.renderState.showExitGameButton &&
-    !OverlayState.renderState.showExtension
-  ) {
-    exitGameButtonStyle = {
-      ...exitGameButtonStyle,
-      top: 0,
-      right: 0,
-      overflowY: 'hidden'
-    }
-  }
-
   const shouldShowExtension =
     WalletState.provider === PROVIDERS.METAMASK_EXTENSION ||
     OverlayState.renderState.showExtension
@@ -76,7 +55,7 @@ export const Overlay = observer(function ({
     let exitGameButton = null
     if (OverlayState.renderState.showExitGameButton) {
       exitGameButton = (
-        <div style={exitGameButtonStyle}>
+        <div className={BrowserGameStyles.buttonContainer}>
           <Button
             onClick={async () => {
               // mac can take ~5 seconds to close the wine process, so we close the overlay instantly
@@ -140,12 +119,16 @@ export const Overlay = observer(function ({
     }
 
     overlayItems = (
-      <>
-        <div className={BrowserGameStyles.bgFilter}></div>
-        {exitGameButton}
-        {extensionManager}
-        {questsViewer}
-      </>
+      <div className={BrowserGameStyles.root}>
+        <div className={BrowserGameStyles.bgFilter} />
+        <div className={BrowserGameStyles.contentContainer}>
+          {questsViewer}
+          <div className={BrowserGameStyles.rightSideContainer}>
+            {exitGameButton}
+            {extensionManager}
+          </div>
+        </div>
+      </div>
     )
   }
 

diff --git a/src/frontend/components/UI/QuestsViewer/components/QuestLogWrapper/index.module.scss b/src/frontend/components/UI/QuestsViewer/components/QuestLogWrapper/index.module.scss
@@ -1,4 +1,5 @@
 .questLog {
-  flex-grow: 1;
-  margin: 0px var(--space-sm);
+  margin: 0 var(--space-sm) 0 0;
+  min-width: 280px;
+  max-width: 400px;
 }
diff --git a/src/frontend/components/UI/QuestsViewer/components/QuestLogWrapper/index.tsx b/src/frontend/components/UI/QuestsViewer/components/QuestLogWrapper/index.tsx
@@ -5,25 +5,26 @@ import {
   QuestLogInfo,
   QuestLogTranslations
 } from '@hyperplay/ui'
-import useGetQuests from 'frontend/hooks/useGetQuests'
 import styles from './index.module.scss'
 import { useTranslation } from 'react-i18next'
 import { Quest } from 'common/types'
 import useGetG7UserCredits from 'frontend/hooks/useGetG7UserCredits'
 import useGetPointsBalancesForProject from 'frontend/hooks/useGetPointsBalances'
+import useGetQuests from 'frontend/hooks/useGetQuests'
 
 export interface QuestLogWrapperProps {
+  questsResults: ReturnType<typeof useGetQuests>
   projectId: string
   selectedQuestId: number | null
   setSelectedQuestId: (id: number | null) => void
 }
 
 export function QuestLogWrapper({
+  questsResults,
   projectId: appName,
   selectedQuestId,
   setSelectedQuestId
 }: QuestLogWrapperProps) {
-  const questsResults = useGetQuests(appName)
   const quests = questsResults?.data?.data
   const userCredits = useGetG7UserCredits()
   const userCreditsBalance = userCredits?.data?.data
@@ -74,12 +75,6 @@ export function QuestLogWrapper({
         title: val.name,
         state: 'ACTIVE',
         onClick: () => {
-          // deselect
-          if (selectedQuestId === val.id) {
-            setSelectedQuestId(null)
-            return
-          }
-          //select
           setSelectedQuestId(val.id)
         },
         selected: selectedQuestId === val.id,

diff --git a/src/frontend/components/UI/QuestsViewer/index.module.scss b/src/frontend/components/UI/QuestsViewer/index.module.scss
@@ -1,13 +1,7 @@
-.root {
-  position: absolute;
-  width: 1000px;
-  bottom: 80px;
-  top: 40px;
-  left: 400px;
-  width: 1000px;
-  z-index: 4;
+.container {
   display: flex;
   flex-direction: column;
+  gap: var(--space-lg-fixed);
 }
 
 .questsViewerContainer {
@@ -18,6 +12,14 @@
   max-height: 100%;
 }
 
-.alert {
-  margin: var(--space-lg-fixed) 0px;
+.detailsWrapper {
+  width: 1045px;
+  min-width: 800px;
+  max-width: 1063px !important;
+
+  @media (max-width: 1300px) {
+    width: 540px;
+    min-width: 520px;
+    max-width: 1045px !important;
+  }
 }
diff --git a/src/frontend/components/UI/QuestsViewer/index.tsx b/src/frontend/components/UI/QuestsViewer/index.tsx
@@ -9,24 +9,36 @@ import authState from 'frontend/state/authState'
 import useAuthSession from 'frontend/hooks/useAuthSession'
 import '@hyperplay/quests-ui/style.css'
 import { Reward } from 'common/types'
+import useGetQuests from 'frontend/hooks/useGetQuests'
 
 export interface QuestsViewerProps {
   projectId: string
 }
 
 export function QuestsViewer({ projectId: appName }: QuestsViewerProps) {
+  const questResults = useGetQuests(appName)
   const [selectedQuestId, setSelectedQuestId] = useState<number | null>(null)
   const { isSignedIn, data } = useAuthSession()
   const { t } = useTranslation()
   const flags = useFlags()
-
+  const quests = questResults?.data?.data
+  const initialQuestId = quests?.[0]?.id ?? null
+  const visibleQuestId = selectedQuestId ?? initialQuestId
   const sessionEmail = data?.linkedAccounts.get('email')
 
+  /**
+   Don't delete this comment block since it's used for translation parsing for keys that are on the quests-ui library.
+   As a heads up, everytime you add a new key on any library, you need to add it as a block comment anywhere in the code as well.
+   
+   t("quest.noG7ConnectionClaim", "You need to have a Game7 account linked to {{email}} to claim your rewards.")
+   t("quest.noG7ConnectionSync", "You need to have a Game7 account linked to {{email}} to resync your tasks.")
+   t("quest.notEnoughGas", "Insufficient wallet balance to claim your reward due to gas fees. Try a different wallet or replenish this one before retrying.")
+   */
+
   let alertComponent = null
   if (!isSignedIn) {
     alertComponent = (
       <Alert
-        className={styles.alert}
         message={t(
           'quests.playstreak.signInWarning.overlay',
           'You are currently not logged in, play streak progress will not be tracked. Please exit the game and login to HyperPlay via the top-right dropdown to track progress.'
@@ -47,16 +59,19 @@ export function QuestsViewer({ projectId: appName }: QuestsViewerProps) {
    */
 
   return (
-    <div className={styles.root}>
+    <div className={styles.container}>
       {alertComponent}
       <div className={styles.questsViewerContainer}>
         <QuestLogWrapper
+          questsResults={questResults}
           projectId={appName}
-          selectedQuestId={selectedQuestId}
+          selectedQuestId={visibleQuestId}
           setSelectedQuestId={setSelectedQuestId}
         />
         <QuestDetailsWrapper
+          tOverride={t}
           sessionEmail={sessionEmail}
+          className={styles.detailsWrapper}
           checkG7ConnectionStatus={window.api.checkG7ConnectionStatus}
           logInfo={window.api.logInfo}
           logError={window.api.logError}
@@ -74,7 +89,7 @@ export function QuestsViewer({ projectId: appName }: QuestsViewerProps) {
           trackEvent={window.api.trackEvent}
           signInWithSteamAccount={() => window.api.signInWithProvider('steam')}
           openDiscordLink={window.api.openDiscordLink}
-          selectedQuestId={selectedQuestId}
+          selectedQuestId={visibleQuestId}
           getQuest={window.api.getQuest}
           getUserPlayStreak={window.api.getUserPlayStreak}
           getSteamGameMetadata={window.api.getSteamGameMetadata}