Merge pull request IronMan-HR#1 from TeamGroot/powerups

Powerups

client/dist/style.css

@@ -180,3 +180,58 @@ input {
 .sbHeader{
   margin-left: 70px
 }
+
+.power0 {
+  color: green;
+}
+
+.power1 {
+  color: red;
+}
+
+.power2 {
+  color: blue;
+}
+
+.powerup {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 1px solid black;
+  margin: 2px;
+}
+
+#power-bank {
+  width: 125px;
+}
+#power-bank .power0{
+  background-color: green;
+}
+
+#power-bank .power1 {
+  background-color: red;
+}
+
+#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;
+}

client/src/components/Brick.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Brick = (props) => {
   return (
-    <div className="brick">
+    <div className={`brick ${props.powerup}`}>
       <p>{props.word}</p>
     </div>
   )

client/src/components/Game.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Brick from './Brick.jsx';
 import axios from 'axios';
+import PowerBank from './PowerBank.jsx';
+
+import { EEXIST } from 'constants';
 const io = require('socket.io-client'); 
 const socket = io();
 
@@ -17,7 +20,9 @@ class Game extends React.Component {
       round: 'all',
       instructions: ["Humpty Dumpty sat on a wall,", "Humpty Dumpty had a great fall.", "All the king's horses and all the king's men", "Couldn't put Humpty together again.", "HURRY - KEEP TYPING TO PREVENT HIS DEMISE!"],
       prompt: 'START GAME',
-      opponentTime: 0
+      opponentTime: 0,
+      powerups: {},
+      bankedPowers: []
     }
 
     this.getReady = this.getReady.bind(this);
@@ -29,6 +34,15 @@ class Game extends React.Component {
     this.sendScore = this.sendScore.bind(this);
     this.stopGame = this.stopGame.bind(this);
 
+    this.pauseGame = this.pauseGame.bind(this);
+    this.removeWords = this.removeWords.bind(this);
+    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);
     var c = io.connect(process.env.PORT, {query: this.state.time})
     console.log('c', c)
 
@@ -173,6 +187,7 @@ class Game extends React.Component {
   addWord() {
     var availableWords = this.state.dictionary[this.state.round];
     var newWord = availableWords[Math.floor(Math.random() * availableWords.length)];
+    this.addPower(newWord);
     this.setState({
       words: [...this.state.words, newWord]
     });
@@ -197,17 +212,39 @@ class Game extends React.Component {
     e.preventDefault();
     var submittedWord = this.state.userInput;
     var index = this.state.words.indexOf(submittedWord);
-
+    var powerups;
+    var deposit;
     // check if what they typed is in our "words" array
     // flash green for a correctly typed word and remove word from "words" array
     if (index !== -1) {
+
       document.getElementById('typing-input').style.backgroundColor = "green";
       var newWords = this.state.words.slice();
       newWords.splice(index, 1);
-      playCorrect(); 
-      this.setState({
-        words: newWords,
-      });
+      playCorrect();
+
+      if(this.state.powerups[submittedWord] != undefined){
+        powerups = Object.assign({}, this.state.powerups);
+        deposit = powerups[submittedWord];
+        delete powerups[submittedWord];
+
+        if(this.state.bankedPowers.length != 0){
+          deposit = [...this.state.bankedPowers, deposit]
+        } else {
+          deposit = [deposit];
+        }
+
+        this.setState({
+          words: newWords,
+          bankedPowers: deposit,
+          powerups: powerups
+        });
+
+      } else { 
+        this.setState({
+          words: newWords,
+        });
+      }
     } else {
       // else flash red for a mistyped word
       playWrong(); 
@@ -262,6 +299,106 @@ class Game extends React.Component {
       prompt: 'REPLAY',
     });
   }
+
+  //ADDED FOR POWERUPS
+  pauseGame(){
+    var previousInterval = this.state.timeInterval;
+    setInterval(()=>{
+      this.setState({
+        timeInterval: previousInterval
+      });
+    },5000);
+    this.setState({
+      timeInterval: 5000
+    });
+  }
+
+  shuffleArray(arr){
+    var current = arr.length;
+    var temp;
+    var rand;
+
+    while(current !== 0){
+      rand = Math.floor(Math.random() * current);
+      current--;
+      temp = arr[current];
+      arr[current] = arr[rand];
+      arr[rand] = temp;
+    }  
+    return arr;
+  }
+
+  removeWords(num){
+    var removeWords = this.state.words.slice();
+    var half = Math.floor(removeWords.length/2);
+    removeWords = this.shuffleArray(removeWords);
+    removeWords = removeWords.slice(0, half);
+    this.setState({
+      words: removeWords
+    });
+  }
+
+  switchWords(){
+    var list = this.state.words.slice();
+    list.pop();
+    list.push("aaa");
+    this.setState({
+      words: list
+    });
+  }
+  removeAllWords(num){
+    this.setState({
+      words: []
+    });
+  }
+  usePower(e){
+    var temp;
+    var banked;
+    if(e.keyCode === 32){
+      temp = e.target.value;
+      temp = temp.substring(0, temp.length-1);
+
+      if(this.state.bankedPowers[0] != undefined){
+        if(this.state.bankedPowers[0] === 'power0'){
+          this.removeAllWords();
+        } else if(this.state.bankedPowers[0] === 'power1'){
+          this.pauseGame();
+        } else if(this.state.bankedPowers[0] === 'power2'){
+          this.removeWords();
+        }
+        banked = this.state.bankedPowers.slice();
+        banked.shift(); 
+      }
+      this.setState({
+        userInput: temp,
+        bankedPowers: banked
+      })
+    }
+  }
+
+  addPower(word){
+    var chance = 4;
+    var rand = Math.floor(Math.random() * chance) + 1;
+    var current;
+    if(rand === 1){
+      if(Object.keys(this.state.powerups).length === 0){
+        current = {};
+      } else {
+        current = this.state.powerups;
+      }
+      current[word] = "power" + Math.floor(Math.random() * 3);
+      this.setState({
+        powerups: current
+      })
+    }
+  }
+
+  stopAll(){
+    this.setState({
+      timeInterval: 100000
+    });
+  }
+  //END OF POWERUPS
 
   render() {
     return (
@@ -284,20 +421,37 @@ class Game extends React.Component {
 
         <div className="timer">
           <h1>{this.state.time}</h1>
+          {/*<button id='button-stopall' onClick={this.stopAll}>STOPALL</button>
+          <button id='button-pause' onClick={this.pauseGame}>PAUSE</button>
+          <button id='button-removeWords' onClick={()=>this.removeWords(3)}>REMOVE</button>
+        <button id='button-switchWords' onClick={this.switchWords}>SWITCH</button>*/}
         </div>
 
         <div className="board">
           {/* your game: */}
           <div className="play"> 
             {this.state.words.map((word, index) => {
-              return <Brick word={word} key={index} />
+              return <Brick word={word} key={index} powerup={this.state.powerups[word] ? this.state.powerups[word] : ""}/>
             })}
             <div id="gudetama"></div>
             <form onSubmit={this.handleSubmit} autoComplete="off">
-              <input id="typing-input" value={this.state.userInput} onChange={this.handleChange} />
+              <input id="typing-input" type='text' value={this.state.userInput} onChange={this.handleChange} onKeyUp={this.usePower}/>
             </form>
           </div>
 
+          <div id="power-bank">
+            <h5>Powers:</h5>
+            {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"> 
             {this.state.theirWords.map((word, index) => {

client/src/components/PowerBank.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const PowerBank = (props) => {
+    return (
+        <div className={`powerup ${props.powerup}`}></div>
+    )
+}
+
+export default PowerBank;