Gamifying an Angular App!

Table of contents

Reading Time: 4 minutes

Hi! Today we are going to see how to make our angular apps a little bit more interesting by including a wheel of fortune to it.

This is what we are gonna build –

Technologies used –

Pre-requisites –

Basic knowledge of Angular
Basic knowledge of JS

I am assuming that your system is already configured with NPM and angular is installed as a global package. If not follow this link.

Let’s Play!

We are going to see how to integrate WinWheelJS library into an angular app step by step. We will be building something like this REPO.

Creating an Angular App/project

Open up a terminal at any location you want and hit this command

ng new <whatever-name-we-like>

Command execution in my system, project name – Ang10-WinWheelJS

Hitting the above command the screen will ask us the following –

Would you like to add Angular routing?

-> press y or N, it really doesn’t matter as angular routing won’t be covered in this tutorial.

Which style-sheet format would you like to use?

-> select CSS

A new directory will be created with the name we chose in the above command. Let’s open this directory inside an IDE like Web-storm or Visual Studio Code.

Directory structure of the project in WebStorm

Serving our app

In the terminal, go inside the angular project that we have created and hit this command –

ng serve --open

We shall now open a terminal window and navigate inside the directory that we created above. Inside the terminal hit this command, it will open a window in the default browser with URL = http://localhost:4200. It will look like this –

http://localhost:4200/ window in the browser

As we can see there is plenty of reference code inside the page. Let’s clear this out. After clearing out it will look like this –

You can customize this page, in any way you like.

Downloading the latest WinWheelJS library

Head to http://dougtesting.net/winwheel/downloads and download the latest version, at time of writing this the latest version is 2.8

Extract the contents of this zip file you downloaded, and have a look into it.

Contents of the downloaded file after extracting

In order to render the wheel, we need the Winwheel.js or Winwheel.min.js file in our angular code-base.

The examples directory contains the different implementations of the wheel. Inside the first example “basic_code_wheel”, we will find 3 PNG files, which will be needed in our app also.

Integrating the WinWheelJS library with Angular App

Head to the directory of the angular code-base and create a JS name folder and images folder inside the src/assets directory and copy-paste the Winwheel.js file and the 3 images from the earlier extracted directory of the WinWheelJS library. The directory will look like this –

In order to animate the wheel we need another library, that is GSAP animation library, we are going to just install the NPM package of this library as a dependency in our code-base.

npm i gsap@2.1.3

Run the above command in your angular app directory, it will be installed. Version 2.1.3 is necessary for the files that we are gonna include in our code-base, so make sure that you install only this specific version.

You can confirm this package by looking into the package.json file

Now we will inform angular about these libraries, go to your angular.json file and add these in the scripts array –

"node_modules/gsap/src/minified/TimelineMax.min.js",
"node_modules/gsap/src/minified/TweenMax.min.js",
"src/assets/JS/Winwheel.js"

After adding these the angular.json file will look like this –

Now, open up the app.component.ts file and copy-paste the code from the same file of the this repo. Do the same for the app.component.html and app.component.css files also.

Some, important things to notice, whenever you include a third-party JS library in the angular app, you have to declare that library as a variable in the TS file, like this –

After copying and pasting, serve the angular app and it should look like this

And now you can enhance this app in any way you like. You can integrate other examples from the WinWheelJS library downloaded files.

Takeaways –

How to use winwheelJS library in an angular app
Importing third party JS libraries in angular app

That’s all for now folks. I hope you have learned something from this blog. If you liked it then please hit the thumbs up and share it with your friends, family or colleagues. Also, please help me improve by giving healthy feedback (below comments). Follow me to get updates on more interesting blogs.

For more angular related topics visit – https://blog.knoldus.com/category/tech-blogs/Angular/