From dfc1a0a322a22c3717fc403d7c4fb090ae8c6ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miquel=20Ra=C3=AFch?= <miquel.raich@forgeflow.com>
Date: Thu, 11 May 2023 18:35:51 +0200
Subject: [PATCH] [FIX] Use individual relative stat percentage, not 255

---
 main.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/main.ts b/main.ts
index a54a388..4fbc902 100644
--- a/main.ts
+++ b/main.ts
@@ -124,16 +124,17 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
           <td class="value abilities-text">${ability.description}</td>
         </tr>`;
     })
-    .join('\n'); 
-    const getStatBar = (value: number, maxValue: number) => {
-      const percentage = Math.round((value / maxValue) * 100);
-      const greenThreshold = 35;
-      const yellowThreshold = 20;
+    .join('\n');
+    const getStatBar = (value: number, sumValues: number, maxValue: number) => {
+      const absolute_percentage = Math.round((value / maxValue) * 100);
+      const relative_percentage = Math.round((value / sumValues) * 100);
+      const greenThreshold = 100 / (6 - 1);  // 6: because there are 6 stats
+      const yellowThreshold = 100 / (6 + 1); // +-1: to move a bit more/less from 6
 
       let backgroundColor;
-      if (percentage >= greenThreshold) {
+      if (relative_percentage >= greenThreshold) {
         backgroundColor = 'limegreen';
-      } else if (percentage >= yellowThreshold) {
+      } else if (relative_percentage >= yellowThreshold) {
         backgroundColor = 'gold';
       } else {
         backgroundColor = 'tomato';
@@ -142,20 +143,22 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
       return `
         <div class="stat-bar-container">
           <div class="stat-bar">
-            <div class="stat-value" style="width: ${percentage}%; background-color: ${backgroundColor};"></div>
+            <div class="stat-value" style="width: ${absolute_percentage}%; background-color: ${backgroundColor};"></div>
           </div>
         </div>
       `;
     };
 
     const statsTableRows = pokemon.stats
-      .map(stat => `
+      .map(stat => {
+        const sum_stats = pokemon.stats.reduce((a, b) => a.value + b.value);
+        return `
         <tr>
           <td class="attribute abilities-text">${(stat.name === 'hp') ? 'HP': stat.name.charAt(0).toUpperCase() + stat.name.slice(1)}:</td>
           <td class="value abilities-text">${stat.value}</td>
-          <td class="value abilities-bar">${getStatBar(stat.value, 255)}</td>
-        </tr>`)
-      .join('\n');
+          <td class="value abilities-bar">${getStatBar(stat.value, sum_stats, 255)}</td>
+        </tr>`;
+      }).join('\n');
 
    const descriptionsSelect = pokemon.pokedexDescriptions
       .map(description => `