Add influence backgrounds & complete the influences list.

src/app/app.component.html

@@ -31,9 +31,13 @@
       <input type="text" class="Name" id="name1" [(ngModel)]="item.name" />
       <input type="text" class="BaseType" id="name2" [(ngModel)]="item.base" *ngIf="item.rarity.thickness === RarityThickness.TwoLine" />
       <br/>
+      <br/>
       <select id="iteminfluence" [(ngModel)]="item.influence">
         <option [class]="'col-' + influence.name.toLowerCase()" *ngFor="let influence of Influence.influences" [ngValue]="influence">{{ influence.displayName }}</option>
       </select>
+      <select id="iteminfluence" [(ngModel)]="item.influence2">
+        <option [class]="'col-' + influence.name.toLowerCase()" *ngFor="let influence of Influence.influences" [ngValue]="influence">{{ influence.displayName }}</option>
+      </select>
     </span>
     <br/>
     <br/>
@@ -45,6 +49,19 @@
         <img src="assets/ic_close_black_24px.svg" alt="X" />
       </button>
     </span>
+    <br/>
+    <br/>
+    <span class="itemsize" *ngIf="item.influence.has_background || item.influence2.has_background">
+      Item Size (For Influence Background):
+      <select id="itemsize" [(ngModel)]="item.size">
+        <option value="x1x1">1x1</option>
+        <option value="x1x2">1x2</option>
+        <option value="x1x3">1x3</option>
+        <option value="x2x1">2x1</option>
+        <option value="x2x2">2x2</option>
+        <option value="x2x3">2x3</option>
+      </select>
+    </span>
     <ul id="properties" class="properties">
       <li *ngFor='let property of item.properties;let index = index;' [class]="'prop-' + property.type.className" [attr.fields]="property.type.fields">
         <button (click)="item.removeProperty(property)" class="remove-prop nostyle" style="width: 36px; height: 36px; padding: 0;">
@@ -67,23 +84,28 @@
   <span class="disclaimer">This site is fan-made and not affiliated with Grinding Gear Games.</span>
 </div>
 <div id="canvas">
-  <div [class]="'item ' + item.rarity.name" id="item">
+  <div [class]="'item ' + item.rarity.name + ' ' + item.size + ' ' + item.influence.name + ' ' + item.influence2.name" id="item">
     <div [class]="'itemheader ' + item.rarity.thickness" id="itemheader">
-      <span class="left"><img *ngIf="item.influence.icon != 'none'" src="{{ item.influence?.icon }}" class="influence-symbol"/></span>
+      <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">{{item.name}}</span>
         <span class="itemheader-name-line2" id="name2o" *ngIf="item.rarity.thickness === RarityThickness.TwoLine">{{item.base}}</span>
       </div>
-      <span class="right"><img *ngIf="item.influence.icon != 'none'" src="{{ item.influence?.icon }}" class="influence-symbol"/></span>
+      <span class="right">
+        <img *ngIf="item.influence2.icon != 'none'" src="{{ item.influence2.icon }}" class="influence-symbol"/>
+        <img *ngIf="item.influence2.icon == 'none' && item.influence.icon != 'none'" src="{{ item.influence.icon }}" class="influence-symbol"/>
+      </span>
     </div>
     <div class="itembody" id="itembody">
       <div *ngFor="let property of item.properties; let index = index;" [class]="(item.properties[index].type.className === 'sep' ? '' : 'property ') + item.properties[index].type.className">
         <span [class]="'prop-name ' + property.type.nameRenderClass" *ngIf="property.type.fields === 2">{{item.properties[index].name}}</span>
         <span [class]="'prop-val ' + property.type.valueRenderClass" *ngIf="property.type.fields > 0" [innerHTML]="item.properties[index] | value"></span>
       </div>
     </div>
-    <div>
-      <img id="imageo" [src]="item.image" />
+    <div style="display: flex; position: relative; justify-content: center;">
+      <div class="influencebg" [class]="item.influence.name.toLowerCase()" [ngStyle]="{backgroundImage: this.getInfluenceBackground(item.influence)}"></div>
+      <div class="influencebg" [class]="item.influence2.name.toLowerCase()" [ngStyle]="{backgroundImage: this.getInfluenceBackground(item.influence2)}"></div>
+      <img id="imageo" [src]="item.image"/>
     </div>
   </div>
 </div>

src/app/app.component.ts

@@ -40,4 +40,11 @@ export class AppComponent implements OnInit {
       this.router.navigateByUrl('/');
     })
   }
+
+  getInfluenceBackground(influence: Influence): string {
+    if(influence.has_background) {
+      return `url("assets/backgrounds/${influence.name}${this.item.size.replaceAll("x", "_")}.png")`.toLowerCase();
+    }
+    return "";
+  }
 }

src/app/item-service.service.ts

@@ -3,7 +3,7 @@ import { Item } from './item';
 import { HttpClient } from '@angular/common/http';
 import { Templates } from './templates';
 import { Property, PropertyType } from './property';
-import { Rarity } from './rarity';
+import { Influence, Rarity } from './rarity';
 
 @Injectable()
 export class ItemService {
@@ -14,7 +14,16 @@ export class ItemService {
 
   reset(): Promise<Item> {
     return new Promise((resolve, reject) => {
-      resolve(this.item = Templates.get('Tabula Rasa, Simple Robe') as Item);
+      this.item = Templates.get('Tabula Rasa, Simple Robe') as Item;
+      if(Math.random() > 0.5) {
+        this.item.influence = Influence.influences[Math.floor(Math.random() * (Influence.influences.length - 2)) + 1];
+        this.item.influence2 = Influence.influences[Math.floor(Math.random() * (Influence.influences.length - 2)) + 1];
+      }
+      else {
+        this.item.influence = Influence.None;
+        this.item.influence2 = Influence.None;
+      }
+      resolve(this.item);
     })
   }
 
@@ -45,6 +54,7 @@ export class ItemService {
         name: string,
         base: string,
         image: string,
+        size: string,
         properties: Array<{
           type: string,
           name: string,
@@ -64,6 +74,7 @@ export class ItemService {
         i.name,
         i.base,
         i.image,
+        i.size,
         i.properties.map(mapper)
       );
       resolve(this.item);

src/app/item.ts

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

src/app/rarity.ts

@@ -1,6 +1,7 @@
 export enum RarityThickness {
     OneLine = 'single',
-    TwoLine = 'double'
+    TwoLine = 'double',
+    ThickOneLine = 'thicksingle'
 }
 
 export class Rarity {
@@ -56,6 +57,26 @@ export class Rarity {
         'unique',
         RarityThickness.TwoLine
     )
+
+    static readonly Passive: Rarity = new Rarity(
+        'passive',
+        RarityThickness.ThickOneLine
+    )
+
+    static readonly Notable: Rarity = new Rarity(
+        'notable',
+        RarityThickness.ThickOneLine
+    )
+
+    static readonly Keystone: Rarity = new Rarity(
+        'keystone',
+        RarityThickness.ThickOneLine
+    )
+
+    static readonly JewelSocket: Rarity = new Rarity(
+        'socket-jewel',
+        RarityThickness.ThickOneLine
+    )
 
     static readonly rarities: Rarity[] = [
         Rarity.Normal,
@@ -64,17 +85,31 @@ export class Rarity {
         Rarity.Prophecy,
         Rarity.Currency,
         Rarity.Rare,
-        Rarity.Unique
+        Rarity.Unique,
+        Rarity.Passive,
+        Rarity.Notable,
+        Rarity.Keystone,
+        Rarity.JewelSocket
     ]
 }
 
 export class Influence {
     readonly name: string;
     readonly icon: string;
+    private _has_background = false;
 
-    private constructor(name: string, icon?: string) {
+    public get has_background() {
+        return this._has_background;
+    }
+
+    private set has_background(value: boolean) {
+        this._has_background = value;
+    }
+
+    private constructor(name: string, icon?: string, has_background = false) {
         this.name = name;
         this.icon = icon || `assets/symbol_${name.toLowerCase()}.png`;
+        this.has_background = has_background;
     }
 
     get displayName(): string {
@@ -87,11 +122,16 @@ export class Influence {
         }
     }
 
+    private setHasBackground(has_background: boolean): Influence {
+        this.has_background = has_background;
+        return this;
+    }
+
     static readonly None = new Influence("None", "none");
 
-    static readonly Shaper = new Influence("Shaper");
+    static readonly Shaper = new Influence("Shaper").setHasBackground(true);
 
-    static readonly Elder = new Influence("Elder");
+    static readonly Elder = new Influence("Elder").setHasBackground(true);
 
     static readonly Fractured = new Influence("Fractured");
 
@@ -105,6 +145,12 @@ export class Influence {
 
     static readonly Redeemer = new Influence("Redeemer");
 
+    static readonly Replica = new Influence("Replica");
+
+    static readonly Eater = new Influence("Eater of Worlds", "assets/symbol_eater.png");
+
+    static readonly Exarch = new Influence("Searing Exarch", "assets/symbol_searing.png");
+
     static readonly influences: Influence[] = [
         Influence.None,
         Influence.Shaper,
@@ -115,5 +161,8 @@ export class Influence {
         Influence.Hunter,
         Influence.Redeemer,
         Influence.Warlord,
+        Influence.Replica,
+        Influence.Eater,
+        Influence.Exarch
     ]
 }