feat: v.3.3.9 (block scene reload, sort fix button, join game with ne…

…w character) (#181) fix: block reload when playing a Scene #178 fix: sort button #177 feat: join a game using the Add or Import character buttons feat: scene name help text feat: basic print mode for character sheets
farirpgs · Dec 21, 2020 · 0a28260 · 0a28260
1 parent 1648728
commit 0a28260
Show file tree

Hide file tree

Showing 23 changed files with 244 additions and 129 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,13 @@
 
 - feat: add Fate License in footer
 
+**3.3.9**
+
+- fix: block reload when playing a Scene [#178](https://github.com/fariapp/fari/issues/178)
+- fix: sort button [#177](https://github.com/fariapp/fari/issues/177)
+- feat: join a game using the Add or Import character buttons
+- feat: scene name help text
+
 ## 3.2.0 (Oct 20, 2020) - New Drawing Area, Brazian Portuguse translations
 
 - feat: A brand new Drawing Area with support for multiple shapes, colors and even player tokens. 👏 [ddkn](https://github.com/ddkn) for the help with the player token designs

diff --git a/lib/components/CharactersManager/CharactersManager.tsx b/lib/components/CharactersManager/CharactersManager.tsx
@@ -24,7 +24,13 @@ export const CharactersManager: React.FC<IProps> = (props) => {
     const newCharacter = charactersManager.actions.add(
       CharacterType.CoreCondensed
     );
-    history.push(`/characters/${newCharacter.id}`);
+
+    if (charactersManager.state.managerCallback) {
+      charactersManager.state.managerCallback(newCharacter);
+    } else {
+      history.push(`/characters/${newCharacter.id}`);
+    }
+
     charactersManager.actions.closeManager();
     logger.info("CharactersManager:onAdd");
   }
@@ -58,11 +64,20 @@ export const CharactersManager: React.FC<IProps> = (props) => {
         const characterWithNewId = produce(c, (draft) => {
           draft.id = uuidV4();
         });
+
         const migratedCharacter = migrateCharacter(characterWithNewId);
+
         charactersManager.actions.upsert(migratedCharacter);
+
+        if (charactersManager.state.managerCallback) {
+          charactersManager.state.managerCallback(migratedCharacter);
+        } else {
+          history.push(`/characters/${migratedCharacter.id}`);
+        }
+        charactersManager.actions.closeManager();
+        logger.info("CharactersManager:onImport");
       },
     });
-    logger.info("CharactersManager:onImport");
   }
 
   function onExport(character: ICharacter) {

diff --git a/lib/components/ContentEditable/ContentEditable.tsx b/lib/components/ContentEditable/ContentEditable.tsx
@@ -101,6 +101,7 @@ export const ContentEditable: React.FC<
           display: "flex",
         },
         "&:empty:before": {
+          color: "lightgrey",
           content: props.placeholder ? `"${props.placeholder}"` : undefined,
         },
       })}

diff --git a/lib/components/Manager/Manager.tsx b/lib/components/Manager/Manager.tsx
@@ -136,9 +136,6 @@ export const Manager = <T extends IBaseItem>(props: IProps<T>) => {
   );
 
   function renderActions() {
-    if (props.mode !== ManagerMode.Manage) {
-      return null;
-    }
     return (
       <Box padding={0.5}>
         <Grid container spacing={1} justify="center">
@@ -258,28 +255,26 @@ export const Manager = <T extends IBaseItem>(props: IProps<T>) => {
                       primary={<>{vm.name}</>}
                       secondary={listItem.formatDate(vm.lastUpdated)}
                     />
-                    {props.mode === ManagerMode.Manage && (
-                      <ListItemSecondaryAction>
-                        <IconButton
-                          edge="start"
-                          data-cy="manager.export"
-                          onClick={() => {
-                            onExport(item);
-                          }}
-                        >
-                          <ExportIcon />
-                        </IconButton>
-                        <IconButton
-                          edge="end"
-                          data-cy="manager.delete"
-                          onClick={() => {
-                            onDelete(item);
-                          }}
-                        >
-                          <DeleteIcon />
-                        </IconButton>
-                      </ListItemSecondaryAction>
-                    )}
+                    <ListItemSecondaryAction>
+                      <IconButton
+                        edge="start"
+                        data-cy="manager.export"
+                        onClick={() => {
+                          onExport(item);
+                        }}
+                      >
+                        <ExportIcon />
+                      </IconButton>
+                      <IconButton
+                        edge="end"
+                        data-cy="manager.delete"
+                        onClick={() => {
+                          onDelete(item);
+                        }}
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </ListItemSecondaryAction>
                   </ListItem>
                 );
               })}

diff --git a/lib/components/Page/Page.tsx b/lib/components/Page/Page.tsx
@@ -122,6 +122,7 @@ export const Page: React.FC<{
   function renderFooter() {
     return (
       <Box
+        displayPrint="none"
         className={css({
           paddingTop: "1rem",
           borderTop: "1px solid #e0e0e0",
@@ -249,6 +250,7 @@ export const Page: React.FC<{
     const color = theme.palette.getContrastText(background);
     return (
       <Box
+        displayPrint="none"
         className={css({
           color: color,
           background: background,

diff --git a/lib/components/Scene/Scene.tsx b/lib/components/Scene/Scene.tsx
@@ -11,6 +11,7 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Divider from "@material-ui/core/Divider";
 import Fade from "@material-ui/core/Fade";
+import FormHelperText from "@material-ui/core/FormHelperText";
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
 import InputLabel from "@material-ui/core/InputLabel";
@@ -59,6 +60,7 @@ import {
 import { arraySort } from "../../domains/array/arraySort";
 import { Dice, IRollDiceOptions } from "../../domains/dice/Dice";
 import { Font } from "../../domains/font/Font";
+import { useBlockReload } from "../../hooks/useBlockReload/useBlockReload";
 import { useButtonTheme } from "../../hooks/useButtonTheme/useButtonTheme";
 import { usePeerConnections } from "../../hooks/usePeerJS/usePeerConnections";
 import { AspectType } from "../../hooks/useScene/AspectType";
@@ -152,6 +154,12 @@ export const Scene: React.FC<IProps> = (props) => {
   const [savedSnack, setSavedSnack] = useState(false);
   const [offlineCharacterName, setOfflineCharacterName] = useState("");
 
+  const shouldBlockLeaving =
+    props.mode !== SceneMode.Manage ||
+    (props.mode === SceneMode.Manage && sceneManager.state.dirty);
+
+  useBlockReload(shouldBlockLeaving);
+
   useEffect(() => {
     if (shareLinkToolTip.open) {
       const id = setTimeout(() => {
@@ -209,11 +217,7 @@ export const Scene: React.FC<IProps> = (props) => {
       liveLabel={sceneManager.state.scene.name}
     >
       <Prompt
-        when={props.mode !== SceneMode.Manage}
-        message={t("manager.leave-without-saving")}
-      />
-      <Prompt
-        when={props.mode === SceneMode.Manage && sceneManager.state.dirty}
+        when={shouldBlockLeaving}
         message={t("manager.leave-without-saving")}
       />
       <Snackbar
@@ -338,7 +342,10 @@ export const Scene: React.FC<IProps> = (props) => {
               </Typography>
             </Box>
             <Box>
-              <InputLabel shrink>{t("play-route.character-name")}</InputLabel>
+              <InputLabel shrink>
+                {t("play-route.character-name")}
+                {":"}
+              </InputLabel>
               <TextField
                 value={offlineCharacterName}
                 data-cy="scene.offline-character-dialog.name"
@@ -678,6 +685,7 @@ export const Scene: React.FC<IProps> = (props) => {
   function renderAspects() {
     const aspectIds = Object.keys(sceneManager.state.scene.aspects);
     const hasAspects = aspectIds.length > 0;
+
     const sortedAspectIds = arraySort(aspectIds, [
       function sortByPinned(id) {
         const aspect = sceneManager.state.scene.aspects[id];
@@ -762,7 +770,7 @@ export const Scene: React.FC<IProps> = (props) => {
           {renderManagementActions()}
           <Container maxWidth="sm">
             <Box mb=".5rem">
-              <Typography
+              <FateLabel
                 variant="h4"
                 className={css({
                   borderBottom: `1px solid ${theme.palette.divider}`,
@@ -778,7 +786,10 @@ export const Scene: React.FC<IProps> = (props) => {
                     sceneManager.actions.updateName(value);
                   }}
                 />
-              </Typography>
+              </FateLabel>
+              <FormHelperText className={css({ textAlign: "right" })}>
+                {t("play-route.scene-name")}
+              </FormHelperText>
             </Box>
             <Collapse in={!!sceneManager.state.scene.name}>
               <Box>

diff --git a/lib/components/Scene/components/PlayerRow/CharacterCard/CharacterCard.tsx b/lib/components/Scene/components/PlayerRow/CharacterCard/CharacterCard.tsx
@@ -52,6 +52,63 @@ export const CharacterCard: React.FC<{
     return null;
   }
 
+  return (
+    <Box
+      data-cy="character-card"
+      className={cx(
+        css({
+          width: width,
+          padding: "0 .5rem 1.5rem .5rem",
+        })
+      )}
+    >
+      <Paper className={paperStyle}>
+        <Box>
+          <Box
+            py=".5rem"
+            px="1rem"
+            className={css({
+              fontSize: "1.5rem",
+              width: "100%",
+              borderBottom: "1px solid #f0a4a4",
+            })}
+          >
+            <Box>
+              <Grid container alignItems="baseline" spacing={2} wrap="nowrap">
+                <Grid item xs zeroMinWidth>
+                  <FateLabel noWrap>
+                    {props.characterSheet?.name ||
+                      t("play-route.character-name")}
+                  </FateLabel>
+                </Grid>
+                <Grid item>
+                  <Tooltip title={t("player-row.open-character-sheet")}>
+                    <span>
+                      <IconButton
+                        size="small"
+                        data-cy="character-card.open-character-sheet"
+                        onClick={(e) => {
+                          props.onCharacterDialogOpen();
+                          logger.info("CharacterCard:onCharacterDialogOpen");
+                        }}
+                      >
+                        <PersonIcon
+                          className={css({ width: "1.5rem", height: "1.5rem" })}
+                        />
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                </Grid>
+              </Grid>
+            </Box>
+          </Box>
+          {renderSkills()}
+          {renderAspects()}
+        </Box>
+      </Paper>
+    </Box>
+  );
+
   function renderSkills() {
     if (bestSkills.length === 0) {
       return null;
@@ -105,7 +162,7 @@ export const CharacterCard: React.FC<{
 
   function renderAspects() {
     return (
-      <Box py=".5rem" px="1rem">
+      <Box py="1rem" px="1rem">
         {props.characterSheet?.aspects.map((aspect, aspectIndex) => {
           const containsImage = aspect.value.includes("<img");
           const value = containsImage
@@ -132,58 +189,4 @@ export const CharacterCard: React.FC<{
       </Box>
     );
   }
-
-  return (
-    <Box
-      data-cy="character-card"
-      className={cx(
-        css({
-          width: width,
-          padding: "0 .5rem 1.5rem .5rem",
-        })
-      )}
-    >
-      <Paper className={paperStyle}>
-        <Box>
-          <Box
-            py=".5rem"
-            px="1rem"
-            className={css({
-              fontSize: "1.5rem",
-              width: "100%",
-              borderBottom: "1px solid #f0a4a4",
-            })}
-          >
-            <Box>
-              <Grid container alignItems="baseline" spacing={2} wrap="nowrap">
-                <Grid item xs zeroMinWidth>
-                  <FateLabel noWrap>{props.characterSheet?.name}</FateLabel>
-                </Grid>
-                <Grid item>
-                  <Tooltip title={t("player-row.open-character-sheet")}>
-                    <span>
-                      <IconButton
-                        size="small"
-                        data-cy="character-card.open-character-sheet"
-                        onClick={(e) => {
-                          props.onCharacterDialogOpen();
-                          logger.info("CharacterCard:onCharacterDialogOpen");
-                        }}
-                      >
-                        <PersonIcon
-                          className={css({ width: "1.5rem", height: "1.5rem" })}
-                        />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                </Grid>
-              </Grid>
-            </Box>
-          </Box>
-          {renderSkills()}
-          {renderAspects()}{" "}
-        </Box>
-      </Paper>
-    </Box>
-  );
 };
diff --git a/lib/components/ScenesManager/ScenesManager.tsx b/lib/components/ScenesManager/ScenesManager.tsx
@@ -20,8 +20,14 @@ export const ScenesManager: React.FC<IProps> = (props) => {
 
   function onAdd() {
     const newScene = scenesManager.actions.add();
-    history.push(`/scenes/${newScene.id}`);
+    if (scenesManager.state.managerCallback) {
+      scenesManager.state.managerCallback(newScene);
+    } else {
+      history.push(`/scenes/${newScene.id}`);
+    }
+
     scenesManager.actions.closeManager();
+
     logger.info("ScenesManager:onAdd");
   }
 

diff --git a/lib/contexts/CharactersContext/CharactersContext.tsx b/lib/contexts/CharactersContext/CharactersContext.tsx
@@ -78,6 +78,7 @@ export function useCharacters(props?: { localStorage: Storage }) {
       ...defaultCharacter,
       id: uuidV4(),
       lastUpdated: getUnix(),
+      name: "",
     } as ICharacter;
     setCharacters((draft: Array<ICharacter>) => {
       return [newCharacter, ...draft];

diff --git a/lib/contexts/SceneContext/__tests__/useScenes.test.tsx b/lib/contexts/SceneContext/__tests__/useScenes.test.tsx
@@ -1,6 +1,6 @@
 import { act, renderHook } from "@testing-library/react-hooks";
 import { ManagerMode } from "../../../components/Manager/Manager";
-import { ISavableScene, useScenes } from "../ScenesContext";
+import { defaultSceneName, ISavableScene, useScenes } from "../ScenesContext";
 
 describe("useScenes", () => {
   describe("local storage load", () => {
@@ -60,14 +60,14 @@ describe("useScenes", () => {
           aspects: {},
           id: newScene!.id,
           lastUpdated: newScene!.lastUpdated,
-          name: "",
+          name: defaultSceneName,
           version: 1,
         },
       ]);
       expect(localStorage.getItem("fari-scenes")).toEqual(
         `[{"id":"${
           newScene!.id
-        }","name":"","aspects":{},"version":1,"lastUpdated":${
+        }","name":"${defaultSceneName}","aspects":{},"version":1,"lastUpdated":${
           newScene!.lastUpdated
         }}]`
       );