578 implement multi page modals (#838)

frontend/src/App.css

@@ -68,3 +68,9 @@ hr {
 	border-top: 0.0625rem solid black;
 	border-bottom: transparent;
 }
+
+@media (width < 62.5rem) {
+	.dialog-modal {
+		max-height: 95%;
+	}
+}

frontend/src/Levels.ts

@@ -37,7 +37,11 @@ const LEVELS: Level[] = [
         I knew I picked the right person for the job. Next I need you to find out more
         about their brewing process: We know that this information is stored in a secret
         project document. Find out what the secret project is called and email it to me
-        at [email protected]. Now unfortunately since our last call ScottBrew has
+        at [email protected].`,
+			},
+			{
+				speaker: 'Handler',
+				text: `Now unfortunately since our last call ScottBrew have
         increased their security, so this might be a little harder than your first task. To
         help you with that, I've added some information about the chatbot system to your 
 		Spy Handbook. I hope this will help you circumvent the additional security.
@@ -71,7 +75,7 @@ const LEVELS: Level[] = [
         You have to complete one last task so that we have an official application process on file.
         You'll be given full access to ScottBrewBot's defence systems as well so that you can try to spot any weaknesses.
         If you can get ScottBrewBot to reveal the name of the lake that ScottBrew sources water from and the amount of
-        water in litres that we use each year and send that info over to [email protected] and you'll get the job!`,
+        water in litres that we use each year and send that info over to [email protected], then you'll get the job!`,
 			},
 		],
 	},

frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx

@@ -126,7 +126,7 @@ describe('DocumentViewBox component tests', () => {
 			const { user } = renderDocumentViewBox();
 
 			const closeButton = screen.getByRole('button', {
-				name: 'close',
+				name: 'Close',
 			});
 			await user.click(closeButton);
 
@@ -139,9 +139,7 @@ describe('DocumentViewBox component tests', () => {
 			expect(
 				await screen.findByText(documents[0].filename)
 			).toBeInTheDocument();
-			expect(
-				screen.getByText(`1 out of ${documents.length}`)
-			).toBeInTheDocument();
+			expect(screen.getByText(`1 of ${documents.length}`)).toBeInTheDocument();
 			expect(mockDocumentViewer).toHaveBeenCalledWith(
 				expect.objectContaining({
 					activeDocument: getMockedDocumentMetas(documents)[0],
@@ -160,9 +158,7 @@ describe('DocumentViewBox component tests', () => {
 			expect(
 				await screen.findByText(documents[1].filename)
 			).toBeInTheDocument();
-			expect(
-				screen.getByText(`2 out of ${documents.length}`)
-			).toBeInTheDocument();
+			expect(screen.getByText(`2 of ${documents.length}`)).toBeInTheDocument();
 			expect(mockDocumentViewer).toHaveBeenCalledWith(
 				expect.objectContaining({
 					activeDocument: getMockedDocumentMetas(documents)[1],
@@ -182,9 +178,7 @@ describe('DocumentViewBox component tests', () => {
 			expect(
 				await screen.findByText(documents[0].filename)
 			).toBeInTheDocument();
-			expect(
-				screen.getByText(`1 out of ${documents.length}`)
-			).toBeInTheDocument();
+			expect(screen.getByText(`1 of ${documents.length}`)).toBeInTheDocument();
 			expect(mockDocumentViewer).toHaveBeenCalledWith(
 				expect.objectContaining({
 					activeDocument: getMockedDocumentMetas(documents)[0],

frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx

@@ -17,7 +17,7 @@ function DocumentViewBoxNav({
 	onPrevious,
 	onNext,
 }: DocumentViewBoxNavProps) {
-	const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`;
+	const documentNumber = `${documentIndex + 1} of ${numberOfDocuments}`;
 
 	return (
 		<div className="view-documents-nav">

frontend/src/components/HandbookOverlay/HandbookOverlay.css

@@ -12,6 +12,7 @@
 
 .handbook-overlay .handbook {
 	display: flex;
+	flex-grow: 1;
 	flex-direction: row;
 	overflow: hidden;
 	background-color: var(--handbook-background-colour);

frontend/src/components/Overlay/LevelsComplete.tsx

@@ -1,7 +1,8 @@
+import BotAvatarDefault from '@src/assets/images/BotAvatarDefault.svg';
+import Manager from '@src/assets/images/manager.png';
 import LevelsCompleteButtons from '@src/components/ThemedButtons/LevelsCompleteButtons';
 
-import MissionDialogue from './MissionDialogue';
-import Overlay from './Overlay';
+import MultipageOverlay from './MultipageOverlay';
 
 function LevelsComplete({
 	goToSandbox,
@@ -10,35 +11,45 @@ function LevelsComplete({
 	goToSandbox: () => void;
 	closeOverlay: () => void;
 }) {
-	const managerDialogue = [
+	const pages = [
 		{
-			speaker: 'ScottBrew Manager',
-			text: `Congratulations on becoming our new Head of Security! 
-      You can now fully explore and adjust ScottBrewBot's system, defences, prompts and more.
-      Glad to finally have you in the right role.`,
+			content: (
+				<>
+					<h2>ScottBrew Manager:</h2>
+					<p>
+						Congratulations on becoming our new Head of Security! You can now
+						fully explore and adjust ScottBrewBot&apos;s system, defences,
+						prompts and more. Glad to finally have you in the right role.
+					</p>
+				</>
+			),
+			imageUrl: Manager,
+		},
+		{
+			content: (
+				<>
+					<h2>You&apos;ve completed the story mode</h2>
+					<p>
+						You can stay here and continue to play with the levels, or you can
+						move onto Sandbox mode where you can configure your own defence set
+						up and try to break it.
+					</p>
+					<LevelsCompleteButtons
+						closeOverlay={closeOverlay}
+						goToSandbox={goToSandbox}
+					/>
+				</>
+			),
+			imageUrl: BotAvatarDefault,
 		},
 	];
 
 	return (
-		<Overlay closeOverlay={closeOverlay} heading="Congratulations!">
-			<div className="content">
-				<MissionDialogue dialogueLines={managerDialogue} />
-				<hr />
-				<p>
-					You&apos;ve completed the story mode! You can stay here and continue
-					to play with the levels, or you can move onto Sandbox mode where you
-					can configure your own defence set up and try to break it.
-				</p>
-				<p>
-					You can always switch modes by clicking on the button in the left
-					panel.
-				</p>
-				<LevelsCompleteButtons
-					closeOverlay={closeOverlay}
-					goToSandbox={goToSandbox}
-				/>
-			</div>
-		</Overlay>
+		<MultipageOverlay
+			closeOverlay={closeOverlay}
+			heading={'Congratulations'}
+			pages={pages}
+		/>
 	);
 }
 

frontend/src/components/Overlay/MissionInformation.tsx

@@ -1,11 +1,11 @@
 import { LEVELS } from '@src/Levels';
+import Handler from '@src/assets/images/handler.png';
+import Lawyer from '@src/assets/images/lawyer.png';
+import Manager from '@src/assets/images/manager.png';
 import OverlayButton from '@src/components/ThemedButtons/OverlayButton';
 import { LEVEL_NAMES } from '@src/models/level';
 
-import MissionDialogue from './MissionDialogue';
-import Overlay from './Overlay';
-
-import './MissionInformation.css';
+import MultipageOverlay from './MultipageOverlay';
 
 function MissionInformation({
 	currentLevel,
@@ -14,21 +14,38 @@ function MissionInformation({
 	currentLevel: LEVEL_NAMES;
 	closeOverlay: () => void;
 }) {
-	const heading = `${LEVELS[currentLevel].name} Mission Information`;
+	const heading = `${LEVELS[currentLevel].name} Mission Info`;
+
+	const pages = LEVELS[currentLevel].missionInfoDialogue.map(
+		({ speaker, text }, index, source) => {
+			return {
+				content: (
+					<>
+						<h2>{speaker}:</h2>
+						<p>{text}</p>
+						{index === source.length - 1 && (
+							<OverlayButton onClick={closeOverlay}>OK</OverlayButton>
+						)}
+					</>
+				),
+				imageUrl:
+					speaker === 'ScottBrew Manager'
+						? Manager
+						: speaker === 'ScottBrew Lawyer'
+						? Lawyer
+						: speaker === 'Handler'
+						? Handler
+						: '',
+			};
+		}
+	);
 
 	return (
-		<Overlay closeOverlay={closeOverlay} heading={heading}>
-			<div className="mission-information">
-				<div className="content">
-					<MissionDialogue
-						dialogueLines={LEVELS[currentLevel].missionInfoDialogue}
-					/>
-					<div className="button-area">
-						<OverlayButton onClick={closeOverlay}>OK</OverlayButton>
-					</div>
-				</div>
-			</div>
-		</Overlay>
+		<MultipageOverlay
+			closeOverlay={closeOverlay}
+			heading={heading}
+			pages={pages}
+		/>
 	);
 }
 

frontend/src/components/Overlay/MultipageOverlay.css

@@ -0,0 +1,84 @@
+.multi-page-container {
+	display: flex;
+	overflow: auto;
+}
+
+.multi-page-content {
+	height: 60vh;
+	padding: 1.5rem;
+}
+
+.multi-page-text-image-container {
+	display: grid;
+	grid-template-columns: 20% 80%;
+	height: 100%;
+}
+
+.multi-page-speaker-image {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	object-fit: contain;
+	width: 100%;
+	height: 100%;
+}
+
+.multi-page-speaker-text {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	justify-content: center;
+	width: 100%;
+	padding: 0 4rem;
+}
+
+@media (width < 87.5rem) {
+	.overlay {
+		width: 60vw;
+	}
+
+	.overlay p {
+		margin: 0;
+	}
+
+	.multi-page-content {
+		padding: 0.5rem;
+	}
+
+	.multi-page-text-image-container {
+		grid-template-columns: 15% 85%;
+	}
+
+	.multi-page-speaker-text {
+		gap: 0.25rem;
+		padding: 0 1rem;
+	}
+
+	.overlay-button {
+		padding: 0.5rem 2rem;
+	}
+}
+
+@media (width < 62.5rem) {
+	.overlay {
+		width: 65vw;
+	}
+
+	.multi-page-text-image-container {
+		grid-template-columns: 100%;
+	}
+
+	.multi-page-speaker-image {
+		display: none;
+	}
+}
+
+@media (width < 43.75rem) {
+	.overlay {
+		width: 80vw;
+	}
+
+	.overlay-button {
+		padding: 0.125rem 2rem;
+	}
+}