Rock Paper Scissors Game in Angular

app.component.css

.score-board{
  margin: 20px auto;
  border: 2px solid white;
  color: white;
  width: 200px;
  border-radius: 4px;
  text-align: center;
  font-size: 46px;
  padding: 15px 20px;
  position: relative;
}

.badge{
  background: chocolate;
  font-size: 14px;
  padding: 2px 10px;
}

#user-label{
  position: absolute;
  top: 5px;
  left: -25px;
}
#comp-label{
  position: absolute;
  top: 5px;
  right: -25px;
}


.result{
  font-size: 40px;
  color: white;
  text-align: center;
  font-weight: bold;
}

.choices{
  text-align: center;
  margin-top: 50px;
}

.choice{
  display: inline-block;
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 20px;
}

.choice:hover{
  cursor: pointer;
  background: rgb(119, 119, 163);
}

#action-message{
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 30px;
  margin: 50px 0;
}

app.component.html

<div class="score-board">
  <div class="badge" id="user-label">user : {{userSelected}}</div>
  <div class="badge" id="comp-label">comp : {{compSelected}}</div>
  <span id="user-score">{{userScore}}</span>:<span id="comp-score">{{compScore}}</span>
</div>

<div class="result">
  <p *ngIf="status">{{userSelected}} {{action}} {{compSelected}}{{status}} </p>
</div>

<div class="choices">
  <div class="choice" id="rock">
    <img src="../assets/images/rock.png" (click)='userPick("rock")'>
  </div>
  <div class="choice" id="paper">
    <img src="../assets/images/paper.png" (click)='userPick("paper")'>
  </div>
  <div class="choice" id="scissors">
    <img src="../assets/images/scissors.png" (click)='userPick("scissors")'>
  </div>
</div>

<p id="action-message" *ngIf="!status">You Can Make Your Move</p>
<p id="action-message" *ngIf="status">Wait...</p>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userScore = 0;
  compScore = 0;
  userSelected: string;
  compSelected: string;
  action: string;
  status: string;
  compWeapons = [
    'rock',
    'paper',
    'scissors'
  ];

  userPick(userWeapon: string): void {
    this.userSelected = userWeapon;
    console.log( this.userSelected);
    setTimeout( () => {
      const randomNum = Math.floor(Math.random() * 3);
      this.compSelected = this.compWeapons[randomNum];
      console.log(this.compSelected);
      this.checkResult();
    }, 1000);
  }

  clearField() {
    setTimeout(() => {
      this.status = '';
      this.userSelected = '';
      this.compSelected = '';
    }, 1500);
  }

  win(user, comp) {
    this.userScore ++;
    this.userSelected = user;
    this.compSelected = comp;
    this.action = 'beats';
    this.status = '. You win!';
    this.clearField();
  }


  lose(user, comp) {
    this.compScore ++;
    this.userSelected = user;
    this.compSelected = comp;
    this.action = 'loses to';
    this.status = '. You lose!';
    this.clearField();
  }

  draw(user, comp) {
    this.userSelected = user;
    this.compSelected = comp;
    this.action = 'and';
    this.status = '. You draw!';
    this.clearField();
  }

  checkResult() {
    const userChoice = this.userSelected;
    const compChoice = this.compSelected;
    switch (userChoice + compChoice) {
      case 'rockscissors':
      case 'paperrock':
      case 'scissorspaper':
        this.win(userChoice, compChoice);
        break;
      case 'rockpaper':
      case 'scissorsrock':
      case 'paperscissors':
        this.lose(userChoice, compChoice);
        break;
      default:
        this.draw(userChoice, compChoice);
        break;
    }

  }
}