- Remove react-native 8081 port forward

- Fix TabView / App to render only single tab/fix duplicate about screen - Fix canUndo error when not in CurrentStep.GameScreen - Add sx property option for SuperCapsText - Use MUI styled instead of emotion styled - Improve About screen sub-panel titles to use SuperCapsText
Digital-Defiance · Oct 16, 2024 · e062c67 · e062c67
1 parent cd3cb3b
commit e062c67
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 72 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -27,7 +27,7 @@
   // "features": {},
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  "forwardPorts": [8081],
+  "forwardPorts": [],
 
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "./setup-nvm.sh && yarn install && ./install-globals.sh"

diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@testing-library/react": "15.0.6",
     "@types/jest": "^29.5.12",
     "@types/node": "18.16.9",
-    "@types/react": "18.3.1",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "18.3.0",
     "@types/uuid": "^10.0.0",
     "babel-jest": "^29.7.0",

diff --git a/src/app/app.tsx b/src/app/app.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
 import AboutScreen from '@/components/screens/AboutScreen';
 import HomeIcon from '@mui/icons-material/Home';
 import BookIcon from '@mui/icons-material/Book';
@@ -16,45 +16,65 @@ import { GameProvider } from '@/components/GameContext';
 import { AlertProvider } from '@/components/AlertContext';
 import AlertDialog from '@/components/AlertDialog';
 
-export function App() {
-  const tabs = [
+interface ITab {
+  label: string;
+  icon: React.ReactElement;
+  content: React.ReactNode;
+  path: string;
+  index?: boolean;
+}
+
+const tabs: ITab[] = [
+  {
+    label: 'Home',
+    icon: <TabBarIcon name="home" icon={HomeIcon} focused={true} />,
+    content: <AboutScreen />,
+    path: '/',
+    index: true,
+  },
+  {
+    label: 'Dominion Assistant',
+    icon: <TabBarIcon icon={DominionVictoryIcon} focused={false} />,
+    content: <DominionAssistantScreen />,
+    path: '/assistant',
+  },
+  {
+    label: 'Game Log',
+    icon: <TabBarIcon name="log" icon={BookIcon} focused={false} />,
+    content: <GameLogScreen />,
+    path: '/log',
+  },
+  {
+    label: 'Load/Save Game',
+    icon: <TabBarIcon name="save" icon={SaveIcon} focused={false} />,
+    content: <LoadSaveGameScreen />,
+    path: '/load-save',
+  },
+];
+
+function AppRoutes() {
+  const routes = useRoutes([
     {
-      label: 'Home',
-      icon: <TabBarIcon name="home" icon={HomeIcon} focused={true} />,
-      content: <AboutScreen />,
       path: '/',
+      element: <TabView tabs={tabs} />,
+      children: tabs.map((tab) => ({
+        index: tab.index,
+        path: tab.index ? undefined : tab.path,
+        element: tab.content,
+      })),
     },
-    {
-      label: 'Dominion Assistant',
-      icon: <TabBarIcon icon={DominionVictoryIcon} focused={false} />,
-      content: <DominionAssistantScreen />,
-      path: '/assistant',
-    },
-    {
-      label: 'Game Log',
-      icon: <TabBarIcon name="log" icon={BookIcon} focused={false} />,
-      content: <GameLogScreen />,
-      path: '/log',
-    },
-    {
-      label: 'Load/Save Game',
-      icon: <TabBarIcon name="save" icon={SaveIcon} focused={false} />,
-      content: <LoadSaveGameScreen />,
-      path: '/load-save',
-    },
-  ];
+  ]);
 
+  return routes;
+}
+
+export function App() {
   return (
     <ThemeProvider theme={theme}>
       <GameProvider>
         <AlertProvider>
           <Router>
-            <Routes>
-              {tabs.map((tab, index) => (
-                <Route key={index} path={tab.path} element={tab.content} />
-              ))}
-            </Routes>
-            <TabView tabs={tabs} />
+            <AppRoutes />
             <AlertDialog />
           </Router>
         </AlertProvider>

diff --git a/src/components/DominionAssistant.tsx b/src/components/DominionAssistant.tsx
@@ -17,8 +17,7 @@ import {
 import { canUndoAction, undoAction } from '@/game/dominion-lib-undo';
 import { addLogEntry } from '@/game/dominion-lib-log';
 import { IPlayerGameTurnDetails } from '@/game/interfaces/player-game-turn-details';
-import { AlertProvider, useAlert } from '@/components/AlertContext';
-import AlertDialog from '@/components/AlertDialog';
+import { useAlert } from '@/components/AlertContext';
 import { FailedAddLogEntryError } from '@/game/errors/failed-add-log';
 import { Location, NavigateFunction } from 'react-router-dom';
 
@@ -33,8 +32,12 @@ const DominionAssistant: React.FC<DominionAssistantProps> = ({ route, navigation
   const { showAlert } = useAlert();
 
   useEffect(() => {
-    setCanUndo(canUndoAction(gameState, gameState.log.length - 1));
-  }, [gameState.log]);
+    setCanUndo(
+      gameState.currentStep === CurrentStep.GameScreen
+        ? canUndoAction(gameState, gameState.log.length - 1)
+        : false
+    );
+  }, [gameState, gameState.log]);
 
   const undoLastAction = () => {
     setGameState((prevGame) => {

diff --git a/src/components/SuperCapsText.tsx b/src/components/SuperCapsText.tsx
@@ -1,21 +1,25 @@
 import React, { forwardRef } from 'react';
-import { Typography, TypographyProps } from '@mui/material';
-import styled from '@emotion/styled';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { TypographyProps } from '@mui/material/Typography';
 
-interface SuperCapsSpanProps extends TypographyProps<'span'> {
+interface SuperCapsSpanProps extends TypographyProps {
   fontSize?: number;
+  sx?: object;
 }
 
-const SmallCapsSpan = styled(Typography)<SuperCapsSpanProps>`
-  font-variant-caps: small-caps;
-  display: inline-block;
-  font-family: 'CharlemagneStdBold';
-  font-size: ${({ fontSize }) => (fontSize ? `${fontSize}px` : 'inherit')};
-  line-height: 1;
-`;
+const SmallCapsSpan = styled(Typography)<SuperCapsSpanProps>(
+  ({ fontSize }: { fontSize?: number }) => ({
+    fontVariantCaps: 'small-caps',
+    display: 'inline-block',
+    fontFamily: 'CharlemagneStdBold',
+    fontSize: fontSize ? `${fontSize}px` : 'inherit',
+    lineHeight: 1,
+  })
+);
 
 const SuperCapsText = forwardRef<HTMLSpanElement, SuperCapsSpanProps>(
-  ({ children, fontSize = 24, ...props }, ref) => {
+  ({ children, fontSize = 24, sx, ...props }, ref) => {
     if (typeof children !== 'string') {
       return null;
     }
@@ -27,7 +31,7 @@ const SuperCapsText = forwardRef<HTMLSpanElement, SuperCapsSpanProps>(
         fontSize={fontSize}
         {...props}
         sx={{
-          ...props.sx,
+          ...sx,
         }}
       >
         {children}

diff --git a/src/components/TabView.tsx b/src/components/TabView.tsx
@@ -1,7 +1,7 @@
-// src/components/TabView.tsx
-import React, { useState } from 'react';
+import React, { SyntheticEvent } from 'react';
 import { Box, Paper, BottomNavigation, BottomNavigationAction } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 const StyledBottomNavigation = styled(BottomNavigation)(({ theme }) => ({
   position: 'fixed',
@@ -16,21 +16,27 @@ interface TabViewProps {
     label: string;
     icon: React.ReactElement;
     content: React.ReactNode;
+    path: string;
   }[];
 }
 
 const TabView: React.FC<TabViewProps> = ({ tabs }) => {
-  const [value, setValue] = useState(0);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    navigate(tabs[newValue].path);
+  };
 
   return (
     <Box sx={{ paddingBottom: '56px' }}>
-      <Box sx={{ flexGrow: 1 }}>{tabs[value].content}</Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <Outlet />
+      </Box>
       <Paper elevation={3}>
         <StyledBottomNavigation
-          value={value}
-          onChange={(event, newValue) => {
-            setValue(newValue);
-          }}
+          value={tabs.findIndex((tab) => tab.path === location.pathname)}
+          onChange={handleChange}
           showLabels
         >
           {tabs.map((tab, index) => (

diff --git a/src/components/screens/AboutScreen.tsx b/src/components/screens/AboutScreen.tsx
@@ -10,6 +10,8 @@ import {
   ListItemText,
 } from '@mui/material';
 import DominionTransparentLogo from '@/assets/images/Dominion-tx.png';
+import SuperCapsText from '../SuperCapsText';
+import { TITLE_SIZE } from '../constants';
 
 export default function AboutScreen() {
   return (
@@ -58,9 +60,7 @@ export default function AboutScreen() {
           <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
             <Box sx={{ flex: 1 }}>
               <Paper elevation={3} sx={{ p: 2, height: '100%' }}>
-                <Typography variant="h6" gutterBottom>
-                  Features
-                </Typography>
+                <SuperCapsText fontSize={TITLE_SIZE}>Features</SuperCapsText>
                 <List dense>
                   {[
                     'Player Management: Add, remove, and track multiple players',
@@ -83,9 +83,9 @@ export default function AboutScreen() {
 
             <Box sx={{ flex: 1 }}>
               <Paper elevation={3} sx={{ p: 2, height: '100%' }}>
-                <Typography variant="h6" gutterBottom>
+                <SuperCapsText fontSize={TITLE_SIZE} sx={{ paddingBottom: '10px' }}>
                   About
-                </Typography>
+                </SuperCapsText>
                 <Typography variant="body1" paragraph>
                   This application is created by{' '}
                   <Link

diff --git a/yarn.lock b/yarn.lock
@@ -3047,22 +3047,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@^18.3.11":
   version "18.3.11"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.11.tgz#9d530601ff843ee0d7030d4227ea4360236bd537"
   integrity sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@18.3.1":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e"
-  integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
 "@types/responselike@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.3.tgz#cc29706f0a397cfe6df89debfe4bf5cea159db50"