sfnggl / progetto-p3-2023-unipg

Project for my WebDev class, year 2023 at Unipg

Demogioco

This project was generated with Angular CLI version 16.0.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

progetto-p3-2023-unipg's Issues

Main Menu

Dare colore alla schermata iniziale, centrando i tasti, ingrandendo le misure a tipo 48pt per i font, aggiungere un header di 72pt con su scritto "Demo Progetto Web" e un footer con i crediti "Unipg 2022/23 - Stefano Gigli". per lo sfondo si può googlare una semplice animazione in css, oppure convertire, tramite tool online, un jpg a css e schiaffarlo in background

Il Gioco

Usando la libreria p5js.org, definire le poche azioni dell'utente. Il codice tratterà di guidare un piccola macchina e collezionare monete sparse casualmente per lo schermo entro un determinato periodo di tempo. Il codice implementerà un classe Macchina, che risponderà agli input dell'utente, potrà accellerare avanti e indietro rispetto al vettore del direzione, e ruotare a destra e sinisitra rispetto al centro dello schermo, un classe Moneta, che può spawnare (fino ad un massimo di 3) nello schermo e interagisce con la Macchina per venir presa, aumentando di uno il punteggio, infina la classe Timer, che scorrerà fino a 0 per poi decretare la fine del gioco. Seguirà un immediata redirezione a endscreen.component.

Punteggi Totali Fine Partita

Da endscreen.component.html, caricare, tramite keyword ngFor, una componente "Card" che mostri l'email del giocatore ed il suo punteggio massimo. Consiglio, tramite ng g c "pointcard" di generare un componente generico e poi implementare l'API della Card come si trova su material.angular.io, per poi richiamare ... dall'html di endscreen. Queste card dovranno essere rettangoli che spaziano la lunghezza dello schermo, mettono l'email del giocatore a destra ed il punteggio massimo a sinistra. Inoltre, In caso il cui il giocatore abbia migliorato il suo punteggio, tramite ngIf, mostrare un header di congratulazioni ed il punteggio. Completare tutto con il seguente css: ogni card sarà lightblue, il testo (preferibile un font comic sans bold) sarà giallo ocre, lo sfondo verdescuro, o se possibile un ventaglio di colori, per esempio barre verticali arcobaleno (non è necessario, un campo monocolore va più che bene per adesso)

Tasto home su endscreen

Finto Admin

Creare utente admin farlocco su Authentication e prendere l'UID statico come check per la flag this.isAdmin dentro servizi/auth.service.ts, dinstizione pigra e non sicura tra utenti e admin

Database Interactions

Implementare dentro ngOnInit di endscreen/endscreen.component.ts:

1. Query all'intero database ( retrieveScore().subscribe(...) ).
2. Implementare ricerca email dell'utente tra i dati tirati giù per capire se è già salvato nel database (o query diretta a Firebase).
3. Se la ricerca è positiva, aggiornare highscore utente in caso il punteggio sia maggiore
4. Se la ricerca è negativa, fare POST con i dati dell'utente e inserirlo nel database.

Tasto deleteAllScores su endscreen da admin