From c48e43b63835b03056ecabdd281ad0b2104cc41c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ryan=20Pethel=20=F0=9F=9B=B4?= <anpethel@microsoft.com>
Date: Thu, 19 Sep 2024 22:46:36 -0400
Subject: [PATCH] creating How to play screen

---
 Client/src/App.tsx                            |  2 ++
 .../src/components/Layout/Header/Header.tsx   |  5 ++++
 .../HowToPlayScreen/HowToPlayScreen.tsx       | 28 +++++++++++++++++++
 Client/src/screens/HowToPlayScreen/index.ts   |  1 +
 4 files changed, 36 insertions(+)
 create mode 100644 Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx
 create mode 100644 Client/src/screens/HowToPlayScreen/index.ts

diff --git a/Client/src/App.tsx b/Client/src/App.tsx
index 32f45cc..0c98320 100644
--- a/Client/src/App.tsx
+++ b/Client/src/App.tsx
@@ -9,6 +9,7 @@ import { AdminScreen } from "./screens/AdminScreen/AdminScreen";
 import { AboutScreen } from "./screens/AboutScreen/AboutScreen";
 import { PartnersScreen } from "./screens/PartnersScreen/PartnersScreen";
 import { ContactUsScreen } from "./screens/ContactUsScreen/ContactUsScreen";
+import { HowToPlayScreen } from "./screens/HowToPlayScreen";
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
       <Routes>
         <Route path="/" element={<StartScreen />} />
         <Route path="/career-game" element={<GameScreen />} />
+        <Route path="/howToPlay" element={<HowToPlayScreen />} />
         <Route
           path="/career-game/results"
           element={<ResultScreen />}
diff --git a/Client/src/components/Layout/Header/Header.tsx b/Client/src/components/Layout/Header/Header.tsx
index 0f0cd9a..f8b125f 100644
--- a/Client/src/components/Layout/Header/Header.tsx
+++ b/Client/src/components/Layout/Header/Header.tsx
@@ -45,6 +45,11 @@ export function Header(): React.ReactElement {
               Career game
             </Link>
           </li>
+          <li className="nav-list-item">
+            <Link to="/howToPlay" title="How to play">
+              How to play
+            </Link>
+          </li>
           <li className="nav-list-item">
             <Link to="/about" title="Go to CareerCraft About Us page">
               About Us
diff --git a/Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx b/Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx
new file mode 100644
index 0000000..ed95343
--- /dev/null
+++ b/Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { H1 } from "../../components/Typography";
+import { H2 } from "../../components/Typography";
+import { usePageTracking } from "../../hooks/usePageTracking";
+
+export function HowToPlayScreen(): React.ReactElement {
+    usePageTracking("HowToPlayScreen");
+
+    return (
+        <div>
+            <H1>How To Play</H1>
+            <div className="game-screen-margin-top">
+                <H2>Guidance</H2>
+                <p>
+                    This game helps you explore career options and 
+                    gain valuable skillsets along the way. To get 
+                    started, please enter your first name, a career
+                    that interests you how many rounds you want to 
+                    play. Each round will consist of a Scenario and 
+                    3 Options for you to choose from that will lead 
+                    to the next Scenario. After all the rounds finish, 
+                    we will recap the learnings.  Have fun and happy 
+                    learning! Look for a surprise at the end as well.
+                </p>
+            </div>
+        </div>
+    );
+}
diff --git a/Client/src/screens/HowToPlayScreen/index.ts b/Client/src/screens/HowToPlayScreen/index.ts
new file mode 100644
index 0000000..6f9108e
--- /dev/null
+++ b/Client/src/screens/HowToPlayScreen/index.ts
@@ -0,0 +1 @@
+export * from "./HowToPlayScreen";