Setting up the project

Using Visual Studio 2017, we will create an ASP.NET Web Application project. You can call the application anything you like, but I called mine cricketScoreTrack. When you click on the new ASP.NET Web Application template, you will be presented with a few ASP.NET templates.

The ASP.NET templates are:

• Empty
• Web Forms
• MVC
• Web API
• Single Page Application
• Azure API App
• Azure Mobile App

We are just going to select the Web Forms template. For this application, we don't need authentication, so don't change this setting:

Click on OK to create the web application. The project will be created and will look as follows:

To give you an idea of what we are building, the UI will look as follows:

The various sections are as follows:

• Batsmen selection (1 in the preceding screenshot)
• Bowler selection (2 in the preceding screenshot)
• Batsmen game statistics—Runs, Balls, 4's, 6's, Strike Rate (3 in the preceding screenshot)
• Bowler game statistics—Overs, Maidens, Runs, Wickets, Economy (4 in the preceding screenshot)
• Batsmen runs (5 in the preceding screenshot)
• Game actions (6 in the preceding screenshot)
• Game score and teams (7 in the preceding screenshot)
• Current batsmen details (8 in the preceding screenshot)
• Runs per ball and over (9 in the preceding screenshot)

As you can see, there is a lot going on here. There are obviously a lot of areas that you can still expand on. Another fun idea is to have an in-game statistics panel and even a Duckworth-Lewis calculation, if you have the time to try and implement it. I say try, because the actual algorithm of the calculation is a secret.

There are, however, a lot of implementations online, and one of particular interest to me was the article by Sarvashrestha Paliwal, Azure Business Lead for Microsoft India. They used machine learning to analyze historical cricket games and thereby provide a continually improving Duckworth-Lewis calculation.

Let's have a closer look at the application structure. Expanding the Scripts folder, you will notice that the application uses jQuery and Bootstrap:

Expanding the Content folder, you will see the CSS files in use:

Note that there is a custom.css file in this folder that I added:

.score { 
    font-size: 40px; 
} 
.team { 
    font-size: 30px; 
} 
.player { 
    font-size: 16.5px; 
} 
.info { 
    font-size: 18px; 
} 
.btn-round-xs { 
    border-radius: 11px; 
    padding-left: 10px; 
    padding-right: 10px; 
    width: 100%; 
} 
.btn-round { 
    border-radius: 17px; 
} 
.navbar-top-links { 
    margin-right: 0; 
} 
.nav { 
    padding-left: 0; 
    margin-bottom: 0; 
    list-style: none; 
} 

This CSS file basically styles the buttons and some other text font on the form. There is nothing complicated about this CSS. The reason for the Bootstrap, jQuery, JavaScript, and CSS files is to enable the Bootstrap functionality on the web page.

To see Bootstrap in action, we will use Chrome to run the web application.

Run the Cricket Score Tracker Bootstrap web application by going to Debug on the menu and clicking on Start Without Debugging or by pressing Ctrl + F5. When the web application has loaded in Chrome, press Ctrl + Shift + I to open the developer tools:

At the top left of the screen, click on the Toggle device toolbar button or press Ctrl + Shift + M.

Chrome will then render the application as it would look on a mobile device. From the toolbar to the top, you will see that the application has been rendered as it would appear on an iPhone 6 Plus:

Clicking on the device type, you can change the device you want to render the page for. Changing it to an iPad Pro renders the page accordingly. You can also simulate the rotation of the device:

This feature is very powerful and allows modern web developers to test the responsiveness of their web applications. If something doesn't look quite right after you have rendered your application for a particular device, you need to go and investigate where you went wrong.

At the time of writing, the devices supported were:

• BlackBerry Z30 and PlayBook
• Galaxy Note 3, Note II, S3, and S5
• Kindle Fire HDX
• LG Optimus L70
• Laptop with HiDPI screen and MDPI screen
• Laptop with touch
• Microsoft Lumina 550 and 950
• Nexus 7, 6, 5, 4, 10, 5X, and 6P
• Nokia Lumina 520
• Nokia N9
• iPad Mini
• iPhone 4, 5, 6, and 6 Plus
• iPad and iPad Pro

To add devices, go to the bottom of the device menu. Following the separator, there is an Edit... menu item. Clicking that will take you to the Emulated Devices screen.

Looking at the Emulated Devices screen, you will notice that there are additional Settings to the right of the form:

One that stands out for a developer should be the Throttling setting:

As the name suggests, Throttling allows you to test your application as if it were running on a slower connection. You can then test functionality and ensure that your web application is as optimized as possible to allow it to work well on slower connections.

Swing back to the Solution Explorer in Visual Studio 2017 and have a look at the folders called BaseClasses, Classes, and Interfaces:

These folders contain the crux of this whole chapter. It is here where we will see what OOP is all about and how OOP works to provide a better approach to modeling a real-world scenario (a cricket match) in code.