Add elemental damage colors

src/app/templates.ts

@@ -25,9 +25,9 @@ export const Templates = [
                 '+20%'
             ),
             new Property(
-                PropertyType.StatReq,
-                '',
-                'Physical Damage:  <b>322</b> to <b>669</b>'
+                PropertyType.StatAug,
+                'Physical Damage',
+                '322-669'
             ),
             new Property(
                 PropertyType.Stat,
@@ -64,6 +64,11 @@ export const Templates = [
                 '',
                 '30% increased Global Accuracy Rating'
             ),
+            new Property(
+                PropertyType.Separator,
+                '',
+                ''
+            ),
             new Property(
                 PropertyType.Affix,
                 '',
@@ -308,6 +313,110 @@ export const Templates = [
             )
         ]
     ),
+    new Item(
+        Rarity.Unique,
+        "Arakaali's Fang",
+        "Fiend Dagger",
+        "assets/items/Arakaali's_Fang_inventory_icon.png",
+        "x1x2",
+        [
+            new Property(
+                PropertyType.ItemType,
+                "",
+                "Rune Dagger"
+            ),
+            new Property(
+                PropertyType.StatAug,
+                "Quality",
+                "+20%"
+            ),
+            new Property(
+                PropertyType.StatAug,
+                "Physical Damage",
+                "92-329"
+            ),
+            new Property(
+                PropertyType.StatAug,
+                "Chaos Damage",
+                "<chaos>1-59</chaos>"
+            ),
+            new Property(
+                PropertyType.Stat,
+                "Critical Strike Chance",
+                "6.50%"
+            ),
+            new Property(
+                PropertyType.Stat,
+                "Attacks per Second",
+                "1.20"
+            ),
+            new Property(
+                PropertyType.Stat,
+                "Weapon Range",
+                "10"
+            ),
+            new Property(
+                PropertyType.Separator,
+                "",
+                ""
+            ),
+            new Property(
+                PropertyType.StatReq,
+                "",
+                "Requires Level 53, 58 Dex, 123 Int"
+            ),
+            new Property(
+                PropertyType.Separator,
+                "",
+                ""
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "40% increased Global Critical Strike Chance"
+            ),
+            new Property(
+                PropertyType.Separator,
+                "",
+                ""
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "100% chance to Trigger Level 1 Raise Spiders on Kill"
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "185% increased Physical Damage"
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "Adds 8 to 21 Physical Damage"
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "Adds 1 to 59 Chaos Damage"
+            ),
+            new Property(
+                PropertyType.Affix,
+                "",
+                "15% chance to Poison on Hit"
+            ),
+            new Property(
+                PropertyType.Separator,
+                "",
+                ""
+            ),
+            new Property(
+                PropertyType.FlavorU,
+                "",
+                "All children must eat."
+            )
+        ]
+    ),
     new Item(
         Rarity.Magic,
         "",

src/app/value.pipe.ts

@@ -7,12 +7,22 @@ import { PropertyType } from './property';
 })
 export class ValuePipe implements PipeTransform {
 
+  private replacements: [RegExp, string][] = [
+    [/\<g\>(.*)\<\/g\>/g, '<span class="prop-gray">$1</span>'],
+    [/\<chaos\>(.*)\<\/chaos\>/g, '<span class="prop-chaos">$1</span>'],
+    [/\<fire\>(.*)\<\/fire\>/g, '<span class="prop-fire">$1</span>'],
+    [/\<cold\>(.*)\<\/cold\>/g, '<span class="prop-cold">$1</span>'],
+    [/\<lightning\>(.*)\<\/lightning\>/g, '<span class="prop-lightning">$1</span>']
+  ];
+
   transform(value: any, args?: any): any {
     if(value.type === PropertyType.StatReq) {
       return value.value.replace(/(\d+)/g, '<span class="prop-white">$1</span>');
     }
     else {
-      return value.value;
+      return this.replacements.reduce((acc, [regex, replacement]) => {
+        return acc.replaceAll(regex, replacement);
+      }, value.value as string);
     }
   }
 

src/styles.scss

@@ -200,3 +200,19 @@ select, input {
 .prop-red {
   color: $red;
 }
+
+.prop-fire {
+    color: $fire;
+}
+
+.prop-cold {
+    color: $cold;
+}
+
+.prop-lightning {
+    color: $lightning;
+}
+
+.prop-chaos {
+    color: $chaos;
+}

src/styles/colors.scss

@@ -22,3 +22,8 @@ $normal: #c8c8c8;
 $prophecy: #b54bff;
 $gem: #1aa29b;
 $passive: #f7e6ca;
+
+$chaos: #d02090;
+$fire: #960000;
+$cold: #366492;
+$lightning: gold;