add more challenge labels + add responsive champion pool js code

TheRaphael0000 · Aug 29, 2022 · 10b7319 · 10b7319
1 parent 078a120
commit 10b7319
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 9 deletions.
diff --git a/static/challenges.json b/static/challenges.json
@@ -2,6 +2,7 @@
   {
     "id": 303401,
     "_": "Nowhere to Hide",
+    "label": "Global",
     "qte": 3,
     "champions": [
       "Akshan",
@@ -38,6 +39,7 @@
   {
     "id": 303402,
     "_": "It Has \"Ultimate\" In the Name !",
+    "label": "Ultimate",
     "qte": 3,
     "champions": [
       "Amumu",
@@ -120,6 +122,7 @@
   {
     "id": 303403,
     "_": "We Protec",
+    "label": "Ally Shield/Heal",
     "qte": 3,
     "champions": [
       "Alistar",
@@ -158,6 +161,7 @@
   {
     "id": 303404,
     "_": "They Just... Don't... DIE!",
+    "label": "Revive/Immunity",
     "qte": 3,
     "champions": [
       "Akshan",
@@ -203,6 +207,7 @@
   {
     "id": 303405,
     "_": "Where'd They Go ?",
+    "label": "Stealth",
     "qte": 3,
     "champions": [
       "Akali",
@@ -228,6 +233,7 @@
   {
     "id": 303406,
     "_": "We're Good Over Here",
+    "label": "Poke",
     "qte": 3,
     "champions": [
       "Akshan",
@@ -271,6 +277,7 @@
   {
     "id": 303407,
     "_": "Summoners on the Rift",
+    "label": "Summoner",
     "qte": 5,
     "champions": [
       "Annie",
@@ -625,6 +632,7 @@
   {
     "id": 303409,
     "_": "Get Over Here",
+    "label": "Displacement",
     "qte": 3,
     "champions": [
       "Alistar",
@@ -666,6 +674,7 @@
   {
     "id": 303410,
     "_": "It's a Trap!",
+    "label": "Trap",
     "qte": 3,
     "champions": [
       "Caitlyn",
@@ -683,6 +692,7 @@
   {
     "id": 303411,
     "_": "I'm Helping",
+    "label": "Terrain",
     "qte": 3,
     "champions": [
       "Anivia",
@@ -700,6 +710,7 @@
   {
     "id": 303412,
     "_": "Hold That Pose",
+    "label": "Crowd Controls",
     "qte": 3,
     "champions": [
       "Aatrox",

diff --git a/static/css/challenges_intersection.css b/static/css/challenges_intersection.css
@@ -47,17 +47,22 @@
 #champions_pool {
     margin: 0px auto;
     display: flex;
-    height: 100%;
+    width: 100%;
     align-content: stretch;
     flex-wrap: wrap;
     align-items: stretch;
     justify-content: center;
     user-select: none;
 }
 
+.champion {
+    position:relative;
+    width: 1px;
+}
+
 .champion_img {
-    width: 77px;
-    height: auto;
+    width: 100%;
+    height: 100%;
     border: 3px solid transparent;
     opacity: 0.3;
     transition: opacity 0.3s, border 0.3s;

diff --git a/static/js/challenges_intersection.js b/static/js/challenges_intersection.js
@@ -371,3 +371,37 @@ function best_fit_roles() {
             }
         })
 }
+
+function set_champion_size() {
+    let minPoolHeight = 770
+    let maxImageSize = 200
+    let minImageSize = 60
+
+    let pool = document.querySelector("#champions_pool")
+    let w = pool.offsetWidth
+    let h = Math.min(pool.offsetHeight, minPoolHeight)
+    let champions = document.querySelectorAll(".champion")
+
+    let n = champions.length
+
+    let optimal_s = minImageSize
+
+    for(let s = maxImageSize; s > minImageSize; s--){
+        let c = w / s
+        let r = Math.ceil(n / c) + 1
+
+        rs = r * s
+        if(rs < h) {
+            optimal_s = s
+            break
+        }
+    }
+
+    for(let champion of champions) {
+        champion.style.width = optimal_s + "px";
+        champion.style.height = optimal_s + "px";
+    }
+}
+
+window.addEventListener("resize", set_champion_size)
+set_champion_size()
diff --git a/templates/challenges_intersection.html b/templates/challenges_intersection.html
@@ -156,7 +156,7 @@
     </div>
     <div id="champions_pool">
       {% for champion in champions_alphabetical %}
-        <div style="position:relative">
+        <div class="champion">
           <img id="champion_{{ champion }}"
                class="champion_img"
                src="/static/datadragon_cache/champions_img/{{ champion }}.png"
@@ -167,26 +167,26 @@
         </div>
       {% endfor %}
     </div>
-    <div class="text-center">
+    <div class="d-flex flex-column flex-shrink-0">
       <button type="button"
-              class="btn btn btn-outline-light w-100 mb-2"
+              class="btn btn btn-outline-light mb-2"
               data-bs-toggle="modal"
               data-bs-target="#team_builder_modal">
         <i class="fa-solid fa-question"></i>
       </button>
       <button id="btn_search_champion"
               type="button"
-              class="btn btn btn-outline-light w-100 my-2">
+              class="btn btn btn-outline-light my-2">
         <i class="fa-solid fa-magnifying-glass"></i>
       </button>
       <button id="btn_copy"
               type="button"
-              class="btn btn btn-outline-light w-100 my-2">
+              class="btn btn btn-outline-light my-2">
         <i class="fa-solid fa-copy"></i>
       </button>
       <button id="btn_reset_selection"
               type="button"
-              class="btn btn btn-outline-light w-100 my-2">
+              class="btn btn btn-outline-light my-2">
         <i class="fa-solid fa-trash"></i>
       </button>
     </div>