Game Development — Tambola — Using Angular 8: Part 1

In this and subsequent articles, I’ll explain how to develop Tambola game to play with friends and family while learning important features and concepts of Angular framework.

About Tambola

Tambola is a fun game of probability. It consists of a board with number from 1 to 90. Players are provided tickets and they have to strike off the numbers once called by the caller. Few constraints for the numbers on the ticket are listed below:

1. Each ticket has 15 distinct and random number generated between 1–90
2. All 90 numbers are distributed in a set of 6 tickets
3. There are 3 rows and 9 columns in a ticket
4. Each column must have at least 1 number
5. Each row can have almost 5 numbers
6. Column 1 has values between 0–9 (9 possible numbers)
7. Column 2 has values from 10–19 (10 possible numbers)
8. Column 3 has values from 20–29 and so on till column 8 with values from 70–79 (10 possible numbers)
9. Column 9 has values from 80–90 (11 possible numbers)

These are the constraints that we’ll use while writing the logic for ticket generation. Sample Tambola ticket that we’ll be able to generate after the coding is complete is shared below.

Sample Tambola Ticket

Create base structure for the Angular application

I’ll use VS Code as IDE but you can use any other environment as well as per your convenience. Please refer https://angular.io to learn how to setup development environment. This includes installing node.js and angular package.

First of all lets create a blank project using without any application using below command after navigating to the directory where you want to create the project. You can open Terminal in VS Code by clicking Ctrl ~

ng new Games —-create-application=false
? Would you like to add Angular routing? (y/N)N
? Which stylesheet format would you like to use? SCSS

Above command will take few minutes to install required packages and create a blank project for us to start development. I am not going to use routing in the application as it is a single page application with no routes.

Now lets open the “Games” folder in VS Code.

Use below commands to create a library named TambolaLib with components prefixed with ‘rm-’. You may use any other prefix as well

ng generate library TambolaLib --prefix=rm

Above command will add a project of type Library to the empty angular.json with component prefix rm

Folder Structure after adding Library

angular.json after adding “TambolaLib” Library

Now the library is initialized for us to start creating our angular based components and services that will be used in our Games application that is created using command below.

ng generate application Games
? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? SCSS

Above command with add a new project of type “Games” to the folder structure and angular.json

angular.json after adding “Games” application

Note that I am intentionally creating a separate Library project to explain the use of angular library though the same application can be developed using single application as well.

Add Library Reference to the Games application

Step 1: Build library

ng build TambolaLib

Above command will build the library and generate a package in dist/tambola-lib folder

Step 2: Now Install the Library in application, just like we install any third party package. The difference is that here we are installing package from a folder location on the machine

npm install dist/tambola-lib

Step 3: Start the application to test if everything worked fine. Change default application to “Games” in angular.json and serve the application using the command below

ng serve

We can add additional npm run script to complete above steps with single command as below. Note that I have named the command as “serve:lib” but you may give an name to the command here.

package.json with additional script

"serve:lib": "ng build TambolaLib && npm install dist/tambola-lib && ng serve"

to run the above script, execute below command in terminal

npm run serve:lib

Add Library component in Application

As part of library project, a dummy component is created during the library generation under lib folder named “TambolaLibComponent” which is exported as part of the “TambolaLibModule” along with a service named “TambolaLibService”.

To reference TambolaLibComponent in application, first import “TambolaLibModule” in AppModule as below.

Once the module is imported, library components can be used in the application.

Add a new component “Tambola” in Games application under folder “components” using below command

ng g c components/Tambola

Add a default route in app-routing.module.ts file to use above component as default component

const routes: Routes = [{ path: '', component: TambolaComponent }];

Update tambola component to use rm-TambolaLib component.

<rm-TambolaLib></rm-TambolaLib>

tambola.component.html

Now run the application using ng serve and open the browser http://localhost:4200/

Default route with “Library component” in application

As you can see TambolaLib component is embedded in the Tambola component of the application.

So far, we have completed below:

1. What is Tambola and constraints for generating Tambola ticket
2. Create an empty angular solution
3. Add angular library named “TambolaLib” to the solution
4. Add angular application name “Games” to the solution
5. Build library and install the same in application
6. Configure Reference library component in the application
7. Test launch the application

I’ll continue with the development in the next article. Thanks for reading and developing with me so far…

Please share your comment/feedback if you like the article so far…

Part 2 is now published. Please use link and share your comment/feedback