Merge pull request #38 from microsoft/anpethel/otherScreens

fixing game screen layout

Client/src/components/Form/Button/button-bar.scss

@@ -1,5 +1,9 @@
 .button-bar {
   margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center; /* or space-around, space-between, etc. */
+  gap: 10px;
 
   & > .button {
     margin-right: 12px;

Client/src/components/Form/Button/button.types.ts

@@ -3,4 +3,5 @@ export type ButtonProps = {
   title: string;
   label: string;
   classNames?: string;
+  disabled?: boolean;
 };

Client/src/components/Layout/Layout.scss

@@ -30,11 +30,28 @@
   height: 100%;
 }
 
+.game-screen-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: 50px 0;
+}
+
+.game-screen-margin-top {
+  margin-top: 100px;
+}
+
+.game-screen-content-margin {
+  margin: 50px 0;
+}
+
 .footer-container {
   flex-shrink: 0;
 }
 
-.groundhog-start {
+.careercraft-logo-start {
   max-width: 150px;
   height: auto;
   margin-bottom: 100px;

Client/src/components/Typography/Typography.scss

@@ -2,3 +2,8 @@
   font-size: 2em;
   margin-bottom: 20px;
 }
+
+.h2 {
+  font-size: 1.5em;
+  margin-bottom: 20px;
+}

Client/src/components/Typography/Typography.tsx

@@ -8,3 +8,9 @@ export function H1(
 ): React.ReactElement {
   return <h1 className="h1">{props.children}</h1>;
 }
+
+export function H2(
+  props: PropsWithChildren<TypographyProps>
+): React.ReactElement {
+  return <h2 className="h2">{props.children}</h2>;
+}

Client/src/screens/GameScreen/GameScreen.tsx

@@ -5,12 +5,21 @@ import { ButtonBar } from "../../components/Form/Button/ButtonBar";
 import { DefaultButton } from "../../components/Form/Button/DefaultButton";
 import { Spinner } from "../../components/Spinner";
 import { H1 } from "../../components/Typography";
+import { H2 } from "../../components/Typography";
 import { useCareerGame } from "../../hooks/useCareerGame";
 import { IAppContext } from "../../models/IAppContext";
 import { AppContext } from "../../context/AppContext";
 import { usePageTracking } from "../../hooks/usePageTracking";
 import { GameProgress } from "../../components/GameProgress";
 
+const cleanOption = (option: string): string => {
+  let cleaned = option.trim();
+  cleaned = cleaned.replace(/[-•●○•—]/g, '');
+  // eslint-disable-next-line
+  cleaned = cleaned.replace(/^\d+\.?\s?|^\w+\:?\s?/i, '');
+  return cleaned.trim();
+};
+
 export function GameScreen(): React.ReactElement {
   usePageTracking("GameScreen");
 
@@ -32,6 +41,23 @@ export function GameScreen(): React.ReactElement {
     }
   }, [gameId, navigate, isLoading]);
 
+  const handleOptionSelected = async (option: string) => {
+    const optionIndex = round.options.indexOf(option);
+    const cleanedOption = cleanOption(option);
+
+    if (optionIndex !== -1) {
+      await completeRound(selectedRound, optionIndex);
+      await continueGame(gameId!, cleanedOption);
+      if (selectedRound < numberOfRounds - 1) {
+        selectRound(selectedRound + 1);
+      } else {
+        navigate("/career-game/results");
+      }
+    } else {
+      console.error("Option not found in round options");
+    }
+  };
+
   const handlePreviousRoundButtonClicked = () => {
     selectRound(selectedRound - 1);
   };
@@ -40,64 +66,68 @@ export function GameScreen(): React.ReactElement {
     selectRound(selectedRound + 1);
   };
 
-  const handleCompleteAndGoToNextRoundButtonClicked = async () => {
-    selectRound(selectedRound + 1);
-    completeRound(selectedRound, 0);
-    await continueGame(gameId!, round.options[0]);
-  };
-
   const handleCompleteGameButtonClicked = async () => {
+    const firstOption = round.options[0];
+    const cleanedOption = cleanOption(firstOption);
+    await completeRound(selectedRound, 0);
+    await continueGame(gameId!, cleanedOption);
     navigate("/career-game/results");
-    await continueGame(gameId!, round.options[0]);
   };
 
   const isRoundCompleted = round?.optionSelected !== null;
   const isLastRound = selectedRound === numberOfRounds - 1;
 
   return (
-    <div>
-      <H1>Game Screen</H1>
-      <p>This is the game screen</p>
+    <div className="game-screen-margin-top">
+      <H1>Round {selectedRound + 1}</H1>
 
       <GameProgress />
 
-      <pre style={{ whiteSpace: "pre-wrap" }}>
-        <code>{JSON.stringify(round, null, 4)}</code>
-      </pre>
-
-      <ButtonBar>
-        {selectedRound !== 0 && (
-          <DefaultButton
-            onClick={handlePreviousRoundButtonClicked}
-            title="Go to previous round"
-            label="Previous round"
-          />
-        )}
-
-        {isLastRound && (
-          <PrimaryButton
-            onClick={handleCompleteGameButtonClicked}
-            title="Complete game"
-            label="Complete game"
-          />
-        )}
-
-        {!isRoundCompleted && !isLastRound && (
-          <PrimaryButton
-            onClick={handleCompleteAndGoToNextRoundButtonClicked}
-            title="Go to next round"
-            label="Select random option and move on for testing"
-          />
-        )}
-
-        {isRoundCompleted && (
-          <DefaultButton
-            onClick={handleNextRoundButtonClicked}
-            title="Go to next round"
-            label="Next round"
-          />
-        )}
-      </ButtonBar>
+      <div  className="game-screen-center">
+        <div>
+          <H2>Scenario</H2>
+          <p>{round.scenario}</p>
+        </div>
+
+        <div className="game-screen-content-margin">
+          <H2>Options</H2>
+          <ButtonBar>
+            {selectedRound !== 0 && (
+              <DefaultButton
+                onClick={handlePreviousRoundButtonClicked}
+                title="Go to previous round"
+                label="Previous round"
+              />
+            )}
+
+            {isLastRound && (
+              <PrimaryButton
+                onClick={handleCompleteGameButtonClicked}
+                title="Complete game"
+                label="Complete game"
+              />
+            )}
+
+            {!isLastRound && round.options.map((option, index) => (
+              <PrimaryButton
+                key={index}
+                onClick={() => handleOptionSelected(option)}
+                title={`Select ${option}`}
+                label={option}
+                disabled={isRoundCompleted}
+              />
+            ))}
+
+            {isRoundCompleted && (
+              <DefaultButton
+                onClick={handleNextRoundButtonClicked}
+                title="Go to next round"
+                label="Next round"
+              />
+            )}
+          </ButtonBar>
+        </div>
+      </div>
 
       <Spinner show={isLoading} />
     </div>

Client/src/screens/StartScreen/StartScreen.tsx

@@ -49,9 +49,9 @@ export function StartScreen(): React.ReactElement {
   return (
     <div className="start-screen-center">
       <img
-        src="groundhog.png"
-        alt="Groundhog character"
-        className="groundhog-start"
+        src="CC_Logo.png"
+        alt="Career Craft Logo"
+        className="careercraft-logo-start"
       />
       <H1>Welcome to CareerCraft!</H1>