Transforming SAC with Custom Widgets (Part 2 - Gamify)

[planifyit01]

In our previous blog post, we introduced you to the concept of custom widgets in SAP Analytics Cloud (SAC) and walked you through the creation of a simple calculator widget. Today, we're taking it a step further by adding a touch of fun to SAC. We're going to gamify it!

 

This widget not only adds a fun element to your SAC dashboard but also serves as a great example of the versatility of custom widgets.

The Runner Game Widget

The Runner Game is a simple yet engaging game where the player has to avoid obstacles to score points. The game is designed as a custom HTML element, which can be easily integrated into any SAC dashboard.

The game layout is defined using HTML, styled with CSS, and the game logic is implemented using JavaScript. The game includes a start button, a replay button, and buttons to control the player's actions (jump and dunk). The player's score is displayed on the screen and updated in real-time as the game progresses.

Let's take a look at some key parts of the JavaScript code:

_startGame() {



this._player = this._shadowRoot.querySelector('.player');

this._player.style.bottom = '0px';

this._obstacle = document.createElement('div');

this._obstacle.classList.add('obstacle');

this._gameContainer.appendChild(this._obstacle);

this._topObstacle = null;

this._gameInterval = setInterval(this._gameLoop.bind(this), 50);



this._startButton.style.display = 'none';

this._jumpButton.style.display = 'block';

this._dunkButton.style.display = 'block';

this._pauseButton.style.display = 'block';

this._obstacleRight = 0;

this._topObstacleRight = 0;

this._blueStarted = false;

this._redStarted = true;

}

```

The `_startGame` function is called when the "Start Game" button is clicked. It initializes the game by creating the player and the obstacle, and starts the game loop.

_gameLoop() {

if(this._isPaused) return;

}

 

The `_gameLoop` function is the heart of the game. It's called every 50 milliseconds and updates the game state, including the position of the obstacles and the player's score.

You can view the full JavaScript code [here].

Integration with SAC

Just like the calculator widget, we created a JSON file for the Runner Game widget to ensure smooth integration with SAC. The JSON file contains crucial configuration details, such as properties, methods, and events of the widget, and facilitates seamless interaction within the SAC environment.

Here's a snippet from the JSON file:

{

"name": "RunnerWidget",

"description": "Runner Game Widget",

"newInstancePrefix": "RunnerWidget",

"vendor": "",

"id": "RunnerWidget",

"version": "1.0.1",

"webcomponents": [

{

"kind": "main",

"tag": "runner-widget",

"url":  github url...



}

The JSON file defines the widget's properties, methods, and events. For instance, the `startGame` method starts the game, and the `onGameEnd` event is triggered when the game ends.

You can view the full JSON code [here]

The Runner Game widget, along with our other widgets, will be freely accessible on [Github page]. 

Just download the JSON file and upload it in your SAC tenant under Custom Widgets as follows:

AOur aim is not just to introduce a game but to illustrate how we can enhance SAC with custom functionality.