Web Components

Concepts and usage

As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you’ve sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.

Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.

  • Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
  • Shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.
  • HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure.

Web Components at SCILL

We created few examples of widgets using web components so you can add them easily on your project.

To add web component(widget), follow this guide:
At you index.html <head> section add scill-widget.js and scill-widget.css from CDN:

   <link href="https://cdn.scillgame.com/scill-wdigets.css" rel="stylesheet">
   <script src="https://cdn.scillgame.com/scill-widgets.js" type="text/javascript"></script>

Now you can simply use web component widget as custom element in your body section of your html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="./test.css">
    <title>Document</title>
    <script type="text/javascript" src="https://scill-cdn.web.app/scill.js"></script>
    <link rel="stylesheet" href="https://cdn.scillgame.com/scill-widgets.css">
    <script src="https://cdn.scillgame.com/scill-widgets.js"></script>
    <script src="./script.js"> </script>
</head>
<body>
  <scill-popover-preview id="my-widget"
                   class="scill-web-component"
                   app-id="593776232582742019"
                   battle-pass-id="627086321190174723">
  </scill-popover-preview>
</body>
</html>

access-token

How to create and get access token, you can check here: https://developers.scillgame.com/api/authentication/#access-tokens

Access token is required for communication between web component and SCILL Backend. Since web-components accept only hardcoded strings as attributes you need set access-token attribute via DOM method setAtributte In our example we used DOM method getElementById('widget-id').

firstScillTaskList.setAttribute("acces-token", accessToken);

Complete example looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="./test.css">
    <title>Document</title>
    <script type="text/javascript" src="https://scill-cdn.web.app/scill.js"></script>
    <link rel="stylesheet" href="https://cdn.scillgame.com/scill-widgets.css">
    <script src="https://cdn.scillgame.com/scill-widgets.js"></script>
    <script src="./script.js"> </script>
</head>
<body>
  <scill-popover-preview id="my-widget"
                   class="scill-web-component"
                   app-id="593776232582742019"
                   battle-pass-id="627086321190174723">
  </scill-popover-preview>
</body>
</html>
  const widget = document.getElementById("my-widget");
  widget.setAttribute("access-token", 'access-token-generated-trough-SCILL-SDK-on-your-backend-side');
  widget.setAttribute("user-id", 'user-id-from-your-backend-side');

And for the results you get your attribute access-token:

List of our widgets you can use:

Widget nameSyntax
Task list<scill-task-list access-token='...'></scill-task-list>
Personal Challenges<scill-personal-challenges access-token='...'></scill-personal-challenges>
Personal Challenges List<scill-personal-challenges-list access-token='...'></scill-personal-challenges-list>
Personal Challenges Grid<scill-personal-challenges-grid access-token='...'> </scill-personal-challenges-grid>
Battle Pass<scill-battle-pass access-token='...'> </scill-battle-pass>
Battle Pass status<scill-battle-pass-status access-token='...'></scill-battle-pass-status>
Battle Pass Mini status<scill-battle-pass-mini-status access-token='...'></scill-battle-pass-mini-status>
Community Challengescill-community-challenge access-token='...'></scill-community-challenge>
Challenge Teaser<scill-challenge-teaser access-token='...'></scill-challenge-teaser>
Popover Preview<scill-popover-preview access-token='...'></scill-popover-preview>