Battlerite hero selector

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>Battlerite Hero Randomizer</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="battlerite.build.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/core-js@2.5.7/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.26?main=browser"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */
p.herolist {
  width: 450px;
}
button {
  height: 3em;
  min-width: 9em;
}
button.primary {
  background-color: green;
  color: white;
}
/* oma lisays */
.pick-mode .champ-icon:not(.picked) {
  filter: grayscale(1);
}
.select-mode .champ-icon:not(.selected) {
  filter: grayscale(1);
}
.pick-mode .champ-icon.picked {
  border: 1px solid greenyellow;
}
.select-mode .champ-icon.selected {
  border: 1px solid red;
}
.app-main {
  margin-left: 2em;
  margin-top: 1em;
  width: 470px;
}
.app-header {
  text-align: center;
}
.app-header h2 {
  display: inline-block;
  text-align: center;
}
.title-container {
  width: 308px;
  height: 88px;
  overflow: hidden;
  text-align: center;
}
.battlerite-logo {
  top: -80px;
  left: -427px;
  position: relative;
  transform: scale(0.5, 0.5);
}
.battlerite-royale-logo {
  top: -1114px;
  left: -1273px;
  position: relative;
  transform: scale(0.1, 0.1);
}

### Battlerite Hero Randomizer

Quick hero randomizer made for [Battlerite](https://www.battlerite.com/).

Made with Plnkr and Angular.

var angularVersion = '@6.0.7';

System.config({
  transpiler: 'ts',
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  meta: {
  'typescript': {
		"exports": "ts"
	  }
	},
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    
    'tslib': 'npm:tslib@1.9.3',
    'rxjs':                      'npm:rxjs@6.2.1',
    'rxjs-compat':               'npm:rxjs-compat@6.2.1',
    'ts':                        'npm:plugin-typescript@8.0.0/lib/plugin.js',
    'typescript':                'npm:typescript@2.9.2/lib/typescript.js',
    '@types/jquery': 'npm:@types/jquery',

  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
        main: 'index.js',
        defaultExtension: 'js'
    },
    "rxjs/operators": {
        main: 'index.js',
        defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule, VERSION, Inject} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms'

import {HeroService, Hero, MELEE, RANGED, SUPPORT} from './hero.service';

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.html',
})
export class App {
  public herolist:Array<Hero>;
  public selectMode:boolean = false;
  public allowRepeat:boolean = false;
  public gamemode: string;
  private pickTimestamp:Date = null;

  constructor(private heroService:HeroService) {
    this.setGameMode('arena');
  }
  pickHero() {
    this.selectMode = false;
    // get list of picked heroes and reset pick
    let pickedHeroes:Array<Hero> = this.herolist.filter(hero => hero.picked);
    pickedHeroes.forEach(hero => hero.picked = false);
    // make list to pick from
    let picklist = this.herolist;
    // if repeat disallowed, remove previous pick
    if (!this.allowRepeat) {
      picklist = picklist.filter(hero => !pickedHeroes.includes(hero));
    }
    // if there are selections, pick only from those heroes
    if (picklist.some(hero => hero.selected)) {
      picklist = picklist.filter(hero => hero.selected);
    }
    // pick a random hero from picklist
    let pickedHero = picklist[Math.floor(Math.random()*picklist.length)];
    pickedHero.picked = true;
    this.pickTimestamp = new Date();
  }
  selectHero(hero:Hero) {
    this.selectMode = true;
    hero.selected = !hero.selected;
  }
  resetSelections() {
    this.herolist.forEach(hero => hero.selected = false);
  }
  selectRole(role:number) {
    this.selectMode = true;
    this.herolist.filter(hero => hero.role == role)
      .forEach(hero => hero.selected = true);
  }
  selectMelee() {
    this.selectRole(MELEE);
  }
  selectRanged() {
    this.selectRole(RANGED);
  }
  selectSupport() {
    this.selectRole(SUPPORT);
  }
  getHeroClass(hero):string{
    if (hero.role === MELEE) {
      return 'champ-icon-melee';
    } else if (hero.role === RANGED) {
      return 'champ-icon-ranged';
    } else if (hero.role === SUPPORT) {
      return 'champ-icon-support';
    }
      
  }
  getText():string{
    let picks = this.herolist.filter(hero => hero.picked);
    if (picks.length) {
      return 'You have chosen: ' + picks[0].name + ', ' + picks[0].title + ' ('
        + this.pickTimestamp.toLocaleTimeString() + ')';
    }
    return 'Press Pick a hero to select your champion!';
  }
  setGameMode(gamemode: string): void {
    console.log('gamemode selected', gamemode)
    this.gamemode = gamemode;
    this.heroService.initHeroList(this.gamemode === 'royale');
    this.herolist = this.heroService.getHeroList();
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  providers: [HeroService],
  bootstrap: [ App ]
})
export class AppModule {}

import { Injectable } from '@angular/core';

export const MELEE = 1;
export const RANGED = 2;
export const SUPPORT = 3;

export class Hero {
  public picked:boolean = false;
  public selected:boolean = false;
  constructor(public id:string, public name:string, public title:string, public role:number) {
    // empty
  }
}

@Injectable()
export class HeroService {
  private herolist:Array<Hero> = [];
  constructor() {
  }
  initHeroList(isRoyale: boolean) {
    this.herolist = [];
    this.herolist.push(new Hero("rook", "Rook", "The Hungering Berserker", MELEE));
    this.herolist.push(new Hero("ruh-kaan", "Ruh Kaan", "The Crypt Warden", MELEE));
    this.herolist.push(new Hero("shifu", "Shifu", "The Spear", MELEE));
    this.herolist.push(new Hero("bakko", "Bakko", "Hero of Boulder Pass", MELEE));
    this.herolist.push(new Hero("raigon", "Raigon", "The Exiled Prince", MELEE));
    this.herolist.push(new Hero("freya", "Freya", "The Eye of the Storm", MELEE));
    this.herolist.push(new Hero("croak", "Croak", "The Ranid Assassin", MELEE));
    this.herolist.push(new Hero("jamila", "Jamila", "The Shadowblade Assassin", MELEE));
    this.herolist.push(new Hero("thorn", "Thorn", "The Twisted Terror", MELEE));
    this.herolist.push(new Hero("jade", "Jade", "The Lone Gunner", RANGED));
    this.herolist.push(new Hero("ashka", "Ashka", "The Molten Fury", RANGED));
    this.herolist.push(new Hero("varesh", "Varesh", "The Eternal", RANGED));
    this.herolist.push(new Hero("ezmo", "Ezmo", "The Mischievous", RANGED));
    this.herolist.push(new Hero("jumong", "Jumong", "The Beast Hunter", RANGED));
    this.herolist.push(new Hero("taya", "Taya", "The Wind of the West", RANGED));
    this.herolist.push(new Hero("destiny", "Destiny", "The Sky Ranger", RANGED));
    this.herolist.push(new Hero("alysia", "Alysia", "The Ice Weaver", RANGED));
    this.herolist.push(new Hero("iva", "Iva", "The Scavenging Inventor", RANGED));
    this.herolist.push(new Hero("shenrao", "Shen Rao", "Tempest of the East", RANGED));
    this.herolist.push(new Hero("lucie", "Lucie", "The Expelled Alchemist", SUPPORT));
    this.herolist.push(new Hero("sirius", "Sirius", "The Zenith", SUPPORT));
    this.herolist.push(new Hero("poloma", "Poloma", "The Psychopomp", SUPPORT));
    this.herolist.push(new Hero("blossom", "Blossom", "The Forest Mender", SUPPORT));
    this.herolist.push(new Hero("pestilus", "Pestilus", "Lord of the Swarm", SUPPORT));
    this.herolist.push(new Hero("oldur", "Oldur", "The Time Mender", SUPPORT));
    this.herolist.push(new Hero("zander", "Zander", "The Magnificent Magician", SUPPORT));
    this.herolist.push(new Hero("ulric", "Ulric", "The Unwavering Light", SUPPORT));
    this.herolist.push(new Hero("pearl", "Pearl", "The Ocean Sage", SUPPORT));
    if (isRoyale) {
      let royaleHeros: string[] = [];
      this.herolist = this.herolist.filter(hero => royaleHeros.indexOf(hero.id) === -1);
    }
  }
  getHeroList() : Array<Hero> {
    return this.herolist;
  }
}

<div class="app-main">
  <div class="app-header">
    <h2>
      <div class="title-container">
        <img *ngIf="gamemode === 'arena'" src="https://cdn.battlerite.com/press/2017/05/10151121/header.png" class="battlerite-logo" />
        <img *ngIf="gamemode === 'royale'" 
          src="https://cdn.battlerite.com/www3/images/static/logos/Battlerite_Royale_logo_highres.png"
          class="battlerite-royale-logo" />
      </div>
      Hero Randomizer
    </h2>
  </div>
  <div class="app-content">
    <p>
      <input type="radio" id="gamemodeArena" name="gamemode" [ngModel]="gamemode" (ngModelChange)="setGameMode($event)" value="arena">
      <label for="gamemodeArena">Arena</label>
      &nbsp;
      <input type="radio" id="gamemodeRoyale" name="gamemode" [ngModel]="gamemode" (ngModelChange)="setGameMode($event)" value="royale">
      <label for="gamemodeRoyale">Royale</label>
    </p>
    <p>{{getText()}}</p>
    <p class="herolist" [ngClass]="{'select-mode': selectMode, 'pick-mode': !selectMode}">
      <a *ngFor="let hero of herolist"
        title="{{hero.name}}, {{hero.title}}" class="champ-icon {{getHeroClass(hero)}} {{hero.id}}"
        [ngClass]="{picked: hero.picked, selected: hero.selected}"
        (click)="selectHero(hero)">&nbsp;
      </a>
    </p>
    <p>
      <button (click)="pickHero()" class="primary">Pick a hero</button>
      &nbsp;
      <label for="allowRepeat">
        <input id="allowRepeat" type="checkbox" [(ngModel)]="allowRepeat" />
        Allow repeat picks
      </label>
    </p>
    <p>
      <button (click)="selectMode = true">Select heroes</button>
      <button (click)="resetSelections()">Reset selections</button>
    </p>
    <p>
      <button (click)="selectMelee()">Melee</button>
      <button (click)="selectRanged()">Ranged</button>
      <button (click)="selectSupport()">Support</button>
    </p>
  </div>
</div>

/*<a href="https://imgbb.com/"><img src="https://image.ibb.co/ew2bEn/melee.png" alt="melee" border="0"></a>
<a href="https://imgbb.com/"><img src="https://image.ibb.co/exou0S/ranged.png" alt="ranged" border="0"></a>
<a href="https://imgbb.com/"><img src="https://image.ibb.co/ha3GEn/support.png" alt="support" border="0"></a><br /><a target='_blank' href='https://imgbb.com/'>how do you upload a photo</a><br />*/
/* new battlerite royale
<a href="https://imgbb.com/"><img src="https://image.ibb.co/efFdU9/melee.png" alt="melee" border="0"></a>
<a href="https://imgbb.com/"><img src="https://image.ibb.co/n9ju2U/ranged.png" alt="ranged" border="0"></a>
<a href="https://imgbb.com/"><img src="https://image.ibb.co/k7p599/support.png" alt="support" border="0"></a>
*/
.champ-icon{
    margin: 3px;
    display: inline-block;
    width:96px;
    height:49px;
    position: relative;
    border: 1px solid black;
}
.champ-icon-melee {
    background-image: url('https://image.ibb.co/efFdU9/melee.png');
}
.champ-icon-ranged {
    background-image: url('https://i.ibb.co/mFnbNZ7/ranged.png');
}
.champ-icon-support {
    background-image: url('https://image.ibb.co/k7p599/support.png');
}
.champ-icon:hover, .champ-icon:focus{
    text-decoration: none;
}
.champ-icon:hover:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width:96px;
    height:49px;
    opacity: .4;
    background-color: yellow;
}
.champ-icon.active:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width:96px;
    height:49px;
    opacity: .4;
    background-color: green;
}

/* champ_icons melee */
.champ-icon.rook{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.ruh-kaan{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.shifu{
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.bakko{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.raigon{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.freya{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.croak {
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.jamila{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.thorn{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*2);
}
/* champ_icons ranged */
.champ-icon.alysia{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.ashka{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.destiny{
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.ezmo{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.iva{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.jade{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.jumong{
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.shenrao{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.taya{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*2);
}
.champ-icon.varesh{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*2);
}
/* champ_icons support */
.champ-icon.lucie{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.sirius{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.poloma{
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.blossom{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*0);
}
.champ-icon.pestilus{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.oldur{
    background-position-x: calc(-2px + (-115px)*1);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.zander{
    background-position-x: calc(-2px + (-115px)*2);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.ulric{
    background-position-x: calc(-2px + (-115px)*3);
    background-position-y: calc(-2px + (-65px)*1);
}
.champ-icon.pearl{
    background-position-x: calc(-2px + (-115px)*0);
    background-position-y: calc(-2px + (-65px)*2);
}