Add foil support. Custom foils coming later

src/app/item-editor/item-editor.component.html

@@ -17,6 +17,7 @@
       <poe-field-group label="Type/Rarity" [(value)]="item.rarity" [valueChoices]="Rarity.rarities"></poe-field-group>
       <poe-field-group label="Name/Base Type" [(value)]="item.name" [(value2)]="item.base" [fields]="item.rarity.thickness === RarityThickness.TwoLine ? 2 : 1" hide="value"></poe-field-group>
       <poe-field-group label="Influence" [(value)]="item.influence" [(value2)]="item.influence2" [fields]="2" [valueChoices]="Influence.influences" [value2Choices]="Influence.influences"></poe-field-group>
+      <poe-field-group label="Foil Variant" [(value)]="item.foilType" [valueChoices]="FoilType.types"></poe-field-group>
     </span>
     <br/>
     <br/>

src/app/item-editor/item-editor.component.ts

@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { Item } from '../item';
 import { ItemService } from '../item-service.service';
 import { PropertyType } from '../property';
-import { Rarity, RarityThickness, Influence } from '../rarity';
+import { Rarity, RarityThickness, Influence, FoilType } from '../rarity';
 
 @Component({
   selector: 'poe-item-editor',
@@ -16,6 +16,7 @@ export class ItemEditorComponent implements OnInit {
   get Rarity(): any { return Rarity }
   get RarityThickness(): any { return RarityThickness }
   get Influence(): any { return Influence }
+  get FoilType(): any { return FoilType }
 
   public get item(): Item {
     return this.is.item;

src/app/item-renderer/item-renderer.component.html

@@ -1,5 +1,5 @@
 <div [class]="'item ' + item.rarity.name + ' ' + item.size + ' ' + item.influence.name + ' ' + item.influence2.name" id="item">
-  <div [class]="'itemheader ' + item.rarity.thickness" id="itemheader">
+  <div [class]="'itemheader ' + item.rarity.thickness + ' foil-' + item.foilType.name.toLowerCase()" id="itemheader">
     <span class="left"><img *ngIf="item.influence.icon != 'none'" src="{{ item.influence.icon }}" class="influence-symbol"/></span>
     <div class="itemheader-name">
       <span class="itemheader-name-line1" id="name1o" *ngIf="item.rarity.thickness === RarityThickness.TwoLine">{{item.name}}</span>

src/app/item-renderer/item-renderer.component.scss

@@ -58,6 +58,7 @@
             position: absolute;
             top: 50%;
             margin-top: -20px;
+            z-index: 2;
         }
     }
     .left .influence-symbol {
@@ -97,6 +98,50 @@
         display: none;
       }
     }
+
+    &:not(.foil-none) {
+        &::after {
+            content: ' ';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-position-y: bottom;
+            animation: animate-foil;
+            animation-direction: alternate;
+            animation-iteration-count: infinite;
+            animation-duration: 5s;
+            animation-timing-function: ease-in-out;
+            mix-blend-mode: color;
+            z-index: 1;
+        }
+
+        &.foil-amethyst::after {
+            background-image: url("../../assets/foils/amethyst.png");
+        }
+
+        &.foil-verdant::after {
+            background-image: url("../../assets/foils/verdant.png");
+        }
+
+        &.foil-ruby::after {
+            background-image: url("../../assets/foils/ruby.png");
+        }
+
+        &.foil-cobalt::after {
+            background-image: url("../../assets/foils/cobalt.png");
+        }
+
+        &.foil-sunset::after {
+            background-image: url("../../assets/foils/sunset.png");
+        }
+
+        &.foil-aureate::after {
+            background-image: url("../../assets/foils/aureate.png");
+        }
+    }
+
     .itemheader-name {
       flex: 1;
       font-size: 30px;
@@ -107,6 +152,17 @@
     .itemheader-name-line2 {
       display: block;
     }
+
+    position: relative;
+}
+
+@keyframes animate-foil {
+    from {
+        background-position-y: bottom;
+    }
+    to {
+        background-position-y: top;
+    }
 }
 
 .sep {

src/app/item.ts

@@ -1,20 +1,21 @@
-import { Rarity, Influence } from './rarity';
+import { Rarity, Influence, FoilType } from './rarity';
 import { Property, PropertyType } from './property';
 
 export class Item {
-    rarity: Rarity
-    influence: Influence
-    influence2: Influence
+    rarity: Rarity;
+    influence: Influence;
+    influence2: Influence;
+    foilType: FoilType;
 
-    name: string
-    base: string
-    image: string
+    name: string;
+    base: string;
+    image: string;
 
-    properties: Property[]
+    properties: Property[];
 
-    size: string
+    size: string;
 
-    constructor(rarity:Rarity, name:string, base:string, image:string, size: string, properties:Property[], influence?: Influence, influence2?: Influence) {
+    constructor(rarity:Rarity, name:string, base:string, image:string, size: string, properties:Property[], influence?: Influence, influence2?: Influence, foilType?: FoilType) {
         this.rarity = rarity;
         this.name = name;
         this.base = base;
@@ -23,6 +24,7 @@ export class Item {
         this.properties = properties;
         this.influence = influence || Influence.None;
         this.influence2 = influence2 || Influence.None;
+        this.foilType = foilType || FoilType.None;
     }
 
     insertPropertyAfter(property: Property) {

src/app/rarity.ts

@@ -184,3 +184,36 @@ export class Influence implements ISerializable {
         Influence.Exarch
     ]
 }
+
+export class FoilType {
+
+    name: string;
+    colors?: string[];
+
+    get displayColor(): string | null {
+        return this.colors ? this.colors[0] : null;
+    }
+
+    constructor(name: string, colors?: string[]) {
+        this.name = name;
+        this.colors = colors ?? undefined;
+    }
+
+    static readonly None = new FoilType("None");
+    static readonly Amethyst = new FoilType("Amethyst", ["#b15afc"]);
+    static readonly Verdant = new FoilType("Verdant", ["#5dfc5a"]);
+    static readonly Ruby = new FoilType("Ruby", ["#fc5a5d"]);
+    static readonly Cobalt = new FoilType("Cobalt", ["#5a83fc"]);
+    static readonly Sunset = new FoilType("Sunset", ["#fcb93c"]);
+    static readonly Aureate = new FoilType("Aureate", ["#f6fc3c"]);
+
+    static readonly types: FoilType[] = [
+        FoilType.None,
+        FoilType.Amethyst,
+        FoilType.Verdant,
+        FoilType.Ruby,
+        FoilType.Cobalt,
+        FoilType.Sunset,
+        FoilType.Aureate
+    ];
+}

src/app/templates.ts

@@ -1,6 +1,6 @@
 import { Item } from "./item";
 import { Property, PropertyType } from "./property";
-import { Influence, Rarity } from "./rarity";
+import { FoilType, Influence, Rarity } from "./rarity";
 
 const reducer = (accumulator: Map<string, Item>, currentValue: Item) => {
     return accumulator.set(`${currentValue.name}, ${currentValue.base}`, currentValue);
@@ -112,6 +112,113 @@ export const Templates = [
         ],
         Influence.Shaper
     ),
+    new Item(
+        Rarity.Unique,
+        'Starforge',
+        'Infernal Sword',
+        'assets/items/Starforge_inventory_icon.png',
+        'x2x3',
+        [
+            new Property(
+                PropertyType.ItemType,
+                '',
+                'Two Hand Sword'
+            ),
+            new Property(
+                PropertyType.StatAug,
+                'Quality',
+                '+20%'
+            ),
+            new Property(
+                PropertyType.StatAug,
+                'Physical Damage',
+                '322-669'
+            ),
+            new Property(
+                PropertyType.Stat,
+                'Critical Strike Chance',
+                '5.00%'
+            ),
+            new Property(
+                PropertyType.StatAug,
+                'Attacks per Second',
+                '1.46'
+            ),
+            new Property(
+                PropertyType.Stat,
+                'Weapon Range',
+                '11'
+            ),
+            new Property(
+                PropertyType.Separator,
+                '',
+                ''
+            ),
+            new Property(
+                PropertyType.StatReq,
+                '',
+                'Requires Level 67,  113 Str,  113 Dex'
+            ),
+            new Property(
+                PropertyType.Separator,
+                '',
+                ''
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                '30% increased Global Accuracy Rating'
+            ),
+            new Property(
+                PropertyType.Separator,
+                '',
+                ''
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                '500% increased Physical Damage'
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                '8% increased Attack Speed'
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                '+100 to maximum Life'
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                '20% increased Area of Effect for Attacks'
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                'Deal no Elemental Damage'
+            ),
+            new Property(
+                PropertyType.Affix,
+                '',
+                'Your Physical Damage can Shock'
+            ),
+            new Property(
+                PropertyType.Separator,
+                '',
+                ''
+            ),
+            new Property(
+                PropertyType.FlavorU,
+                '',
+                'The end is written into the beginning.'
+            )
+        ],
+        Influence.Shaper,
+        Influence.None,
+        FoilType.Sunset
+    ),
     new Item(
         Rarity.Rare,
         'Beast Tread',