Added formatting for power bank.

mchlcrtz · Jun 13, 2018 · f05aa45 · f05aa45
1 parent 9d2213e
commit f05aa45
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/client/dist/bundle.js b/client/dist/bundle.js
diff --git a/client/dist/style.css b/client/dist/style.css
@@ -201,6 +201,9 @@ input {
   margin: 2px;
 }
 
+#power-bank {
+  width: 125px;
+}
 #power-bank .power0{
   background-color: green;
 }
@@ -211,4 +214,24 @@ input {
 
 #power-bank .power2 {
   background-color: blue;
+}
+
+#power-bank #legend .power0{
+  background-color: green;  
+
+}
+#power-bank #legend .power1 {
+  background-color: red;
+
+}
+#power-bank #legend .power2 {
+  background-color: blue;
+
+}
+
+#power-bank #legend div{
+  width: 120px;
+  padding: 1px;
+  color: white;
+  font-size: 9px;
 }
diff --git a/client/src/components/Game.jsx b/client/src/components/Game.jsx
@@ -39,6 +39,7 @@ class Game extends React.Component {
     this.shuffleArray = this.shuffleArray.bind(this);
     this.switchWords = this.switchWords.bind(this);
 
+    this.removeAllWords = this.removeAllWords.bind(this);
     this.stopAll = this.stopAll.bind(this);
     this.usePower = this.usePower.bind(this);
     this.addPower = this.addPower.bind(this);
@@ -345,7 +346,11 @@ class Game extends React.Component {
       words: list
     });
   }
-
+  removeAllWords(num){
+    this.setState({
+      words: []
+    });
+  }
   usePower(e){
     var temp;
     var banked;
@@ -355,11 +360,11 @@ class Game extends React.Component {
 
       if(this.state.bankedPowers[0] != undefined){
         if(this.state.bankedPowers[0] === 'power0'){
-          this.removeWords(3);
+          this.removeAllWords();
         } else if(this.state.bankedPowers[0] === 'power1'){
-          this.switchWords();
-        } else if(this.state.bankedPowers[0] === 'power2'){
           this.pauseGame();
+        } else if(this.state.bankedPowers[0] === 'power2'){
+          this.removeWords();
         }
         banked = this.state.bankedPowers.slice();
         banked.shift(); 
@@ -394,7 +399,7 @@ class Game extends React.Component {
     });
   }
   //END OF POWERUPS
-  
+
   render() {
     return (
       <div className="game">
@@ -439,7 +444,13 @@ class Game extends React.Component {
             {this.state.bankedPowers.map((powerup, index)=>{
               return <PowerBank key={index} powerup={powerup} />
             })}
+            <div id='legend'>
+              <div className='power1'>Pause (5s)</div>
+              <div className='power2'>Remove 1/2</div>
+              <div className='power0'>Remove All</div>
+            </div>
           </div>
+
 
           {/* their game: */}
           <div className="play" id="their-game">