Merge branch 'master' into rmcreyes/#109-squirrel-jump-art

src/App.tsx

@@ -22,6 +22,7 @@ export interface IProps { }
 export interface IState {
     week: number;
     name: string;
+    gameOver: boolean;
     playerStats: PlayerStats;
     currentEvent: IEvent;
     eventTracker: EventTracker;
@@ -36,16 +37,17 @@ const emptyMinigame: IMinigame = {
 };
 
 export default class App extends React.Component<IProps, IState> {
+    static readonly maxWeeks: number = 5;
     private choiceManager: ChoicesManager;
     private eventManager: EventsManager;
     private minigameManager: MinigamesManager;
-    private acceptOfferEvent: string;
+    private acceptOfferLabel: string;
 
     constructor(props: IProps) {
         super(props);
         const playerStats = new PlayerStats();
         const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
-        this.acceptOfferEvent = "accept-offer";
+        this.acceptOfferLabel = "accept-offer";
 
         this.choiceManager = new ChoicesManager(choices);
         this.eventManager = new EventsManager(events);
@@ -66,6 +68,7 @@ export default class App extends React.Component<IProps, IState> {
         this.state = {
             week: 0,
             name: "P1",
+            gameOver: false,
             playerStats: playerStats,
             currentEvent: firstEvent,
             eventTracker: eventTracker,
@@ -75,30 +78,36 @@ export default class App extends React.Component<IProps, IState> {
 
     makeChoice = (choice: IChoice) => {
         if (choice.minigame === "") {
+            let gameOver = false;
             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(
-                    this.eventManager.get("LoseEvent")
-                );
-            } else if (this.state.week > 5) {
-                // Winning condition if not losing
-                this.state.eventTracker.queueFollowUpEvent(
-                    this.eventManager.get("WinEvent")
-                );
+            if (choice.followUp === "" && this.state.week > App.maxWeeks) {
+                if (this.state.playerStats.getGpa() >= 1.0) {
+                    // Winning condition
+                    this.state.eventTracker.queueFollowUpEvent(
+                        this.eventManager.get("WinEvent")
+                    );
+                } else {
+                    // Lose condition is everything else
+                    this.state.eventTracker.queueFollowUpEvent(
+                        this.eventManager.get("LoseEvent")
+                    );
+                }
+                gameOver = true;
             } 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);
+            let weekDelta = (choice.followUp !== "" ? 0 : 1);
+            let nextEvent = this.state.eventTracker.getNextEvent(weekDelta + this.state.week);
 
             this.setState(prevState => {
                 return {
-                    week: prevState.week + 1,
+                    week: prevState.week + weekDelta,
+                    gameOver: gameOver,
                     playerStats: prevState.playerStats,
                     currentEvent: nextEvent,
                     eventTracker: prevState.eventTracker,
@@ -120,6 +129,7 @@ export default class App extends React.Component<IProps, IState> {
             this.setState(prevState => {
                 return {
                     week: prevState.week,
+                    gameOver: false,
                     playerStats: prevState.playerStats,
                     currentEvent: minigameEvent,
                     eventTracker: prevState.eventTracker,
@@ -135,6 +145,7 @@ export default class App extends React.Component<IProps, IState> {
         this.setState(prevState => {
             return {
                 week: prevState.week + 1,
+                gameOver: false,
                 playerStats: prevState.playerStats,
                 currentEvent: nextEvent,
                 eventTracker: prevState.eventTracker,
@@ -168,6 +179,15 @@ export default class App extends React.Component<IProps, IState> {
             transform: "scale(" + scale + ")",
         };
 
+        const ggButt = this.state.gameOver && (
+            <button
+                className="this-align-center choice-btn-70 nes-btn"
+                onClick={() => window.location.reload(false)}
+            >
+                Play Again?
+            </button>
+        );
+
         return (
             <div id="app" >
                 <div id="game-container" style={style} className="nes-container is-ubc-alt-blue has-box-shadow">
@@ -182,7 +202,7 @@ export default class App extends React.Component<IProps, IState> {
                         minigame={this.state.currentMinigame}
                         finishMinigame={this.finishMinigame}
                         handleNameChange={this.handleNameChange}
-                        acceptOfferEvent={this.acceptOfferEvent}
+                        acceptOfferLabel={this.acceptOfferLabel}
                     />
                     <section
                         id="user-interaction-box"
@@ -192,16 +212,18 @@ export default class App extends React.Component<IProps, IState> {
                             <p id="prompt" className="this-align-center">
                                 {currentEvent.prompt}
                             </p>
+
+                            {ggButt}
                             <Choices
                                 choices={currentEvent.choices}
                                 mgr={this.choiceManager}
                                 makeChoice={this.makeChoice}
-                                acceptOfferEvent={this.acceptOfferEvent}
+                                acceptOfferLabel={this.acceptOfferLabel}
                             />
                         </div>
                     </section>
                 </div>
             </div>
         );
     }
-}
+}

src/choices.json

@@ -120,56 +120,59 @@
   },
   "Arts": {
     "answer": "Arts",
-    "followUp": "",
+    "followUp": "PickResidenceEvent",
     "statChanges": [50, 2.0, 100],
     "minigame": "",
     "dlogo": ["ARTS", "#522E91", "#FFFFFF"],
     "btnStyle": "arts"
   },
-  "Forestry": {
-    "answer": "Forestry",
-    "followUp": "",
-    "statChanges": [100, 2.0, 100],
+  "Forestry":
+  {
+    "answer":"Forestry",
+    "followUp":"PickResidenceEvent",
+    "statChanges":[100, 2.0, 100],
     "minigame": "",
     "dlogo": ["FORE", "#162A00", "#FFFFFF"],
     "btnStyle": "fore"
   },
-  "Commerce": {
-    "answer": "Commerce",
-    "followUp": "",
-    "statChanges": [100, 2.0, 100],
+  "Commerce":
+  {
+    "answer":"Commerce",
+    "followUp":"PickResidenceEvent",
+    "statChanges":[100, 2.0, 100],
     "minigame": "",
     "dlogo": ["COMM", "#8D8D8D", "#FFFFFF"],
     "btnStyle": "comm"
   },
-  "Kinesiology": {
-    "answer": "Kinesiology",
-    "followUp": "",
-    "statChanges": [100, 2.0, 100],
+  "Kinesiology":
+  {
+    "answer":"Kinesiology",
+    "followUp":"PickResidenceEvent",
+    "statChanges":[100, 2.0, 100],
     "minigame": "",
     "dlogo": ["KIN", "#228B22", "#FFFFFF"],
     "btnStyle": "kin"
   },
 
   "ApScience": {
     "answer": "Applied Science",
-    "followUp": "",
+    "followUp": "PickResidenceEvent",
     "statChanges": [0, 4.0, 100],
     "minigame": "",
     "dlogo": ["APSC", "#B20E22", "#FFFFFF"],
     "btnStyle": "apsc"
   },
   "Science": {
     "answer": "Science",
-    "followUp": "",
+    "followUp": "PickResidenceEvent",
     "statChanges": [50, 3.0, 100],
     "minigame": "",
     "dlogo": ["SCIE", "#3498DB", "#FFFFFF"],
     "btnStyle": "scie"
   },
   "LFS": {
     "answer": "Land and Food Systems",
-    "followUp": "",
+    "followUp": "PickResidenceEvent",
     "statChanges": [100, 2.0, 100],
     "minigame": "",
     "dlogo": ["LFS", "#000000", "#FFFFFF"],
@@ -266,4 +269,4 @@
     "minigame": "",
     "btnStyle": ""
   }
-}
+}

src/components/choices/ChoiceButton.tsx

@@ -4,19 +4,20 @@ import { IChoice } from "./../../events/core";
 
 interface IProps {
     choice: IChoice;
-    acceptOfferEvent: string;
+    acceptOfferLabel: string;
     makeChoice(choice: IChoice): void;
 }
 
 export default function ChoiceButton(props: IProps) {
 
     return (
         <button
+            id={props.choice.answer === "Accept Offer" ? props.acceptOfferLabel : ""}
             type="button"
             className={"choice-btn-70 nes-btn " + props.choice.btnStyle}
             // tslint:disable-next-line:jsx-no-multiline-js
             onClick={() => {
-                if (props.choice.answer === "Accept Offer") document.dispatchEvent(new Event(props.acceptOfferEvent));
+                if (props.choice.answer === "Accept Offer") document.dispatchEvent(new Event(props.acceptOfferLabel));
                 props.makeChoice(props.choice);
             }}
         >

src/components/choices/Choices.tsx

@@ -7,7 +7,7 @@ import ChoicesManager from "./../../events/ChoicesManager";
 interface IProps {
     choices: string[];
     mgr: ChoicesManager;
-    acceptOfferEvent: string;
+    acceptOfferLabel: string;
     makeChoice(choice: IChoice): void;
 }
 
@@ -19,7 +19,7 @@ export default function Choices(props: IProps) {
             key={c.answer}
             choice={c}
             makeChoice={props.makeChoice}
-            acceptOfferEvent={props.acceptOfferEvent}
+            acceptOfferLabel={props.acceptOfferLabel}
         />
     );
   });

src/components/gamePlayConsole/GamePlayConsole.tsx

@@ -9,7 +9,7 @@ interface IProps {
     mode: string;
     imgPath: string;
     minigame: IMinigame;
-    acceptOfferEvent: string;
+    acceptOfferLabel: string;
     finishMinigame(statChanges: number[]): void;
     handleNameChange(name: string): void;
 }
@@ -36,8 +36,27 @@ export default class GamePlayConsole extends React.Component<IProps, IState> {
         if(this.state.name !== "" ) this.props.handleNameChange(this.state.name);
     }
 
+    handleEnterKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log(this.state.name);
+            let newName = this.removeTags(this.state.name);
+            this.setState({ name: newName });
+            document.getElementById(this.props.acceptOfferLabel)!.focus();
+        }
+    }
+
+    removeTags(str: string) {
+        if ((str === null) || (str === ""))
+          return "";
+        else
+          str = str.toString();
+        return str.replace(/(<([^>]+)>)/ig, "");
+    }
+
     generateAcceptanceLetter = () => {
-        document.addEventListener(this.props.acceptOfferEvent, this.changeName);
+        document.addEventListener(this.props.acceptOfferLabel, this.changeName);
 
         return (
             <div
@@ -49,8 +68,9 @@ export default class GamePlayConsole extends React.Component<IProps, IState> {
                     tagName="span"
                     html={this.state.name}
                     disabled={!this.state.editable}
+                    onChange={this.handleChange}
                     // tslint:disable-next-line:jsx-alignment
-                    onChange={this.handleChange} />
+                    onKeyUp={this.handleEnterKeyPress} />
                 </p>
                 <p>Congratulations! <br />Please accept this offer of admission to UBC.</p><br />
                 <p>Survive the school year by balancing your social life, grades, and sleep!</p>

src/components/hud/ProgressBar.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import App from "../../App";
 
 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" />;
+    return <progress id="progress-bar" className="nes-progress is-success float-right" value={props.week} max={App.maxWeeks} />;
 }

src/events.json

@@ -82,7 +82,7 @@
 		],
 		"hasBottomBoxBorder": false,
 		"hasInnerFill": true,
-		"gamePlayMode": "Minigame"
+		"gamePlayMode": "Comics"
 	},
 	"CryMidtermPaperEvent": {
 		"prompt": "You failed your latest midterm...",
@@ -123,7 +123,7 @@
 		],
 		"hasBottomBoxBorder": true,
 		"hasInnerFill": true,
-		"gamePlayMode": "Minigame"
+		"gamePlayMode": "Comics"
 	},
 	"ImagineDayEvent": {
 		"prompt": "It's Imagine Day!",
@@ -206,18 +206,18 @@
 	},
 	"WinEvent": {
 		"prompt": "You win! You have survived!",
-		"imgPath": "",
+		"imgPath": "winning.png",
 		"choices": [],
 		"hasBottomBoxBorder": true,
 		"hasInnerFill": true,
 		"gamePlayMode": "GameOver"
 	},
 	"LoseEvent": {
 		"prompt": "Game over. You lose.",
-		"imgPath": "",
+		"imgPath": "losing.png",
 		"choices": [],
 		"hasBottomBoxBorder": true,
 		"hasInnerFill": true,
 		"gamePlayMode": "GameOver"
 	}
-}
+}

src/game-config.json

@@ -6,9 +6,7 @@
 			"MidtermEvent"
 		],
 		"followUp": [
-			"LandingEvent",
-			"PickFacultyEvent",
-			"PickResidenceEvent"
+			"LandingEvent", "PickFacultyEvent"
 		],
 		"seasonal": [
 			["ImagineDayEvent"],