From 98fc75b54b124ab921d80b1d06abd69ce5fc4c90 Mon Sep 17 00:00:00 2001 From: Heather Logan <118981273+heatherlogan-scottlogic@users.noreply.github.com> Date: Thu, 12 Oct 2023 15:14:08 +0100 Subject: [PATCH] 334 move info message to handbook (#345) This work unifies the overlay for the three main popups: welcome message, mission info, handbook. --- frontend/package.json | 2 +- frontend/src/App.tsx | 33 +++++----- frontend/src/Levels.ts | 8 +-- frontend/src/Theme.css | 1 + .../HandbookOverlay/HandbookOverlay.css | 54 +--------------- .../HandbookOverlay/HandbookOverlay.tsx | 53 ++++++++-------- .../HandbookOverlay/HandbookOverlayTabs.css | 57 +++++++++++++++++ .../HandbookOverlay/HandbookOverlayTabs.tsx | 46 ++++++++++++++ .../components/Overlay/MissionInformation.css | 3 + .../components/Overlay/MissionInformation.tsx | 17 +++++ frontend/src/components/Overlay/Overlay.css | 62 +++++++++++++++++++ frontend/src/components/Overlay/Overlay.tsx | 45 ++++++++++++++ .../OverlayWelcome.css} | 8 ++- .../OverlayWelcome.tsx} | 8 +-- frontend/src/models/handbook.ts | 13 ++++ frontend/src/models/level.ts | 2 +- frontend/src/models/overlay.ts | 1 + 17 files changed, 308 insertions(+), 105 deletions(-) create mode 100644 frontend/src/components/HandbookOverlay/HandbookOverlayTabs.css create mode 100644 frontend/src/components/HandbookOverlay/HandbookOverlayTabs.tsx create mode 100644 frontend/src/components/Overlay/MissionInformation.css create mode 100644 frontend/src/components/Overlay/MissionInformation.tsx create mode 100644 frontend/src/components/Overlay/Overlay.css create mode 100644 frontend/src/components/Overlay/Overlay.tsx rename frontend/src/components/{HandbookOverlay/HandbookWelcome.css => Overlay/OverlayWelcome.css} (58%) rename frontend/src/components/{HandbookOverlay/HandbookWelcome.tsx => Overlay/OverlayWelcome.tsx} (66%) create mode 100644 frontend/src/models/handbook.ts diff --git a/frontend/package.json b/frontend/package.json index ea141b065..ec4f409d4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,8 +27,8 @@ "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", "eslint": "^8.50.0", - "eslint-plugin-react": "^7.33.2", "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "prettier": "2.8.8", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 49036bc1d..63687d28b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -22,8 +22,7 @@ import { import { DEFENCE_DETAILS_ALL, DEFENCE_DETAILS_LEVEL } from "./Defences"; import { DEFENCE_TYPES, DefenceConfig, DefenceInfo } from "./models/defence"; import { getCompletedLevels } from "./service/levelService"; -import { LEVELS } from "./Levels"; -import HandbookOverlay from "./components/HandbookOverlay/HandbookOverlay"; +import Overlay from "./components/Overlay/Overlay"; import { OVERLAY_TYPE } from "./models/overlay"; function App({ isNewUser }: { isNewUser: boolean }) { @@ -75,7 +74,12 @@ function App({ isNewUser }: { isNewUser: boolean }) { }, [currentLevel]); function closeOverlay() { - setShowOverlay(false); + // open the mission info after welcome page for a new user + if (overlayType === OVERLAY_TYPE.WELCOME) { + openInformationOverlay(); + } else { + setShowOverlay(false); + } } function openHandbook() { @@ -83,6 +87,11 @@ function App({ isNewUser }: { isNewUser: boolean }) { setShowOverlay(true); } + function openInformationOverlay() { + setOverlayType(OVERLAY_TYPE.INFORMATION); + setShowOverlay(true); + } + // methods to modify messages function addChatMessage(message: ChatMessage) { setMessages((messages: ChatMessage[]) => [...messages, message]); @@ -94,11 +103,6 @@ function App({ isNewUser }: { isNewUser: boolean }) { await clearChat(currentLevel); setMessages([]); - // add preamble to start of chat - addChatMessage({ - message: LEVELS[currentLevel].preamble, - type: CHAT_MESSAGE_TYPE.LEVEL_INFO, - }); await clearEmails(currentLevel); setEmails([]); @@ -119,6 +123,11 @@ function App({ isNewUser }: { isNewUser: boolean }) { // for going switching level without clearing progress async function setNewLevel(newLevel: LEVEL_NAMES) { console.log(`changing level from ${currentLevel} to ${newLevel}`); + + if (currentLevel !== newLevel) { + openInformationOverlay(); + } + setMessages([]); setCurrentLevel(newLevel); @@ -128,11 +137,7 @@ function App({ isNewUser }: { isNewUser: boolean }) { // get chat history for new level from the backend const levelChatHistory = await getChatHistory(newLevel); - // add the preamble to the start of the chat history - levelChatHistory.unshift({ - message: LEVELS[newLevel].preamble, - type: CHAT_MESSAGE_TYPE.LEVEL_INFO, - }); + setMessages(levelChatHistory); const defences = @@ -224,7 +229,7 @@ function App({ isNewUser }: { isNewUser: boolean }) { return (
{LEVELS[currentLevel].missionInfo}
+Your mission, should you choose to accept it, is to go undercover and @@ -13,4 +13,4 @@ function HandbookWelcome() { ); } -export default HandbookWelcome; +export default OverlayWelcome; diff --git a/frontend/src/models/handbook.ts b/frontend/src/models/handbook.ts new file mode 100644 index 000000000..da0dc0ad7 --- /dev/null +++ b/frontend/src/models/handbook.ts @@ -0,0 +1,13 @@ +enum HANDBOOK_PAGES { + MISSION_INFO, + ATTACKS, + TOOLS, +} + +const handbookPageNames: { [key in HANDBOOK_PAGES]: string } = { + [HANDBOOK_PAGES.MISSION_INFO]: "Mission Info", + [HANDBOOK_PAGES.ATTACKS]: "Attacks", + [HANDBOOK_PAGES.TOOLS]: "Tools", +}; + +export { HANDBOOK_PAGES, handbookPageNames }; diff --git a/frontend/src/models/level.ts b/frontend/src/models/level.ts index 07951e62a..8186384d4 100644 --- a/frontend/src/models/level.ts +++ b/frontend/src/models/level.ts @@ -8,7 +8,7 @@ enum LEVEL_NAMES { interface Level { id: LEVEL_NAMES; name: string; - preamble: string; + missionInfo: string; } export { LEVEL_NAMES }; diff --git a/frontend/src/models/overlay.ts b/frontend/src/models/overlay.ts index 0b3873f7e..f31415bb0 100644 --- a/frontend/src/models/overlay.ts +++ b/frontend/src/models/overlay.ts @@ -1,6 +1,7 @@ enum OVERLAY_TYPE { WELCOME, HANDBOOK, + INFORMATION, } export { OVERLAY_TYPE };