Merge branch 'master' into rmcreyes/#78-format-scores

ubclaunchpad · Nov 23, 2019 · 0b25eb4 · 0b25eb4
2 parents 1f14e67 + a629f69
commit 0b25eb4
Show file tree

Hide file tree

Showing 27 changed files with 451 additions and 46 deletions.
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,142 @@
+body {
+  font-family: "VT323", monospace;
+  background: #fff;
+}
+
+#root {
+  height: 100%;
+}
+
+#app {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+
+#game-container {
+  height: 667px;
+  width: 350px;
+  background: white;
+  padding: 30px;
+}
+
+#player-stat-box {
+  margin-top: 35px;
+  height: 85px;
+}
+
+#gameplay-container {
+  height: fit-content;
+  margin: 31px;
+}
+
+#gameplay-content-box {
+  height: 225px;
+  width: 190px;
+  display: inline-block;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.33);
+}
+
+#user-interaction-box {
+  margin-top: 26px;
+}
+
+#progress-bar {
+  width: 50px;
+  height: 15px;
+  border-image-outset: 1;
+  margin: 0;
+  border-image-width: 1.5;
+}
+
+#landing-box {
+  width: 190px;
+  height: 200px;
+  text-align: center;
+  border: solid 2px;
+  padding: 3px;
+  display: inline-block;
+}
+
+#enter-name {
+  text-decoration: underline;
+}
+
+.hide {
+  display: none;
+}
+
+.nes-container {
+  border-width: 2px;
+}
+
+.nes-container.is-rounded {
+  border-image-width: 2;
+}
+
+.nes-btn {
+  margin: 10px;
+  padding: 3px 4px;
+}
+
+.row {
+  display: block;
+}
+
+.column {
+  width: 50%;
+}
+
+.width-50 {
+  width: 50%;
+}
+
+.fit-content-width {
+  width: fit-content;
+  float: left;
+}
+
+.this-align-left {
+  text-align: left;
+}
+
+.this-align-center {
+  text-align: center;
+}
+
+.this-align-right {
+  text-align: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.this-display-block {
+  display: block;
+}
+
+.margin-right-10 {
+  margin-right: 10px;
+}
+
+.stat {
+  display: block;
+  height: 20px;
+}
+
+.choice-btn-half {
+  width: 35%;
+}
+
+.choice-btn-70 {
+  width: 70%;
+}
diff --git a/public/index.html b/public/index.html
@@ -2,11 +2,19 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>UBC Simulator 2</title>
-  </head>
 
+    <!-- Import CSS -->
+    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="index.css" />
+
+    <!-- Import Font -->
+    <link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
+  </head>
   <body>
     <div id="root"></div>
   </body>
-</html>
+  <script src="../src/index.ts"></script>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 
 import {IEvent, IChoice} from "./events/core";
+import LandingEvent from "./events/LandingEvent";
 import PickFacultyEvent from "./events/PickFacultyEvent";
 import BoomerGregorEvent from "./events/BoomerGregorEvent";
 
 import PlayerStats from "./trackers/PlayerStats";
 import EventTracker from "./trackers/EventTracker";
 
 import Hud from "./components/Hud";
+import GamePlayConsole from "./components/GamePlayConsole";
 import Choices from "./components/Choices";
 
-import placeholderImg from "./assets/place-holder-image.png";
-
-// // tslint:disable-next-line:no-empty-interface
+// tslint:disable-next-line:no-empty-interface
 export interface IProps {}
 
 export interface IState {
@@ -23,22 +23,27 @@ export interface IState {
 }
 
 export default class App extends React.Component <IProps, IState> {
+    private name: string;
 
     constructor(props: IProps) {
         super(props);
 
         const playerStats = new PlayerStats();
         const eventTracker = new EventTracker(
             [new BoomerGregorEvent()],
-            [new PickFacultyEvent()]
+            [new LandingEvent(), new PickFacultyEvent()]
         );
         let firstEvent = eventTracker.getNextEvent();
 
+        //TODO: should we auto allocate a dummy player name or allow user to input their own?
+        this.name = "P1";
+
         this.state = {
             // TODO: The week number may not be how we choose to track time,
             // we should create some abstraction for this similar to how
             // `playerStats` is done
-            week: 1,
+            // also consider Progress bar
+            week: 0,
             playerStats: playerStats,
             currentEvent: firstEvent,
             eventTracker: eventTracker
@@ -67,20 +72,32 @@ export default class App extends React.Component <IProps, IState> {
     render() {
         let currentEvent: IEvent = this.state.currentEvent;
         return (
-            <div className="App">
-                <Hud
-                    playerStats={this.state.playerStats}
-                    week={this.state.week}
-                />
-                <img
-                    src={currentEvent.imgPath() === "" ? placeholderImg : currentEvent.imgPath()}
-                    alt="Event illustration"
-                />
-                <h2 id="prompt">{currentEvent.prompt()}</h2>
-                <Choices
-                    choices={currentEvent.choices()}
-                    makeChoice={this.makeChoice}
-                />
+            <div id="app">
+                <div id="game-container">
+                    <Hud
+                      playerStats={this.state.playerStats}
+                      week={this.state.week}
+                      name={this.name}
+                    />
+                    <GamePlayConsole 
+                      mode={currentEvent.gamePlayMode()}
+                      imgPath={currentEvent.imgPath()}
+                    />
+                    <section 
+                      id="user-interaction-box" 
+                      className={currentEvent.hasBottomBoxBorder() ? "nes-container is-rounded" : ""}
+                    >
+                        <div id="bottom-menu" className="bottom-container">
+                            <p id="prompt" className="this-align-center">
+                                {currentEvent.prompt()}
+                            </p>
+                            <Choices
+                                choices={currentEvent.choices()}
+                                makeChoice={this.makeChoice}
+                            />
+                        </div>
+                    </section>
+                </div>
             </div>
         );
     }

diff --git a/src/assets/APSC.png b/src/assets/APSC.png
diff --git a/src/assets/ARTS.png b/src/assets/ARTS.png
diff --git a/src/assets/Blank.png b/src/assets/Blank.png
diff --git a/src/assets/COMM.png b/src/assets/COMM.png
diff --git a/src/assets/FORE.png b/src/assets/FORE.png
diff --git a/src/assets/KIN.png b/src/assets/KIN.png
diff --git a/src/assets/LFS.png b/src/assets/LFS.png
diff --git a/src/assets/SCIE.png b/src/assets/SCIE.png
diff --git a/src/assets/oc.png b/src/assets/oc.png
diff --git a/src/assets/pv.png b/src/assets/pv.png
diff --git a/src/assets/tp.png b/src/assets/tp.png
diff --git a/src/components/ChoiceButton.tsx b/src/components/ChoiceButton.tsx
@@ -10,7 +10,7 @@ interface IProps {
 export default function ChoiceButton(props: IProps) {
     return (
         <button
-            className="ChoiceButton"
+            className="choice-btn-70 is-primary nes-btn"
             onClick={() => props.makeChoice(props.choice)}
         >
             {props.choice.answer()}

diff --git a/src/components/GamePlayConsole.tsx b/src/components/GamePlayConsole.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import placeholderImg from "../assets/place-holder-image.png";
+import { GamePlayMode } from "../events/core";
+
+interface IProps {
+    mode: GamePlayMode;
+    imgPath: string;
+}
+
+const generateAcceptanceLetter = () => {
+    return (
+        <div
+            id="gameplay-content-box"
+            className="nes-container is-centered"
+        >
+            <p>Dear, <span id="enter-name" className="nes-pointer">Enter Name</span>
+            </p>
+            <p>Congratulations! <br />Please accept this offer of admission to UBC.</p>
+        </div>
+    );
+};
+
+const generateComic = (img: string) => {
+    return (
+        <img
+            src={img === "" ? placeholderImg : img}
+            alt="Gameplay comic"
+        />
+    );
+};
+
+export default function GamePlayConsole(props: IProps) {
+    return (
+        <section id="gameplay-container" className={props.mode === GamePlayMode.Hide ? "hide" : ""}>
+            {props.mode === GamePlayMode.AcceptanceLetter ? generateAcceptanceLetter() : generateComic(props.imgPath)}
+        </section >
+    );
+}
diff --git a/src/components/Hud.tsx b/src/components/Hud.tsx
@@ -1,19 +1,44 @@
 import React from "react";
 
 import Scores from "./Scores";
+import NameIndicator from "./NameIndicator";
 import TimeIndicator from "./TimeIndicator";
 import PlayerStats from "./../trackers/PlayerStats";
 
 interface IProps {
     playerStats: PlayerStats;
     week: number;
+    name: string;
 }
 
 export default function Hud(props: IProps) {
+
     return (
-        <header>
-            <Scores playerStats={props.playerStats}/>
-            <TimeIndicator week={props.week}/>
+        <header id="player-stat-box" className="row">
+            <div className="row">
+                <NameIndicator name={props.name} />
+                <TimeIndicator week={props.week} />
+            </div>
+            <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"}}/>
+                    </span>
+                    <span className="fit-content-width">
+                        <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" 
+                    />
+                </span>
+            </div>
         </header>
     );
 }
diff --git a/src/components/NameIndicator.tsx b/src/components/NameIndicator.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface IProps {
+    name: string;
+}
+
+export default function NameIndicator(props: IProps) {
+    return <span id="name" className="this-align-left column float-left">Name: {props.name}</span>;
+}
diff --git a/src/components/ScoreItem.tsx b/src/components/ScoreItem.tsx
@@ -6,5 +6,5 @@ interface IProps {
 }
 
 export default function ScoreItem(props: IProps) {
-    return <span>{props.scoreType}: {props.scoreValue}</span>;
+    return <span className="stat">{props.scoreType}: {props.scoreValue}</span>;
 }
diff --git a/src/components/TimeIndicator.tsx b/src/components/TimeIndicator.tsx
@@ -5,5 +5,5 @@ interface IProps {
 }
 
 export default function TimeIndicator(props: IProps) {
-    return <span>Week: {props.week}</span>;
+    return <span id="progress-bar-title" className="this-align-right column float-right">Week: {props.week}</span>;
 }