animations

package.json

@@ -12,6 +12,7 @@
     "express": "^4.16.4",
     "express-session": "^1.15.6",
     "massive": "^5.7.2",
+    "node-sass": "^4.11.0",
     "promise-middleware": "^1.0.7",
     "react": "^16.7.0",
     "react-chartjs-2": "^2.7.4",
@@ -23,6 +24,7 @@
     "react-sound": "^1.2.0",
     "redux": "^4.0.1",
     "redux-promise-middleware": "^5.1.1",
+    "sass": "^1.16.1",
     "scss": "^0.2.4",
     "typeface-roboto": "0.0.54"
   },

public/index.html

@@ -24,6 +24,7 @@
     -->
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
 
     <title>React App</title>
   </head>

src/App.css

@@ -4,5 +4,6 @@
   color: black;
   min-width: 100vw;
   min-height: 100vh;
+  font-family: 'Permanent Marker', cursive;
 }
 

src/components/Dashboard.css

@@ -14,4 +14,5 @@
     flex-direction: column;
     height: 75vh;
     margin-bottom: 40vh;
+    font-family: 'Permanent Marker', cursive;
 }

src/components/Home.css

@@ -17,4 +17,6 @@
 
 .title{
     font-size: 20vh;
+    font-family: 'Permanent Marker', cursive;
+
 }

src/rooms/Dungeon.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Link, Redirect} from 'react-router-dom';
 import {connect} from 'react-redux';
 import axios from 'axios';
-import {getHero, getDungeon, login} from '../ducks/reducer';
+import {getHero, getDungeon, login, changeUser} from '../ducks/reducer';
 
 import './Dungeon.css';
 
@@ -31,7 +31,8 @@ class Dungeon extends Component{
             monsterType: '',
             attack: 1,
             killCount: 0,
-            endToggle: false
+            endToggle: false,
+            enemyImage: 'img_enemy'
         };
     }
 
@@ -45,8 +46,8 @@ class Dungeon extends Component{
     rndRoom=()=>
     axios
         .get('/api/rndRoom')
-        .then(response=>{console.log(response); this.monster(); this.multiplier()
-        this.setState({room_id: response.data.room_id, setting: response.data.setting, praiseToggle: false, meanToggle: false, hideTrueFalse: false, hideText: true, isHidden: true, question: '', hideDirections: true, attack: 1}, ()=>{this.multiplier()})
+        .then(response=>{console.log(response); this.multiplier()
+        this.setState({room_id: response.data.room_id, setting: response.data.setting, praiseToggle: false, meanToggle: false, hideTrueFalse: false, hideText: true, isHidden: true, question: '', hideDirections: true, attack: 1, enemyImage: this.state.enemyImage === 'img_enemy' ? 'img_enemy2': 'img_enemy'}, ()=>{this.multiplier(); this.monster()})
     })
 
     event=()=>
@@ -93,6 +94,12 @@ class Dungeon extends Component{
 
     gameOver=()=>{this.props.getDungeon(this.state); this.setState({endToggle: this.state.points <= 0 ? true : null})}
 
+    logout=()=>{
+        this.props.changeUser()
+        axios
+        .get('/auth/user')
+    }
+
     render(){
         console.log(this.props)
         console.log(this.state.monsterHealth)
@@ -129,18 +136,18 @@ class Dungeon extends Component{
                     <div className='hero'>
                     <p>{this.props.hero.class}</p>
                     <p>{this.state.points}</p>
-                        <img src={this.props.hero.sprite} ref='herosprite' className='img'></img>
+                        <img src={this.props.hero.sprite} ref='herosprite' className='img_hero'></img>
                     </div>
 
                     <div className='enemy'>
                     <p>{this.state.monsterType}</p>
                     <p>{this.state.monsterHealth}</p>
-                        <img src={this.state.sprite} ref='enemysprite' className='img_enemy'></img>
+                        <img src={this.state.sprite} ref='enemysprite' className={this.state.enemyImage}></img>
                     </div>
 
                     </div>
                     <p>Kill count: {this.state.killCount}</p>
-                <Link to='/'><Button variant="contained">Exit</Button></Link>
+                <Link to='/'><Button variant="contained" onClick={()=>this.logout()}>Exit</Button></Link>
                 {this.state.endToggle ? <Redirect to='/end'/> : null}
                 </div>
             </div>
@@ -157,4 +164,4 @@ const mapStateToProps = (state) => {
     }
 }
 
-export default connect(mapStateToProps, {getHero, login, getDungeon})(Dungeon);
+export default connect(mapStateToProps, {getHero, login, getDungeon, changeUser})(Dungeon);

src/rooms/Dungeon.scss

@@ -0,0 +1,108 @@
+$primary-color: #d3d3d3;
+$img-height: 130px;
+$img-width: 130px;
+
+.background {
+    background-image: url("https://s3.us-east-2.amazonaws.com/personalproject89/dungeon+background.jpg");
+    background-color: black;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    min-height: 100vh;
+    color: $primary-color;
+}
+
+.stuff {
+    display: flex;
+    flex-direction: column;
+    height: 40vh;
+    margin-bottom: 25vh;
+    justify-content: center;
+    color: $primary-color;
+    font-weight: bolder;
+    /* border: 1px solid white; */
+}
+
+.question{
+    font-size: 3vh;
+    font-weight: bolder;
+    font-family: 'Permanent Marker', cursive;
+}
+
+@mixin transform($property){
+    -webkit-transform: $property;
+    -ms-transform: $property; 
+    transform: translateX($property);
+}
+
+@keyframes onClick{
+    0%{
+        @include transform(40vw)
+    }
+    100%{
+        @include transform(0vw)
+    }
+}
+
+@keyframes onClick2{
+    0%{
+        @include transform(40vw)
+    }
+    100%{
+        @include transform(0vw)
+    }
+}
+
+@keyframes heroClick{
+    0%{
+        @include transform(-40vw)
+    }
+    100%{
+        @include transform(5vw)
+    }
+}
+
+
+.enemy{
+    height: 200px;
+    width: 150px; 
+    /* border: 1px solid white; */
+    // transition: onClick 1s linear;
+
+}
+
+.img_hero{
+    height: $img-height;
+    width: $img-width;
+    /* border: 1px solid white; */
+    animation: heroClick 1s ease-in;
+}
+
+.img_enemy {
+    height: $img-height;
+    width: $img-width;
+    image-rendering: pixelated;
+    animation: onClick 1s ease-in;
+}
+
+.img_enemy2 {
+    height: $img-height;
+    width: $img-width;
+    image-rendering: pixelated;
+    animation: onClick2 1s ease-in;
+}
+
+.battle{
+    display: flex;
+    flex-direction: row;
+    // border: 1px solid black;
+    width: 100vw;
+    height: 40vh;
+    justify-content: space-evenly;
+    /* background-color: black;
+    background-image: linear-gradient(purple, black);
+    background-size: contain; */
+}
+
+
+