Post by account_disabled on Jan 22, 2024 23:57:40 GMT -5
The challenge is to create a multiplayer online point-and-shoot card game where players take turns drawing cards. The winner is the one who scores more points but not more than 21. If you win, the bet amount is added to the account of the player who won and is taken away from the one who lost. Our application will consist of 2 parts: server and client. Let's create an Angular application framework for the client part. To do this, we will use the angular-cli command line library, which it is advisable to install globally on the system. sudo npm install -g @angular/cli So, let's create the application as follows: ng new client During installation, we agree to use routing, it will be useful to us. After which we will get the client directory with the necessary folder structure. We will be most interested in the src/app directory, which will contain our application code. The game will contain three routings and, accordingly, three pages and components attached to them. Page with the authorization form. Page with a list of online users. Page of a room with a game between two users.
Therefore, let's create these three components with the following commands: ng g c login; ng g c online; ng g c room. This is what the result should look like, in which 3 directories of the same name were created with compone B2B Email List nts that were also included in the root module app.module.ts, as evidenced by the line: UPDATE .ts If we open this file, we will notice that the import of each component has been added to it and is included in the declaration section. import { LoginComponent } from t'; import { OnlineComponent } from './online/onlnent'; import { RoomComponent } from './room/ronent'; @ngmodule({ declarations: [ AppComponent, LoginComponent, OnlineComponent, RoomComponent ], Let's bind these components to the router, creating 3 routes (actually there are 4 of them, but one is used for redirection). import { LoginComponent } from './login/logent'; import { OnlineComponent } from './online'; import { RoomComponent } from './room/rnent'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login',
component: LoginComponent }, { path: 'online', component: OnlineComponent }, { path: 'room/:uuid', component: RoomComponent } ]; In the first routing, we redirect to the authorization form (LoginComponent) on the main page. Those. now when we start the development server with the command: ng serve Then, when we go to the address http://localhost:4200, we will be automatically redirected to the address http://localhost:4200/login and we will see this picture: In the last routing we defined the :uuid variable when specifying the path pattern, this variable will change and contain the unique identifier of the game room. Now all that’s left is to open the root component template ponent.html, remove all unnecessary stuff from the greeting and insert links to each route like this: It is customary to use a special directive [routerLink] to specify the routing path. Instead of the :uuid parameter in the game room routing, for now we will insert the test value room_id. The router-outlet tag will display the contents of component templates corresponding to the route path. This is what should happen: Now I propose to design the interface in the best traditions of bootstrap and connect the ngx-bootstrap library with the following command:
Therefore, let's create these three components with the following commands: ng g c login; ng g c online; ng g c room. This is what the result should look like, in which 3 directories of the same name were created with compone B2B Email List nts that were also included in the root module app.module.ts, as evidenced by the line: UPDATE .ts If we open this file, we will notice that the import of each component has been added to it and is included in the declaration section. import { LoginComponent } from t'; import { OnlineComponent } from './online/onlnent'; import { RoomComponent } from './room/ronent'; @ngmodule({ declarations: [ AppComponent, LoginComponent, OnlineComponent, RoomComponent ], Let's bind these components to the router, creating 3 routes (actually there are 4 of them, but one is used for redirection). import { LoginComponent } from './login/logent'; import { OnlineComponent } from './online'; import { RoomComponent } from './room/rnent'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login',
component: LoginComponent }, { path: 'online', component: OnlineComponent }, { path: 'room/:uuid', component: RoomComponent } ]; In the first routing, we redirect to the authorization form (LoginComponent) on the main page. Those. now when we start the development server with the command: ng serve Then, when we go to the address http://localhost:4200, we will be automatically redirected to the address http://localhost:4200/login and we will see this picture: In the last routing we defined the :uuid variable when specifying the path pattern, this variable will change and contain the unique identifier of the game room. Now all that’s left is to open the root component template ponent.html, remove all unnecessary stuff from the greeting and insert links to each route like this: It is customary to use a special directive [routerLink] to specify the routing path. Instead of the :uuid parameter in the game room routing, for now we will insert the test value room_id. The router-outlet tag will display the contents of component templates corresponding to the route path. This is what should happen: Now I propose to design the interface in the best traditions of bootstrap and connect the ngx-bootstrap library with the following command: