Load games via SDK

Here is the steps by steps on how to load our games by using our SDK

Step 1

Include the following line in the HTML

For style

<link
  rel="stylesheet"
  href="https://cdn.n88s.space/libs/betable01/v1.1.1/style.css"
/>

For script

<script
  src="https://cdn.n88s.space/libs/betable01/v1.1.1/index.umd.js"
  id="betableScript"
></script>

Step 2

After script loaded, we can use Betable01 to append list games to the pre-prepared area.

Betable01.render({
  eltId: '<<ELEMENT_ID>>',
  tenantId: '<<TENANT_ID>>',
  header: {
    title: <div>Header Here</div>,
    viewAll: <div>View All</div>,
    className: 'className-here',
  },
});

Parameter name	Data Type	Mandatory	Description
eltId	String	Yes	Load game in here
tenantId	String	Yes	Your tenant will provide by NAUTILUS GAMES
header	Object	No	Config for header
header.title	ReactNode	Yes	Config UI for title (to the left)
header.viewAll	ReactNode	No	Config UI for view all button (to the right)
header.className	string	No	Add your className in here

Examples

• In HTML, we add DOM with elt Id

<div id="load_game_here"></div>

Betable01.render({
  eltId: 'load_game_here',
  tenantId: 'myTenant',
  header: {
    title: <div>Header Here</div>,
    viewAll: <div>View All</div>,
    className: 'className-here',
  },
});

• Result

Step 3 (Optional)

In some cases, we need add async in script

<script
  src="https://cdn.n88s.space/libs/betable01/v1.1.1/index.umd.js"
  id="betableScript"
  async
></script>

Then, We need waiting the script load completed.

document.getElementById('betableScript')?.addEventListener('load', function () {
  Betable01.render({
    eltId: '<<ELEMENT_ID>>',
    tenantId: '<<TENANT_ID>>',
    header: {
      title: <div>Header Here</div>,
      viewAll: <div>View All</div>,
      className: 'className-here',
    },
  });
});

Step 4 (Optional)

We provide css variables to you style it easier

--betable-primary-color: #194783;
--betable-primary-hover-color: #194783;
--betable-border-radius: 8px;
--betable-bg-color: #fff;
--betable-text-color: #000;
--betable-text-hover-color: #194783;
--betable-border-color: #b0b1b1;
--betable-placeholder-color: #b0b1b1;
--betable-play-color: rgb(255, 224, 3);
--betable-more-button-color: #194783;
--betable-more-button-hover-color: #194783;

Bonus

We have 2 functions to make everything easier

• Function 1:

const injectScript = () => {
  const script = document.createElement('script');
  script.src = 'https://cdn.n88s.space/libs/betable01/index.umd.js';
  script.async = true;
  script.id = 'betableScript';
  document.body.appendChild(script);

  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.href = 'https://cdn.n88s.space/libs/betable01/style.css';
  document.head.appendChild(style);
};

• Function 2:

const renderBetable = () => {
  const render = Betable01.render({
    eltId: '<<ELEMENT_ID>>',
    tenantId: '<<TENANT_ID>>',
    header: {
      title: <div>Header Here</div>,
      viewAll: <div>View All</div>,
      className: 'className-here',
    },
  });

  try {
    render();
  } catch {
    console.warn('We need load script first');
    document
      .getElementById('betableScript')
      ?.addEventListener('load', function () {
        render();
      });
  }
};

• If we using ReactJS:

useEffect(() => {
  injectScript();
  renderBetable();
}, []);

• If we need typescript (TS), we need create a file name: global.d.ts in src folder

declare global {
  const Betable01: {
    render: (s: {
      eltId: string;
      tenantId: string;
      header?: {
        title: ReactNode;
        viewAll?: ReactNode;
        className?: string;
      };
      showViewAllOnSlide?: boolean;
    }) => void;
  };
}

export {};