big work

src/ui/React/CharacterOverview.tsx

@@ -2,20 +2,16 @@
 import React, { useState, useEffect } from "react";
 
 import makeStyles from "@mui/styles/makeStyles";
-import { IPlayer } from "../../PersonObjects/IPlayer";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "./Reputation";
 
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
@@ -23,15 +19,17 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 import { colors } from "./Theme";
 import { Settings } from "../../Settings/Settings";
+import { use } from "../../ui/Context";
+import { Page } from "../../ui/Router";
 
 interface IProps {
-  player: IPlayer;
   save: () => void;
 }
 
-function Intelligence({ player }: { player: IPlayer }): React.ReactElement {
-  if (player.intelligence === 0) return <></>;
+function Intelligence(): React.ReactElement {
+  const player = use.Player();
   const classes = useStyles();
+  if (player.intelligence === 0) return <></>;
   return (
     <TableRow>
       <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
@@ -44,9 +42,11 @@ function Intelligence({ player }: { player: IPlayer }): React.ReactElement {
   );
 }
 
-function Work({ player }: { player: IPlayer }): React.ReactElement {
-  if (!player.isWorking || player.focus) return <></>;
+function Work(): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
   const classes = useStyles();
+  if (!player.isWorking || player.focus) return <></>;
   return (
     <>
       <TableRow>
@@ -61,7 +61,14 @@ function Work({ player }: { player: IPlayer }): React.ReactElement {
       </TableRow>
       <TableRow>
         <TableCell component="th" scope="row" align="center" colSpan={2} classes={{ root: classes.cellNone }}>
-          <Button onClick={() => player.startFocusing()}>Focus</Button>
+          <Button
+            onClick={() => {
+              player.startFocusing();
+              router.toWork();
+            }}
+          >
+            Focus
+          </Button>
         </TableCell>
       </TableRow>
     </>
@@ -101,7 +108,12 @@ const useStyles = makeStyles({
   },
 });
 
-export function CharacterOverview({ player, save }: IProps): React.ReactElement {
+export function CharacterOverview({ save }: IProps): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
+
+  if (router.page() === Page.BitVerse) return <></>;
+
   const setRerender = useState(false)[1];
   const [open, setOpen] = useState(true);
 
@@ -112,7 +124,7 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
 
   const classes = useStyles();
   return (
-    <>
+    <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
       <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
         <Collapse in={open}>
           <Paper square>
@@ -205,8 +217,8 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
                       </Typography>
                     </TableCell>
                   </TableRow>
-                  <Intelligence player={player} />
-                  <Work player={player} />
+                  <Intelligence />
+                  <Work />
 
                   <TableRow>
                     <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
@@ -226,6 +238,6 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
           </Fab>
         </Box>
       </Box>
-    </>
+    </div>
   );
 }

src/ui/React/CinematicText.tsx

@@ -4,24 +4,34 @@ import { CinematicLine } from "./CinematicLine";
 
 interface IProps {
   lines: string[];
+  auto?: boolean;
   onDone?: () => void;
 }
 
 export function CinematicText(props: IProps): React.ReactElement {
   const [i, setI] = useState(0);
+  const [done, setDone] = useState(false);
 
   function advance(): void {
     const newI = i + 1;
     setI(newI);
-    if (newI >= props.lines.length && props.onDone) props.onDone();
+    if (newI >= props.lines.length) {
+      if (props.onDone && props.auto) props.onDone();
+      setDone(true);
+    }
   }
 
   return (
-    <>
+    <div>
       {props.lines.slice(0, i).map((line, i) => (
         <pre key={i}>{line}</pre>
       ))}
       {props.lines.length > i && <CinematicLine key={i} text={props.lines[i]} onDone={advance} />}
-    </>
+      {!props.auto && props.onDone && done && (
+        <button className="std-button" onClick={props.onDone}>
+          Continue ...
+        </button>
+      )}
+    </div>
   );
 }

src/ui/React/GameOptionsRoot.tsx

@@ -28,12 +28,9 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       width: 50,
-      padding: 2,
+      padding: theme.spacing(2),
       userSelect: "none",
     },
-    pad: {
-      padding: 2,
-    },
   }),
 );
 

src/ui/React/Theme.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createTheme, ThemeProvider, Theme, StyledEngineProvider, adaptV4Theme } from "@mui/material/styles";
+import { createTheme, ThemeProvider, Theme, StyledEngineProvider } from "@mui/material/styles";
 
 declare module "@mui/styles/defaultTheme" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface