adaptar codigo html a angular

[Beginner Web]

como puedo adaptar este fragmento de codigo para ser usado en angular??

Código (html4strict) [Seleccionar] Expandir

<div id="div_palabra"></div>

<script>
  let activo
  dibujarPalabra('RAT')
  capturaTeclado()

  function dibujarPalabra(palabra) {
    const div = document.getElementById('div_palabra')
    for (let i = 0; i < palabra.length; i++) {
      const btn = document.createElement('button')
      btn.addEventListener('click', (e) => activo = e.target)
      const txt = document.createTextNode('_')
      btn.appendChild(txt)
      div.appendChild(btn)
    }
  }

  function capturaTeclado() {
    document.addEventListener('keyup', (e) => {
      if (activo && e.keyCode > 64 && e.keyCode < 90) {
        activo.innerText = e.key
      }
    })
  }
</script>

[EdePC]

- Copiando y pegando el código en el src/index.html debería de funcionar correctamente XD. Pero si quieres integrarlo como un componente tienes que agregar uno como tal y/o editar uno ya existente.

- En otro Post leí que estabas mencionando algo de Routing, entonces supongo que quieres agregar un Componente para registrarlo en el Módulo routing.module.ts.

- Primero agrega el Componente que en mi caso llamaré juego,

Código (bash) [Seleccionar] Expandir

ng generate component juego

- Luego ve a tu Módulo routing.module.ts que en mi caso es app-routing.module.ts y agrega la ruta, que en mi caso terminaría todo así:

Código (javascript,3,6,7,8,9) [Seleccionar] Expandir

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JuegoComponent } from './juego/juego.component';

const routes: Routes = [
 {
   path: 'app-juego',
   component: JuegoComponent
 }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }


- El juego.component.html terminaría así:

Código (html4strict) [Seleccionar] Expandir

<div id="div_palabra"></div>

- Y el juego.component.ts así:

Código (javascript) [Seleccionar] Expandir

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

@Component({
 selector: 'app-juego',
 templateUrl: './juego.component.html',
 styleUrls: ['./juego.component.css']
})
export class JuegoComponent implements OnInit {
 
 activo: any

 constructor() { }

 ngOnInit(): void {
   this.dibujarPalabra('RAT')
   this.capturaTeclado()
 }

 dibujarPalabra(palabra: string): void {
   const div = document.getElementById('div_palabra')
   for (let i = 0; i < palabra.length; i++) {
     const btn = document.createElement('button')
     btn.addEventListener('click', (e) => this.activo = e.target)
     const txt = document.createTextNode('_')
     btn.appendChild(txt)
     div.appendChild(btn)
   }
 }

 capturaTeclado(): void {
   document.addEventListener('keyup', (e) => {
     if (this.activo && e.keyCode > 64 && e.keyCode < 90) {
       this.activo.innerText = e.key
     }
   })
 }

}


- Para finalizar ejecutas lo siguiente:

Código (bash) [Seleccionar] Expandir

ng serve -o

-- Entonces agregas a la URL /app-juego y al final debería mostrar los botones y funcionar los eventos, en mi caso la URL sería: http://localhost:4200/app-juego


- Esa es una manera poco elaborada, luego se puede adaptar mejor para usar funcionalidades más puras de Angular, primero que funcione lo anterior y luego se corrige lo demás.

[Beginner Web]

me faltan dos cositas,
1) que al ingresar una letra que sea incorrecta el jugador se le descuento 1 vida
2) y que al acertar la palabra completa pase a la siguiente palabra y gane una cantidad de puntos