Merge pull request #113 from ubclaunchpad/week-progress-bar

Week progress bar
ubclaunchpad · Mar 19, 2020 · fcf11d4 · fcf11d4
2 parents f327c1c + f07fd05
commit fcf11d4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -80,7 +80,7 @@ export default class App extends React.Component<IProps, IState> {
     makeChoice = (choice: IChoice) => {
         if (choice.minigame === "") {
             this.state.playerStats.applyStatChanges(choice.statChanges, choice.dlogo);
-        
+
             if (this.state.week >= 2 && this.state.playerStats.getGpa() < 1.0) {
                 // Losing condition
                 this.state.eventTracker.queueFollowUpEvent(
@@ -91,12 +91,12 @@ export default class App extends React.Component<IProps, IState> {
                 this.state.eventTracker.queueFollowUpEvent(
                     this.eventManager.get("WinEvent")
                 );
-            } else if (choice.followUp !== ""){
+            } else if (choice.followUp !== "") {
                 // The game isn't ending and there is a follow up event
                 this.state.eventTracker.queueFollowUpEvent(
                     this.eventManager.get(choice.followUp)
                 );
-            } 
+            }
 
             let nextEvent = this.state.eventTracker.getNextEvent(this.state.week + 1);
 
@@ -156,14 +156,14 @@ export default class App extends React.Component<IProps, IState> {
                         week={this.state.week}
                         name={this.name}
                     />
-                    <GamePlayConsole 
+                    <GamePlayConsole
                         mode={currentEvent.gamePlayMode}
                         imgPath={currentEvent.imgPath}
                         minigame={this.state.currentMinigame}
                         finishMinigame={this.finishMinigame}
                     />
-                    <section 
-                        id="user-interaction-box" 
+                    <section
+                        id="user-interaction-box"
                         className={currentEvent.hasBottomBoxBorder ? "nes-container is-rounded" : ""}
                     >
                         <div id="bottom-menu" className="bottom-container">
@@ -181,4 +181,4 @@ export default class App extends React.Component<IProps, IState> {
             </div>
         );
     }
-}
+}
diff --git a/src/components/choices/ChoiceButton.tsx b/src/components/choices/ChoiceButton.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import {IChoice} from "./../../events/core";
+import { IChoice } from "./../../events/core";
 
 interface IProps {
     choice: IChoice;

diff --git a/src/components/hud/Hud.tsx b/src/components/hud/Hud.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Scores from "./scores/Scores";
 import NameIndicator from "./NameIndicator";
 import TimeIndicator from "./TimeIndicator";
+import ProgressBar from "./ProgressBar";
 import PlayerStats from "./../../trackers/PlayerStats";
 
 interface IProps {
@@ -22,21 +23,16 @@ export default function Hud(props: IProps) {
             <div className="row">
                 <span className="column this-align-left">
                     <span id="faculty-badge" className="fit-content-width margin-right-10 float-left">
-                        <img className="nes-avatar is-large" src={props.playerStats.getLogo()} alt="Blank Faculty Logo" style={{imageRendering: "pixelated"}}/>
+                        <img className="nes-avatar is-large" src={props.playerStats.getLogo()} alt="Blank Faculty Logo" style={{ imageRendering: "pixelated" }} />
                     </span>
                     <span className="fit-content-width">
-                        <Scores playerStats={props.playerStats}/>
+                        <Scores playerStats={props.playerStats} />
                     </span>
                 </span>
                 <span className="column">
                     {/* TODO: need to discuss how process should be defined  */}
                     {/* and make the progress bar meaningful. */}
-                    <progress 
-                      id="progress-bar" 
-                      className="nes-progress is-success float-right" 
-                      value="5" 
-                      max="10" 
-                    />
+                    <ProgressBar week={props.week} />
                 </span>
             </div>
         </header>

diff --git a/src/components/hud/ProgressBar.tsx b/src/components/hud/ProgressBar.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface IProps {
+    week: number;
+}
+
+export default function ProgressBar(props: IProps) {
+    return <progress id="progress-bar" className="nes-progress is-success float-right" value={props.week} max="5" />;
+}