feat: make dialog controllable with gamepad

bmsuseluda · Mar 21, 2024 · f60026c · f60026c
1 parent c79f1db
commit f60026c
Show file tree

Hide file tree

Showing 14 changed files with 209 additions and 162 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,4 @@ coverage
 /playwright/.cache/
 /e2eTests/*Config/
 /readme/build/
+/buildConfig/
diff --git a/app/components/Dialog/index.tsx b/app/components/Dialog/index.tsx
@@ -22,7 +22,6 @@ const DialogContent = styled("div", {
     boxShadow: "0px 0px 20px 10px black",
     borderRounded: true,
     borderWidth: "0.2rem",
-    borderColor: "sidebarBackgroundColor",
 
     width: "55rem",
     maxWidth: "90vw",
@@ -39,6 +38,14 @@ const DialogContent = styled("div", {
         maxWidth: "60vw",
       },
     },
+    variant: {
+      default: {
+        borderColor: "sidebarBackgroundColor",
+      },
+      accent: {
+        borderColor: "accent",
+      },
+    },
   },
 });
 
@@ -66,6 +73,7 @@ type Props = {
   onClose: (event?: DialogCloseEvent) => void;
   closable?: boolean;
   smaller?: boolean;
+  variant?: "default" | "accent";
 };
 
 export const Dialog = ({
@@ -74,6 +82,7 @@ export const Dialog = ({
   onClose,
   closable = true,
   smaller = false,
+  variant = "default",
 }: Props) => {
   const handleClose = (event?: DialogCloseEvent) => {
     event?.stopPropagation();
@@ -92,6 +101,7 @@ export const Dialog = ({
             event.stopPropagation();
           }}
           smaller={smaller}
+          variant={variant}
         >
           {children}
           {closable && (

diff --git a/app/components/ErrorDialog/index.stories.tsx b/app/components/ErrorDialog/index.stories.tsx
@@ -17,7 +17,14 @@ export const Basic: Story = {
   },
 };
 
-// TODO: add story with large stacktrace with scrolling
+export const WithLargeStacktrace: Story = {
+  args: {
+    title: "There is a large Stacktrace",
+    stacktrace:
+      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+    onClose: () => {},
+  },
+};
 
 export const UnknownError: Story = {
   args: {

diff --git a/app/components/ErrorDialog/index.tsx b/app/components/ErrorDialog/index.tsx
@@ -1,54 +1,49 @@
 import { styled } from "styled-system/jsx";
 import { Dialog } from "~/components/Dialog";
-import { Headline } from "~/components/Headline";
 import { IconChildrenWrapper } from "~/components/IconChildrenWrapper";
 import { Typography } from "~/components/Typography";
 import { MdErrorOutline } from "react-icons/md";
-
-const Body = styled("div", {
-  base: {
-    position: "relative",
-    paddingTop: "1",
-    paddingRight: "0.5em",
-    paddingBottom: "1",
-    paddingLeft: "2",
-    display: "flex",
-    flexDirection: "column",
-    gap: "1",
-    backgroundColor: "backgroundColor",
-    minWidth: "25rem",
-    height: "100%",
-  },
-});
+import { ListActionBarLayout } from "../layouts/ListActionBarLayout";
+import { SidebarMainLayout } from "~/components/layouts/SidebarMainLayout";
+import type { ForwardedRef } from "react";
 
 const Stacktrace = styled("p", {
   base: {
     whiteSpace: "pre-wrap",
-    overflowY: "scroll",
   },
 });
 
 type Props = {
   title?: string;
   stacktrace?: string;
   onClose: () => void;
+  listRef?: ForwardedRef<HTMLDivElement>;
 };
 
-// TODO: add radix scrollarea
 export const ErrorDialog = ({
   title = "An unexpected error has occurred",
   stacktrace = "An unexpected error has occurred",
   onClose,
+  listRef,
 }: Props) => (
-  <Dialog open onClose={onClose}>
-    <Body>
-      <Headline>
-        <IconChildrenWrapper>
-          <MdErrorOutline />
-          <Typography>{title}</Typography>
-        </IconChildrenWrapper>
-      </Headline>
-      <Stacktrace>{stacktrace}</Stacktrace>
-    </Body>
+  <Dialog open onClose={onClose} variant="accent" smaller={true}>
+    <SidebarMainLayout>
+      <SidebarMainLayout.Main>
+        <ListActionBarLayout
+          headline={
+            <IconChildrenWrapper>
+              <MdErrorOutline />
+              <Typography>{title}</Typography>
+            </IconChildrenWrapper>
+          }
+        >
+          <ListActionBarLayout.ListActionBarContainer
+            ref={listRef}
+            scrollSmooth
+            list={<Stacktrace>{stacktrace}</Stacktrace>}
+          />
+        </ListActionBarLayout>
+      </SidebarMainLayout.Main>
+    </SidebarMainLayout>
   </Dialog>
 );
diff --git a/app/components/GameGrid/components/Game/index.tsx b/app/components/GameGrid/components/Game/index.tsx
@@ -36,7 +36,7 @@ const Label = styled("label", {
     outlineWidth: "4px",
     outlineStyle: "solid",
     outlineColor: "backgroundColor",
-    transition: "outline-color 0.2s ease-in-out",
+    transition: "outline-color 0.1s ease-in-out",
 
     "&:has(*:checked)": {
       outlineColor: "accent",

diff --git a/app/components/GameGrid/index.tsx b/app/components/GameGrid/index.tsx
@@ -25,7 +25,6 @@ type Props = {
   isInFocus: boolean;
   onBack: () => void;
   onGameClick: () => void;
-  onSelectGameByGamepad: () => void;
   onExecute: () => void;
   "data-testid"?: string;
 } & ComponentPropsWithoutRef<"ul">;
@@ -64,14 +63,12 @@ export const GameGrid = ({
   onBack,
   onExecute,
   onGameClick,
-  onSelectGameByGamepad,
   "data-testid": dataTestid,
   inViewRef,
 }: Props & { inViewRef?: RefObject<ElementRef<"div">> }) => {
   const { getTestId } = useTestId(dataTestid);
 
   const selectEntry = (game: ElementRef<"input">) => {
-    onSelectGameByGamepad();
     game.checked = true;
     game.focus();
   };

diff --git a/app/customRoutes/categories.$category.errorDialog.tsx b/app/customRoutes/categories.$category.errorDialog.tsx
@@ -79,7 +79,9 @@ export default function RenderComponent() {
     }
   }, [isInFocus]);
 
-  useGamepadButtonPressEvent(layout.buttons.X, handleClose);
+  useGamepadButtonPressEvent(layout.buttons.A, handleClose);
+  useGamepadButtonPressEvent(layout.buttons.DPadUp, handleScrollUp);
+  useGamepadButtonPressEvent(layout.buttons.DPadDown, handleScrollDown);
   useGamepadButtonPressEvent(layout.buttons.B, handleClose);
   useGamepadButtonPressEvent(layout.buttons.Start, handleClose);