#5 feat: Champion skins splash art

JiahuiChen99 · May 11, 2021 · f5297d1 · f5297d1
1 parent 2a1015b
commit f5297d1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 42 deletions.
diff --git a/carousel.css b/carousel.css
@@ -46,35 +46,10 @@
     }
 }
 
-/*Select every element*/
-[id^="item"] {
-    display: none;
-}
 
-.item-1 {
+.carousel-item {
     z-index: 2;
     opacity: 1;
     background:url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg');
     background-size:cover;
 }
-.item-2{
-    background:url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_14.jpg');
-    background-size:cover;
-}
-.item-3{
-    background:url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_27.jpg');
-    background-size:cover;
-}
-
-*:target ~ .item-1 {
-    opacity: 0;
-}
-
-#item-1:target ~ .item-1 {
-    opacity: 1;
-}
-
-#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
-    z-index: 3;
-    opacity: 1;
-}
diff --git a/chat.js b/chat.js
@@ -8,6 +8,8 @@ const client = new service.ChatbotClient('localhost:9090', grpc.credentials.crea
 const user_logo = './assets/ahri_icon.png';
 const bot_logo = './assets/lol.png';
 let current_champion;
+let skins;
+let current_splash = 0;
 
 function sendMessage() {
     let user_input = document.getElementById('user-input').value;
@@ -184,12 +186,35 @@ function fetchChampionInformation(champion) {
         // Change the abilities
         setAbilities(response.wrappers_[3].map_);
         // Change the splash art
+        skins = response.array[4];
 
+        skins.push("0");
+        setSplashArt(skins[skins.length - 1]);
         // Change the roles
 
     });
 }
 
+function setSplashArt(skin) {
+    let carousel = document.getElementById("carousel");
+
+    carousel.style.backgroundImage = "url('http://ddragon.leagueoflegends.com/cdn/img/champion/splash/" + current_champion.array[0] + "_" + skin + ".jpg')";
+}
+
+function changeSplashArt(left_right) {
+    setSplashArt(skins[current_splash]);
+    if ( left_right ) {
+        if (++current_splash >= skins.length) {
+            current_splash = 0;
+        }
+    } else {
+        if (--current_splash < 0) {
+            current_splash = skins.length - 1;
+        }
+    }
+}
+
+
 function setAbilities(abilities_photos) {
     let passive = document.getElementById("passive");
     passive.setAttribute('src', "https://ddragon.leagueoflegends.com/cdn/11.8.1/img/passive/" + abilities_photos.passive.value);

diff --git a/index.html b/index.html
@@ -33,22 +33,9 @@
           </div>
           <div class="column is-three-fifths">
             <div class="carousel-wrapper">
-              <span id="item-1"></span>
-              <span id="item-2"></span>
-              <span id="item-3"></span>
-              <div class="carousel-item item-1">
-                <a class="arrow arrow-prev" href="#item-3"></a>
-                <a class="arrow arrow-next" href="#item-2"></a>
-              </div>
-
-              <div class="carousel-item item-2">
-                <a class="arrow arrow-prev" href="#item-1"></a>
-                <a class="arrow arrow-next" href="#item-3"></a>
-              </div>
-
-              <div class="carousel-item item-3">
-                <a class="arrow arrow-prev" href="#item-2"></a>
-                <a class="arrow arrow-next" href="#item-1"></a>
+              <div class="carousel-item" id="carousel">
+                <a class="arrow arrow-prev" onclick="changeSplashArt(0)"></a>
+                <a class="arrow arrow-next" onclick="changeSplashArt(1)"></a>
               </div>
             </div>