Pawel Ciucias: Styling a componenet using ngClass

Now that we have a working tic tac toe game using an api end point for simple moves, lets create a new component that is going to let us choose between various endpoints, so let us choose between and easy, moderate and impossible computer response.

so let's get started by creating a second component, lets call it opponentChooser, because it is going to let us choose initially the difficulty of our opponent.

so lets start by typing in

ng generate component components/opponentChooser

Now within our application if we look into our components folder we should now see our new component

Now we are going to make this very simple, we are going to have four settings:

easy
medium
impossible
human

in this post we are going to tackle the first 3 and we will look at websockets in a subsequent post to enable multi player games, but for now let's add the following function to our component file.

import { DirectiveResolver } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-opponent-chooser',
  templateUrl: './opponent-chooser.component.html',
  styleUrls: ['./opponent-chooser.component.scss']
})
export class OpponentChooserComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}

  selectedDifficulty: string = "Easy";
  selectDifficulty(e:MouseEvent):void {
    this.selectedDifficulty = (e.target as HTMLSpanElement).innerText;
  }
}

this function will catch a click event and set a component property to the text of the source html element, next lets open up the corresponding html file and paste in the following

<div class="opponent-container">
  <div class="grid">
    <div id="difficultyEasy" (click)="selectDifficulty($event)">
      <span class="difficulty-content" [ngClass]="{'selected':selectedDifficulty == 'Easy'}">
        Easy
      </span>
    </div>
    <div id="difficultyMedium" (click)="selectDifficulty($event)">
      <span class="difficulty-content" [ngClass]="{'selected':selectedDifficulty == 'Medium'}">
        Medium
      </span>
    </div>
    <div id="difficultyDifficult" (click)="selectDifficulty($event)">
      <span class="difficulty-content"[ngClass]="{'selected':selectedDifficulty == 'Difficult'}">
        Difficult
      </span>
    </div>
    <div id="human" (click)="selectDifficulty($event)">
      <span class="difficulty-content" [ngClass]="{'selected':selectedDifficulty == 'Human'}">
        Human
      </span>
    </div>
  </div>
</div>

the above gives us four clickable options options which will let us track which difficulty is selected, now let's add the SCSS to make it look like something understandable.

.opponent-container{
  justify-content: center;
  display: flex;
  .grid{
    flex-direction: row;
    width:70vh;
    > div {
      width: 25%;
      padding-top: 25%;
      display:inline-flex;
      position: relative;
      cursor: pointer;
      text-align: center;
      
      &:hover{
        color:#555;  
      }
      
      .difficulty-content{
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        font-size: 1.5em;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &.selected{
          background-color: #ababab;
        }
      }
    }
  }
}

and what we should result with is

now as we toggle through each value it will be marked as selected by adjusting which one is highlighted in dark grey.

Tuesday 29 September 2020

Styling a componenet using ngClass