559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { Response } from '@angular/http';
import { Subscription } from 'rxjs/Rx';

import { SoundControlComponent } from '../../../../shared/components/sound-control/sound-control.component';
import { DomService } from '../../../../shared/services/utility/dom.service';
import { NotificationService } from '../../../../shared/services/utility/notification.service';
import { SocketService } from '../../../../shared/services/utility/socket.service';
import { Config } from './../../../../config';
import { LoginService } from './../../../../shared/services/api/login.service';
import { RouletteService } from './../../../../shared/services/api/roulette.service';
import { ModalService } from './../../../../shared/services/utility/modal.service';
import { RouletteRollModalComponent } from './../../../modals/roulette-roll-modal/roulette-roll-modal.component';

@Component({
  selector: 'roulette',
  templateUrl: './roulette.component.html',
  styleUrls: ['./roulette.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('flyInOut', [
      state('in', style({ transform: 'translateY(0)' })),
      transition('void => *', [
        animate(200, keyframes([
          style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
          style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 })
        ]))
      ]),
      transition('* => void', [
        animate(200, keyframes([
          style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
          style({ opacity: 0, transform: 'translateY(100%)', offset: 1.0 })
        ]))
      ])
    ])
  ]
})
export class RouletteComponent {

  private animationsEnabled: boolean = true;
  private sortingEnabled: boolean = true;

  @ViewChild('soundSpin') soundSpin: SoundControlComponent;
  @ViewChild('soundTone') soundTone: SoundControlComponent;
  _sound: boolean = true;
  get sound(): boolean {
    return this._sound;
  }
  set sound(value: boolean) {
    this._sound = value;
    if (value) {
      this.soundSpin.unmute();
      this.soundTone.unmute();
    } else {
      this.soundSpin.mute();
      this.soundTone.mute();
    }
  }

  loggedUser: csgobounty.IUser;
  rollingIn: number = 20;
  progress: number = 2000;

  bet: number = 0.01;
  minBet: number = 0.01;
  lastBet: number = 0.01;

  myBet: boolean = true;
  myBetAmountRed: number = 0;
  myBetAmountBlack: number = 0;
  myBetAmountGreen: number = 0;

  state: string = 'ready';
  inProgress: boolean = true;
  ignoreResult: boolean = false;

  lastResults: csgobounty.IRouletteRoll[] = [];

  rouletteNumbers: csgobounty.IRouletteNumber[] = Config.rouletteNumbers;

  rouletteNumbersToAnimate: csgobounty.IRouletteNumber[] = [];

  players: csgobounty.IRoulettePlayers;
  redHighestPlayer: csgobounty.IRouletteBet;
  blackHighestPlayer: csgobounty.IRouletteBet;
  greenHighestPlayer: csgobounty.IRouletteBet;

  private onRouletteGameSubscription: Subscription;
  private onRoulettePlayerSubscription: Subscription;
  private onRouletteResultSubscription: Subscription;

  private rollingIntervalHandle: number;

  private windowOptimizedResizeListener: () => void;

  constructor(
    private socketService: SocketService,
    private rouletteService: RouletteService,
    private modalService: ModalService,
    private loginService: LoginService,
    private notificationService: NotificationService,
    private domService: DomService,
    private elementRef: ElementRef
  ) { }

  ngOnInit() {
    this.loggedUser = this.loginService.loggedUser;
    this.windowOptimizedResizeListener = this.onResize.bind(this);

    this.resetGame();

    [0, 1, 2, 3, 4, 5, 6].forEach(n => {
      this.rouletteNumbersToAnimate.push.apply(this.rouletteNumbersToAnimate, this.rouletteNumbers);
    });

    this.onRouletteGameSubscription = this.socketService.onRouletteGame.subscribe((preGame: csgobounty.IRoulettePreGame) => {
      this.onRouletteGame(preGame);
    });
    this.onRoulettePlayerSubscription = this.socketService.onRoulettePlayer.subscribe((player: csgobounty.IRoulettePlayer) => {
      this.onRoulettePlayer(player);
    });
    this.onRouletteResultSubscription = this.socketService.onRouletteResult.subscribe((result: csgobounty.IRouletteResult) => {
      this.onRouletteResult(result);
    });

    this.sound = this.loginService.soundPreference;
    this.rouletteService.getState().subscribe((state: csgobounty.IRouletteState) => {
      let startDate = new Date(state.startDate);
      let timeObject = new Date();
      let timeDiff = startDate.getTime() - timeObject.getTime();
      timeDiff = Big(timeDiff).times(-1).div(1000).toFixed(4);

      if (timeDiff <= 20) {
        this.inProgress = false;
        this.rollingIn = Big(20).minus(timeDiff).toFixed(0);

        this.domService.addClass('.bar', 'no-transition', this.elementRef.nativeElement);
        let width = (this.rollingIn * 5) - 5;
        this.domService.setCss('.bar', { width: width + '%' }, this.elementRef.nativeElement);

        setTimeout(() => {
          this.domService.setCss('.bar', { transition: 'width ' + this.rollingIn + 's linear' }, this.elementRef.nativeElement);
          this.domService.removeClass('.bar', 'no-transition', this.elementRef.nativeElement);
          this.domService.setCss('.bar', { width: '0%' }, this.elementRef.nativeElement);
        }, 1000);
      }

      if (state.roll && timeDiff > 20) {
        this.ignoreResult = true;
        this.rollingIn = 0;
        let baseTime = timeDiff - 21;
        let scrollTime = (6 - baseTime) * 1000;
        this.spinRoulette(state.roll.number.val, scrollTime);

        setTimeout(() => {
          if (this.lastResults.length == Config.maxRouletteResultsShown) {
            this.lastResults.pop();
          }
          this.lastResults.unshift(state.roll);
          let winColor = state.roll.number.color;
          this.updatePlayersResults(winColor);

          let winMultiplier = 2;
          if (winColor == 'green') winMultiplier = 14;

          if (this.myBet) {
            let myWinningBet = null;
            if (winColor == 'red') myWinningBet = this.myBetAmountRed;
            if (winColor == 'black') myWinningBet = this.myBetAmountBlack;
            if (winColor == 'green') myWinningBet = this.myBetAmountGreen;

            let profit = new Big(myWinningBet).times(winMultiplier).toFixed(2);
            this.updateBalance(profit);
            // $rootScope.$broadcast('user:balance', (profit));
          }
          this.ignoreResult = false;
        }, scrollTime);
      }

      this.handleRedPlayers(state.red);
      this.handleGreenPlayers(state.green);
      this.handleBlackPlayers(state.black);

      for (let roll of state.rolls.reverse()) {
        let numberRolled = this.rouletteNumbers.filter((rouletteNumber: csgobounty.IRouletteNumber) => {
          return rouletteNumber.val == roll.roll;
        })[0];
        let objRoll = { number: numberRolled, rollId: roll.id, hash: roll.hash };
        this.lastResults.unshift(objRoll);
      }

      this.rollingIntervalHandle = window.setInterval(() => {
        if (this.rollingIn > 0) this.rollingIn--;
      }, 1000);

      if (!this.gameIsActive() && !this.inProgress) this.resetToLastDrawn();
      this.handleFutureResizeEvents();
    });
  }

  ngOnDestroy() {
    window.clearInterval(this.rollingIntervalHandle);
    this.onRouletteGameSubscription.unsubscribe();
    this.onRoulettePlayerSubscription.unsubscribe();
    this.onRouletteResultSubscription.unsubscribe();
    window.removeEventListener('resize', this.onWindowResize);
    window.removeEventListener('optimizedResize', this.windowOptimizedResizeListener);
  }

  updateBalance(diff: number) {
    console.log(diff);
    let newBalance = +this.loggedUser.balance + diff;
    console.log(`${this.loggedUser.balance} => ${diff} => ${newBalance}`);
    this.loggedUser.balance = newBalance.toFixed(2);
    this.notificationService.notifyBalanceUpdated(newBalance);
  }

  join(color: string) {
    this.rouletteService.join(color, this.bet).subscribe(
      (player: csgobounty.IRoulettePlayer) => {
        this.lastBet = this.bet;
        // $rootScope.$broadcast('user:balance', (data.bet.current * -1));
        this.updateBalance(-this.bet);
        this.myBet = true;
        if (player.team.color == 'red') {
          this.myBetAmountRed = +player.bet.total;
        }
        if (player.team.color == 'black') {
          this.myBetAmountBlack = +player.bet.total;
        }
        if (player.team.color == 'green') {
          this.myBetAmountGreen = +player.bet.total;
        }
      },
      (response: Response) => {
        // TODO should we display errors - if yes where on page
        console.log(response.text());
      });
  }

  gameIsActive() {
    return this.state != 'ready' && this.state != 'won' && this.state != 'lost' && this.state != 'done' && this.state != 'error';
  }

  onBetChange() {
    if (isNaN(this.bet) || !this.bet || this.bet == 0) return;

    if (this.bet < this.minBet) {
      this.bet = this.minBet;
    }

    if (+this.loggedUser.balance <= +this.bet) {
      this.bet = parseFloat(this.loggedUser.balance);
    }
  }

  clear() {
    this.bet = 0;
  }

  addBet(bet: number) {
    if (this.gameIsActive()) return;
    this.bet = new Big(this.bet).add(bet).toFixed(2);
  }

  maxBet() {
    if (this.gameIsActive()) return;
    this.bet = new Big(this.loggedUser.balance).toFixed(2);
  }

  halfBet() {
    if (this.gameIsActive()) return;
    this.bet = new Big(this.bet).div(2).toFixed(2);
  }

  doubleBet() {
    if (this.gameIsActive()) return;
    this.bet = new Big(this.bet).times(2).toFixed(2);
  }

  getLastBet() {
    if (this.gameIsActive()) return;
    this.bet = new Big(this.lastBet).toFixed(2);
  }

  resetGame() {
    this.players = {
      red: { bets: [], stats: { players: 0, total: 0 } },
      green: { bets: [], stats: { players: 0, total: 0 } },
      black: { bets: [], stats: { players: 0, total: 0 } }
    };

    this.redHighestPlayer = undefined;
    this.blackHighestPlayer = undefined;
    this.greenHighestPlayer = undefined;

    this.myBetAmountRed = 0;
    this.myBetAmountBlack = 0;
    this.myBetAmountGreen = 0;
    this.myBet = false;
    this.rollingIn = 20;
    this.progress = 2000;
    this.inProgress = false;
    setTimeout(() => {
      this.inProgress = true;
    }, 20000);

  }

  onRouletteGame(preGame: csgobounty.IRoulettePreGame) {
    this.resetGame();
    this.domService.setCss('.bar', { transition: 'width 20s linear' }, this.elementRef.nativeElement);
    this.domService.removeClass('.bar', 'no-transition', this.elementRef.nativeElement);
    this.domService.setCss('.bar', { width: '0%' }, this.elementRef.nativeElement);
  }

  onRoulettePlayer(player: csgobounty.IRoulettePlayer) {
    let user = player.user;
    let color = player.team.color;

    if (color == 'red') {

      let userBet = this.players.red.bets.filter((bet: csgobounty.IRouletteBet) => {
        return bet.userId == player.user.id;
      })[0];

      // user update
      if (userBet) {
        userBet.bet = Big(userBet.bet).add(player.bet.current).toFixed(2);
      } else {
        userBet = { bet: +player.bet.current, username: user.username, avatar: user.avatar, userId: user.id };
        this.players.red.bets.push(userBet);
        this.sortBetList(this.players.red.bets);
        if (this.players.red.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.red.bets.pop();
        }
      }

      // highest check
      if (this.redHighestPlayer && this.redHighestPlayer.bet > 0) {
        if (Math.round(userBet.bet * 100) > Math.round(this.redHighestPlayer.bet * 100)) {
          this.redHighestPlayer = userBet;
        }
      } else {
        this.redHighestPlayer = userBet;
      }

      // total update
      this.players.red.stats.total = Big(this.players.red.stats.total).add(player.bet.current).toFixed(2);
      this.players.red.stats.players++;

    } else if (color == 'black') {

      let userBet = this.players.black.bets.filter((bet: csgobounty.IRouletteBet) => {
        return bet.userId == player.user.id;
      })[0];

      // user update
      if (userBet) {
        userBet.bet = Big(userBet.bet).add(player.bet.current).toFixed(2);
      } else {
        userBet = { bet: +player.bet.current, username: user.username, avatar: user.avatar, userId: user.id };
        this.players.black.bets.push(userBet);
        this.sortBetList(this.players.black.bets);
        if (this.players.black.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.black.bets.pop();
        }
      }

      // highest check
      if (this.blackHighestPlayer && this.blackHighestPlayer.bet > 0) {
        if (Math.round(userBet.bet * 100) > Math.round(this.blackHighestPlayer.bet * 100)) {
          this.blackHighestPlayer = userBet;
        }
      } else {
        this.blackHighestPlayer = userBet;
      }

      // total update
      this.players.black.stats.total = Big(this.players.black.stats.total).add(player.bet.current).toFixed(2);
      this.players.black.stats.players++;

    } else if (color == 'green') {

      let userBet = this.players.green.bets.filter((bet: csgobounty.IRouletteBet) => {
        return bet.userId == player.user.id;
      })[0];

      // user update
      if (userBet) {
        userBet.bet = Big(userBet.bet).add(player.bet.current).toFixed(2);
      } else {
        userBet = { bet: +player.bet.current, username: user.username, avatar: user.avatar, userId: user.id };
        this.players.green.bets.push(userBet);
        this.sortBetList(this.players.green.bets);
        if (this.players.green.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.green.bets.pop();
        }
      }

      // highest check
      if (this.greenHighestPlayer && this.greenHighestPlayer.bet > 0) {
        if (Math.round(userBet.bet * 100) > Math.round(this.greenHighestPlayer.bet * 100)) {
          this.greenHighestPlayer = userBet;
        }
      } else {
        this.greenHighestPlayer = userBet;
      }
      // total update
      this.players.green.stats.total = Big(this.players.green.stats.total).add(player.bet.current).toFixed(2);
      this.players.green.stats.players++;
    }
  }

  onRouletteResult(rouletteResult: csgobounty.IRouletteResult) {
    if (this.ignoreResult) return;
    this.inProgress = true;
    let rolledNumber = this.rouletteNumbers.filter((rouletteNumber) => {
      return rouletteNumber.val == rouletteResult.roll;
    })[0];
    this.spinRoulette(rouletteResult.roll);

    this.soundSpin.play();

    setTimeout(() => {
      if (this.lastResults.length == Config.maxRouletteResultsShown) {
        this.lastResults.pop();
      }
      let objRoll = { number: rolledNumber, rollId: rouletteResult.id, hash: rouletteResult.hash };
      this.lastResults.unshift(objRoll);
      this.soundSpin.stop();
      this.soundTone.play();

      this.updatePlayersResults(rolledNumber.color);
      let winMultiplier = rolledNumber.color == 'green' ? 14 : 2;

      if (this.myBet) {
        let myWinningBet = null;
        if (rolledNumber.color == 'red') {
          myWinningBet = this.myBetAmountRed;
        }
        if (rolledNumber.color == 'black') {
          myWinningBet = this.myBetAmountBlack;
        }
        if (rolledNumber.color == 'green') {
          myWinningBet = this.myBetAmountGreen;
        }
        let profit = new Big(myWinningBet).times(winMultiplier);
        this.updateBalance(+profit);
        // $rootScope.$broadcast('user:balance', (profit));
      }
    }, 6200);

    setTimeout(() => {
      this.soundSpin.stop();
      this.domService.addClass('.bar', 'no-transition', this.elementRef.nativeElement);
      this.domService.setCss('.bar', { width: '100%' }, this.elementRef.nativeElement);
    }, 8000);
  }

  spinRoulette(score: number, rollTime?: number) {
    if (!rollTime) rollTime = 6000;

    let scrollWidth = this.elementRef.nativeElement.querySelector('.roulette').offsetWidth;
    let halfScrollWidth = Big(scrollWidth).div(2).toFixed(2);
    let fullSetLength = Big(70).times(15).toFixed(2);
    let lengthToEndFirstSet = Big(fullSetLength).minus(halfScrollWidth).times(-1).toFixed(2);
    let middleOffset = Big(fullSetLength).times(4);

    let rolledNumber = this.rouletteNumbers.filter((rouletteNumber) => {
      return rouletteNumber.val == score;
    })[0];

    let scoreOffset = Big(this.rouletteNumbers.indexOf(rolledNumber)).times(70).plus(27).toFixed(2);

    let fullOffset = Big(lengthToEndFirstSet).minus(middleOffset).minus(scoreOffset).toFixed(2);
    this.domService.removeClass('.numbers', 'no-transition', this.elementRef.nativeElement);
    this.domService.setCss('.numbers', { transitionDuration: rollTime + 'ms', transform: 'matrix(1, 0, 0, 1, ' + fullOffset + ', 0)' }, this.elementRef.nativeElement);

    setTimeout(() => {
      this.resetRoulette(lengthToEndFirstSet, scoreOffset);
    }, rollTime);
  }

  resetRoulette(lengthToEndFirstSet: number, scoreOffset: number) {
    if (!this.domService.hasClass('.numbers', 'no-transition', this.elementRef.nativeElement)) {
      this.domService.addClass('.numbers', 'no-transition', this.elementRef.nativeElement);
    }
    let offset = Big(lengthToEndFirstSet).minus(scoreOffset).toFixed(2);
    this.domService.setCss('.numbers', { transform: 'matrix(1, 0, 0, 1, ' + offset + ', 0)' }, this.elementRef.nativeElement);
  }

  resetToLastDrawn() {
    let scrollWidth = this.elementRef.nativeElement.querySelector('.roulette').offsetWidth;
    let halfScrollWidth = Big(scrollWidth).div(2).toFixed(2);
    let fullSetLength = Big(70).times(15).toFixed(2);
    let lengthToEndFirstSet = Big(fullSetLength).minus(halfScrollWidth).times(-1).toFixed(2);
    let middleOffset = Big(fullSetLength).times(4);

    let rolledNumber = this.rouletteNumbers.filter((rouletteNumber) => {
      return rouletteNumber.val == this.lastResults[0].number.val;
    })[0];

    let scoreOffset = Big(this.rouletteNumbers.indexOf(rolledNumber)).times(70).plus(27).toFixed(2);
    this.resetRoulette(lengthToEndFirstSet, scoreOffset);
  }

  toggleSound() {
    this.sound = !this.sound;
    this.loginService.soundPreference = this.sound;
  }

  updatePlayersResults(winColor: string) {
    switch (winColor) {
      case 'red': this.redWon(); break;
      case 'black': this.blackWon(); break;
      case 'green': this.greenWon(); break;
    }
  }

  openRouletteRollModal(roll: csgobounty.IRouletteRoll) {
    this.modalService.show(RouletteRollModalComponent, {
      rollResult: roll
    });
  }

  private redWon() {
    this.players.red.stats.total = Big(this.players.red.stats.total).times(2).toFixed(2);
    this.players.red.stats.win = true;
    this.players.black.stats.win = false;
    this.players.green.stats.win = false;

    if (this.redHighestPlayer) this.redHighestPlayer.win = true;
    if (this.blackHighestPlayer) this.blackHighestPlayer.win = false;
    if (this.greenHighestPlayer) this.greenHighestPlayer.win = false;

    this.players.red.bets.forEach(bet => { bet.win = true; });
    this.players.green.bets.forEach(bet => { bet.win = false; });
    this.players.black.bets.forEach(bet => { bet.win = false; });
  }

  private blackWon() {
    this.players.black.stats.total = Big(this.players.black.stats.total).times(2).toFixed(2);
    this.players.black.stats.win = true;
    this.players.red.stats.win = false;
    this.players.green.stats.win = false;

    if (this.blackHighestPlayer) this.blackHighestPlayer.win = true;
    if (this.redHighestPlayer) this.redHighestPlayer.win = false;
    if (this.greenHighestPlayer) this.greenHighestPlayer.win = false;

    this.players.black.bets.forEach(bet => { bet.win = true; });
    this.players.green.bets.forEach(bet => { bet.win = false; });
    this.players.red.bets.forEach(bet => { bet.win = false; });
  }

  private greenWon() {
    this.players.green.stats.total = Big(this.players.green.stats.total).times(14).toFixed(2);

    this.players.green.stats.win = true;
    this.players.black.stats.win = false;
    this.players.red.stats.win = false;

    if (this.greenHighestPlayer) this.greenHighestPlayer.win = true;
    if (this.blackHighestPlayer) this.blackHighestPlayer.win = false;
    if (this.redHighestPlayer) this.redHighestPlayer.win = false;

    this.players.green.bets.forEach(bet => { bet.win = true; });
    this.players.black.bets.forEach(bet => { bet.win = false; });
    this.players.red.bets.forEach(bet => { bet.win = false; });
  }

  private sortBetList(bets: csgobounty.IRouletteBet[]) {
    if (!this.sortingEnabled) return;
    bets.sort((a: csgobounty.IRouletteBet, b: csgobounty.IRouletteBet) => {
      if (a.userId == this.loggedUser.id) return -1;
      if (b.userId == this.loggedUser.id) return 1;
      return b.bet - a.bet;
    });
  }

  private handleRedPlayers(redPlayers: (playerId: string) => csgobounty.IRoulettePlayer) {
    for (let playerId in redPlayers) {
      if (redPlayers.hasOwnProperty(playerId)) {
        let playerString = redPlayers[playerId];
        let player = JSON.parse(playerString);

        // set current user values
        if (player.user.id == this.loggedUser.id) {
          this.myBet = true;
          this.myBetAmountRed = player.bet.total;
        }

        // red stats
        this.players.red.stats.players += 1;
        this.players.red.stats.total = Big(this.players.red.stats.total).add(player.bet.total).toFixed(2);

        let betModel = {
          userId: player.user.Id,
          bet: player.bet.total,
          username: player.user.username,
          avatar: player.user.avatar,
        };

        // add to red players
        this.players.red.bets.push(betModel);
        this.sortBetList(this.players.red.bets);
        if (this.players.red.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.red.bets.pop();
        }

        // check red highest
        if (this.redHighestPlayer) {
          if (Math.round(player.bet.total * 100) > Math.round(this.redHighestPlayer.bet * 100)) {
            this.redHighestPlayer = betModel;
          }
        } else {
          this.redHighestPlayer = betModel;
        }
      }
    }
  }

  private handleGreenPlayers(greenPlayers: (playerId: string) => csgobounty.IRoulettePlayer) {
    for (let playerId in greenPlayers) {
      if (greenPlayers.hasOwnProperty(playerId)) {
        let playerString = greenPlayers[playerId];
        let player = JSON.parse(playerString);

        // set current user values
        if (player.user.id == this.loggedUser.id) {
          this.myBet = true;
          this.myBetAmountGreen = player.bet.total;
        }

        // green stats
        this.players.green.stats.players += 1;
        this.players.green.stats.total = Big(this.players.green.stats.total).add(player.bet.total).toFixed(2);

        let betModel = {
          userId: player.user.Id,
          bet: player.bet.total,
          username: player.user.username,
          avatar: player.user.avatar,
        };

        // add to green players
        this.players.green.bets.push(betModel);
        this.sortBetList(this.players.green.bets);
        if (this.players.green.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.green.bets.pop();
        }

        // check green highest
        if (this.greenHighestPlayer) {
          if (Math.round(player.bet.total * 100) > Math.round(this.greenHighestPlayer.bet * 100)) {
            this.greenHighestPlayer = betModel;
          }
        } else {
          this.greenHighestPlayer = betModel;
        }
      }
    }
  }

  private handleBlackPlayers(blackPlayers: (playerId: string) => csgobounty.IRoulettePlayer) {
    for (let playerId in blackPlayers) {
      if (blackPlayers.hasOwnProperty(playerId)) {
        let playerString = blackPlayers[playerId];
        let player = JSON.parse(playerString);

        // set current user values
        if (player.user.id == this.loggedUser.id) {
          this.myBet = true;
          this.myBetAmountBlack = player.bet.total;
        }

        // black stats
        this.players.black.stats.players += 1;
        this.players.black.stats.total = Big(this.players.black.stats.total).add(player.bet.total).toFixed(2);

        let betModel = {
          userId: player.user.Id,
          bet: player.bet.total,
          username: player.user.username,
          avatar: player.user.avatar,
        };

        // add to black players
        this.players.black.bets.push(betModel);
        this.sortBetList(this.players.black.bets);
        if (this.players.black.bets.length > Config.maxRoletteBetsPerColor) {
          this.players.black.bets.pop();
        }

        // check black highest
        if (this.blackHighestPlayer) {
          if (Math.round(player.bet.total * 100) > Math.round(this.blackHighestPlayer.bet * 100)) {
            this.blackHighestPlayer = betModel;
          }
        } else {
          this.blackHighestPlayer = betModel;
        }
      }
    }
  }

  private resizeRunning = false;
  private handleFutureResizeEvents() {
    window.addEventListener('resize', this.onWindowResize);
    window.addEventListener('optimizedResize', this.windowOptimizedResizeListener);
  }

  private onWindowResize() {
    if (this.resizeRunning) return;

    this.resizeRunning = true;
    requestAnimationFrame(() => {
      window.dispatchEvent(new CustomEvent('optimizedResize'));
      this.resizeRunning = false;
    });
  }

  private onResize() {
    if (this.gameIsActive() || this.inProgress) return;
    this.resetToLastDrawn();
  }

  private toggleAnimations() {
    this.animationsEnabled = !this.animationsEnabled;
  }

  private toggleSorting() {
    this.sortingEnabled = !this.sortingEnabled;
  }
}