Merge pull request #121 from ubclaunchpad/coloured-buttons

Coloured buttons
ubclaunchpad · Mar 28, 2020 · eee4415 · eee4415
2 parents 12d30db + 3121dde
commit eee4415
Show file tree

Hide file tree

Showing 15 changed files with 714 additions and 334 deletions.
diff --git a/public/colourway1.png b/public/colourway1.png
diff --git a/public/colourway2.png b/public/colourway2.png
diff --git a/public/colourway3.png b/public/colourway3.png
diff --git a/public/index.css b/public/index.css
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,23 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>UBC Simulator 2</title>
 
-    <!-- Import CSS -->
-    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="index.css" />
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>UBC Simulator 2</title>
 
-    <!-- Import Font -->
-    <link href="https://fonts.googleapis.com/css?family=VT323&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-  <script src="../src/index.ts"></script>
-</html>
+  <!-- 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>
+<script src="../src/index.ts"></script>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -117,6 +117,7 @@ export default class App extends React.Component<IProps, IState> {
                 "imgPath": "",
                 "choices": [],
                 "hasBottomBoxBorder": false,
+                "hasInnerFill": false,
                 "gamePlayMode": GamePlayMode.Minigame
             };
 
@@ -148,9 +149,27 @@ export default class App extends React.Component<IProps, IState> {
 
     render() {
         let currentEvent: IEvent = this.state.currentEvent;
+
+        // some screen resizing things...
+        const height = 667;
+        const width = 350;
+        let scale = (Math.min(
+            window.innerHeight / height,
+            window.innerWidth / width
+        ));
+        scale = Math.floor(scale) >= 1 ? Math.floor(scale) : 1;
+
+        let topMargin = (window.innerHeight - 667) / 2;
+        topMargin = topMargin > 0 ? topMargin : 0;
+
+        var style = {
+            marginTop: topMargin + "px",
+            transform: "scale(" + scale + ")",
+        };
+
         return (
-            <div id="app">
-                <div id="game-container">
+            <div id="app" >
+                <div id="game-container" style={style} className="nes-container is-ubc-alt-blue has-box-shadow">
                     <Hud
                         playerStats={this.state.playerStats}
                         week={this.state.week}
@@ -164,9 +183,9 @@ export default class App extends React.Component<IProps, IState> {
                     />
                     <section
                         id="user-interaction-box"
-                        className={currentEvent.hasBottomBoxBorder ? "nes-container is-rounded" : ""}
+                        className={currentEvent.hasBottomBoxBorder ? "nes-container" : ""}
                     >
-                        <div id="bottom-menu" className="bottom-container">
+                        <div id="bottom-menu" className="bottom-container" style={currentEvent.hasInnerFill ? {} : { border: "none", background: "none" }}>
                             <p id="prompt" className="this-align-center">
                                 {currentEvent.prompt}
                             </p>
@@ -178,7 +197,7 @@ export default class App extends React.Component<IProps, IState> {
                         </div>
                     </section>
                 </div>
-            </div>
+            </div >
         );
     }
 }