Merge branch 'master' into feat/fe-save-story

deco-finter · Sep 23, 2021 · 35d94e3 · 35d94e3
2 parents 6f4601d + 2648a4f
commit 35d94e3
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 108 deletions.
diff --git a/fableous-fe/src/App.tsx b/fableous-fe/src/App.tsx
@@ -63,6 +63,7 @@ export default function App() {
           "&:last-of-type": {
             marginRight: 0,
           },
+          backgroundColor: colors.white,
         },
         label: {
           fontSize: "1.25rem",
@@ -75,7 +76,7 @@ export default function App() {
         },
         outlinedPrimary: {
           backgroundColor: colors.white,
-          color: colors.blue.light,
+          color: colors.blue.main,
         },
         clickable: {
           "&:hover": {

diff --git a/fableous-fe/src/components/ChipRow.tsx b/fableous-fe/src/components/ChipRow.tsx
@@ -3,55 +3,35 @@ import { Chip, ChipProps } from "@material-ui/core";
 import React from "react";
 
 interface ChipRowProps {
-  left: ChipProps | string;
-  middle: (React.ReactNode | ChipProps | string)[];
-  right: (React.ReactNode | ChipProps | string)[];
+  chips: (React.ReactNode | ChipProps | string)[];
+  primary?: boolean;
 }
 
 export default function ChipRow(props: ChipRowProps) {
-  const { left, middle, right } = props;
+  const { chips, primary } = props;
 
   return (
     <div className="flex flex-wrap gap-y-4">
       <div className="flex justify-evenly flex-grow flex-wrap gap-y-4">
-        <Chip
-          className="flex-initial ml-4"
-          label={typeof left === "string" ? left : left.label}
-          color="primary"
-          {...left}
-        />
-        {middle.map((item) =>
-          React.isValidElement(item) ? (
-            item
+        {chips.map((chip) =>
+          React.isValidElement(chip) ? (
+            chip
           ) : (
             <Chip
-              className="flex-initial"
               label={
-                typeof item === "string" ? item : (item as ChipProps).label
+                typeof chip === "string" ? chip : (chip as ChipProps).label
               }
-              color="primary"
-              variant="outlined"
-              {...item}
-            />
-          )
-        )}
-      </div>
-      <div className="flex justify-evenly flex-shrink flex-grow flex-wrap gap-y-4">
-        {right.map((item) =>
-          React.isValidElement(item) ? (
-            item
-          ) : (
-            <Chip
-              className="flex-initial"
-              label={
-                typeof item === "string" ? item : (item as ChipProps).label
-              }
-              color="secondary"
-              {...item}
+              color={primary ? "secondary" : "primary"}
+              variant={primary ? "default" : "outlined"}
+              {...chip}
             />
           )
         )}
       </div>
     </div>
   );
 }
+
+ChipRow.defaultProps = {
+  primary: false,
+};
diff --git a/fableous-fe/src/components/achievement/AchievementButton.tsx b/fableous-fe/src/components/achievement/AchievementButton.tsx
@@ -64,11 +64,11 @@ export default function AchievementButton(props: {
   const confettiRef = useRef<ConfettiTypes | null>(null);
 
   const confettiOptions: ConfettiOptions = {
-    startVelocity: 12,
-    scalar: 0.75,
-    gravity: 0.4,
-    ticks: 300,
-    drift: -0.1,
+    startVelocity: 14,
+    scalar: 0.8,
+    gravity: 0.35,
+    ticks: 500,
+    drift: 0.1,
   };
 
   const notifyAchievement = (type: AchievementType) => {
@@ -101,20 +101,25 @@ export default function AchievementButton(props: {
     <>
       <Chip
         onClick={() => setShowing(true)}
+        color="primary"
+        variant="outlined"
         label={
-          <IconButton className="p-0" color="primary" disableRipple>
-            <Icon fontSize="medium">emoji_events</Icon>
-            <ReactCanvasConfetti
-              resize
-              width={1024}
-              height={1024}
-              useWorker
-              refConfetti={(ref) => {
-                confettiRef.current = ref;
-              }}
-              className={classes.confetti}
-            />
-          </IconButton>
+          <>
+            <IconButton className="p-0 mr-2" color="primary" disableRipple>
+              <Icon fontSize="medium">emoji_events</Icon>
+              <ReactCanvasConfetti
+                resize
+                width={1024}
+                height={1024}
+                useWorker
+                refConfetti={(ref) => {
+                  confettiRef.current = ref;
+                }}
+                className={classes.confetti}
+              />
+            </IconButton>
+            Achievements
+          </>
         }
       />
       <Dialog

diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx
@@ -43,6 +43,7 @@ import CanvasToolbar from "../components/canvas/CanvasToolbar";
 import { ASPECT_RATIO, SCALE } from "../components/canvas/constants";
 import useContainRatio from "../hooks/useContainRatio";
 import ChipRow from "../components/ChipRow";
+import { colors } from "../colors";
 
 enum ControllerState {
   JoinForm = "JOIN_FORM",
@@ -442,29 +443,22 @@ export default function ControllerCanvasPage() {
           controllerState !== ControllerState.DrawingSession && "invisible"
         }`}
       >
-        <Grid container className="mb-4">
+        <Grid container>
           <Grid item xs={12}>
             <ChipRow
-              left={`Title: ${storyDetails?.title}`}
-              middle={[
-                <AchievementButton
-                  achievements={achievements}
-                  confetti
-                  notify
-                />,
+              primary
+              chips={[
+                <Chip label={storyDetails?.title} color="primary" />,
+                ...(storyDetails?.description.split(",") || []),
                 <Chip
-                  className="flex-initial"
                   label={ROLE_ICON[role]}
-                  color="primary"
-                  variant="outlined"
+                  style={{ color: colors.orange.main }}
                 />,
-                `Page ${currentPageIdx} of ${storyDetails?.pages || "-"}`,
               ]}
-              right={storyDetails?.description.split(",") || []}
             />
           </Grid>
         </Grid>
-        <Grid container spacing={2} className="flex-1 mb-4">
+        <Grid container className="flex-1 my-4">
           <Grid item xs={2} md={1}>
             <CanvasToolbar
               ref={canvasRef}
@@ -548,6 +542,20 @@ export default function ControllerCanvasPage() {
             </div>
           </Grid>
         </Grid>
+        <Grid container>
+          <Grid item xs={12}>
+            <ChipRow
+              chips={[
+                `Page ${currentPageIdx} of ${storyDetails?.pages || "-"}`,
+                <AchievementButton
+                  achievements={achievements}
+                  confetti
+                  notify
+                />,
+              ]}
+            />
+          </Grid>
+        </Grid>
       </div>
     </Grid>
   );

diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx
@@ -223,11 +223,14 @@ export default function HubCanvasPage() {
   };
 
   const isAllControllersJoined = (): boolean => {
-    return [
-      ControllerRole.Story,
-      ControllerRole.Character,
-      ControllerRole.Background,
-    ].every((role) => role in joinedControllers);
+    return (
+      [
+        ControllerRole.Story,
+        ControllerRole.Character,
+        ControllerRole.Background,
+      ].every((role) => role in joinedControllers) ||
+      process.env.NODE_ENV === "development"
+    );
   };
 
   const onNextPage = () => {
@@ -605,48 +608,18 @@ export default function HubCanvasPage() {
           hubState !== HubState.DrawingSession && "invisible"
         }`}
       >
-        <Grid container className="mb-4">
+        <Grid container>
           <Grid item xs={12}>
             <ChipRow
-              left={`Title: ${story?.title}`}
-              middle={[
-                <AchievementButton
-                  achievements={achievements}
-                  confetti
-                  notify
-                />,
-                {
-                  label:
-                    currentPageIdx >= (story?.pages || -1)
-                      ? "Finish"
-                      : "Next page",
-                  onClick: onNextPage,
-                } as ChipProps,
-                `Page ${currentPageIdx} of ${story?.pages || "-"}`,
-                {
-                  label: (
-                    <IconButton
-                      className="relative p-0"
-                      color="primary"
-                      disableRipple
-                    >
-                      <MusicNoteIcon fontSize="medium" />
-                      <PlayArrowIcon
-                        fontSize="small"
-                        color="primary"
-                        className="absolute -bottom-1 -right-1.5"
-                      />
-                    </IconButton>
-                  ),
-                  onClick: playAudio,
-                  disabled: audioPaths.length === 0,
-                } as ChipProps,
+              primary
+              chips={[
+                <Chip label={story?.title} color="primary" />,
+                ...(story?.description.split(",") || []),
               ]}
-              right={story?.description.split(",") || []}
             />
           </Grid>
         </Grid>
-        <Grid container className="flex-1 mb-4">
+        <Grid container className="flex-1 my-4">
           <Grid item xs={12}>
             <div
               ref={canvasContainerRef}
@@ -778,6 +751,48 @@ export default function HubCanvasPage() {
             </div>
           </Grid>
         </Grid>
+        <Grid container>
+          <Grid item xs={12}>
+            <ChipRow
+              chips={[
+                `Page ${currentPageIdx} of ${story?.pages || "-"}`,
+                <AchievementButton
+                  achievements={achievements}
+                  confetti
+                  notify
+                />,
+                {
+                  label: (
+                    <>
+                      <IconButton
+                        className="p-0 mr-1"
+                        color="primary"
+                        disableRipple
+                      >
+                        <MusicNoteIcon fontSize="medium" />
+                        <PlayArrowIcon
+                          fontSize="small"
+                          color="primary"
+                          className="absolute -bottom-1 -right-1.5"
+                        />
+                      </IconButton>
+                      Play Audio
+                    </>
+                  ),
+                  onClick: playAudio,
+                  // disabled: audioPaths.length === 0,
+                } as ChipProps,
+                {
+                  label:
+                    currentPageIdx >= (story?.pages || -1)
+                      ? "Finish"
+                      : "Next page",
+                  onClick: onNextPage,
+                } as ChipProps,
+              ]}
+            />
+          </Grid>
+        </Grid>
       </div>
     </Grid>
   );