578 implement multi page modals

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 has
         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.

frontend/src/components/ChatBox/ChatBox.tsx

@@ -208,6 +208,9 @@ function ChatBox({
 			<ChatBoxFeed messages={messages} />
 			<div className="footer">
 				<div className="messages">
+					<button onClick={openLevelsCompleteOverlay}>
+						Open Levels complete
+					</button>
 					<ChatBoxInput
 						content={chatInput}
 						onContentChanged={setChatInput}

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,6 @@
 import LevelsCompleteButtons from '@src/components/ThemedButtons/LevelsCompleteButtons';
 
-import MissionDialogue from './MissionDialogue';
-import Overlay from './Overlay';
+import MultipageOverlay from './MultipageOverlay';
 
 function LevelsComplete({
 	goToSandbox,
@@ -10,35 +9,40 @@ function LevelsComplete({
 	goToSandbox: () => void;
 	closeOverlay: () => void;
 }) {
-	const managerDialogue = [
-		{
-			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.`,
-		},
+	const speakerArray = ['ScottBrew Manager', 'SpyLogic'];
+	const pages = [
+		<>
+			<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>
+		</>,
+		<>
+			<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>
+			<p>
+				You can always switch modes by clicking on the button in the left panel.
+			</p>
+			<LevelsCompleteButtons
+				closeOverlay={closeOverlay}
+				goToSandbox={goToSandbox}
+			/>
+		</>,
 	];
 
 	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'}
+			imgSource={speakerArray}
+			pages={pages}
+		/>
 	);
 }
 

frontend/src/components/Overlay/MissionInformation.css

@@ -1,9 +1,3 @@
-.mission-information {
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-}
-
 .button-area {
 	display: flex;
 	justify-content: center;

frontend/src/components/Overlay/MissionInformation.tsx

@@ -2,8 +2,7 @@ import { LEVELS } from '@src/Levels';
 import OverlayButton from '@src/components/ThemedButtons/OverlayButton';
 import { LEVEL_NAMES } from '@src/models/level';
 
-import MissionDialogue from './MissionDialogue';
-import Overlay from './Overlay';
+import MultipageOverlay from './MultipageOverlay';
 
 import './MissionInformation.css';
 
@@ -14,21 +13,32 @@ function MissionInformation({
 	currentLevel: LEVEL_NAMES;
 	closeOverlay: () => void;
 }) {
-	const heading = `${LEVELS[currentLevel].name} Mission Information`;
+	const heading = `${LEVELS[currentLevel].name} Mission Info`;
 
-	return (
-		<Overlay closeOverlay={closeOverlay} heading={heading}>
-			<div className="mission-information">
-				<div className="content">
-					<MissionDialogue
-						dialogueLines={LEVELS[currentLevel].missionInfoDialogue}
-					/>
-					<div className="button-area">
+	const speakerArray: string[] = [];
+
+	const pages = LEVELS[currentLevel].missionInfoDialogue.map(
+		({ speaker, text }, index, source) => {
+			speakerArray.push(speaker);
+			return (
+				<>
+					<h2>{speaker}:</h2>
+					<p>{text}</p>
+					{index === source.length - 1 && (
 						<OverlayButton onClick={closeOverlay}>OK</OverlayButton>
-					</div>
-				</div>
-			</div>
-		</Overlay>
+					)}
+				</>
+			);
+		}
+	);
+
+	return (
+		<MultipageOverlay
+			closeOverlay={closeOverlay}
+			heading={heading}
+			imgSource={speakerArray}
+			pages={pages}
+		/>
 	);
 }
 

frontend/src/components/Overlay/MultipageOverlay.css

@@ -0,0 +1,98 @@
+.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 < 93.75rem) {
+	.overlay {
+		width: 55vw;
+	}
+
+	.multi-page-text-image-container {
+		grid-template-columns: 15% 85%;
+	}
+
+	.multi-page-content {
+		padding: 1rem;
+	}
+
+	.multi-page-speaker-text {
+		padding: 0 3rem;
+	}
+}
+
+@media (width < 87.5rem) {
+	.overlay {
+		width: 60vw;
+	}
+
+	.overlay p {
+		margin: 0;
+	}
+
+	.multi-page-content {
+		padding: 0.5rem;
+	}
+
+	.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;
+	}
+}