implement loot system feedback

src/backend/Admin/Admin.ts

     private startWebsocket(){
         this.rpcServer = new RPCServer(20000, [
             ...this.frontworkComponents,
+            {
+                name: "debug",
+                exportRPCs: () => [{
+                    name: 'dumpDb',
+                    call: async (table) => await this.knex(table).select('*')
+                }]
+            }
         ], {
             visibility: '0.0.0.0'
         })

src/backend/Components/Item/Interface.ts

-import { Item, Character, SRToken, SRPriority, Spec } from "../../Types/Types"
+import { Item, Character, SRToken, SRPriority, Spec, Signup } from "../../Types/Types"
 
 export class IItemManager{
     getItems: () => Promise<Item[]>
     fetchItem: (name:string) => Promise<Item>
-    buyToken: (usertoken: string, charactername:string, itemname:string) => Promise<(SRToken & Character & Item) | void>
+    buyToken: (usertoken: string, charactername:string, itemname:string, signup:Signup) => Promise<(SRToken & Character & Item) | void>
     setPriority: (itemname:string, priority: any) => Promise<void>
     calculatePriorities: (itemname: string, character:Character) => Promise<number>
     deletePriority: (priority:SRPriority) => Promise<void>

src/backend/Components/Item/ItemManager.ts

-import { T1, T2 } from "../../Types/Items";
+import { T1, T2, allItems, _Tiers } from "../../Types/Items";
 import { Inject, Injectable } from "../../Injector/ServiceDecorator";
 import { ItemManagerFeatureIfc, ItemManagerIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
 import { TableDefinitionExporter } from "../../Types/Interfaces";
-import { TableDefiniton, Item, User, Character, SRToken, SRPriority, Spec } from "../../Types/Types";
+import { TableDefiniton, Item, User, Character, SRToken, SRPriority, Spec, Signup } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { IItemManager } from "./Interface";
 import { getLogger } from "log4js";
             {
                 name: 'tokens',
                 tableBuilder: (table) => {
-                    table.primary(['characterid', 'itemid'])
+                    table.primary(['characterid', 'itemname'])
                     table.integer("characterid")
                     table.foreign("characterid").references("id").inTable('characters')
-                    table.integer("itemid")
-                    table.foreign("itemid").references("id").inTable('items')
+                    table.string("itemname")
+                    table.foreign("itemname").references("itemname").inTable('items')
+                    table.string("signupid").nullable()
+                    table.foreign("signupid").references("id").inTable('signups').onDelete('SET NULL')
                     table.integer("level").defaultTo(1)
                 }
             },{
                 name: 'priorities',
                 tableBuilder: (table) => {
                     table.increments('id').primary()
-                    table.integer('itemid')
-                    table.foreign('itemid').references('id').inTable('items')
+                    table.string('itemname')
+                    table.foreign('itemname').references('itemname').inTable('items')
                     table.string('race').nullable()
                     table.integer('specid').nullable()
                     table.foreign('specid').references('id').inTable('specs')
             },{
                 name: 'items',
                 tableBuilder: (table) => {
-                    table.increments("id").primary()
-                    table.string('itemname').unique().notNullable()
+                    table.string('itemname').unique().notNullable().primary()
                     table.string('iconname').notNullable()
                     table.string('url').notNullable()
                     table.string('quality').defaultTo('Epic').notNullable()
                     table.boolean('hidden').defaultTo(false).notNullable()
+                    table.enu('tier', _Tiers).notNullable()
                 }
             }]
     }
 
-    buyToken = async (usertoken: string, charactername:string, itemname:string): Promise<(SRToken & Character & Item) | void> => {
+    buyToken = async (usertoken: string, charactername:string, itemname:string, signup: Signup): Promise<(SRToken & Character & Item) | void> => {
         const record = this.userManager.getUserRecordByToken(usertoken)
         const character = await this.character.getCharacterByName(charactername)
 
         const currency = await this.userManager.getCurrency(record.user)
         if(currency < 1) return
 
-        const existingToken = await this.getToken(character, item)
+        const shadowTokens = await this.getTokens(character, false)
+        const activeTokens = await this.getTokens(character, true)
 
         await this.userManager.decrementCurrency(record.user, 1)
+        const modifier = await this.calculatePriorities(itemname, character)
 
-        if(!existingToken){
-            const modifier = await this.calculatePriorities(itemname, character)
-            await this.admin.knex('tokens').insert({
+        //tokens with deleted signups
+        if(shadowTokens.length > 0){
+            //token for current item
+            const matchingtoken = shadowTokens.find(token => token.itemname === itemname)
+            if(matchingtoken){
+                //update signupid and increment level
+                
+                console.log("delete shadow tokens");
+
+                await this.admin
+                .knex('tokens')
+                .update({
+                    signupid: signup.id,
+                    level: matchingtoken.level+1
+                })
+                .where({
+                    characterid: character.id,
+                    itemname: item.itemname
+                })
+                return await this.getToken(character, item)
+            }
+        }
+
+        const matchingtoken = activeTokens.find(token => token.itemname === itemname)
+        if(matchingtoken){
+            //power up token
+            await this.admin
+            .knex('tokens')
+            .increment('level')
+            .where({
+                signupid: signup.id,
                 characterid: character.id,
-                itemid: item.id,
-                level: 1+modifier
+                itemname: item.itemname
             })
         }else{
-            await this.admin.knex('tokens').where({
+            await this.admin
+            .knex('tokens')
+            .insert({
                 characterid: character.id,
-                itemid: item.id
-            }).increment('level')
+                itemname: item.itemname,
+                level: 1+modifier,
+                signupid: signup.id
+            })
         }
-
         return await this.getToken(character, item)
     }
 
     getAllPriorities = async() :Promise<(SRPriority & Spec & Item)[]> => this.admin
     .knex('priorities as p')
-    .join('items as i', 'p.itemid', '=', 'i.id')
+    .join('items as i', 'p.itemname', '=', 'i.itemname')
     .leftJoin('specs as s', 'p.specid', '=', 's.id')
     .select('*') 
 
         await this.admin
         .knex('priorities')
         .insert(<SRPriority>{
-            itemid: item.id,
+            itemname: item.itemname,
             ...priority
         })
     }
 
     getPriorities = async(itemname:string) : Promise<SRPriority[]> => {
-        const item = await this.getItem(itemname)
-
-        return await this.admin.knex('priorities')
-        .where('itemid', '=', item.id)
+        return await this.admin
+        .knex('priorities as p')
+        .where('p.itemname', '=', itemname)
         .select('*')
     }
 
     calculatePriorities = async (itemname: string, character:Character):Promise<number>=> {
-        const rules : SRPriority[] = await this.admin.knex('priorities as p')
+        const rules : SRPriority[] = await this.admin
+        .knex('priorities as p')
         .select('*')
-        .join('items as i', 'i.id', '=', 'p.itemid')
-        .where('itemname', '=', itemname)
+        .join('items as i', 'i.itemname', '=', 'p.itemname')
+        .where('p.itemname', '=', itemname)
 
         return rules.map(rule => {
             if(rule.specid && rule.race){
         .knex('tokens as t')
         .select('*')
         .join('characters as c', 'c.id', '=', 't.characterid')
-        .join('items as i', 'i.id', '=', 't.itemid')
+        .join('items as i', 'i.itemname', '=', 't.itemname')
         .where({
             characterid: character.id,
-            itemid: item.id
+            "i.itemname": item.itemname
         })
         .first()
     }
 
-    getTokens = async (character:Character) : Promise<(SRToken & Character & Item)[]> => {
+    getTokens = async (character:Character, valid=true) : Promise<(SRToken & Character & Item)[]> => {
         return await this.admin
         .knex('tokens as t')
         .select('*')
-        .select('*')
         .join('characters as c', 'c.id', '=', 't.characterid')
-        .join('items as i', 'i.id', '=', 't.itemid')
+        .join('items as i', 'i.itemname', '=', 't.itemname')
         .where({
             characterid: character.id,
         })
+        .andWhere(function(){
+            if(valid){
+                this.whereNotNull('t.signupid')
+            }else{
+                this.whereNull('t.signupid')
+            }
+        })
     }
 
     countItems = async() :Promise<number> => {
-        const count = await this.admin.knex('items').count('*');
+        const count = await this.admin
+        .knex('items')
+        .count('*');
+        
         return <number>count[0]['count(*)']
     }
 
         if(this.initialized) return
         this.initialized = true        
         
-        const allItems = [...T1, ...T2]
+        const itemTiers = allItems
 
         const countCache = await this.countItems()
-        getLogger('ItemManager').debug('Checking items, got: ',countCache, 'expected: ', allItems.length)
 
-        if(countCache != allItems.length){
-            const items:Item[] = await Promise.all(allItems.map((i) => this.fetchItem(i)))
-            try{
-                await this.admin
-                .knex('items')
-                .insert(items)
-            }catch(e){
-                getLogger('ItemManager').debug("Skipping item insertion")
-            }
+        if(countCache != Object.values(itemTiers).flat().length){
+            await Promise.all(
+                Object.entries(itemTiers)
+                .map((kv) => Promise.all(
+                    kv[1].map(i => this.fetchItem(i)
+                        .then(item => this.admin
+                            .knex('items')
+                            .insert({
+                                tier: kv[0],
+                                ...item
+                            })
+                    ))
+                ))
+            )
         }
     }
 }

src/backend/Components/Raid/Interface.ts

-import { Raid, Signup, Character, RaidData } from "../../Types/Types"
+import { Raid, Signup, Character, RaidData, User, Spec } from "../../Types/Types"
 
 export class IRaidManager{
     getRaids: () => Promise<Raid[]>
     createRaid: (raid:Raid) => Promise<any>
     addSignup: (signup: Signup) => Promise<any>
     removeSignup: (signup: Signup) => Promise<any>    
-    getSignups: (raid:Raid) => Promise<Signup[]>
+    getSignups: (raid:Raid) => Promise<(Signup & Character & Spec & User)[]>
     sign: (userToken: string, character:Character, raid:Raid, late:boolean) => Promise<any>
     unsign: (userToken: string, character:Character, raid:Raid,) => Promise<any>
     archiveRaid: (raid:Raid) => Promise<RaidData>

src/backend/Components/Raid/RaidManager.ts

 import { Inject, Injectable } from "../../Injector/ServiceDecorator";
 import { RaidManagerIfc, RaidManagerFeatureIfc } from "./RPCInterface";
 import { FrontworkComponent } from "../../Types/FrontworkComponent";
-import { TableDefiniton, Signup, Raid, Character, RaidData, Spec, SRToken, Item } from "../../Types/Types";
+import { TableDefiniton, Signup, Raid, Character, RaidData, Spec, SRToken, Item, User } from "../../Types/Types";
 import { IAdmin } from "../../Admin/Interface";
 import { IRaidManager } from "./Interface";
 import { IUserManager } from "../User/Interface";
 import { ICharacterManager } from "../Character/Interface";
+import { _Tiers } from "../../Types/Items";
 
 @Injectable(IRaidManager)
 export class RaidManager
                     table.string('description').notNullable()
                     table.string('title').notNullable()
                     table.integer('size').defaultTo(40)
+                    table.enu('tier', _Tiers).defaultTo(null as any)
                 }
             },{
                 name: 'archive',
             },{
                 name: 'signups',
                 tableBuilder: (table) => {
-                    table.primary(['raidid', 'characterid'])
+                    table.increments('id').primary()
+                    table.unique(['raidid', 'characterid'])
                     table.integer('raidid')
                     table.foreign('raidid').references('id').inTable('raids').onDelete('CASCADE')
                     table.integer('characterid')
         raid_id: signup.raidid, 
         character_id: signup.characterid
     })
-    .delete()
+    .del()
 
     getRaids = async () : Promise<Raid[]> => {
 
 
     startRaid = async (raid:Raid) : Promise<RaidData> => {
         const archived = await this.archiveRaid(raid)
-
         delete archived.participants.late
 
         const giveCurrency = async (b: Character) => {
         .insert({
             id:raidData.id,
             raiddata: JSON.stringify(raidData)
-        })
-        
+        })       
+
+        await Promise.all(
+            Object.values(raidData.participants).flat().flatMap((signup) =>  this.admin
+                .knex('tokens')
+                .where({
+                    characterid: signup.characterid,
+                    signupid: null
+                })
+                .del()
+        ))
 
         await this.admin.knex('raids')
         .where('id', '=', raid.id)
     getRaidData = async (raid:Raid) : Promise<RaidData> => {
         const ret = {
             participants:{
-                Druid: <(Character&Spec)[]>[],
-                Hunter: <(Character&Spec)[]>[],
-                Mage: <(Character&Spec)[]>[],
-                Paladin: <(Character&Spec)[]>[],
-                Priest: <(Character&Spec)[]>[],
-                Rogue: <(Character&Spec)[]>[],
-                Shaman: <(Character&Spec)[]>[],
-                Warlock: <(Character&Spec)[]>[],
-                Warrior: <(Character&Spec)[]>[],
-                late: <(Character&Spec)[]>[],
-                bench: <(Character&Spec)[]>[],
+                Druid: <(Signup&Character&Spec)[]>[],
+                Hunter: <(Signup&Character&Spec)[]>[],
+                Mage: <(Signup&Character&Spec)[]>[],
+                Paladin: <(Signup&Character&Spec)[]>[],
+                Priest: <(Signup&Character&Spec)[]>[],
+                Rogue: <(Signup&Character&Spec)[]>[],
+                Shaman: <(Signup&Character&Spec)[]>[],
+                Warlock: <(Signup&Character&Spec)[]>[],
+                Warrior: <(Signup&Character&Spec)[]>[],
+                late: <(Signup&Character&Spec)[]>[],
+                bench: <(Signup&Character&Spec)[]>[],
             },
             tokens:{}
         }
         .where('id','=',raid.id)
         .first()
 
-        const characterData: (Character & Spec & Signup)[] = await this.admin
+        const characterData: (Signup & Character & Spec)[] = await this.admin
         .knex('signups as s')
-        .select('characterid as id', 'charactername', 'class', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid')
+        .select('s.id as id', 'charactername', 'class', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid')
         .join('raids as r', 's.raidid','=','r.id')
         .join('characters as c', 's.characterid','=','c.id')
         .join('users as u', 'c.userid','=','u.id')
 
         const tokenData: (Character & SRToken & Item)[] = await this.admin
         .knex('signups as s')
-        .select('*')
+        .select('*', 's.id as id')
         .join('raids as r', 's.raidid','=','r.id')
         .where('r.id','=',raid.id)
+        .andWhere(function(){
+            this.whereNotNull('t.signupid')
+        })
         .join('characters as c', 's.characterid','=','c.id')
         .join('tokens as t', 't.characterid','=','c.id')
-        .join('items as i', 'i.id','=','t.itemid')
+        .join('items as i', 'i.itemname','=','t.itemname')
 
         tokenData.forEach(data => {
             if(!ret.tokens[data.itemname])
         }
     }
     
-    getSignups = async (raid:Raid) : Promise<Signup[]> => await this.admin
-    .knex('signups')
+    getSignups = async (raid:Raid) : Promise<(Signup & Character & Spec & User)[]> => await this.admin
+    .knex('signups as si')
     .join('characters as c', 'c.id', '=', 'characterid')
     .join('specs as s', 's.id', '=', 'specid')
     .join('users as u', 'u.id', '=', 'userid')
-    .select('*')
+    .select('*','si.id as id')
     .where('raidid', '=', raid.id!)
     
     sign = async (usertoken:string, character:Character, raid:Raid, late:boolean) => {
                 late: late
             })
         }
+
+        return await this.admin
+        .knex('signups')
+        .select('*')
+        .where({
+            raidid: raid.id!,
+            characterid: character.id!,
+        })
+        .first()
     }
 
     unsign = async (usertoken:string, character:Character, raid:Raid) => {

src/backend/Components/User/UserManager.ts

     initialize = async () => {
         this.exporters = [this.guild, this.item, this.raid, this.character] 
         //set up permissions
-        getLogger('UserManager').debug('inserting permissions')
+        getLogger('UserManager').debug('setting up permissions')
 
         await Promise.all( 
             [this, ...this.exporters].flatMap(exp => exp.exportRPCFeatures().map(async (feature) => {
             try{
                 await this.admin.knex.insert({ rpcname: feature.name }).into('rpcpermissions')
             }catch(e){
-                getLogger('UserManager').debug(feature.name);
             }
         })))
 

src/backend/Types/Items.ts

+export type Tiers = "MC" | 'BWL' | 'ZG' | 'AQ20' | 'AQ40' | 'Naxx'
+export const _Tiers = ["MC", 'BWL', 'ZG', 'AQ20', 'AQ40', 'Naxx']
+
 export const T1 = [
 "Robe of Volatile Power",
 "Salamander Scale Pants",
 "Draconic Avenger",
 "Interlaced Shadow Jerkin",
 "Ringo's Blizzard Boots"
-]
+]
+
+export type AllItems = {
+    [tier in Tiers] : string[]
+}
+
+export const allItems : AllItems = {
+    MC: T1,
+    BWL: T2,
+    ZG:[],
+    AQ20: [],
+    AQ40: [],
+    Naxx: []
+}

src/backend/Types/Types.ts

 import { ItemManagerFeatureIfc, ItemManagerIfc } from "../Components/Item/RPCInterface";
 import { GuildManagerFeatureIfc, GuildManagerIfc } from "../Components/Guild/RPCInterface";
 import { ShoutboxIfc } from "../Components/Shoutbox/RPCInterface";
+import { Tiers } from "./Items";
 
 export type FrontcraftIfc = RaidManagerIfc
                           & UserManagerIfc
 
 export type RaidData = Raid & {
     participants: {
-        [clazz in Class] : (Character & Spec)[] 
+        [clazz in Class] : (Signup & Character & Spec)[] 
     } & {
-        late: (Character & Spec)[]
-        bench: (Character & Spec)[] 
+        late: (Signup & Character & Spec)[]
+        bench: (Signup & Character & Spec)[] 
     }
     tokens: {
         [itemname in string]: (Character & SRToken & Item)[]
 }
 
 export type SRToken = {
+    signupid?:number
     characterid: number,
-    itemid: number,
+    itemname: string,
     level: number
 }
 
     id?:number
     race?:Race
     specid?:number,
-    itemid?:number,
+    itemname?:string,
     description?:string,
     modifier:number
 }
 
 export type Item = {
-    id?:number
     itemname:string
     iconname:string
     url:string
     quality:string
     hidden:boolean
+    tier: Tiers
 }
 
 export type User = {
     start: string
     signupcount?: number
     size: number
+    tier: Tiers
 }
 
 export type Signup = {
+    id?:number
     raidid: number
     characterid: number
     benched: boolean

src/frontend/src/app/frontcraft/pages/character/character.component.html

 <nb-card 
 class = "col-12 col-xl-9"
 status="control">
-    <nb-card-header [ngStyle]="{'color': color}" style="text-transform: capitalize;">
-        {{char.charactername}}
+    <nb-card-header style="text-transform: capitalize;">
+        <h4>
+            <a *ngIf="link === 'character'" [ngStyle]="{'color': color}" [routerLink]="'/frontcraft/character/'+char.charactername">
+                {{char.charactername}}
+        </a>
+        </h4>
+        <h3>
+            <span [ngStyle]="{'color': color}" *ngIf="link !== 'character'">
+                {{char.charactername}}
+            </span>
+        </h3>
     </nb-card-header>
+
     <nb-card-body>
         {{char.race}}<br />
         {{char.specname}} {{char.class}}<br />
-        Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
+        <span *ngIf="link === 'owner'">
+            Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
+        </span>
         <br/><br />
         <span *ngFor="let token of tokens">
             [ {{token.level}} ]

src/frontend/src/app/frontcraft/pages/character/character.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApiService as ApiService } from '../../services/login-api';
 import { Spec, User, Character } from '../../../../../../backend/Types/Types';
 })
 export class FrontcraftCharacterComponent implements OnInit{
 
+    @Input() name?: string
+    @Input() link?: "owner" | "character" = 'owner'
+
     char : (Character & User & Spec) = {} as any
     color : string
     tokens
     ){}
 
     async ngOnInit(){
-      const param = this.route.snapshot.paramMap.get('name');
+      const param = this.name || this.route.snapshot.paramMap.get('name');
+      if(!param) return
+      
       this.api.get('CharacterManager')      
       .getCharacterByName(param)
       .then((char) => {

src/frontend/src/app/frontcraft/pages/characters/characters.component.html

     </nb-card-body>
 </nb-card>
 
-
-
-
 <nb-card class="col-12 col-xl-9">
     <nb-card-body>
         <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search" fullWidth="true" />

src/frontend/src/app/frontcraft/pages/pages.module.ts

 import { FrontcraftArchiveComponent } from './raid/archive.component';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { FrontcraftCharacerpickerComponent } from './raid/characterpicker.component';
-import { FrontcraftShopComponent, FrontcraftBuyTokenComponent } from './shop/shop.component';
+import { FrontcraftShopComponent } from './shop/shop.component';
 import { FrontcraftRulesComponent } from './rules/rules.component';
 import { FrontcraftItemSelectComponent } from './shop/itemselector.component';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { FrontcraftCharactersComponent } from './characters/characters.component';
+import { FrontcraftBuyTokenComponent } from './shop/buytoken.component';
 
 
 @NgModule({

src/frontend/src/app/frontcraft/pages/raid/raid.component.html

                                 </div>
                             </nb-card-body>
                         </nb-card>
-
                     </ng-container>
                 </div>
             </nb-tab>
+            <nb-tab tabTitle="Shop">
+                <shop (onSelect)="itemSelect($event)"></shop>
+            </nb-tab>
             <nb-tab tabTitle="Reserves">
                 <nb-list>
                     <nb-list-item *ngFor="let item of raid.tokens | keyvalue">
-                        
                         <a [ngStyle]="{'color':item.value[0].quality=='Epic'?'#a335ee':'#ff8000'}" 
                            target="_blank" 
                            [href]="item.value[0].url">

src/frontend/src/app/frontcraft/pages/raid/raid.component.ts

 import { NbWindowService, NbToastrService, NbDialogService } from '@nebular/theme';
 import { FrontcraftCharacerpickerComponent } from './characterpicker.component';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { FrontcraftBuyTokenComponent } from '../shop/buytoken.component';
 
 @Component({
   selector: 'raid',
       this.refresh()
     }
 
+    itemSelect = async(item) => {
+      this.dialogService.open(FrontcraftBuyTokenComponent, {
+        context: {
+          item: item,
+          signup: this.mySignup
+        }
+      }).onClose.subscribe(() => this.refresh())
+    }
+
     signup = async () => {
       const signupFeature = this.api.get('signup')
       if(!signupFeature) return
         closeOnBackdropClick: true,
         closeOnEsc: true,
         context: {
-          'raid': this.raid,
+          raid: this.raid,
         } 
       }).onClose.subscribe(()=>{
         this.refresh()
       const signupFeature = this.api.get('signup')
       if(!signupFeature) return
 
-      await signupFeature.unsign(this.api.getAuth().token.value, this.mySignup, this.raid)
+      await signupFeature.unsign(this.api.getAuth().token.value, <any>{id: this.mySignup.characterid, userid: this.mySignup.userid}, this.raid)
       this.toast.show('Success', 'Unsigned', { status: 'success' })
       this.refresh()
     }
       })
       const user = this.api.getCurrentUser()
       const matchingSignup = Object.values(raiddata.participants).flat().find(char => user && char.userid === user.id!)
-      if(matchingSignup){
+      if(matchingSignup){       
+
         this.isSignedup = true
         this.mySignup = matchingSignup
         this.mySignup.status = matchingSignup['benched']?'Bench':matchingSignup['late']?'Late':'Attending'

src/frontend/src/app/frontcraft/pages/rules/rules.component.html

             <nb-tab tabTitle="Info">
                 Smart text here
             </nb-tab>
-            <nb-tab *ngIf="managePriorities" tabTitle="priorities">
+            <nb-tab tabTitle="priorities">
                 <nb-list>
                     <nb-list-item *ngFor="let item of rules | keyvalue">
                         <a [ngStyle]="{'color':item.value[0].quality=='Epic'?'#a335ee':'#ff8000'}" 

src/frontend/src/app/frontcraft/pages/shop/buytoken.component.ts

+import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
+import { ApiService as ApiService } from '../../services/login-api';
+import { FrontcraftItemSelectComponent } from './itemselector.component';
+import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
+import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
+import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
+
+@Component({
+    selector: 'buyToken',
+    template: `
+    <nb-card class="col-12 col-xl-9">
+      <nb-card-header>
+        Buy {{item.itemname}}
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          You currently have {{currency}} softreserve currency
+        </p>  
+        <div *ngIf="currency>0">
+          <div *ngFor="let kv of modifier | keyvalue">
+            <button
+                (click)="buyToken(kv.key)"
+                [disabled]="currency<=0"
+                nbButton 
+                outline 
+                status="success" 
+                size="tiny">
+                buy
+            </button>
+            {{kv.key}} <span *ngIf="kv.value>0">(<b>+{{kv.value}}</b> from priorities)</span>
+          </div>
+          <div *ngFor="let token of ownedtokens">
+            <button
+                (click)="buyToken(token.charactername)"
+                nbButton 
+                outline 
+                status="success" 
+                size="tiny">
+                buy
+            </button>
+            {{token.charactername}} [ {{token.level}} ] => [ {{token.level+1}} ]
+          </div>
+        </div>
+      </nb-card-body>
+  </nb-card>
+    
+    `,
+  })
+  export class FrontcraftBuyTokenComponent implements OnInit{
+  
+    @Input() item : Item
+    @Input() signup : Signup
+
+    @Input() tier: Tiers
+
+    characters: Character[]
+    modifier = {}
+    currency: number = 0
+    ownedtokens: SRToken[] = []
+  
+    constructor(
+      private toastr: NbToastrService,
+      protected dialogRef: NbDialogRef<FrontcraftBuyTokenComponent>,
+      private api : ApiService
+    ){}
+  
+    ngOnInit(): void {
+        const usr = this.api.getCurrentUser()
+        this.api.get('CharacterManager')
+        .getCharactersOfUser(usr.username)
+        .then(chars => {
+            chars.forEach(char => {
+                char['color'] = getClassColor(char.class)
+                this.api.get('ItemManager').getToken(char, this.item).then(token => {
+                  if(token) this.ownedtokens.push(token)
+                  else{
+                    this.api.get('ItemManager').calculatePriorities(this.item.itemname, char).then(modifier => {
+                      this.modifier[char.charactername] = modifier
+                    })
+                  }
+                })
+            })
+            this.characters = chars
+        })
+        this.api.get('UserManager').getUser(usr.username).then(u => {
+          if(!u) return
+          this.currency = u.currency
+        })
+    }
+  
+    buyToken = async (charactername:string) => {
+
+    const src = this.api.get('ItemManager')
+    const token = await src.buyToken(this.api.getAuth().token.value, charactername, this.item.itemname, this.signup)
+  
+    if(token){
+      this.toastr.show(token.characterid+' now has a token for '+token.itemname+' of level '+token.level, 'Yay', {status: 'success'})
+    }else{
+      this.toastr.show('Error (something went wrong)', 'Oh no', {status: 'danger'})
+    }
+    this.dialogRef.close()
+    }
+  }

src/frontend/src/app/frontcraft/pages/shop/itemselector.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { ApiService } from '../../services/login-api';
 import { Item } from '../../../../../../backend/Types/Types';
 
 
     selected: Item
     search: string
-    items: any[] 
+    allItems:Item[] = []
     displayedItems: any[]
 
-    callbacks = []
+    @Input() items: string[]
+    @Output() onSelect = new EventEmitter<Item>();
 
     constructor(
       private api: ApiService,
     }
 
     async ngOnInit(){
-        this.api.get('ItemManager').getItems().then(items => {
-            this.items = items
-            this.displayedItems = items
+        Promise.all(this.items.map(itemname => 
+            this.api.get('ItemManager').getItem(itemname)
+        )).then(items => {
+            this.allItems = items
+            this.displayedItems = this.allItems
         })
     }
 
     changeSearch(){
         if(!this.search || this.search == "") 
-            this.displayedItems = this.items
+            this.displayedItems = this.allItems
         else
-            this.displayedItems = this.items.filter(it => it.itemname.toLowerCase().includes(this.search.toLowerCase()))
+            this.displayedItems = this.allItems.filter(it => it.itemname.toLowerCase().includes(this.search.toLowerCase()))
     }
 
     select(item: Item){
-        this.selected = item
-        this.callbacks.forEach(cb => cb(item))
+        this.onSelect.emit(item)
     }
 
-    onselect(callback:Function){
-        this.callbacks.push(callback)
-    }
 }

src/frontend/src/app/frontcraft/pages/shop/shop.component.html

+<h3>
+    {{tier}} items
+</h3>
 
-<nb-card class="col-12 col-xl-9">
-    <nb-card-body>
-        <nb-tabset>
-            <nb-tab tabTitle="Items">
-                <itemselect></itemselect>
-            </nb-tab>
-            <nb-tab tabTitle="About">
-            </nb-tab>
-        </nb-tabset>
-    </nb-card-body>
-</nb-card>
-
+<itemselect             
+[items]="allItems[tier]"
+(onSelect)="onSelect.emit($event)"></itemselect>

src/frontend/src/app/frontcraft/pages/shop/shop.component.ts

-import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
 import { ApiService as ApiService } from '../../services/login-api';
 import { FrontcraftItemSelectComponent } from './itemselector.component';
 import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
-import { Item, Character, SRToken } from '../../../../../../backend/Types/Types';
+import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
 import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
+import { _Tiers, allItems } from '../../../../../../backend/Types/Items';
 
 @Component({
   selector: 'shop',
   templateUrl: './shop.component.html',
 })
-export class FrontcraftShopComponent implements AfterViewInit{
+export class FrontcraftShopComponent{
 
-    @ViewChild(FrontcraftItemSelectComponent, {static: false})
-    itemselect !: FrontcraftItemSelectComponent
+    @Input() character: Character
+    @Input() signup: Signup
+
+    @Input() tier = _Tiers[0]
+    @Output() onSelect = new EventEmitter<Item>()
+    allItems = allItems
 
     constructor(
       private api: ApiService,
       private dialogService : NbDialogService
-
-    ){
-      window['shop'] = this
-    }
-
-    buy = (item) => {
-      
-      this.dialogService.open(FrontcraftBuyTokenComponent, { 
-        closeOnBackdropClick: true,
-        closeOnEsc: true,
-        context: {
-          item: item
-        } 
-      }).onClose.subscribe(()=>{
-      });
-  
-    }
-
-    ngAfterViewInit(){
-      this.itemselect.onselect(this.buy)
-    }
+    ){}
 }
 
 @Component({

src/frontend/src/app/frontcraft/pages/user/user.component.html

     </nb-card-header>
     <nb-card-body>
         {{user.currency}}
-      <nb-card
-      accent="control"
-      *ngFor="let char of characters">
-          <nb-card-header>
-              <h4>
-                  <a [ngStyle]="{'color': char.color}" style="text-transform: capitalize;" [routerLink]="'/frontcraft/character/'+char.charactername">
-                      {{char.charactername}}
-                  </a>
-              </h4>
-          </nb-card-header>
-          <nb-card-body>
-            {{char.race}}<br />
-            {{char.specname}} {{char.class}}
-            <br />
-            <br />
-            <span *ngFor="let token of char.tokens">
-                [ {{token.level}} ]
-                <a [ngStyle]="{'color':token.quality=='Epic'?'#a335ee':'#ff8000'}" 
-                target="_blank" 
-                [href]="token.url">
-                <img style="min-width: 25px; width: 2.25vw; max-width: 50px" 
-                [src]="'https://wow.zamimg.com/images/wow/icons/large/'+token.iconname+'.jpg'" />
-                {{token.itemname}}
-                </a><br />
-            </span>
-          </nb-card-body>
-      </nb-card>
+      <ng-container *ngFor="let char of characters">
+          <character [name]="char.charactername" [link]="'character'"></character>
+      </ng-container>
     </nb-card-body>
 </nb-card>

src/frontend/src/app/frontcraft/services/login-api.ts

     }
 }
 
-function str2arraybuf(str:string): ArrayBuffer {
-    return new Buffer(str)
-  }
-  
-function buf2hex(buffer: ArrayBuffer) {
-    return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
-}
-
 export async function hash(value:string) : Promise<string>{
     return saltedHash(value, "")
 }

test/backendTest.ts

 import { T1 } from "../src/backend/Types/Items";
 
 import { RPCSocket } from "rpclibrary";
-import { FrontcraftIfc, Auth, User, FrontcraftFeatureIfc, Raid, Character, Rank, Class, Race, SRPriority, Spec } from "../src/backend/Types/Types";
+import { FrontcraftIfc, Auth, User, FrontcraftFeatureIfc, Raid, Character, Rank, Class, Race, SRPriority, Spec, Signup } from "../src/backend/Types/Types";
 import { SpecT } from "../src/backend/Types/PlayerSpecs";
 
 
         client : RPCSocket & FrontcraftIfc,
         adminClient : RPCSocket & FrontcraftFeatureIfc,
         raids: Raid[] = [],
-        users : {[username in string] : { account: User, character: Character, auth: Auth, item?:string }} = {}
+        users : {[username in string] : { account: User, character: Character, auth: Auth, signup?:Signup, item?:string }} = {}
 
     const createAccount = (user: User) => {
         return client.UserManager.createUser(user)
             adminClient.signup.sign(user.auth.token.value, user.character, raids[0], false).catch(done)
         )).then(x => {
             adminClient.signup.getSignups(raids[0]).then(s => {
-                if(s.length == testAccounts.length)
+                if(s.length == testAccounts.length){
+                    s.forEach(sign => {
+                        users[sign.username].signup = sign
+                    })
                     done()
-                else{
+                }else{
                     done("Unexpected number of signups: "+s.length)
                 }
             })
             const itemname = T1[0]//T1[Math.floor(T1.length*Math.random())]
             const modifier = await client.ItemManager.calculatePriorities(itemname, user.character)
 
-            const token = await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname)
+            const token = await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname, user.signup!)
             users[user.account.username].item = itemname
             
             if(!token) return false
     it('not buy token without currency', (done)=>{
         const user = Object.values(users)[0]
         const itemname = T1[0]
-        client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname).then(token => {
+        client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname, user.signup!).then(token => {
             if(!token) 
                 done()
             else {
             const item = await client.ItemManager.getItem(itemname)
             const before = await client.ItemManager.getToken(user.character, item)
             
-            if(!before || before.level !== 7) return
+            if(!before || before.level !== 7) {
+                console.log("expected level to be 7", before);
+                return
+            }
             
-            await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname)
-            const after = await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname)
+            await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname, user.signup!)
+            const after = await client.ItemManager.buyToken(user.auth.token.value, user.character.charactername, itemname, user.signup!)
 
-            if(!after || after.level !== 9) return
+            if(!after || after.level !== 9) {
+                console.log("expected level to be 9", after);
+                return
+            }
             done()
         })
     })
     it('should buy more tokens', (done) => {
         Promise.all(Object.values(users).map(async (user) => {
             await adminClient.softreserveCurrency.incrementCurrency(user.account, 1)
-            await client.ItemManager
+            return await client.ItemManager
             .buyToken(
                 user.auth.token.value, 
                 user.character.charactername, 
-                T1[Math.floor(T1.length*Math.random())]
+                T1[Math.floor(T1.length*Math.random())],
+                user.signup!
             )
         })).then(_ => {
             done()