Add all combat mastery details

src/app/components/player/EchoesLeague.tsx

@@ -56,6 +56,30 @@ const EchoesLeague: React.FC = observer(() => {
   const { five: data } = store.player.leagues;
 
   const passives = [];
+  const meleeEffects = [
+    'Melee hits have a 25% chance to roll damage twice and take the highest result.',
+    'Melee hits have a 10% chance to generate an echo hit',
+    'Melee attack rate set to 80%, rounding down.',
+    'Melee hits have a 5% chance to heal 40% of damage dealt.',
+    'Melee attack rate set to 50%, rounded down above 5t, rounded up below 4t.',
+    'Your chance to generate a Melee echo increases to 20%, and your echoes can generate additional echoes',
+  ];
+  const rangedEffects = [
+    'Damage rolls beneath 30% of max hit with Ranged are increased to 30%.',
+    'Each subsequent Ranged attack has its max hit increased by an additional 5%. Resets after +20%.',
+    'Ranged attack rate set to 80%, rounding down.',
+    'Every 5th Ranged hit, heal 5 hitpoints.',
+    'Ranged attack rate set to 50%, rounded down above 5t, rounded up below 4t.',
+    'Never miss with Ranged (PvM only).',
+  ];
+  const magicEffects = [
+    'When you roll above 90% of your max hit with Magic, damage is increased by 50%.',
+    'Magic max hit is increased by 5% per tick in-between your attacks (Up to +40%).',
+    'Magic attack rate set to 80%, rounding down.',
+    'When you roll above 90% of your max hit with Magic, heal 10% of damage dealt.',
+    'Magic attack rate set to 50%, rounded down above 5t, rounded up below 4t.',
+    'Max hit with Magic is increased by 1% for every 100 Hitpoints remaining on target (Up to 10%). On a successful Magic hit, if your target has less Hitpoints than your max hit, you max hit.',
+  ];
   const maxMastery = Math.max(data.melee, data.ranged, data.magic);
   if (maxMastery >= 3) {
     passives.push('+100% accuracy');
@@ -104,6 +128,42 @@ const EchoesLeague: React.FC = observer(() => {
         </div>
       )}
 
+      {(data.melee > 0) && (
+        <div className="ml-1 my-4 text-gray-300 text-sm justify-center">
+          Melee:
+          <ul className="list-disc ml-5">
+            {meleeEffects.slice(0, data.melee).map((melee, i) => (
+              // each index is always the same string
+              // eslint-disable-next-line react/no-array-index-key
+              <li className="list-" key={i}>{melee}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {(data.ranged > 0) && (
+        <div className="ml-1 my-4 text-gray-300 text-sm justify-center">
+          Ranged:
+          <ul className="list-disc ml-5">
+            {rangedEffects.slice(0, data.ranged).map((range, i) => (
+              // each index is always the same string
+              // eslint-disable-next-line react/no-array-index-key
+              <li className="list-" key={i}>{range}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {(data.magic > 0) && (
+        <div className="ml-1 my-4 text-gray-300 text-sm justify-center">
+          Magic:
+          <ul className="list-disc ml-5">
+            {magicEffects.slice(0, data.magic).map((magic, i) => (
+              // each index is always the same string
+              // eslint-disable-next-line react/no-array-index-key
+              <li className="list-" key={i}>{magic}</li>
+            ))}
+          </ul>
+        </div>
+      )}
       {(passives.length > 0) && (
         <div className="ml-1 my-4 text-gray-300 text-sm justify-center">
           Passives: