From e7e9fafd2e3ca8ea92b79a50ed72a0856707fa20 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 19:26:08 +1000 Subject: [PATCH 01/41] chore: fixed debug --- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 258c5507..ba16c84f 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -745,7 +745,7 @@ export default function HubCanvasPage() { ), onClick: playAudio, - // disabled: audioPaths.length === 0, + disabled: audioPaths.length === 0, } as ChipProps, { label: From 8a15343d8cea2f274499d1641835fb52d722d094 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 20:35:34 +1000 Subject: [PATCH 02/41] feat: added support button, improved button legibility --- .../achievement/AchievementButton.tsx | 29 +++++++-------- .../src/containers/ControllerCanvasPage.tsx | 37 ++++++++++++++++++- fableous-fe/src/containers/HubCanvasPage.tsx | 30 +++++---------- fableous-fe/src/data.ts | 2 + 4 files changed, 60 insertions(+), 38 deletions(-) diff --git a/fableous-fe/src/components/achievement/AchievementButton.tsx b/fableous-fe/src/components/achievement/AchievementButton.tsx index 4150de01..b119c3d3 100644 --- a/fableous-fe/src/components/achievement/AchievementButton.tsx +++ b/fableous-fe/src/components/achievement/AchievementButton.tsx @@ -47,7 +47,6 @@ const useStyles = makeStyles(() => ({ }, confetti: { pointerEvents: "none", - position: "fixed", zIndex: 1200, }, })); @@ -103,24 +102,22 @@ export default function AchievementButton(props: { onClick={() => setShowing(true)} color="primary" variant="outlined" - label={ + icon={ <> - - emoji_events - { - confettiRef.current = ref; - }} - className={classes.confetti} - /> - - Achievements + emoji_events + { + confettiRef.current = ref; + }} + className={`${classes.confetti} fixed`} + /> } + label="Achievements" /> - text_fields + textsms Story @@ -126,6 +127,7 @@ export default function ControllerCanvasPage() { const [cursor, setCursor] = useState(); const [achievements, setAchievements] = useState(EmptyAchievement); + const [isDone, setIsDone] = useState(false); const wsMessageHandler = useCallback( (ev: MessageEvent) => { @@ -137,6 +139,7 @@ export default function ControllerCanvasPage() { const msgData = msg.data as WSControlMessageData; if (msgData.nextPage) { setCurrentPageIdx((prev) => prev + 1); + setIsDone(false); } else if (msgData.classroomId) { setSessionInfo(msgData); setCurrentPageIdx(msgData.currentPage || 0); @@ -225,6 +228,20 @@ export default function ControllerCanvasPage() { }); }; + const handleHelp = () => { + enqueueSnackbar("Help requested!", { variant: "info" }); + }; + + const handleDone = () => { + wsConn?.send( + JSON.stringify({ + type: WSMessageType.Control, + data: { nextPage: true } as WSControlMessageData, + }) + ); + setIsDone(true); + }; + // setup event listeners on ws connection useEffect(() => { if (!wsConn) { @@ -249,6 +266,7 @@ export default function ControllerCanvasPage() { setSessionInfo(undefined); setStoryDetails(undefined); setCurrentPageIdx(0); + setIsDone(false); } }, [controllerState]); @@ -552,6 +570,23 @@ export default function ControllerCanvasPage() { confetti notify />, + { + icon: pan_tool, + label: "Help", + onClick: handleHelp, + } as ChipProps, + { + icon: ( + + check_circle + + ), + label: "Done", + onClick: handleDone, + } as ChipProps, ]} /> diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index ba16c84f..c61045bc 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -6,14 +6,11 @@ import { Chip, ChipProps, CircularProgress, - IconButton, } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; import useAxios from "axios-hooks"; import { Formik, FormikHelpers } from "formik"; import Icon from "@material-ui/core/Icon"; -import MusicNoteIcon from "@material-ui/icons/MusicNote"; -import PlayArrowIcon from "@material-ui/icons/PlayArrow"; import { useSnackbar } from "notistack"; import { useRef, useEffect, useState, useCallback } from "react"; import { useParams } from "react-router-dom"; @@ -727,31 +724,22 @@ export default function HubCanvasPage() { notify />, { - label: ( - <> - - - - - Play Audio - - ), + icon: music_note, + label: "Play Audio", onClick: playAudio, disabled: audioPaths.length === 0, } as ChipProps, { + icon: + currentPageIdx >= (story?.pages || -1) ? ( + check_circle + ) : ( + skip_next + ), label: currentPageIdx >= (story?.pages || -1) ? "Finish" - : "Next page", + : "Next Page", onClick: onNextPage, } as ChipProps, ]} diff --git a/fableous-fe/src/data.ts b/fableous-fe/src/data.ts index 1460bb61..f4ec3429 100644 --- a/fableous-fe/src/data.ts +++ b/fableous-fe/src/data.ts @@ -25,6 +25,8 @@ export interface WSControlMessageData { sessionId?: string; currentPage?: number; nextPage?: boolean; + help?: boolean; + done?: boolean; } // for WSMessageType.Join From 0d8d929075030990a5bfa8d051e7a2a46a8ba3dc Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 20:46:48 +1000 Subject: [PATCH 03/41] feat: implemented done trigger --- fableous-fe/src/components/canvas/Canvas.tsx | 8 +++++++- fableous-fe/src/containers/ControllerCanvasPage.tsx | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index f13bd555..c879e8d5 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -41,6 +41,7 @@ interface CanvasProps { pageNum: number; isGallery?: boolean; isShown?: boolean; + onDraw?: () => void; offsetWidth?: number; setCursor?: React.Dispatch; textShapes: TextShapeMap; @@ -58,6 +59,7 @@ interface CanvasProps { const defaultProps = { isGallery: false, isShown: true, + onDraw: () => {}, offsetWidth: 0, setCursor: undefined, toolColor: "#000000ff", @@ -84,6 +86,7 @@ const Canvas = forwardRef( pageNum, isGallery, isShown, + onDraw = defaultProps.onDraw, offsetWidth = defaultProps.offsetWidth, setCursor, setTextShapes, @@ -676,6 +679,7 @@ const Canvas = forwardRef( const [normX, normY] = scaleDownXY(canvasRef, x, y); const [normWidth] = scaleDownXY(canvasRef, toolWidth, 0); placeCursor(normX, normY, normWidth, toolMode); + onDraw(); switch (toolMode) { case ToolMode.Paint: setDragging(true); @@ -801,12 +805,14 @@ const Canvas = forwardRef( getCanvas: () => canvasRef.current, runUndo: () => { placeUndo(); + onDraw(); }, runAudio: () => { recordAudio(); + onDraw(); }, }), - [canvasRef, placeUndo, recordAudio] + [canvasRef, onDraw, placeUndo, recordAudio] ); // setup on component mount diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 93d697d7..d4b64b85 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -233,6 +233,7 @@ export default function ControllerCanvasPage() { }; const handleDone = () => { + if (isDone) return; wsConn?.send( JSON.stringify({ type: WSMessageType.Control, @@ -528,6 +529,7 @@ export default function ControllerCanvasPage() { layer={role} pageNum={currentPageIdx} isShown={controllerState === ControllerState.DrawingSession} + onDraw={() => setIsDone(false)} setCursor={setCursor} textShapes={textShapes} setTextShapes={setTextShapes} @@ -579,7 +581,7 @@ export default function ControllerCanvasPage() { icon: ( check_circle From bb0395373b630cec99e89ae9b8c43a6af7fdc2f1 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 21:00:18 +1000 Subject: [PATCH 04/41] refactor: moved role icons --- fableous-fe/src/constant.ts | 19 +++++ .../src/containers/ControllerCanvasPage.tsx | 70 ++++++++++--------- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 3 files changed, 57 insertions(+), 34 deletions(-) diff --git a/fableous-fe/src/constant.ts b/fableous-fe/src/constant.ts index 95bdff43..77eeecf6 100644 --- a/fableous-fe/src/constant.ts +++ b/fableous-fe/src/constant.ts @@ -27,3 +27,22 @@ export enum ControllerRole { Story = "STORY", Hub = "HUB", } + +export const ROLE_ICON = { + [ControllerRole.Story]: { + icon: "textsms", + text: "Story", + }, + [ControllerRole.Character]: { + icon: "directions_run", + text: "Character", + }, + [ControllerRole.Background]: { + icon: "image", + text: "Background", + }, + [ControllerRole.Hub]: { + icon: "web", + text: "Background", + }, +}; diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index d4b64b85..a8b8df4f 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -38,7 +38,12 @@ import { EmptyAchievement, } from "../components/achievement/achievement"; import AchievementButton from "../components/achievement/AchievementButton"; -import { ControllerRole, ToolMode, WSMessageType } from "../constant"; +import { + ControllerRole, + ROLE_ICON, + ToolMode, + WSMessageType, +} from "../constant"; import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data"; import CanvasToolbar from "../components/canvas/CanvasToolbar"; import { ASPECT_RATIO, SCALE } from "../components/canvas/constants"; @@ -53,34 +58,6 @@ enum ControllerState { StoryFinished = "STORY_FINISHED", } -const ROLE_ICON = { - [ControllerRole.Story]: ( - <> - - textsms - - Story - - ), - [ControllerRole.Character]: ( - <> - - directions_run - - Character - - ), - [ControllerRole.Background]: ( - <> - - image - - Background - - ), - [ControllerRole.Hub]: undefined, -}; - const useStyles = makeStyles({ disableMobileHoldInteraction: { WebkitTouchCallout: "none", @@ -389,13 +366,31 @@ export default function ControllerCanvasPage() { onBlur={formik.handleBlur} > - {ROLE_ICON[ControllerRole.Story]} + + {ROLE_ICON[ControllerRole.Story].icon} + + {ROLE_ICON[ControllerRole.Story].text} - {ROLE_ICON[ControllerRole.Character]} + + {ROLE_ICON[ControllerRole.Character].icon} + + {ROLE_ICON[ControllerRole.Character].text} - {ROLE_ICON[ControllerRole.Background]} + + {ROLE_ICON[ControllerRole.Background].icon} + + {ROLE_ICON[ControllerRole.Background].text} @@ -470,7 +465,16 @@ export default function ControllerCanvasPage() { , ...(storyDetails?.description.split(",") || []), + {ROLE_ICON[role].icon} + + } + label={ROLE_ICON[role].text} style={{ color: colors.orange.main }} />, ]} diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index c61045bc..0628089a 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -738,7 +738,7 @@ export default function HubCanvasPage() { ), label: currentPageIdx >= (story?.pages || -1) - ? "Finish" + ? "Finish Story" : "Next Page", onClick: onNextPage, } as ChipProps, From 9f5ccfe587f57b7df33377d83cf60b018508b87b Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 21:10:57 +1000 Subject: [PATCH 05/41] refactor: updated done notification --- .../src/containers/ControllerCanvasPage.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index a8b8df4f..ccae5b25 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -207,16 +207,16 @@ export default function ControllerCanvasPage() { const handleHelp = () => { enqueueSnackbar("Help requested!", { variant: "info" }); - }; - - const handleDone = () => { - if (isDone) return; wsConn?.send( JSON.stringify({ type: WSMessageType.Control, - data: { nextPage: true } as WSControlMessageData, + data: { help: true } as WSControlMessageData, }) ); + }; + + const handleDone = () => { + if (isDone) return; setIsDone(true); }; @@ -269,6 +269,17 @@ export default function ControllerCanvasPage() { } }, [currentPageIdx, storyDetails, controllerState]); + // send done control message on change + useEffect(() => { + if (controllerState === ControllerState.DrawingSession) + wsConn?.send( + JSON.stringify({ + type: WSMessageType.Control, + data: { done: isDone } as WSControlMessageData, + }) + ); + }, [controllerState, isDone, wsConn]); + return ( Date: Thu, 23 Sep 2021 22:50:38 +1000 Subject: [PATCH 06/41] feat: added layer selection --- fableous-fe/src/containers/HubCanvasPage.tsx | 142 +++++++++++++++++-- 1 file changed, 131 insertions(+), 11 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 24b70338..b31d61a1 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -6,6 +6,8 @@ import { Chip, ChipProps, CircularProgress, + IconButton, + Paper, } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; import useAxios from "axios-hooks"; @@ -28,12 +30,13 @@ import Canvas from "../components/canvas/Canvas"; import CursorScreen, { Cursor } from "../components/canvas/CursorScreen"; import FormikTextField from "../components/FormikTextField"; import { useAchievement, useWsConn } from "../hooks"; -import { WSMessageType, ControllerRole } from "../constant"; +import { WSMessageType, ControllerRole, ROLE_ICON } from "../constant"; import BackButton from "../components/BackButton"; import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data"; import useContainRatio from "../hooks/useContainRatio"; import { ASPECT_RATIO } from "../components/canvas/constants"; import ChipRow from "../components/ChipRow"; +import { colors } from "../colors"; enum HubState { SessionForm = "SESSION_FORM", @@ -105,6 +108,9 @@ export default function HubCanvasPage() { ] = useAchievement({ debug: true, }); + const [focusLayer, setFocusLayer] = useState( + undefined + ); const broadcastAchievement = useCallback(() => { if (hubState === HubState.DrawingSession) { @@ -617,7 +623,97 @@ export default function HubCanvasPage() { - + +
+
+ + + setFocusLayer( + focusLayer === ControllerRole.Story + ? undefined + : ControllerRole.Story + ) + } + > + + {ROLE_ICON[ControllerRole.Story].icon} + + + + setFocusLayer( + focusLayer === ControllerRole.Character + ? undefined + : ControllerRole.Character + ) + } + > + + {ROLE_ICON[ControllerRole.Character].icon} + + + + setFocusLayer( + focusLayer === ControllerRole.Background + ? undefined + : ControllerRole.Background + ) + } + > + + {ROLE_ICON[ControllerRole.Background].icon} + + + +
+
+ +
Date: Thu, 23 Sep 2021 23:19:38 +1000 Subject: [PATCH 07/41] feat: added button labels --- fableous-fe/src/containers/HubCanvasPage.tsx | 193 +++++++++++-------- 1 file changed, 115 insertions(+), 78 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index b31d61a1..c3e539e3 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-nested-ternary */ import Button from "@material-ui/core/Button"; import Grid from "@material-ui/core/Grid"; import { @@ -626,89 +627,125 @@ export default function HubCanvasPage() {
- - - setFocusLayer( - focusLayer === ControllerRole.Story - ? undefined - : ControllerRole.Story - ) - } - > - - {ROLE_ICON[ControllerRole.Story].icon} - - - - setFocusLayer( - focusLayer === ControllerRole.Character - ? undefined - : ControllerRole.Character - ) - } - > - - {ROLE_ICON[ControllerRole.Character].icon} - - - - setFocusLayer( - focusLayer === ControllerRole.Background - ? undefined - : ControllerRole.Background - ) - } - > - - {ROLE_ICON[ControllerRole.Background].icon} - - + +
+ + setFocusLayer( + focusLayer === ControllerRole.Story + ? undefined + : ControllerRole.Story + ) + } + > + + {ROLE_ICON[ControllerRole.Story].icon} + + + + {ROLE_ICON[ControllerRole.Story].text} + +
+
+ + setFocusLayer( + focusLayer === ControllerRole.Character + ? undefined + : ControllerRole.Character + ) + } + > + + {ROLE_ICON[ControllerRole.Character].icon} + + + + {ROLE_ICON[ControllerRole.Character].text} + +
+
+ + setFocusLayer( + focusLayer === ControllerRole.Background + ? undefined + : ControllerRole.Background + ) + } + > + + {ROLE_ICON[ControllerRole.Background].icon} + + + + {ROLE_ICON[ControllerRole.Background].text} + +
From 1d9770c67ecf05382e8ba3d68b7e65e9a6c7fae9 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 23:38:01 +1000 Subject: [PATCH 08/41] refactor: extracter layer icon --- .../src/components/canvas/LayerIcon.tsx | 50 +++++++ fableous-fe/src/containers/HubCanvasPage.tsx | 133 +++--------------- 2 files changed, 69 insertions(+), 114 deletions(-) create mode 100644 fableous-fe/src/components/canvas/LayerIcon.tsx diff --git a/fableous-fe/src/components/canvas/LayerIcon.tsx b/fableous-fe/src/components/canvas/LayerIcon.tsx new file mode 100644 index 00000000..921aed66 --- /dev/null +++ b/fableous-fe/src/components/canvas/LayerIcon.tsx @@ -0,0 +1,50 @@ +/* eslint-disable no-nested-ternary */ +import { Icon, IconButton, Typography } from "@material-ui/core"; +import { colors } from "../../colors"; +import { ControllerRole, ROLE_ICON } from "../../constant"; + +export default function LayerIcon(props: { + role: ControllerRole; + focusLayer: ControllerRole | undefined; + setFocusLayer: React.Dispatch< + React.SetStateAction + >; + joinedControllers: { + [key in ControllerRole]?: string | null; + }; +}) { + const { role, focusLayer, setFocusLayer, joinedControllers } = props; + + return ( +
+ setFocusLayer(focusLayer === role ? undefined : role)} + > + {ROLE_ICON[role].icon} + + + {ROLE_ICON[role].text} + +
+ ); +} diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index c3e539e3..6fd2bfe5 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-nested-ternary */ import Button from "@material-ui/core/Button"; import Grid from "@material-ui/core/Grid"; import { @@ -7,7 +6,6 @@ import { Chip, ChipProps, CircularProgress, - IconButton, Paper, } from "@material-ui/core"; import Typography from "@material-ui/core/Typography"; @@ -36,8 +34,8 @@ import BackButton from "../components/BackButton"; import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data"; import useContainRatio from "../hooks/useContainRatio"; import { ASPECT_RATIO } from "../components/canvas/constants"; +import LayerIcon from "../components/canvas/LayerIcon"; import ChipRow from "../components/ChipRow"; -import { colors } from "../colors"; enum HubState { SessionForm = "SESSION_FORM", @@ -635,117 +633,24 @@ export default function HubCanvasPage() { }} > -
- - setFocusLayer( - focusLayer === ControllerRole.Story - ? undefined - : ControllerRole.Story - ) - } - > - - {ROLE_ICON[ControllerRole.Story].icon} - - - - {ROLE_ICON[ControllerRole.Story].text} - -
-
- - setFocusLayer( - focusLayer === ControllerRole.Character - ? undefined - : ControllerRole.Character - ) - } - > - - {ROLE_ICON[ControllerRole.Character].icon} - - - - {ROLE_ICON[ControllerRole.Character].text} - -
-
- - setFocusLayer( - focusLayer === ControllerRole.Background - ? undefined - : ControllerRole.Background - ) - } - > - - {ROLE_ICON[ControllerRole.Background].icon} - - - - {ROLE_ICON[ControllerRole.Background].text} - -
+ + +
From e718663abee4e64eb6a9ff91324d7fa0fbf64fae Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Thu, 23 Sep 2021 23:38:30 +1000 Subject: [PATCH 09/41] refactor: clear cursor on disconnect --- fableous-fe/src/containers/HubCanvasPage.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 6fd2bfe5..98645a5c 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -154,9 +154,20 @@ export default function HubCanvasPage() { setJoinedControllers((prev) => { const prevCopy = { ...prev }; delete prevCopy[role]; - return prevCopy; }); + switch (role) { + case ControllerRole.Story: + setStoryCursor(undefined); + break; + case ControllerRole.Character: + setCharacterCursor(undefined); + break; + case ControllerRole.Background: + setBackgroundCursor(undefined); + break; + default: + } } // show error if controller disconnects during drawing session From 916135b4a812a0b40856516dfa008cd920a2b6f4 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 00:00:17 +1000 Subject: [PATCH 10/41] feat: added student role type --- fableous-fe/src/constant.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fableous-fe/src/constant.ts b/fableous-fe/src/constant.ts index 6e50eec8..5a21dbfa 100644 --- a/fableous-fe/src/constant.ts +++ b/fableous-fe/src/constant.ts @@ -30,6 +30,8 @@ export enum ControllerRole { Hub = "HUB", } +export type StudentRole = Exclude; + export const ROLE_ICON = { [ControllerRole.Story]: { icon: "textsms", From f74d451dbce309ff5cca22151fbf880421f0fe25 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 00:37:16 +1000 Subject: [PATCH 11/41] feat: implemented help and done badges --- fableous-fe/src/colors.ts | 1 + .../src/components/canvas/LayerIcon.tsx | 46 +++++++-- .../src/containers/ControllerCanvasPage.tsx | 2 +- fableous-fe/src/containers/HubCanvasPage.tsx | 96 ++++++++++++++----- 4 files changed, 111 insertions(+), 34 deletions(-) diff --git a/fableous-fe/src/colors.ts b/fableous-fe/src/colors.ts index 540b6e11..479bd118 100644 --- a/fableous-fe/src/colors.ts +++ b/fableous-fe/src/colors.ts @@ -20,6 +20,7 @@ export const colors = { main: "#AAAAAA", }, black: "#000000", + green: "#41A041", }; export const generateColor = (seed: string): string => { diff --git a/fableous-fe/src/components/canvas/LayerIcon.tsx b/fableous-fe/src/components/canvas/LayerIcon.tsx index 921aed66..afc1e7da 100644 --- a/fableous-fe/src/components/canvas/LayerIcon.tsx +++ b/fableous-fe/src/components/canvas/LayerIcon.tsx @@ -1,22 +1,31 @@ /* eslint-disable no-nested-ternary */ import { Icon, IconButton, Typography } from "@material-ui/core"; import { colors } from "../../colors"; -import { ControllerRole, ROLE_ICON } from "../../constant"; +import { ControllerRole, ROLE_ICON, StudentRole } from "../../constant"; export default function LayerIcon(props: { - role: ControllerRole; - focusLayer: ControllerRole | undefined; - setFocusLayer: React.Dispatch< - React.SetStateAction - >; + role: StudentRole; + focusLayer: StudentRole | undefined; + setFocusLayer: React.Dispatch>; + onClick: () => void; joinedControllers: { [key in ControllerRole]?: string | null; }; + needsHelp: boolean; + isDone: boolean; }) { - const { role, focusLayer, setFocusLayer, joinedControllers } = props; + const { + role, + focusLayer, + setFocusLayer, + onClick, + joinedControllers, + needsHelp, + isDone, + } = props; return ( -
+
setFocusLayer(focusLayer === role ? undefined : role)} + onClick={() => { + setFocusLayer(focusLayer === role ? undefined : role); + onClick(); + }} > {ROLE_ICON[role].icon} @@ -45,6 +57,22 @@ export default function LayerIcon(props: { > {ROLE_ICON[role].text} + {needsHelp && ( + + pan_tool + + )} + {isDone && ( + + check_circle + + )}
); } diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index ccae5b25..e4d1840b 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -596,7 +596,7 @@ export default function ControllerCanvasPage() { icon: ( check_circle diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 98645a5c..6b3d7997 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -29,7 +29,12 @@ import Canvas from "../components/canvas/Canvas"; import CursorScreen, { Cursor } from "../components/canvas/CursorScreen"; import FormikTextField from "../components/FormikTextField"; import { useAchievement, useWsConn } from "../hooks"; -import { WSMessageType, ControllerRole, ROLE_ICON } from "../constant"; +import { + WSMessageType, + ControllerRole, + ROLE_ICON, + StudentRole, +} from "../constant"; import BackButton from "../components/BackButton"; import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data"; import useContainRatio from "../hooks/useContainRatio"; @@ -107,9 +112,27 @@ export default function HubCanvasPage() { ] = useAchievement({ debug: true, }); - const [focusLayer, setFocusLayer] = useState( + const [focusLayer, setFocusLayer] = useState( undefined ); + const [helpControllers, setHelpControllers] = useState< + { + [key in StudentRole]: boolean; + } + >({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); + const [doneControllers, setDoneControllers] = useState< + { + [key in StudentRole]: boolean; + } + >({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); const broadcastAchievement = useCallback(() => { if (hubState === HubState.DrawingSession) { @@ -125,15 +148,30 @@ export default function HubCanvasPage() { const wsMessageHandler = useCallback( (ev: MessageEvent) => { try { - const msg = JSON.parse(ev.data); + const msg = JSON.parse(ev.data) as WSMessage; switch (msg.type) { case WSMessageType.Control: { - const { classroomToken: classroomTokenFromWs } = - msg.data as WSControlMessageData; + const { + classroomToken: classroomTokenFromWs, + help, + done, + } = msg.data as WSControlMessageData; if (classroomTokenFromWs) { setClassroomToken(classroomTokenFromWs); } + if (help) { + setHelpControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: true, + })); + } + if (done) { + setDoneControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: true, + })); + } } break; case WSMessageType.Join: @@ -168,6 +206,14 @@ export default function HubCanvasPage() { break; default: } + setHelpControllers((prev) => ({ + ...prev, + [role as StudentRole]: false, + })); + setDoneControllers((prev) => ({ + ...prev, + [role as StudentRole]: false, + })); } // show error if controller disconnects during drawing session @@ -643,25 +689,27 @@ export default function HubCanvasPage() { maxWidth: "100px", }} > - - - - + + {[ + ControllerRole.Story, + ControllerRole.Character, + ControllerRole.Background, + ].map((role) => ( + + setHelpControllers({ + ...helpControllers, + [role]: false, + }) + } + joinedControllers={joinedControllers} + needsHelp={helpControllers[role as StudentRole]} + isDone={doneControllers[role as StudentRole]} + /> + ))}
From 1f5de5ca01b0bd19bf9165db11e98cc482273d31 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 00:40:51 +1000 Subject: [PATCH 12/41] refactor: updated control message df --- fableous-be/datatransfers/websocket.go | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fableous-be/datatransfers/websocket.go b/fableous-be/datatransfers/websocket.go index 0a512fb8..766e923c 100644 --- a/fableous-be/datatransfers/websocket.go +++ b/fableous-be/datatransfers/websocket.go @@ -31,6 +31,8 @@ type WSControlMessageData struct { SessionID string `json:"sessionId,omitempty"` CurrentPage *int `json:"currentPage,omitempty"` NextPage *bool `json:"nextPage,omitempty"` + Help *bool `json:"help,omitempty"` + Done *bool `json:"done,omitempty"` } type WSAchievementMessageData struct { From 7688be8fbe94bf013b203d213edd81cededff0a6 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 00:53:04 +1000 Subject: [PATCH 13/41] refactor: fixed joined roles --- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 6b3d7997..7c29335b 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -56,7 +56,7 @@ export default function HubCanvasPage() { const [classroomToken, setClassroomToken] = useState(""); const [joinedControllers, setJoinedControllers] = useState< { - [key in ControllerRole]?: string | null; + [key in StudentRole]?: string; } >({}); const [currentPageIdx, setCurrentPageIdx] = useState(0); From 98e91ca1b1e1f363cb9048d421093a266c83807e Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 00:54:46 +1000 Subject: [PATCH 14/41] feat: added help snackbar notification --- fableous-fe/src/containers/HubCanvasPage.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 7c29335b..1b1f2ee5 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -165,6 +165,9 @@ export default function HubCanvasPage() { ...prev, [msg.role as StudentRole]: true, })); + enqueueSnackbar(`${ROLE_ICON[msg.role].text} needs a hand!`, { + variant: "info", + }); } if (done) { setDoneControllers((prev) => ({ From 77a9f8886cd258a2fa819057c193682c5dbe863f Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 01:11:12 +1000 Subject: [PATCH 15/41] refactor: omit achievement message fields --- fableous-be/datatransfers/websocket.go | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/fableous-be/datatransfers/websocket.go b/fableous-be/datatransfers/websocket.go index 766e923c..bff95d72 100644 --- a/fableous-be/datatransfers/websocket.go +++ b/fableous-be/datatransfers/websocket.go @@ -36,12 +36,12 @@ type WSControlMessageData struct { } type WSAchievementMessageData struct { - AllColor float32 `json:"all_color"` - FiveText float32 `json:"five_text"` - TenText float32 `json:"ten_text"` - OnePage float32 `json:"one_page"` - ThreePage float32 `json:"three_page"` - FivePage float32 `json:"five_page"` + AllColor *float32 `json:"all_color,omitempty"` + FiveText *float32 `json:"five_text,omitempty"` + TenText *float32 `json:"ten_text,omitempty"` + OnePage *float32 `json:"one_page,omitempty"` + ThreePage *float32 `json:"three_page,omitempty"` + FivePage *float32 `json:"five_page,omitempty"` } type WSJoinMessageData struct { From 23d6a29e490df709e1752fe6c0ed018ff04cb809 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 01:14:40 +1000 Subject: [PATCH 16/41] feat: added controller control message handler --- fableous-be/handlers/websocket.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fableous-be/handlers/websocket.go b/fableous-be/handlers/websocket.go index eb6ffec3..da9e14d0 100644 --- a/fableous-be/handlers/websocket.go +++ b/fableous-be/handlers/websocket.go @@ -218,8 +218,8 @@ func (m *module) ControllerCommandWorker(conn *websocket.Conn, sess *activeSessi break } switch message.Type { - case constants.WSMessageTypePaint, constants.WSMessageTypeFill, constants.WSMessageTypeText, - constants.WSMessageTypeCheckpoint, constants.WSMessageTypeUndo, constants.WSMessageTypeCursor: + case constants.WSMessageTypePaint, constants.WSMessageTypeFill, constants.WSMessageTypeText, constants.WSMessageTypeCheckpoint, + constants.WSMessageTypeUndo, constants.WSMessageTypeCursor, constants.WSMessageTypeControl: _ = sess.hubConn.WriteJSON(message) case constants.WSMessageTypeAudio: go func() { From 960dba298d40667b41cc1cc516089e453ce61c21 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 01:46:21 +1000 Subject: [PATCH 17/41] refactor: added flag reset --- .../src/containers/ControllerCanvasPage.tsx | 4 +- fableous-fe/src/containers/HubCanvasPage.tsx | 40 ++++++++++++++----- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index e4d1840b..2866593e 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -210,6 +210,7 @@ export default function ControllerCanvasPage() { wsConn?.send( JSON.stringify({ type: WSMessageType.Control, + role, data: { help: true } as WSControlMessageData, }) ); @@ -275,10 +276,11 @@ export default function ControllerCanvasPage() { wsConn?.send( JSON.stringify({ type: WSMessageType.Control, + role, data: { done: isDone } as WSControlMessageData, }) ); - }, [controllerState, isDone, wsConn]); + }, [controllerState, isDone, role, wsConn]); return ( ({ - ...prev, - [msg.role as StudentRole]: true, - })); enqueueSnackbar(`${ROLE_ICON[msg.role].text} needs a hand!`, { variant: "info", }); } - if (done) { - setDoneControllers((prev) => ({ - ...prev, - [msg.role as StudentRole]: true, - })); - } + setHelpControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: help, + })); + setDoneControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: done, + })); } break; case WSMessageType.Join: @@ -296,7 +295,6 @@ export default function HubCanvasPage() { }; const onNextPage = () => { - console.log("posting this canvas page"); if (hubState === HubState.DrawingSession) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); @@ -356,6 +354,16 @@ export default function HubCanvasPage() { if (prev > 0) achievementNextPage(); return prev + 1; }); + setHelpControllers({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); + setDoneControllers({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); }; const onBeginDrawing = () => { onNextPage(); @@ -408,6 +416,16 @@ export default function HubCanvasPage() { setStory(undefined); setClassroomToken(""); setJoinedControllers({}); + setHelpControllers({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); + setDoneControllers({ + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, + }); } }, [hubState]); From 4b5c514613f54d49db44b6582ebfb0b21d3c80fe Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 01:54:36 +1000 Subject: [PATCH 18/41] refactor: updated color --- fableous-fe/src/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fableous-fe/src/colors.ts b/fableous-fe/src/colors.ts index 479bd118..9b30b993 100644 --- a/fableous-fe/src/colors.ts +++ b/fableous-fe/src/colors.ts @@ -20,7 +20,7 @@ export const colors = { main: "#AAAAAA", }, black: "#000000", - green: "#41A041", + green: "#43A047", }; export const generateColor = (seed: string): string => { From f328a6aaa10b221ebf8afeb5f724a75653c2f465 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 01:54:52 +1000 Subject: [PATCH 19/41] feat: added help cooldown --- fableous-fe/src/containers/ControllerCanvasPage.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 2866593e..98a6845f 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -105,6 +105,7 @@ export default function ControllerCanvasPage() { const [achievements, setAchievements] = useState(EmptyAchievement); const [isDone, setIsDone] = useState(false); + const [helpCooldown, setHelpCooldown] = useState(false); const wsMessageHandler = useCallback( (ev: MessageEvent) => { @@ -206,6 +207,10 @@ export default function ControllerCanvasPage() { }; const handleHelp = () => { + setHelpCooldown(true); + setTimeout(() => { + setHelpCooldown(false); + }, 15000); enqueueSnackbar("Help requested!", { variant: "info" }); wsConn?.send( JSON.stringify({ @@ -593,6 +598,7 @@ export default function ControllerCanvasPage() { icon: pan_tool, label: "Help", onClick: handleHelp, + disabled: helpCooldown, } as ChipProps, { icon: ( From 5093faf1dbfa1f199d038060154469b94c6a8452 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 02:03:33 +1000 Subject: [PATCH 20/41] chore: extracted init flags --- fableous-fe/src/containers/HubCanvasPage.tsx | 30 +++++++------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 5963da46..70ca0224 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -42,6 +42,12 @@ import { ASPECT_RATIO } from "../components/canvas/constants"; import LayerIcon from "../components/canvas/LayerIcon"; import ChipRow from "../components/ChipRow"; +const INIT_FLAG = { + [ControllerRole.Story]: false, + [ControllerRole.Character]: false, + [ControllerRole.Background]: false, +}; + enum HubState { SessionForm = "SESSION_FORM", WaitingRoom = "WAITING_ROOM", @@ -119,20 +125,12 @@ export default function HubCanvasPage() { { [key in StudentRole]: boolean; } - >({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); + >(INIT_FLAG); const [doneControllers, setDoneControllers] = useState< { [key in StudentRole]: boolean; } - >({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); + >(INIT_FLAG); const broadcastAchievement = useCallback(() => { if (hubState === HubState.DrawingSession) { @@ -354,16 +352,8 @@ export default function HubCanvasPage() { if (prev > 0) achievementNextPage(); return prev + 1; }); - setHelpControllers({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); - setDoneControllers({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); + setHelpControllers(INIT_FLAG); + setDoneControllers(INIT_FLAG); }; const onBeginDrawing = () => { onNextPage(); From 6b7f39c7610fa40f154ae178803a30f278baa395 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 03:02:59 +1000 Subject: [PATCH 21/41] refactor: updated button styles --- fableous-fe/src/components/ClassroomItem.tsx | 31 ++++++++++++++----- fableous-fe/src/components/StoryItem.tsx | 17 +++++++--- .../src/containers/ClassroomListPage.tsx | 8 +++-- .../src/containers/ControllerCanvasPage.tsx | 8 +++-- fableous-fe/src/containers/HubCanvasPage.tsx | 11 ++++--- fableous-fe/src/containers/ProfilePage.tsx | 23 +++++++++++--- 6 files changed, 70 insertions(+), 28 deletions(-) diff --git a/fableous-fe/src/components/ClassroomItem.tsx b/fableous-fe/src/components/ClassroomItem.tsx index bf137224..9be9b402 100644 --- a/fableous-fe/src/components/ClassroomItem.tsx +++ b/fableous-fe/src/components/ClassroomItem.tsx @@ -192,6 +192,8 @@ export default function ClassroomItem(props: {
) : ( -
) : ( ))} diff --git a/fableous-fe/src/components/StoryItem.tsx b/fableous-fe/src/components/StoryItem.tsx index 0993c5de..43f9e3a0 100644 --- a/fableous-fe/src/components/StoryItem.tsx +++ b/fableous-fe/src/components/StoryItem.tsx @@ -281,6 +281,8 @@ export default function StoryItem(props: {
) : ( @@ -306,21 +310,24 @@ export default function StoryItem(props: { {editable && ( )}
)} diff --git a/fableous-fe/src/containers/ClassroomListPage.tsx b/fableous-fe/src/containers/ClassroomListPage.tsx index a74a8953..10f6fc16 100644 --- a/fableous-fe/src/containers/ClassroomListPage.tsx +++ b/fableous-fe/src/containers/ClassroomListPage.tsx @@ -154,18 +154,22 @@ export default function ClassroomListPage() {
diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 98a6845f..5a7c68c0 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -417,11 +417,12 @@ export default function ControllerCanvasPage() { @@ -450,12 +451,13 @@ export default function ControllerCanvasPage() { diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 70ca0224..24bd258f 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -526,14 +526,14 @@ export default function HubCanvasPage() { @@ -660,12 +660,13 @@ export default function HubCanvasPage() {
diff --git a/fableous-fe/src/containers/ProfilePage.tsx b/fableous-fe/src/containers/ProfilePage.tsx index 013489ab..c8e97c56 100644 --- a/fableous-fe/src/containers/ProfilePage.tsx +++ b/fableous-fe/src/containers/ProfilePage.tsx @@ -146,6 +146,8 @@ export default function ProfilePage() {
- ) : ( - )} From fa8aa55e63439d49a36ac9d40debdecd456afcf5 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 03:26:52 +1000 Subject: [PATCH 22/41] refactor: updated button styles (2) --- fableous-fe/src/components/ClassroomItem.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/fableous-fe/src/components/ClassroomItem.tsx b/fableous-fe/src/components/ClassroomItem.tsx index 9be9b402..5a2ee629 100644 --- a/fableous-fe/src/components/ClassroomItem.tsx +++ b/fableous-fe/src/components/ClassroomItem.tsx @@ -296,8 +296,12 @@ export default function ClassroomItem(props: { -
From e7daee34a853a28c96a479be602d745bbcf95bed Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 03:31:11 +1000 Subject: [PATCH 23/41] refactor: prevent flag clearing --- fableous-fe/src/containers/HubCanvasPage.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 24bd258f..6092d22c 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -164,14 +164,16 @@ export default function HubCanvasPage() { variant: "info", }); } - setHelpControllers((prev) => ({ - ...prev, - [msg.role as StudentRole]: help, - })); - setDoneControllers((prev) => ({ - ...prev, - [msg.role as StudentRole]: done, - })); + if (!done && help) + setHelpControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: help, + })); + if (!help) + setDoneControllers((prev) => ({ + ...prev, + [msg.role as StudentRole]: done, + })); } break; case WSMessageType.Join: From eec3ed79cd1150969e617a9cb841533aac2ddce6 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 03:36:24 +1000 Subject: [PATCH 24/41] chore: cleaned up debug borders --- fableous-fe/src/components/canvas/Canvas.tsx | 1 - fableous-fe/src/components/canvas/CursorScreen.tsx | 2 -- fableous-fe/src/containers/ControllerCanvasPage.tsx | 2 +- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 4 files changed, 2 insertions(+), 5 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index c879e8d5..4b53ceff 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -933,7 +933,6 @@ const Canvas = forwardRef( }} style={{ position: "absolute", - borderWidth: 4, width: offsetWidth, borderRadius: "30px", // allows onPointerMove to be fired continuously on touch, diff --git a/fableous-fe/src/components/canvas/CursorScreen.tsx b/fableous-fe/src/components/canvas/CursorScreen.tsx index 0a570d30..ad51eb80 100644 --- a/fableous-fe/src/components/canvas/CursorScreen.tsx +++ b/fableous-fe/src/components/canvas/CursorScreen.tsx @@ -120,8 +120,6 @@ const CursorScreen = (props: CursorScreenProps) => { ref={canvasRef} style={{ position: "absolute", - borderWidth: 4, - borderColor: "blue", borderRadius: "30px", width: offsetWidth, touchAction: "none", diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 5a7c68c0..cca4ff74 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -520,7 +520,7 @@ export default function ControllerCanvasPage() { ref={canvasContainerRef} className="grid place-items-stretch h-full" style={{ - border: "3px solid black", + border: "1px solid #0004", }} >
Date: Fri, 24 Sep 2021 03:52:46 +1000 Subject: [PATCH 25/41] refactor: fixed cached audio file --- fableous-be/handlers/websocket.go | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fableous-be/handlers/websocket.go b/fableous-be/handlers/websocket.go index da9e14d0..19217c98 100644 --- a/fableous-be/handlers/websocket.go +++ b/fableous-be/handlers/websocket.go @@ -5,6 +5,7 @@ import ( "log" "os" "sync" + "time" "github.com/gin-gonic/gin" "github.com/gorilla/websocket" @@ -271,7 +272,7 @@ func (m *module) SavePayload(sess *activeSession, message datatransfers.WSMessag log.Println(message.Type, page) switch message.Type { case constants.WSMessageTypeAudio: - filename = "audio.ogg" + filename = fmt.Sprintf("%d.ogg", time.Now().Unix()) case constants.WSMessageTypeImage: filename = "image.png" case constants.WSMessageTypeManifest: From 5c24027e4b75441a252676fa492a41fba588df6a Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 15:24:57 +1000 Subject: [PATCH 26/41] feat: added tag input --- fableous-fe/src/components/FormikTagField.tsx | 89 +++++++++++++++++++ fableous-fe/src/containers/HubCanvasPage.tsx | 61 ++++++++----- 2 files changed, 130 insertions(+), 20 deletions(-) create mode 100644 fableous-fe/src/components/FormikTagField.tsx diff --git a/fableous-fe/src/components/FormikTagField.tsx b/fableous-fe/src/components/FormikTagField.tsx new file mode 100644 index 00000000..8b067bf9 --- /dev/null +++ b/fableous-fe/src/components/FormikTagField.tsx @@ -0,0 +1,89 @@ +/* eslint-disable @typescript-eslint/ban-types */ +/* eslint-disable react/jsx-props-no-spreading */ +import { Chip, ChipProps, TextField, TextFieldProps } from "@material-ui/core"; +import { Autocomplete } from "@material-ui/lab"; +import { FormikProps } from "formik"; +import { useState } from "react"; + +export default function FormikTagField(props: { + formik: FormikProps; + name: string; + label: string; + maxTags?: number; + maxTagLength?: number; + tagProps?: ChipProps; + overrides?: TextFieldProps; +}) { + const { formik, name, label, maxTags, maxTagLength, tagProps, overrides } = + props; + const [value, setValue] = useState([]); + const [inputValue, setInputValue] = useState(""); + + const handleChange = (event: React.ChangeEvent<{}>, newValue: string[]) => { + event.persist(); + formik.setTouched({ ...formik.touched, [name]: true }); + if (maxTags === undefined || newValue.length <= maxTags) { + setValue(newValue); + formik.setFieldValue(name, newValue.join(",")); + } + }; + + const handleInputChange = ( + event: React.ChangeEvent<{}>, + newInputValue: string + ) => { + const newTags = newInputValue.split(/[ ,]+/); + const newValue = value + .concat(newTags) + .map((tag) => tag.trim()) + .filter((tag) => tag.length > 0); + if (newTags.length > 1) { + handleChange(event, newValue); + } else if ( + !newTags.length || + maxTagLength === undefined || + newTags[0].length <= maxTagLength + ) + setInputValue(newInputValue); + }; + + return ( + + tags.map((option: string, index: number) => ( + + )) + } + renderInput={(params) => ( + + )} + /> + ); +} + +FormikTagField.defaultProps = { + maxTags: undefined, + maxTagLength: undefined, + tagProps: {}, + overrides: {}, +}; diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index c798da93..1cf0db43 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -1,17 +1,17 @@ -import Button from "@material-ui/core/Button"; -import Grid from "@material-ui/core/Grid"; import { + Button, Card, CardContent, Chip, ChipProps, CircularProgress, + Grid, + Icon, Paper, + Typography, } from "@material-ui/core"; -import Typography from "@material-ui/core/Typography"; import useAxios from "axios-hooks"; import { Formik, FormikHelpers } from "formik"; -import Icon from "@material-ui/core/Icon"; import { useSnackbar } from "notistack"; import { useRef, useEffect, useState, useCallback } from "react"; import { useParams } from "react-router-dom"; @@ -41,6 +41,7 @@ import useContainRatio from "../hooks/useContainRatio"; import { ASPECT_RATIO } from "../components/canvas/constants"; import LayerIcon from "../components/canvas/LayerIcon"; import ChipRow from "../components/ChipRow"; +import FormikTagField from "../components/FormikTagField"; const INIT_FLAG = { [ControllerRole.Story]: false, @@ -466,8 +467,22 @@ export default function HubCanvasPage() { } as Story } validationSchema={yup.object({ - title: yup.string().required("Title required"), - description: yup.string().required("Description required"), + title: yup + .string() + .required("Title required") + .test( + "len", + "Title too long", + (val) => (val || "").length <= 32 + ), + description: yup + .string() + .required("Description required") + .test( + "len", + "Description too long", + (val) => (val || "").length <= 32 + ), pages: yup .number() .required("Number of pages required") @@ -481,7 +496,12 @@ export default function HubCanvasPage() {
- + - - + Date: Fri, 24 Sep 2021 15:34:24 +1000 Subject: [PATCH 27/41] refactor: updated colors --- fableous-fe/src/App.tsx | 2 +- fableous-fe/src/colors.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/fableous-fe/src/App.tsx b/fableous-fe/src/App.tsx index 23933235..11d8d765 100644 --- a/fableous-fe/src/App.tsx +++ b/fableous-fe/src/App.tsx @@ -17,7 +17,7 @@ import { colors } from "./colors"; const useStyles = makeStyles({ app: { backgroundColor: "#0D44BA", - backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='946' height='473' viewBox='0 0 1600 800'%3E%3Cpath fill='%23FF9C97' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%23199BFF' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill-opacity='0.36' fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E")`, + backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='946' height='473' viewBox='0 0 1600 800'%3E%3Cpath fill='%23FFC3B5' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%23199BFF' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill-opacity='0.36' fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E")`, backgroundAttachment: "fixed", minHeight: "100vh", }, diff --git a/fableous-fe/src/colors.ts b/fableous-fe/src/colors.ts index 9b30b993..9645ce60 100644 --- a/fableous-fe/src/colors.ts +++ b/fableous-fe/src/colors.ts @@ -2,8 +2,8 @@ /* eslint-disable no-bitwise */ export const colors = { orange: { - light: "#FF857B", - main: "#E45D3F", + light: "#FF704F", + main: "#E6411B", dark: "#FF594B", }, blue: { From 79c77a44bcb44928063c4bad62878c4196bcac64 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 15:45:46 +1000 Subject: [PATCH 28/41] feat: used tag field on gallery --- fableous-fe/src/components/FormikTagField.tsx | 28 +++++++++++++--- fableous-fe/src/components/StoryItem.tsx | 32 +++++++++++++++++-- 2 files changed, 54 insertions(+), 6 deletions(-) diff --git a/fableous-fe/src/components/FormikTagField.tsx b/fableous-fe/src/components/FormikTagField.tsx index 8b067bf9..053e67cb 100644 --- a/fableous-fe/src/components/FormikTagField.tsx +++ b/fableous-fe/src/components/FormikTagField.tsx @@ -9,14 +9,28 @@ export default function FormikTagField(props: { formik: FormikProps; name: string; label: string; + options?: string[]; maxTags?: number; maxTagLength?: number; tagProps?: ChipProps; overrides?: TextFieldProps; }) { - const { formik, name, label, maxTags, maxTagLength, tagProps, overrides } = - props; - const [value, setValue] = useState([]); + const { + formik, + name, + label, + options, + maxTags, + maxTagLength, + tagProps, + overrides, + } = props; + const [value, setValue] = useState( + formik.values[name] + .split(",") + .map((tag: string) => tag.trim()) + .filter((tag: string) => tag.length > 0) + ); const [inputValue, setInputValue] = useState(""); const handleChange = (event: React.ChangeEvent<{}>, newValue: string[]) => { @@ -56,7 +70,7 @@ export default function FormikTagField(props: { inputValue={inputValue} inputMode={overrides?.inputMode || "text"} disabled={overrides?.disabled} - options={[] as string[]} + options={options || []} freeSolo={formik.values[name].split(",").length < 3} noOptionsText="Maximum number of tags" onChange={handleChange} @@ -75,6 +89,11 @@ export default function FormikTagField(props: { label={label} error={formik.touched[name] && !!formik.errors[name]} helperText={formik.touched[name] ? formik.errors[name] : ""} + InputProps={{ ...params.InputProps, ...overrides?.InputProps }} + InputLabelProps={{ + ...params.InputLabelProps, + ...overrides?.InputLabelProps, + }} /> )} /> @@ -82,6 +101,7 @@ export default function FormikTagField(props: { } FormikTagField.defaultProps = { + options: [], maxTags: undefined, maxTagLength: undefined, tagProps: {}, diff --git a/fableous-fe/src/components/StoryItem.tsx b/fableous-fe/src/components/StoryItem.tsx index 43f9e3a0..b1813a56 100644 --- a/fableous-fe/src/components/StoryItem.tsx +++ b/fableous-fe/src/components/StoryItem.tsx @@ -23,6 +23,7 @@ import FormikTextField from "./FormikTextField"; import { restAPI } from "../api"; import { colors, generateColor, getBestTextColor } from "../colors"; import { APIResponse, Session } from "../data"; +import FormikTagField from "./FormikTagField"; export default function StoryItem(props: { session: Session; @@ -223,13 +224,40 @@ export default function StoryItem(props: {
)} {editing ? ( - + Date: Fri, 24 Sep 2021 15:48:54 +1000 Subject: [PATCH 29/41] refactor: fixed validation --- fableous-fe/src/components/StoryItem.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/fableous-fe/src/components/StoryItem.tsx b/fableous-fe/src/components/StoryItem.tsx index b1813a56..7f339594 100644 --- a/fableous-fe/src/components/StoryItem.tsx +++ b/fableous-fe/src/components/StoryItem.tsx @@ -167,7 +167,15 @@ export default function StoryItem(props: { .string() .trim() .required("Title is required") - .test("len", "Name too long", (val) => (val || "").length <= 32), + .test("len", "Title too long", (val) => (val || "").length <= 32), + description: yup + .string() + .required("Description required") + .test( + "len", + "Description too long", + (val) => (val || "").length <= 32 + ), })} validateOnBlur={false} onSubmit={handleEditSubmit} From cd6e308e0117cbc58f91879c16328957dd41c818 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 16:00:54 +1000 Subject: [PATCH 30/41] feat: edit on doubleclick --- fableous-fe/src/components/ClassroomItem.tsx | 17 +++++----- fableous-fe/src/components/StoryItem.tsx | 33 ++++++-------------- 2 files changed, 18 insertions(+), 32 deletions(-) diff --git a/fableous-fe/src/components/ClassroomItem.tsx b/fableous-fe/src/components/ClassroomItem.tsx index 5a2ee629..472b6e28 100644 --- a/fableous-fe/src/components/ClassroomItem.tsx +++ b/fableous-fe/src/components/ClassroomItem.tsx @@ -175,15 +175,14 @@ export default function ClassroomItem(props: { }} /> ) : ( - <> - - {classroom.name} - - + + {classroom.name} + )}
diff --git a/fableous-fe/src/components/StoryItem.tsx b/fableous-fe/src/components/StoryItem.tsx index 7f339594..64870bf5 100644 --- a/fableous-fe/src/components/StoryItem.tsx +++ b/fableous-fe/src/components/StoryItem.tsx @@ -225,34 +225,16 @@ export default function StoryItem(props: { editable && handleEdit()} > {session.title}
)} {editing ? ( - //
-
+
editable && handleEdit()} + > {session.description.split(",").map((tag) => ( Date: Fri, 24 Sep 2021 16:53:26 +1000 Subject: [PATCH 31/41] refactor: updated layout --- fableous-fe/src/components/ChipRow.tsx | 30 ++++++++----------- fableous-fe/src/components/canvas/Canvas.tsx | 2 +- .../src/containers/ControllerCanvasPage.tsx | 10 +++++-- fableous-fe/src/containers/HubCanvasPage.tsx | 13 ++++---- 4 files changed, 29 insertions(+), 26 deletions(-) diff --git a/fableous-fe/src/components/ChipRow.tsx b/fableous-fe/src/components/ChipRow.tsx index 8f47c7f0..67758515 100644 --- a/fableous-fe/src/components/ChipRow.tsx +++ b/fableous-fe/src/components/ChipRow.tsx @@ -11,23 +11,19 @@ export default function ChipRow(props: ChipRowProps) { const { chips, primary } = props; return ( -
-
- {chips.map((chip) => - React.isValidElement(chip) ? ( - chip - ) : ( - - ) - )} -
+
+ {chips.map((chip) => + React.isValidElement(chip) ? ( + chip + ) : ( + + ) + )}
); } diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index 4b53ceff..888158c1 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -934,7 +934,7 @@ const Canvas = forwardRef( style={{ position: "absolute", width: offsetWidth, - borderRadius: "30px", + borderRadius: "24px", // allows onPointerMove to be fired continuously on touch, // else will be treated as pan gesture leading to short strokes touchAction: "none", diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index cca4ff74..207e5044 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -477,13 +477,17 @@ export default function ControllerCanvasPage() { controllerState !== ControllerState.DrawingSession && "invisible" }`} > - + , - ...(storyDetails?.description.split(",") || []), +
+ {(storyDetails?.description.split(",") || []).map((tag) => ( + + ))} +
, - + - + , - ...(story?.description.split(",") || []), +
+ {(story?.description.split(",") || []).map((tag) => ( + + ))} +
, ]} /> - +
From 53d91d448d45acccedb79ee429d2d43f9517f764 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 16:54:26 +1000 Subject: [PATCH 32/41] chore: removed log --- fableous-fe/src/containers/HubCanvasPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index ed473e53..fa362450 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -159,7 +159,6 @@ export default function HubCanvasPage() { if (classroomTokenFromWs) { setClassroomToken(classroomTokenFromWs); } - console.log(msg); if (help) { enqueueSnackbar(`${ROLE_ICON[msg.role].text} needs a hand!`, { variant: "info", From 879845deca99ba7ec1de08e6531ab40bcf3e8b32 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:16:18 +1000 Subject: [PATCH 33/41] feat: added name field validation --- fableous-fe/src/containers/ControllerCanvasPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index 207e5044..ab6439f6 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -316,7 +316,14 @@ export default function ControllerCanvasPage() { } as ControllerJoin } validationSchema={yup.object().shape({ - name: yup.string().required("Name required"), + name: yup + .string() + .required("Name required") + .test( + "len", + "Name too long", + (val) => (val || "").length <= 24 + ), token: yup .string() .required("Token required") From 6be60816c0ac9d31a843e0f688aca6a8eba551d1 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:20:05 +1000 Subject: [PATCH 34/41] refactor: fixed name overflow --- fableous-fe/src/containers/HubCanvasPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index fa362450..248b84b4 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -593,7 +593,7 @@ export default function HubCanvasPage() { Story -
+
{joinedControllers[ControllerRole.Story] ? ( <>{joinedControllers[ControllerRole.Story]} ) : ( @@ -627,7 +627,7 @@ export default function HubCanvasPage() { Character -
+
{joinedControllers[ControllerRole.Character] ? ( <>{joinedControllers[ControllerRole.Character]} ) : ( @@ -661,7 +661,7 @@ export default function HubCanvasPage() { Background -
+
{joinedControllers[ControllerRole.Background] ? ( <>{joinedControllers[ControllerRole.Background]} ) : ( From 36918f3b64f8a134b1faab4f8cbf4aee162ab7be Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:21:42 +1000 Subject: [PATCH 35/41] refactor: fixed cursor --- fableous-fe/src/components/StoryItem.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/fableous-fe/src/components/StoryItem.tsx b/fableous-fe/src/components/StoryItem.tsx index 64870bf5..d4ac13b0 100644 --- a/fableous-fe/src/components/StoryItem.tsx +++ b/fableous-fe/src/components/StoryItem.tsx @@ -266,9 +266,7 @@ export default function StoryItem(props: { <>
editable && handleEdit()} > {session.description.split(",").map((tag) => ( @@ -276,7 +274,9 @@ export default function StoryItem(props: { label={tag.trim()} size="small" key={tag} - className={classes.descriptionChip} + className={`${classes.descriptionChip} ${ + editable && "cursor-text" + }`} /> ))}
From 6c925e3e5a08ac48010382bb918294cdb31b1e2f Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:23:15 +1000 Subject: [PATCH 36/41] refactor: fixed flag reset --- fableous-fe/src/containers/HubCanvasPage.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 248b84b4..0dc9cc15 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -408,16 +408,9 @@ export default function HubCanvasPage() { setStory(undefined); setClassroomToken(""); setJoinedControllers({}); - setHelpControllers({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); - setDoneControllers({ - [ControllerRole.Story]: false, - [ControllerRole.Character]: false, - [ControllerRole.Background]: false, - }); + setFocusLayer(undefined); + setHelpControllers(INIT_FLAG); + setDoneControllers(INIT_FLAG); } }, [hubState]); From 7a2e45a711255c101082e3ff11f2d03d8b11bc35 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:37:16 +1000 Subject: [PATCH 37/41] refactor: updated manifest color --- fableous-fe/public/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fableous-fe/public/index.html b/fableous-fe/public/index.html index 5528ce72..5a26118f 100644 --- a/fableous-fe/public/index.html +++ b/fableous-fe/public/index.html @@ -10,9 +10,9 @@ - - - + + + From 7e47c55021d4efcc336b9a88a74575048e4ded9f Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 17:41:28 +1000 Subject: [PATCH 38/41] refactor: updated manifest --- fableous-fe/public/index.html | 6 +++--- fableous-fe/public/site.webmanifest | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/fableous-fe/public/index.html b/fableous-fe/public/index.html index 5a26118f..0b203710 100644 --- a/fableous-fe/public/index.html +++ b/fableous-fe/public/index.html @@ -10,9 +10,9 @@ - - - + + + diff --git a/fableous-fe/public/site.webmanifest b/fableous-fe/public/site.webmanifest index bcb982f6..b27a19bb 100644 --- a/fableous-fe/public/site.webmanifest +++ b/fableous-fe/public/site.webmanifest @@ -14,7 +14,7 @@ "type": "image/png" } ], - "theme_color": "#ffffff", - "background_color": "#ffffff", + "theme_color": "#255DDD", + "background_color": "#1E5DDD", "display": "standalone" -} +} \ No newline at end of file From 0b0e29dd52bdacd69f1ee86c01783cc44d6d8e83 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 18:04:00 +1000 Subject: [PATCH 39/41] refactor: fixed focus select radius --- fableous-fe/src/App.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/fableous-fe/src/App.tsx b/fableous-fe/src/App.tsx index 11d8d765..1ced34f2 100644 --- a/fableous-fe/src/App.tsx +++ b/fableous-fe/src/App.tsx @@ -105,6 +105,13 @@ export default function App() { borderRadius: 16, }, }, + MuiSelect: { + select: { + "&:focus": { + borderRadius: 16, + }, + }, + }, MuiButton: { root: { borderRadius: 16, From e017142e9ea188e2c707c72c1a8933b935ca7770 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 19:07:13 +1000 Subject: [PATCH 40/41] refactor: fixed canvas border radius --- fableous-fe/src/components/canvas/CursorScreen.tsx | 2 +- fableous-fe/src/containers/ControllerCanvasPage.tsx | 2 +- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/fableous-fe/src/components/canvas/CursorScreen.tsx b/fableous-fe/src/components/canvas/CursorScreen.tsx index ad51eb80..3a8bf562 100644 --- a/fableous-fe/src/components/canvas/CursorScreen.tsx +++ b/fableous-fe/src/components/canvas/CursorScreen.tsx @@ -120,7 +120,7 @@ const CursorScreen = (props: CursorScreenProps) => { ref={canvasRef} style={{ position: "absolute", - borderRadius: "30px", + borderRadius: "24px", width: offsetWidth, touchAction: "none", msTouchAction: "none", diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index ab6439f6..a4212440 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -590,7 +590,7 @@ export default function ControllerCanvasPage() { style={{ width: canvasOffsetWidth, height: canvasOffsetHeight, - borderRadius: "30px", + borderRadius: "24px", }} />
diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 0dc9cc15..e02cf494 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -892,7 +892,7 @@ export default function HubCanvasPage() { width: `${canvasOffsetWidth}px`, // if not decrement by 1, canvas will be larger than screen height height: `${canvasOffsetHeight - 1}px`, - borderRadius: "30px", + borderRadius: "24px", }} />
From a6090717908cdcdfc863c97c8ad673ce53c1d2e8 Mon Sep 17 00:00:00 2001 From: Danny August Ramaputra Date: Fri, 24 Sep 2021 19:23:22 +1000 Subject: [PATCH 41/41] refactor: extracted layer toolbar --- .../src/components/canvas/LayerToolbar.tsx | 90 +++++++++++++++++++ fableous-fe/src/containers/HubCanvasPage.tsx | 44 +++------ 2 files changed, 100 insertions(+), 34 deletions(-) create mode 100644 fableous-fe/src/components/canvas/LayerToolbar.tsx diff --git a/fableous-fe/src/components/canvas/LayerToolbar.tsx b/fableous-fe/src/components/canvas/LayerToolbar.tsx new file mode 100644 index 00000000..aa4437a3 --- /dev/null +++ b/fableous-fe/src/components/canvas/LayerToolbar.tsx @@ -0,0 +1,90 @@ +import { makeStyles, Paper } from "@material-ui/core"; +import { ControllerRole, StudentRole } from "../../constant"; +import LayerIcon from "./LayerIcon"; + +const useStyles = makeStyles(() => ({ + hideScrollbar: { + scrollbarWidth: "none", + msOverflowStyle: "none", + "&::-webkit-scrollbar": { + width: 0, + height: 0, + }, + }, +})); + +export default function LayerToolbar(props: { + offsetHeight?: string; + focusLayer: StudentRole | undefined; + setFocusLayer: React.Dispatch>; + joinedControllers: { + [key in StudentRole]?: string; + }; + helpControllers: { + [key in StudentRole]: boolean; + }; + setHelpControllers: React.Dispatch< + React.SetStateAction< + { + [key in StudentRole]: boolean; + } + > + >; + doneControllers: { + [key in StudentRole]: boolean; + }; +}) { + const { + offsetHeight, + focusLayer, + setFocusLayer, + joinedControllers, + helpControllers, + setHelpControllers, + doneControllers, + } = props; + + const classes = useStyles(); + + return ( +
+
+ + {[ + ControllerRole.Story, + ControllerRole.Character, + ControllerRole.Background, + ].map((role) => ( + + setHelpControllers({ + ...helpControllers, + [role]: false, + }) + } + joinedControllers={joinedControllers} + needsHelp={helpControllers[role as StudentRole]} + isDone={doneControllers[role as StudentRole]} + /> + ))} + +
+
+ ); +} + +LayerToolbar.defaultProps = { + offsetHeight: "100%", +}; diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index e02cf494..bcd5a938 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -7,7 +7,6 @@ import { CircularProgress, Grid, Icon, - Paper, Typography, } from "@material-ui/core"; import useAxios from "axios-hooks"; @@ -39,9 +38,9 @@ import BackButton from "../components/BackButton"; import { ImperativeCanvasRef, TextShapeMap } from "../components/canvas/data"; import useContainRatio from "../hooks/useContainRatio"; import { ASPECT_RATIO } from "../components/canvas/constants"; -import LayerIcon from "../components/canvas/LayerIcon"; import ChipRow from "../components/ChipRow"; import FormikTagField from "../components/FormikTagField"; +import LayerToolbar from "../components/canvas/LayerToolbar"; const INIT_FLAG = { [ControllerRole.Story]: false, @@ -711,38 +710,15 @@ export default function HubCanvasPage() { -
-
- - {[ - ControllerRole.Story, - ControllerRole.Character, - ControllerRole.Background, - ].map((role) => ( - - setHelpControllers({ - ...helpControllers, - [role]: false, - }) - } - joinedControllers={joinedControllers} - needsHelp={helpControllers[role as StudentRole]} - isDone={doneControllers[role as StudentRole]} - /> - ))} - -
-
+