Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit df2615f81cce3c453a9a0ee2f7ac868068c04232

Authored by Luis Suarez
2 parents 56365fb1f2 373baac2fe
Exists in develop

Merge branch 'develop' of http://git.focasoftware.com/angular/autoservicio-axion into develop 

Bajando version actual
Showing 5 changed files   Show diff stats
src/app/interfaces/IComanda.ts
Diff comments   View file @ df2615f
1 export interface IComanda { 1 export interface IComanda {
2 id: string; 2 id: string;
3 estado: number; 3 estado: number;
4 observacion: string; 4 observacion: string;
5 pedidoAnombreDe: string; 5 pedidoAnombreDe: string;
6 paraLlevar: boolean; 6 paraLlevar: boolean;
7 detalles: IComandaDetalle[]; 7 detalles: IComandaDetalle[];
8 timerElaboracion?: any; 8 timerElaboracion?: any;
9 secondsElaboracion?: any; 9 secondsElaboracion?: any;
10 hoursElaboracion?: any; 10 hoursElaboracion?: any;
11 secondsPedido?: any; 11 secondsPedido?: any;
12 hoursPedido?: any; 12 hoursPedido?: any;
13 } 13 }
14 14
15 export interface IComandaDetalle { 15 export interface IComandaDetalle {
16 DetLar: string; 16 DetLar: string;
17 CodArt: number; 17 CodArt: number;
18 CodSec: number; 18 CodSec: number;
19 cantidad: number; 19 cantidad: number;
20 idArticulo: number; 20 idArticulo: number;
21 componentes: IComponente[]; 21 componentes: IComponente[];
22 seeDetalle?: boolean; 22 seeDetalle?: boolean;
23 MKT_DESC?: string; 23 MktDesc?: string;
24 } 24 }
25 25
26 export interface IComponente { 26 export interface IComponente {
27 CodArt: number; 27 CodArt: number;
28 CodSec: number; 28 CodSec: number;
29 DetArt: string; 29 DetArt: string;
30 esSustraible: number; 30 esSustraible: number;
31 esAdicionable: number; 31 esAdicionable: number;
32 tipoArticulo: number; 32 tipoArticulo: number;
33 cantidadSeleccionada: number; 33 cantidadSeleccionada: number;
34 importeAdicional: number; 34 importeAdicional: number;
35 } 35 }
36 36
src/app/modules/comanda/comanda.component.html
Diff comments   View file @ df2615f
1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2"> 1 <div class="container-fluid d-flex flex-column h-100 fade-in pb-4 pr-2">
2 <div class="row pt-5 mt-n5"> 2 <div class="row pt-5 mt-n5">
3 <div class="col-12"> 3 <div class="col-12">
4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p> 4 <p class="mb-3 h2 text-center mt-2">Pedidos a elaborar</p>
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="row flex-fill m-0 scroll-y"> 7 <div class="row flex-fill m-0 scroll-y">
8 <div class="col-12 px-2"> 8 <div class="col-12 px-2">
9 <div class="card-columns h-100 m-1 fade-in disable-user-select"> 9 <div class="card-columns h-100 m-1 fade-in disable-user-select">
10 <div 10 <div
11 *ngFor="let comanda of comandas" 11 *ngFor="let comanda of comandas"
12 class="card fade-in rounded-xs shadow-sm mt-2" 12 class="card fade-in rounded-xs shadow-sm mt-2"
13 [ngClass]="{ 13 [ngClass]="{
14 'bg-light': comanda.estado === 1, 14 'bg-light': comanda.estado === 1,
15 'bg-danger': comanda.estado === 2, 15 'bg-danger': comanda.estado === 2,
16 'bg-success swing-out-top-bck': comanda.estado === 3 16 'bg-success swing-out-top-bck': comanda.estado === 3
17 }"> 17 }">
18 <div class="card-body p-2"> 18 <div class="card-body p-2">
19 <div class="row justify-content-between"> 19 <div class="row justify-content-between">
20 <img 20 <img
21 src="assets/img/para-llevar-fondo-sombra.png" 21 src="assets/img/para-llevar-fondo-sombra.png"
22 class="w-25 h-25 float-left ml-0 mt-n3" 22 class="w-25 h-25 float-left ml-0 mt-n3"
23 *ngIf="comanda.paraLlevar == true"> 23 *ngIf="comanda.paraLlevar == true">
24 <div></div> 24 <div></div>
25 <!-- NUMERO DE PEDIDO --> 25 <!-- NUMERO DE PEDIDO -->
26 <p class="h1 text-right mr-3"> 26 <p class="h1 text-right mr-3">
27 {{rellenar(comanda.id.toString().slice(0), 3)}} 27 {{rellenar(comanda.id.toString().slice(0), 3)}}
28 </p> 28 </p>
29 </div> 29 </div>
30 <div> 30 <div>
31 <!-- PEDIDO A NOMBRE DE --> 31 <!-- PEDIDO A NOMBRE DE -->
32 <p class="text-center m-0"> 32 <p class="text-center m-0">
33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}} 33 {{comanda.pedidoAnombreDe ? comanda.pedidoAnombreDe.toUpperCase() : ''}}
34 </p> 34 </p>
35 <!-- TIMER PEDIDO --> 35 <!-- TIMER PEDIDO -->
36 <div class="d-flex justify-content-between align-items-center mt-2"> 36 <div class="d-flex justify-content-between align-items-center mt-2">
37 <p><i class="fas fa-user-clock text-info"></i></p> 37 <p><i class="fas fa-user-clock text-info"></i></p>
38 <p class="text-center mb-1"> 38 <p class="text-center mb-1">
39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}} 39 {{comanda.hoursPedido}}:{{comanda.minutesPedido}}:{{comanda.secondsPedido}}
40 </p> 40 </p>
41 <p><i class="far fa-clock fa-spin text-info"></i></p> 41 <p><i class="far fa-clock fa-spin text-info"></i></p>
42 </div> 42 </div>
43 <div *ngFor="let detalle of comanda.detalles"> 43 <div *ngFor="let detalle of comanda.detalles">
44 <div 44 <div
45 class="card-text border-top pt-2 mb-2" 45 class="card-text border-top pt-2 mb-2"
46 [ngClass]=" 46 [ngClass]="
47 { 47 {
48 'border-secondary': comanda.estado === 1, 48 'border-secondary': comanda.estado === 1,
49 'border-light': comanda.estado != 1 49 'border-light': comanda.estado != 1
50 }"> 50 }">
51 <!-- DETALLE Y CANTIDAD --> 51 <!-- DETALLE Y CANTIDAD -->
52 <p> 52 <p>
53 <small>{{detalle.MKT_DESC ? detalle.MKT_DESC.toUpperCase() : detalle.DetLar.toUpperCase()}}</small><br> 53 <small>{{detalle.MktDesc ? detalle.MktDesc.toUpperCase() : detalle.DetLar.toUpperCase()}}</small><br>
54 <small>CANT.{{detalle.cantidad}}</small> 54 <small>CANT.{{detalle.cantidad}}</small>
55 </p> 55 </p>
56 <div *ngFor="let componente of detalle.componentes"> 56 <div *ngFor="let componente of detalle.componentes">
57 <p *ngIf="componente.DetArt !== 'Producto ingrediente general'"> 57 <p *ngIf="componente.DetArt !== 'Producto ingrediente general'">
58 <small>{{componente.DetArt.toLowerCase()}}</small> 58 <small>{{componente.DetArt.toLowerCase()}}</small>
59 </p> 59 </p>
60 </div> 60 </div>
61 </div> 61 </div>
62 <blockquote 62 <blockquote
63 *ngIf="detalle.comentario"> 63 *ngIf="detalle.comentario">
64 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p> 64 <p class="text-muted font-italic px-4" *ngIf="comanda.estado === 1"><small>{{detalle.comentario}}</small></p>
65 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p> 65 <p class="text-white font-italic px-4" *ngIf="comanda.estado !== 1"><small>{{detalle.comentario}}</small></p>
66 </blockquote> 66 </blockquote>
67 </div> 67 </div>
68 <!-- BOTONES --> 68 <!-- BOTONES -->
69 <button 69 <button
70 *ngIf="comanda.estado === 1" 70 *ngIf="comanda.estado === 1"
71 class="btn btn-block btn-primary shadow-sm btn-elaborar" 71 class="btn btn-block btn-primary shadow-sm btn-elaborar"
72 (click)="updateComanda(comanda, 2, 'En elaboracion')"> 72 (click)="updateComanda(comanda, 2, 'En elaboracion')">
73 <div class="row justify-content-between"> 73 <div class="row justify-content-between">
74 <div></div> 74 <div></div>
75 <p class="ml-4 text-white">Elaborar</p> 75 <p class="ml-4 text-white">Elaborar</p>
76 <img 76 <img
77 draggable="false" 77 draggable="false"
78 ondragstart="return false;" 78 ondragstart="return false;"
79 (contextmenu)="false" 79 (contextmenu)="false"
80 class="icon-30 mr-2" 80 class="icon-30 mr-2"
81 src="assets/img/ir.svg"> 81 src="assets/img/ir.svg">
82 </div> 82 </div>
83 </button> 83 </button>
84 <button 84 <button
85 *ngIf="comanda.estado === 2" 85 *ngIf="comanda.estado === 2"
86 class="btn btn-block shadow-sm btn-terminar" 86 class="btn btn-block shadow-sm btn-terminar"
87 (click)="updateComanda(comanda, 3, 'Terminado')"> 87 (click)="updateComanda(comanda, 3, 'Terminado')">
88 <div class="row justify-content-between"> 88 <div class="row justify-content-between">
89 <div></div> 89 <div></div>
90 <p class="ml-4">Terminar</p> 90 <p class="ml-4">Terminar</p>
91 <img 91 <img
92 draggable="false" 92 draggable="false"
93 ondragstart="return false;" 93 ondragstart="return false;"
94 (contextmenu)="false" 94 (contextmenu)="false"
95 class="icon-30 mr-2" 95 class="icon-30 mr-2"
96 src="assets/img/flecha-borde-color.svg"> 96 src="assets/img/flecha-borde-color.svg">
97 </div> 97 </div>
98 </button> 98 </button>
99 <button 99 <button
100 *ngIf="comanda.estado === 2" 100 *ngIf="comanda.estado === 2"
101 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0" 101 class="btn btn-block btn-deshacer btn-sm shadow-sm p-0"
102 (click)="updateComanda(comanda, 1, 'Pagado')"> 102 (click)="updateComanda(comanda, 1, 'Pagado')">
103 <div class="row justify-content-between"> 103 <div class="row justify-content-between">
104 <div></div> 104 <div></div>
105 <span class="h6 ml-4 pt-1"><small>Deshacer</small></span> 105 <span class="h6 ml-4 pt-1"><small>Deshacer</small></span>
106 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i> 106 <i class="fas fa-undo-alt text-info mr-4 my-auto"></i>
107 </div> 107 </div>
108 </button> 108 </button>
109 </div> 109 </div>
110 <!-- TIMER DE ELABORACION --> 110 <!-- TIMER DE ELABORACION -->
111 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2"> 111 <div *ngIf="comanda.estado === 2" class="d-flex justify-content-between align-items-center mt-2">
112 <div *ngIf="comanda.estado !== 1"> 112 <div *ngIf="comanda.estado !== 1">
113 <i class="fa fa-utensils text-info" aria-hidden="true"></i> 113 <i class="fa fa-utensils text-info" aria-hidden="true"></i>
114 </div> 114 </div>
115 <span *ngIf="comanda.estado === 1" class="text-dark"> 115 <span *ngIf="comanda.estado === 1" class="text-dark">
116 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 116 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
117 </span> 117 </span>
118 <span *ngIf="comanda.estado !== 1" class="text-white"> 118 <span *ngIf="comanda.estado !== 1" class="text-white">
119 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}} 119 {{comanda.hoursElaboracion}}:{{comanda.minutesElaboracion}}:{{comanda.secondsElaboracion}}
120 </span> 120 </span>
121 <i class="fas fa-clock fa-spin text-info"></i> 121 <i class="fas fa-clock fa-spin text-info"></i>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 129
src/app/modules/pedidos-salientes/pedidos-salientes.component.html
Diff comments   View file @ df2615f
1 <div class="row mx-0 mt-5 justify-content-around"> 1 <div class="row mx-0 py-5 px-2 h-100 justify-content-around">
2 <div class="col"> 2 <div class="col-4">
3 <div class="p-3 bg-white text-center shadow-lg rounded h-100"> 3 <div class="p-3 bg-white text-center shadow-lg rounded h-100">
4 <p class="h5 mt-3">ESTAMOS</p> 4 <p class="h5 mt-3">ESTAMOS</p>
5 <p class="h3 font-weight-bold text-secondary">preparando</p> 5 <p class="h3 font-weight-bold text-secondary">preparando</p>
6 <p class="h5">TU PEDIDO</p> 6 <p class="h5">TU PEDIDO</p>
7 <div 7 <div
8 *ngFor="let pedido of pedidosPendientes; let i = index" 8 *ngFor="let pedido of pedidosPendientes; let i = index"
9 [hidden]="i > 3" 9 [hidden]="i > 3"
10 class="font-weight-bold mb-2 text-muted"> 10 class="font-weight-bold mb-2 text-muted">
11 <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p> 11 <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p>
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div class="col"> 15 <div class="col-4">
16 <img 16 <img
17 draggable="false" 17 draggable="false"
18 ondragstart="return false;" 18 ondragstart="return false;"
19 (contextmenu)="false" 19 (contextmenu)="false"
20 class="w-40 h-auto d-block mx-auto" 20 class="w-40 h-auto d-block mx-auto"
21 src="assets/img/logo-spot.svg"> 21 src="assets/img/logo-spot.svg">
22 <div class="p-3 text-center h-100"> 22 <div class="p-3 text-center h-100">
23 <p class="h5 mt-3">LISTO PARA</p> 23 <p class="h5 mt-3">LISTO PARA</p>
24 <p class="h3 font-weight-bold text-primary">retirar</p> 24 <p class="h3 font-weight-bold text-primary">retirar</p>
25 <div *ngIf="pedidosFinalizados.length"> 25 <div *ngIf="pedidosFinalizados.length">
26 <p class="display-1 mt-2 text-primary mb-0">{{rellenar(pedidosFinalizados[0].id.toString().slice(0), 3)}}</p> 26 <p class="display-1 mt-2 text-primary mb-0">{{rellenar(pedidosFinalizados[0].id.toString().slice(0), 3)}}</p>
27 </div> 27 </div>
28 <p class="h3 font-weight-bold text-info mt-2">¡Que lo disfrutes!</p> 28 <p class="h3 font-weight-bold text-info mt-2">¡Que lo disfrutes!</p>
29 </div> 29 </div>
30 </div> 30 </div>
31 <div class="col"> 31 <div class="col-4">
32 <div class="p-3 bg-white text-center shadow-lg rounded h-100"> 32 <div class="p-3 bg-white text-center shadow-lg rounded h-100">
33 <p class="h5 mt-3">YA FUÉ</p> 33 <p class="h5 mt-3">YA FUÉ</p>
34 <p class="h3 font-weight-bold text-primary">entregado</p> 34 <p class="h3 font-weight-bold text-primary">entregado</p>
35 <p class="h5">TU PEDIDO</p> 35 <p class="h5">TU PEDIDO</p>
36 <div 36 <div
37 *ngFor="let pedido of pedidosFinalizados; let i = index" 37 *ngFor="let pedido of pedidosFinalizados; let i = index"
38 [hidden]="i > 4 || i == 0" 38 [hidden]="i > 4 || i == 0"
39 class="font-weight-bold mb-2 text-muted"> 39 class="font-weight-bold mb-2 text-muted">
40 <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p> 40 <p class="display-4">{{rellenar(pedido.id.toString().slice(0), 3)}}</p>
41 </div> 41 </div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 45
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ df2615f
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject, forkJoin } from 'rxjs'; 5 import { Subject, forkJoin } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-sinonimo', 9 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html', 10 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss'] 11 styleUrls: ['./sinonimo.component.scss']
12 }) 12 })
13 export class SinonimoComponent implements OnInit { 13 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = []; 14 sinonimos: ISinonimo[] = [];
15 isValid: boolean; 15 isValid: boolean;
16 onClose: Subject<any>; 16 onClose: Subject<any>;
17 articulo: IArticulo; 17 articulo: IArticulo;
18 isSinonimoSelected = false; 18 isSinonimoSelected = false;
19 currentIndex = 0; 19 currentIndex = 0;
20 20
21 constructor( 21 constructor(
22 private modalRef: BsModalRef, 22 private modalRef: BsModalRef,
23 private articuloService: ArticuloService, 23 private articuloService: ArticuloService,
24 ) { 24 ) {
25 this.onClose = new Subject(); 25 this.onClose = new Subject();
26 } 26 }
27 27
28 ngOnInit() { 28 ngOnInit() {
29 for (const s of this.sinonimos) { 29 for (const s of this.sinonimos) {
30 for (const a of s.productos) { 30 for (const a of s.productos) {
31 a.cantidad = 0; 31 a.cantidad = 0;
32 } 32 }
33 } 33 }
34 } 34 }
35 35
36 validate() { 36 validate() {
37 this.isValid = true; 37 this.isValid = true;
38 for (const s of this.sinonimos) { 38 for (const s of this.sinonimos) {
39 if (s.cantidadRestante > 0) { 39 if (s.cantidadRestante > 0) {
40 this.isValid = false; 40 this.isValid = false;
41 break; 41 break;
42 } 42 }
43 } 43 }
44 return !this.isValid ? 'disabled' : 'btn-effect'; 44 return !this.isValid ? 'disabled' : 'btn-effect';
45 } 45 }
46 46
47 validateNext() { 47 validateNext() {
48 const sinonimo = this.sinonimos[this.currentIndex] 48 const sinonimo = this.sinonimos[this.currentIndex];
49 sinonimo.selected = (sinonimo.cantidadRestante > 0) ? false : true; 49 sinonimo.selected = (sinonimo.cantidadRestante > 0) ? false : true;
50 return !sinonimo.selected ? 'disabled' : 'btn-effect'; 50 return !sinonimo.selected ? 'disabled' : 'btn-effect';
51 } 51 }
52 52
53 goNext() { 53 goNext() {
54 if (!this.sinonimos[this.currentIndex].selected) return; 54 if (!this.sinonimos[this.currentIndex].selected) return;
55 this.currentIndex++; 55 this.currentIndex++;
56 } 56 }
57 57
58 continue() { 58 continue() {
59 if (!this.isValid) return; 59 if (!this.isValid) return;
60 if (this.isSinonimoSelected) return; 60 if (this.isSinonimoSelected) return;
61 this.isSinonimoSelected = true; 61 this.isSinonimoSelected = true;
62 const observables = []; 62 const observables = [];
63 const cantidades = []; 63 const cantidades = [];
64 64
65 for (const s of this.sinonimos) { 65 for (const s of this.sinonimos) {
66 for (const articulo of s.productos) { 66 for (const articulo of s.productos) {
67 if (articulo.cantidad === 0) continue; 67 if (articulo.cantidad === 0) continue;
68 cantidades.push(articulo.cantidad); 68 cantidades.push(articulo.cantidad);
69 observables.push(this.articuloService.getById(articulo.id)); 69 observables.push(this.articuloService.getById(articulo.id));
70 } 70 }
71 } 71 }
72 forkJoin(observables) 72 forkJoin(observables)
73 .subscribe((res: IArticulo[]) => { 73 .subscribe((res: IArticulo[]) => {
74 res.forEach((articulo, i) => { 74 res.forEach((articulo, i) => {
75 articulo.cantidad = cantidades[i]; 75 articulo.cantidad = cantidades[i];
76 }); 76 });
77 this.modalRef.hide(); 77 this.modalRef.hide();
78 this.onClose.next({ 78 this.onClose.next({
79 articulos: res, 79 articulos: res,
80 }); 80 });
81 }, err => console.error(err)); 81 }, err => console.error(err));
82 } 82 }
83 83
84 sumarCantidadSinonimo(articulo: IArticulo, i: number) { 84 sumarCantidadSinonimo(articulo: IArticulo, i: number) {
85 if (this.sinonimos[i].cantidadRestante === 0) return; 85 if (this.sinonimos[i].cantidadRestante === 0) return;
86 articulo.cantidad++; 86 articulo.cantidad++;
87 this.sinonimos[i].cantidadRestante--; 87 this.sinonimos[i].cantidadRestante--;
88 } 88 }
89 89
90 restarCantidadSinonimo(articulo: IArticulo, i: number) { 90 restarCantidadSinonimo(articulo: IArticulo, i: number) {
91 if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return; 91 if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return;
92 if (articulo.cantidad === 0) return; 92 if (articulo.cantidad === 0) return;
93 articulo.cantidad--; 93 articulo.cantidad--;
94 this.sinonimos[i].cantidadRestante++; 94 this.sinonimos[i].cantidadRestante++;
95 } 95 }
96 96
97 scrollTo(index: number) { 97 scrollTo(index: number) {
98 const el = document.getElementById(index.toString()); 98 const el = document.getElementById(index.toString());
99 el.scrollIntoView({ behavior: 'smooth' }); 99 el.scrollIntoView({ behavior: 'smooth' });
100 } 100 }
101 101
102 close() { 102 close() {
103 this.modalRef.hide(); 103 this.modalRef.hide();
104 this.onClose.next(); 104 this.onClose.next();
105 } 105 }
106 106
107 } 107 }
108 108
src/app/utils/sound-manager.ts
Diff comments   View file @ df2615f
1 export class SoundManager { 1 export class SoundManager {
2 public static playAudio(audioName: string) { 2 public static playAudio(audioName: string) {
3 let audio = new Audio(); 3 const audio = new Audio();
4 audio.src = `assets/sounds/${audioName}`; 4 audio.src = `assets/sounds/${audioName}`;
5 audio.load(); 5 audio.load();
6 audio.play(); 6 audio.play();
7 } 7 }
8 } 8 }
9 9