Merge pull request #33 from microsoft/won

Update game screen to handle navigation, continue api calls, etc

Client/.prettierrc

@@ -0,0 +1 @@
+tabWidth: 2

Client/package.json

@@ -43,6 +43,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+    "prettier": "^3.3.3",
     "sass": "^1.78.0"
   }
 }

Client/src/App.tsx

@@ -12,9 +12,9 @@ function App() {
     <Layout>
       <Routes>
         <Route path="/" element={<StartScreen />} />
-        <Route path="/career-game/:conversation-id" element={<GameScreen />} />
+        <Route path="/career-game" element={<GameScreen />} />
         <Route
-          path="/career-game/:conversation-id/results"
+          path="/career-game/results"
           element={<ResultScreen />}
         />
         <Route path="/admin" element={<AdminScreen />} />

Client/src/components/Form/Dropdown/Dropdown.tsx

@@ -16,16 +16,24 @@ export type DropdownProps = {
 
 export function Dropdown(props: DropdownProps): React.ReactElement {
   const handleDropdownChanged = (
-    event: React.ChangeEvent<HTMLSelectElement>
+    event: React.ChangeEvent<HTMLSelectElement>,
   ) => {
     props.onChange(props.name, event.target.value);
   };
 
   return (
     <div className="dropdown-container">
-      {props.label && <label className="dropdown-label">{props.label}</label>}
+      {props.label && (
+        <label className="dropdown-label" htmlFor={props.name}>
+          {props.label}
+        </label>
+      )}
 
-      <select className="dropdown-root" onChange={handleDropdownChanged}>
+      <select
+        className="dropdown-root"
+        onChange={handleDropdownChanged}
+        name={props.name}
+      >
         {props.options.map((option) => (
           <option
             key={option.value}

Client/src/components/GameProgress/GameProgress.tsx

@@ -8,10 +8,10 @@ export function GameProgress(): React.ReactElement {
     React.useContext<IAppContext>(AppContext);
 
   const completedRounds = rounds.filter(
-    (round) => round.optionSeleted !== null
+    (round) => round.optionSelected !== null
   ).length;
 
-  const progressPercentage = (completedRounds / numberOfRounds) * 100;
+  const progressPercentage = ((completedRounds + 1) / numberOfRounds) * 100;
 
   return (
     <div className="progress-bar-container">

Client/src/components/Layout/Layout.scss

@@ -1,13 +1,4 @@
-.header-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 50px;
-  width: 100%;
-}
-
 .content-container {
-  padding-top: 50px;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -40,4 +31,4 @@
   max-width: 150px;
   height: auto;
   margin-bottom: 100px;
-}
+}

Client/src/components/Layout/Layout.tsx

@@ -4,7 +4,6 @@ import { LeftNav } from "./LeftNav";
 import { SkipToMain } from "./SkipToMain";
 import { RightAside } from "./RightAside";
 import "./Layout.scss";
-import { Header } from "./Header";
 
 export type LayoutProps = {
   children: React.ReactNode;
@@ -16,9 +15,6 @@ export function Layout(props: LayoutProps): React.ReactElement {
   return (
     <>
       <SkipToMain />
-      <div className="header-container">
-        <Header />
-      </div>
       <div className="content-container">
         <LeftNav />
         <div className="main-container">

Client/src/components/Layout/LeftNav/LeftNav.scss

@@ -11,16 +11,19 @@
   }
 }
 
+.brand {
+  display: block;
+  margin-bottom: 30px;
+}
+
 .left-nav-items {
   display: flex;
   flex-direction: column;
-  align-items: left;
+  align-items: normal;
   padding: 20px;
 }
 
 .nav-logo {
   max-height: 30px;
   width: auto;
-  margin-right: 10px;
-  margin-bottom: 30px;
-}
+}

Client/src/components/Layout/LeftNav/LeftNav.tsx

@@ -5,12 +5,15 @@ import { Link } from "react-router-dom";
 export function LeftNav(): React.ReactElement {
   return (
     <aside className="nav-root">
-      <nav>
+      <Link to="/" title="Go to CareerCraft Home page" className="brand">
         <img
-          src="Flat_logo_linear.png"
-          alt="CareerCraft logo"
-          className="nav-logo"
+            src="Flat_logo_linear.png"
+            alt="CareerCraft logo"
+            className="nav-logo"
         />
+      </Link>
+
+      <nav>
         <ul>
           <li className="left-nav-items">
             <Link to="/" title="Go to CareerCraft About Us page">

Client/src/context/AppContext.tsx

@@ -6,36 +6,62 @@ import { GameRound } from "../models/GameRound";
 export const AppContext = React.createContext<IAppContext>({});
 
 export function AppContextProvider(
-  props: React.PropsWithChildren<{}>
+  props: React.PropsWithChildren<{}>,
 ): React.ReactElement {
   const [numberOfRounds, setNumberOfRounds] = React.useState<number>(5);
   const [gameRounds, setGameRounds] = React.useState<GameRound[]>([]);
   const [selectedRound, setSelectedRound] = React.useState<number>(0);
+  const [gameId, setGameId] = React.useState<string | null>(null);
 
   const updateNumberOfRounds = React.useCallback((numberOfRounds: number) => {
     setNumberOfRounds(numberOfRounds);
   }, []);
 
-  const addRound = React.useCallback(
-    (round: GameRound) => {
-      setGameRounds([...gameRounds, round]);
-    },
-    [gameRounds]
-  );
+  const addRound = React.useCallback((round: GameRound) => {
+    setGameRounds((prev) => [...prev, round]);
+  }, []);
 
   const selectRound = React.useCallback((selectedRound: number) => {
     setSelectedRound(selectedRound);
   }, []);
 
+  const completeRound = React.useCallback(
+    (roundIndex: number, selectedOptionIndex: number) => {
+      setGameRounds((prev) => {
+        const rounds: GameRound[] = [];
+        prev.forEach((p: GameRound, i: number) => {
+          rounds.push({
+            ...p,
+            optionSelected:
+              i === roundIndex ? selectedOptionIndex : p.optionSelected,
+          });
+        });
+
+        return rounds;
+      });
+    },
+    [],
+  );
+
+  const resetGame = React.useCallback(() => {
+    setGameRounds([]);
+    setGameId(null);
+    selectRound(0);
+  }, [selectRound]);
+
   return (
     <AppContext.Provider
       value={{
+        gameId,
+        setGameId,
         numberOfRounds,
         setNumberOfRounds: updateNumberOfRounds,
         rounds: gameRounds,
         addRound,
         selectedRound,
         selectRound,
+        completeRound,
+        resetGame,
       }}
     >
       {props.children}

Client/src/hooks/useCareerGame.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import { AppContext } from "../context/AppContext";
+import { GameResponse } from "../models/GameResponse";
+import { IAppContext } from "../models/IAppContext";
+import { Http } from "../services/Http";
+
+export function useCareerGame() {
+  const { addRound, setGameId } = React.useContext<IAppContext>(AppContext);
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+
+  const startGame = async (career: string): Promise<void> => {
+    try {
+      setLoading(true);
+      const response = await Http.getInstance().post<GameResponse>(
+        "/api/career-game/start",
+        {
+          careerChoice: career,
+        },
+      );
+
+      if (response.ok && response.data) {
+        setGameId(response.data.conversationId)
+        addRound({
+          ...response.data.round,
+          optionSelected: null,
+        });
+      }
+    } catch (error: any) {
+      console.log(error)
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const continueGame = async (gameId: string, userResponse: string): Promise<void> => {
+    try {
+      setLoading(true);
+      const response = await Http.getInstance().post<GameResponse>(
+          "/api/career-game/continue",
+          {
+            conversationId: gameId,
+            response: userResponse,
+          },
+      );
+
+      if (response.ok && response.data) {
+        addRound({
+          ...response.data.round,
+          optionSelected: null,
+        });
+      }
+    } catch (error: any) {
+      console.log(error)
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const completeGame = async (response: string): Promise<void> => {};
+
+  return {
+    startGame,
+    continueGame,
+    completeGame,
+    isLoading,
+  }
+}

Client/src/index.scss

@@ -35,7 +35,8 @@ a,
 button,
 input,
 select,
-textarea {
+textarea,
+#main {
   &:focus {
     outline: 2px dashed $background-dark;
 

Client/src/models/GameResponse.ts

@@ -0,0 +1,6 @@
+import { GameRound } from "./GameRound";
+
+export type GameResponse = {
+  conversationId: string;
+  round: GameRound;
+};

Client/src/models/GameRound.ts

@@ -2,5 +2,5 @@ export type GameRound = {
   options: string[];
   scenario: string;
   outcome: string;
-  optionSeleted: number | null;
+  optionSelected: number | null;
 };

Client/src/models/IAppContext.ts

@@ -1,10 +1,23 @@
 import { GameRound } from "./GameRound";
 
 export interface IAppContext {
+  gameId: string | null;
+
+  setGameId(gameId: string | null): void;
+
   selectedRound: number | 0;
+
   selectRound(selectedRound: number): void;
+
   numberOfRounds: number;
+
   setNumberOfRounds(numberOfRounds: number): void;
+
   rounds: GameRound[];
-  addRound: (round: GameRound) => void;
+
+  addRound(round: GameRound): void;
+
+  completeRound(roundIndex: number, selectedOptionIndex: number): void;
+
+  resetGame(): void;
 }