From a829715c068dc2957709dcf87ce62793e36ca097 Mon Sep 17 00:00:00 2001
From: kevin101 <kevinanderson1218@gmail.com>
Date: Mon, 9 Apr 2018 18:51:18 -0400
Subject: [PATCH] animation

---
 client/public/index.html     |   2 +
 client/src/simulator/sim.css | 210 ++++++++++++++++++-----------------
 client/src/simulator/sim.js  |  11 +-
 3 files changed, 116 insertions(+), 107 deletions(-)

diff --git a/client/public/index.html b/client/public/index.html
index e895c78..01bba52 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    
+
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/client/src/simulator/sim.css b/client/src/simulator/sim.css
index abec3f7..b98a2bd 100644
--- a/client/src/simulator/sim.css
+++ b/client/src/simulator/sim.css
@@ -1,63 +1,59 @@
 #simulator {
     display: flex;
     justify-content: center;
-    
 }
 
-
 #champs {
-    margin-right:5px;
-    margin-left:5px;
+    margin-right: 5px;
+    margin-left: 5px;
     border-radius: 15px;
     width: 700px;
-    height:400px;
+    height: 400px;
     overflow: auto;
     order: 0;
     justify-content: center;
     -moz-box-shadow: 0 0 5px #cb8;
     -webkit-box-shadow: 0 0 5px #cb8;
     box-shadow: 0px 0px 5px #cb8;
-
-    background-image:url("http://apollo-na-uploads.s3.amazonaws.com/1427669031664/SRBackground.png")
+    background-image: url("http://apollo-na-uploads.s3.amazonaws.com/1427669031664/SRBackground.png")
 }
 
-.champs1{
+.champs1 {
     margin-top: 10px;
-    border-radius:15px;
+    border-radius: 15px;
     width: 700px;
-    height:200px;
+    height: 200px;
     overflow: scroll;
     order: 0;
-    justify-content:center;
+    justify-content: center;
     -moz-box-shadow: 0 0 5px #cb8;
     -webkit-box-shadow: 0 0 5px #cb8;
     box-shadow: 0px 0px 5px #cb8;
-    background-image:url("http://apollo-na-uploads.s3.amazonaws.com/1427669031664/SRBackground.png");
+    background-image: url("http://apollo-na-uploads.s3.amazonaws.com/1427669031664/SRBackground.png");
 }
 
-.notes{
-    justify-content:center;
+.notes {
+    justify-content: center;
 }
-.champs1 p{
+
+.champs1 p {
     width: 100%;
 }
 
-.champs1 h3{
+.champs1 h3 {
     color: white;
 }
 
-
-
-#champs2{
-    border-radius:15px;
+#champs2 {
+    border-radius: 15px;
     width: 700px;
-    height:139px;
+    height: 139px;
     position: relative;
     border-radius: 15px;
     width: 47px;
     height: 92px;
     overflow: scroll;
-    margin-bottom:30px;
+    margin-bottom: 30px;
     border-radius: 15px;
     overflow: scroll;
     order: 0;
@@ -90,13 +86,13 @@
     background-image: 100% 100%;
 }
 
-.pickname{
+.pickname {
     text-shadow: 2px 2px 2px rgb(32, 54, 63), 0 0 1em rgb(67, 61, 7), 0 0 0.2em rgb(63, 58, 5);
     text-align: center;
     font-family: 'Friz Quadrata Bold';
     letter-spacing: 1px;
     margin-top: -55px;
-    margin-left:29px;
+    margin-left: 29px;
 }
 
 .counterpick {
@@ -105,8 +101,7 @@
     font-family: 'Friz Quadrata Bold';
     letter-spacing: 1px;
     margin-top: -55px;
-    margin-left:29px;
-    
+    margin-left: 29px;
 }
 
 .itemname {
@@ -148,7 +143,7 @@
 }
 
 .items:hover {
-    box-shadow: 1px 2px 20px 15px rgba(5, 133, 120, 0.79), 0 0 100px 20px;
+    box-shadow: 2px 20px 15px rgba(5, 133, 120, 0.79), 0 0 100px 20px;
 }
 
 .popup {
@@ -269,7 +264,9 @@ p {
     height: 100px;
     float: left;
     margin-top: 30px;
-    margin-left:17px;
+    margin-left: 17px;
+    /* background-image:url("https://img.fireden.net/v/image/1515/22/1515228346527.gif"); */
+    border-radius:20px;
 }
 
 h2 {
@@ -331,7 +328,6 @@ p {
     transform: scale(1);
 }
 
-
 .more_counters {
     margin-top: -25px;
     text-align: center;
@@ -347,70 +343,79 @@ p {
 
 @font-face {
     font-family: "Friz Quadrata Bold";
-    src: 
-    url("../Font/Friz Quadrata Bold.otf") format("opentype")
-    }
-    
-    
-    .popup {
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
+    src: url("../Font/Friz Quadrata Bold.otf") format("opentype")
+}
 
-    
-    /* =====  The actual popup ====*/
-    .popup .popuptext {
-        visibility: hidden;
-        width: 160px;
-        background-color: #555;
-        color: #fff;
-        text-align: center;
-        border-radius: 6px;
-        padding: 8px 0;
-        position: absolute;
-        z-index: 1;
-        bottom: 125%;
-        left: 50%;
-        margin-left: -80px;
-    }
-    
-    /* Popup arrow */
-    .popup .popuptext::after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: #555 transparent transparent transparent;
+.popup {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* =====  The actual popup ====*/
+
+.popup .popuptext {
+    visibility: hidden;
+    width: 160px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -80px;
+}
+
+/* Popup arrow */
+
+.popup .popuptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+/* Toggle this class - hide and show the popup */
+
+.popup .show {
+    visibility: visible;
+    -webkit-animation: fadeIn 0.5s;
+    animation: fadeIn 0.5s;
+}
+
+/* Add animation (fade in the popup) */
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
     }
-    
-    /* Toggle this class - hide and show the popup */
-    .popup .show {
-        visibility: visible;
-        -webkit-animation: fadeIn 0.5s;
-        animation: fadeIn 0.5s;
+    to {
+        opacity: 1;
     }
-    
-    /* Add animation (fade in the popup) */
-    @-webkit-keyframes fadeIn {
-        from {opacity: 0;} 
-        to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
     }
-    
-    @keyframes fadeIn {
-        from {opacity: 0;}
-        to {opacity:1 ;}
+    to {
+        opacity: 1;
     }
-
+}
 
 .enemypick {
+    background-image:url("https://img.fireden.net/v/image/1515/22/1515228346527.gif");
     width: 240px;
     font-size: 20px;
     font-family: 'Friz Quadrata Bold', sans-serif;
@@ -422,43 +427,44 @@ p {
     margin-left: 24px;
     border-radius: 15px;
     margin-top: 20px;
-}    
-
+}
 
-.container { 
+.container {
     width: 200px;
     height: 260px;
     position: relative;
     perspective: 800px;
-  }
+}
 
-  #card {
+#card {
     width: 100%;
     height: 100%;
     position: absolute;
     transform-style: preserve-3d;
     transition: transform 1s;
-  }
+}
 
-  #card figure {
+#card figure {
     margin: 0;
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
-  }
+}
 
-  #card .front {
+#card .front {
     background: red;
-  }
-  #card .back {
+}
+
+#card .back {
     background: blue;
-    transform: rotateY( 180deg );
-  }
-  #card.flipped {
-    transform: rotateY( 180deg );
-  }
+    transform: rotateY( 180deg);
+}
+
+#card.flipped {
+    transform: rotateY( 180deg);
+}
 
 .savebutton {
     margin-left: 170px;
diff --git a/client/src/simulator/sim.js b/client/src/simulator/sim.js
index 95649b1..7cb79ce 100644
--- a/client/src/simulator/sim.js
+++ b/client/src/simulator/sim.js
@@ -172,9 +172,10 @@ class Sim extends Component{
         let counterImage = !counterName? `url("http://apollo-na-uploads.s3.amazonaws.com/1427669031664/SRBackground.png")` : `url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${counterName}_0.jpg')`;
         return(
             <div>
-
-                <input onChange={this.handleInput} className="summonername" placeholder="Search for a champion"/>
+               
+                <input onChange={this.handleInput} className="summonername  "  placeholder=" Search for a champion"/>
                 <br/>
+                <i class="fab fa-searchengin"></i>
                 <br/>
                 <div className="allroles">
                     <img onClick={this.handleRoles} name="all" className='roles' src={allChamps} alt="all" />
@@ -220,7 +221,7 @@ class Sim extends Component{
                         <div style={{border: pickName? 'none': ''}} className="enemypick">{!pickName? !pickName ? "Counter Pick":"" : ''}</div>
                            {counterName? <p className="counterpick">{champsData[counterName].name}</p> : "" }
                         </div>
-                        {counterItems.length > 0 ? <p className="itemname">Suggested Item Build</p> : ''}
+                        {counterItems.length > 0 ? <p className="itemname">Strongest Items</p> : ''}
                         {counterItems.map(item=>{
                             if(!isNaN(Number(item))){ //items list includes the word item... Just making sure to ignore it and just focus on the actual item numbers
                                 return(
@@ -260,7 +261,6 @@ class Sim extends Component{
                         <a href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank">
 
                         <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
-
                         </a>
                 </div>
     
@@ -271,4 +271,5 @@ class Sim extends Component{
   };
 };
 
-export default Sim;
\ No newline at end of file
+export default Sim;
+