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!
At Planifyit, we believe that user engagement is key to the success of any application. That's why we've developed a custom game widget for SAC - the Planifyit Runner Game. 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.
As always, we encourage you to follow us on [LinkedIn]. For every 100 new followers, we promise to create another widget for free! This widget will be developed through a democratic process – we will run a vote, and the most popular choice will be implemented. :)
The Planifyit Runner Game Widget
The Planifyit 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 Planifyit 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": "planifyitRunnerWidget",
"description":
"planifyit Runner Game Widget",
"newInstancePrefix": "planifyitRunnerWidget",
"vendor": "Planifyit",
"id": "PlanifyRunnerWidget",
"version": "1.0.1",
"webcomponents": [
{
"kind": "main",
"tag": "planifyit-runner-widget",
"url": "https://planifyit.github.io/SAC_game/PlanifyitRunnerWidget.js"
}
],
```
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]
Connect with Planifyit
The Planifyit Runner Game widget, along with our other widgets, will be freely accessible on our [Github page]. We believe in open-source development and the power of community collaboration.
Just download the JSON file and upload it in your SAC tenant under Custom Widgets as follows:
At Planifyit, we believe in the power of custom development to transform business applications, creating more interactive, user-friendly, and tailored solutions. Our aim is not just to introduce a game but to illustrate how we can enhance SAC with custom functionality.
For more information, don't hesitate to [contact us]. Let's make SAC more powerful together!
Comments