Update Report

Controller

To implement the controller is an easy task as the Wordle dashboard component was built parametrized in #22.

It is necessary to change the /classic-wordle path to allow it a number as a parameter. This number will represent the length of the words.

To do this, this code has been added: classic-wordle.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-classic-wordle',
  templateUrl: './classic-wordle.page.html',
  styleUrls: ['./classic-wordle.page.scss'],
})
export class ClassicWordlePage implements OnInit {

  public wordLength: number;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.wordLength = parseInt(params.get('length'), 10);
    });
  }
}

Its path in the app-routing.module.ts has been modified, adding the :/length parameter:

{
    path: 'classic-wordle/:length',
    loadChildren: () => import('./pages/classic-wordle/classic-wordle.module').then( m => m.ClassicWordlePageModule),
    canActivate: [AuthGuard]
  },

After this, the wordsLength variable will have a value and will pass it to the wordle dashboard component.

UI selection

To avoid implementing a new page to select the word length, we can use the Popover component of Ionic. https://ionicframework.com/docs/api/popover. This is a box dialog generated at the top of the current page.

A new component WordsPopover has been created: HTML:

<ion-content>
    <ion-list>
    <ion-item *ngFor="let length of wordLengths">
      <ion-button expand="full" size="default" shape="round" [routerLink]="'/classic-wordle/' + length">{{ length }} letters</ion-button>
    </ion-item>
    </ion-list>
</ion-content>

TS:

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

@Component({
  selector: 'app-words-popover',
  templateUrl: './words-popover.component.html',
  styleUrls: ['./words-popover.component.scss'],
})
export class WordsPopoverComponent  implements OnInit {
  wordLengths = [4,5,6,7,8];
  constructor() { }

  ngOnInit() {}

}

And now, we can use this component with the PopoverController in the Main page: HTML:

<div class="button-container">
    <ion-button expand="block" size="large" id="classic-game" (click)="togglePopover($event)">CLASSIC</ion-button>
    <ion-button expand="block" size="large" id="pvp-game">1VS1</ion-button>
  </div>

TS:

async togglePopover(event: any) {
    const popover = await this.popoverController.create({
      component: WordsPopoverComponent,
      event: event,
      dismissOnSelect: true
    });

    await popover.present();
  }

This code creates a new popover using the WordsPopoverComponent, with the dismissOnSelect parameter to true. This parameter makes the popover close when is selected. The popover contains buttons that are generated through a loop, iterating through the wordLengths array. The buttons redirect to the /classic-wordle path specifying the length as a parameter.

The result is the following:

https://github.com/davidcr01/WordlePlus/assets/72193239/e5e77499-936a-42c1-9476-531b6cbbded7

davidcr01 / WordlePlus

Select word length in Wordle (S4) #25

Description

Tasks

Update Report

Controller

UI selection