From c85a20c5dfef3a77906c89b993e94cf1ada77cb2 Mon Sep 17 00:00:00 2001
From: Brian Perrett <bperrett@fusionbox.com>
Date: Fri, 27 Dec 2024 11:19:07 -0800
Subject: [PATCH] Add more item data

---
 data/models.py                            |  88 ++++++++++++++++-
 templates/cotton/data/item_list_item.html | 113 ++++++++++++++++++++++
 templates/data/item-stats.html            |  52 +---------
 3 files changed, 202 insertions(+), 51 deletions(-)
 create mode 100644 templates/cotton/data/item_list_item.html

diff --git a/data/models.py b/data/models.py
index 838fe753..403dc5f2 100644
--- a/data/models.py
+++ b/data/models.py
@@ -225,13 +225,97 @@ def stat_efficiency(self):
             if not amount:
                 continue
             if cost := ITEM_STAT_COSTS.get(stat, None):
-                ret[label] = {"amount": amount, "gold_value": cost * amount}
-        calc_gold = sum(x['gold_value'] for x in ret.values())
+                ret[label] = {
+                    "amount": amount,
+                    "gold_value": cost * amount,
+                    "unit_value": cost,
+                }
+        calc_gold = sum(x["gold_value"] for x in ret.values())
         ret["calculated_cost"] = calc_gold
         assert self.gold
         ret["gold_efficiency"] = calc_gold / (self.gold.total or 1) * 100
         return ret
 
+    @cached_property
+    def sliders(self):
+        match self._id:
+            # deathcap
+            case 3089:
+                if match := re.search(
+                    r"increases your total.*ability power by (\d+)%",
+                    self.description,
+                    flags=re.IGNORECASE,
+                ):
+                    ap_percent = match.groups()[0]
+                    ap = self.flat_ability_power
+                    return {
+                        "AP": {
+                            "range": [ap, 1500],
+                            "initial": ap,
+                            "type": "percentage",
+                            "multiplier": int(ap_percent) / 100,
+                            "affected_stat": "AP",
+                            "affected_stat_value": ITEM_STAT_COSTS["flat_ability_power"],
+                        },
+                    }
+            #
+            case 2501:
+                if match := re.search(r"gain (\d+)% of your.*bonus health.*as.*attack damage", self.description, re.IGNORECASE):
+                    percent = match.groups()[0]
+                    return {
+                        "Bonus-HP": {
+                            "range": [self.flat_health, 10000],
+                            "initial": self.flat_health,
+                            "type": "percentage",
+                            "multiplier": int(percent) / 100,
+                            "affected_stat": "AD",
+                            "affected_stat_value": ITEM_STAT_COSTS["flat_attack_damage"],
+                        }
+                    }
+            # sterak's gage
+            case 3053:
+                if match := re.search(r"gain.*bonus attack damage", self.description, re.IGNORECASE):
+                    return {
+                        "Base-AD": {
+                            "range": [60, 120],
+                            "initial": 90,
+                            "type": "percentage",
+                            "multiplier": .45,
+                            "affected_stat": "AD",
+                            "affected_stat_value": ITEM_STAT_COSTS["flat_attack_damage"],
+                            "notes": "Base HP differs per champion but generally ranges between 60 at level 1 to 120 at level 18",
+                        }
+                    }
+            #
+            case 4633:
+                if match := re.search(r"gain (\d+)% of your.*bonus health.*as.*ability power", self.description, re.IGNORECASE):
+                    percent = match.groups()[0]
+                    return {
+                        "Bonus-HP": {
+                            "range": [self.flat_health, 10000],
+                            "initial": 80,
+                            "type": "percentage",
+                            "multiplier": int(percent) / 100,
+                            "affected_stat": "AP",
+                            "affected_stat_value": ITEM_STAT_COSTS["flat_ability_power"],
+                        }
+                    }
+            # archangel's staff
+            case 3003:
+                if match := re.search(r"gain ability power equal to.*(\d+)% bonus mana", self.description, re.IGNORECASE):
+                    percent = match.groups()[0]
+                    return {
+                        "Bonus-Mana": {
+                            "range": [self.flat_mana, 4000],
+                            "initial": self.flat_mana,
+                            "type": "percentage",
+                            "multiplier": int(percent) / 100,
+                            "affected_stat": "AP",
+                            "affected_stat_value": ITEM_STAT_COSTS["flat_ability_power"],
+                        }
+                    }
+        return {}
+
     @cached_property
     def base_stat_efficiency(self):
         """Same as stat_efficiency, but don't include 'gold_efficiency' and 'calculated_cost'"""
diff --git a/templates/cotton/data/item_list_item.html b/templates/cotton/data/item_list_item.html
new file mode 100644
index 00000000..2fbd5d90
--- /dev/null
+++ b/templates/cotton/data/item_list_item.html
@@ -0,0 +1,113 @@
+<div id="list-item-{{ item.external_id }}" class="flex flex-col gap-y-2 ">
+  <div class="flex">
+    <div class="flex gap-x-2">
+      <img src="{{ item.image_url }}" alt="" class="w-12 h-12 rounded">
+      <div class="flex flex-col gap-y-1">
+        <div class="font-lg font-bold">
+          <a href="{% url 'data:item-stats-detail' item_id=item.external_id %}">
+            {{ item.name }}
+          </a>
+        </div>
+        <div class="text-sm">
+          Version {{ item.version }}
+          <span title="Last Changed">
+            ({{ item.last_changed }})
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="text-yellow-600 ml-auto">
+      ({{ item.gold.total }}g)
+    </div>
+  </div>
+  <div class="flex flex-col border border-slate-300 rounded px-1">
+    <div class="font-bold">Stat Gold Efficiency</div>
+      <div
+        class = "
+          font-bold
+        {% if item.stat_efficiency.gold_efficiency > 100 %}
+          text-green-600
+        {% elif item.stat_efficiency.gold_efficiency > 0 %}
+          text-red-600
+        {% endif %}
+        "
+      >
+        {{ item.stat_efficiency.calculated_cost|floatformat:"0" }}g ({{ item.stat_efficiency.gold_efficiency|floatformat:"1" }}%)
+      </div>
+    <div class="grid grid-cols-2 text-sm ml-4">
+      {% for stat, val in item.stat_efficiency.items %}
+        {% if stat != 'calculated_cost' and stat != 'gold_efficiency' %}
+          <div><span class="text-blue-600 font-bold">{{ val.amount }}</span> {{ stat }}:</div>
+          <div class="text-yellow-600">{{ val.gold_value|floatformat:"0" }}g</div>
+        {% endif %}
+      {% endfor %}
+    </div>
+    {% if item.sliders %}
+      <h5>Stat Sliders</h5>
+      <div class="flex flex-col gap-y-2">
+        {% for stat_name, val in item.sliders.items %}
+          <div class="text-sm">
+            <div>{{ stat_name }}</div>
+            <div class="w-full flex gap-x-2">
+              <input
+                id="slider-{{item.external_id}}-{{stat_name}}"
+                data-stat="{{stat_name}}"
+                data-affected-stat="{{val.affected_stat}}"
+                data-affected-stat-value="{{ val.affected_stat_value }}"
+                data-multiplier="{{val.multiplier}}"
+                class="my-1 w-full"
+                type="range"
+                min="{{ val.range.0 }}"
+                max="{{ val.range.1 }}"
+                value="{{ val.initial }}"
+              >
+              <div class="w-1/6" id="slider-{{item.external_id}}-{{stat_name}}-value">{{ val.range.0 }}</div>
+            </div>
+            <div>
+              <span class="font-bold text-blue-600" id="additional-stat-{{item.external_id}}-{{stat_name}}"></span>
+              more
+              <span class="font-bold text-blue-600" id="affected-stat-{{item.external_id}}-{{stat_name}}">{{ val.affected_stat }}</span>
+              Value:
+              <span class="font-bold text-yellow-600" id="additional-value-{{item.external_id}}-{{stat_name}}"></span>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+  <div>
+    {{ item.description|safe }}
+  </div>
+
+  {% if item.sliders %}
+    {{ item.base_stat_efficiency|json_script }}
+    <script>
+      (function() {
+        const GOLD = {{ item.gold.total }};
+        const ITEM_ID = "{{ item.external_id }}";
+        const el = document.getElementById("list-item-{{ item.external_id }}");
+        const STATS = JSON.parse(el.querySelector("script").textContent);
+
+        function handleSliderChange(slider) {
+          const statName = slider.getAttribute("data-stat");
+          const affectedStat = slider.getAttribute("data-affected-stat");
+          const affectedStatValue = parseFloat(slider.getAttribute("data-affected-stat-value"));
+          const newValue = slider.value;
+          const statValueElement = el.querySelector(`#slider-${ITEM_ID}-${statName}-value`);
+          const multiplier = parseFloat(slider.getAttribute("data-multiplier"))|| 0;
+          statValueElement.textContent = newValue;
+
+          const additionalStat = newValue * multiplier;
+          const additionalValue = additionalStat * affectedStatValue;
+          el.querySelector(`#additional-stat-${ITEM_ID}-${statName}`).textContent = parseInt(additionalStat);
+          el.querySelector(`#additional-value-${ITEM_ID}-${statName}`).textContent = `${parseInt(additionalValue)}g`;
+        }
+
+        for (slider of el.querySelectorAll("input[type='range']")) {
+          slider.addEventListener('input', (event) => handleSliderChange(event.currentTarget));
+          handleSliderChange(slider);
+        };
+      }())
+    </script>
+  {% endif %}
+</div>
diff --git a/templates/data/item-stats.html b/templates/data/item-stats.html
index 2c1268ec..531e4dd9 100644
--- a/templates/data/item-stats.html
+++ b/templates/data/item-stats.html
@@ -9,56 +9,10 @@ <h2>Item Stats (Version {{ version }})</h2>
       <button type="submit" class="btn btn-default my-2">Search</button>
     </form>
   </div>
-  <div class="flex flex-wrap gap-2">
+  <div class="flex flex-wrap gap-2 justify-center">
     {% for item in object_list %}
-      <div class="w-[350px] flex flex-col gap-y-2 bg-slate-800 rounded p-2 max-h-64 overflow-y-auto">
-        <div class="flex">
-          <div class="flex gap-x-2">
-            <img src="{{ item.image_url }}" alt="" class="w-12 h-12 rounded">
-            <div class="flex flex-col gap-y-1">
-              <div class="font-lg font-bold">
-                <a href="{% url 'data:item-stats-detail' item_id=item.external_id %}">
-                  {{ item.name }}
-                </a>
-              </div>
-              <div class="text-sm">
-                Version {{ item.version }}
-                <span title="Last Changed">
-                  ({{ item.last_changed }})
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="text-yellow-600 ml-auto">
-            ({{ item.gold.total }}g)
-          </div>
-        </div>
-        <div class="flex flex-col border border-slate-300 rounded px-1">
-          <div class="font-bold">Calculated Gold Efficiency</div>
-            <div
-              class = "
-                font-bold
-              {% if item.stat_efficiency.gold_efficiency > 100 %}
-                text-green-600
-              {% elif item.stat_efficiency.gold_efficiency > 0 %}
-                text-red-600
-              {% endif %}
-              "
-            >
-              {{ item.stat_efficiency.calculated_cost|floatformat:"0" }}g ({{ item.stat_efficiency.gold_efficiency|floatformat:"1" }}%)
-            </div>
-          <div class="grid grid-cols-2 text-sm ml-4">
-            {% for stat, val in item.stat_efficiency.items %}
-              {% if stat != 'calculated_cost' and stat != 'gold_efficiency' %}
-                <div><span class="text-blue-600 font-bold">{{ val.amount }}</span> {{ stat }}:</div>
-                <div class="text-yellow-600">{{ val.gold_value|floatformat:"0" }}g</div>
-              {% endif %}
-            {% endfor %}
-          </div>
-        </div>
-        <div>
-          {{ item.description|safe }}
-        </div>
+      <div class="w-[350px] bg-slate-800 rounded p-2 max-h-80 overflow-y-auto">
+        <c-data.item-list-item :item="item" />
       </div>
     {% endfor %}
   </div>