Joker Casino Integration Library

Установка и использование

Импорт библиотеки

Для использования библиотеки в вашем проекте:

import { JokerCasino, type T4BTheme } from 'joker-casino';
// Создание экземпляра
const integration = new JokerCasino({
    wrapperId: 'my-root-element'
    backendUrl: 'backend-url',
    signalrInstance: signalrInstance,
});

// Инжектирование стилей (опционально)
integration.injectCSS({
    light: {
        'primary-accent': '#ff0000',
        'background': '#ffffff'
    },
    dark: {
        'primary-accent': '#00ff00', 
        'background': '#000000'
    }
});

// Запуск приложения
integration.build();

TypeScript поддержка

При использовании TypeScript, убедитесь что у вас корректно настроен импорт типов:

import { IntegrationLayer } from 'joker-casino';
import type { 
    T4BTheme, 
    T4BMainColors, 
    T4BThemeColors,
    IntegrationLayerConstructorInfo 
} from 'joker-casino/types';

Структура проекта после сборки

После выполнения pnpm build создается:

• dist/joker-casino.es.js - основной файл библиотеки
• dist/style.css - стили
• dist/types/index.d.ts - TypeScript типы

Роутинг приложения

Все страницы создаются в src/routes.

Создаем папку {ваше_название} -> создаем 2 файла: ui/index.tsx и route.ts

В ui/index.tsx лежит сама страница:

const Page = () => {
    return <div>Page</div>;
};

export default Page;

В route.ts регистрируем роут:

import { lazy } from 'preact/compat';

import { registrateRoute } from '$shared/router/utils';

export const PageRoute = registrateRoute({
    component: lazy(() => import('./ui')),
    pathname: '/page',
});

Далее в src/routes/index.tsx нужно подключить роут:

import { PageRoute } from './page/route'

const PATHS = [
  // other routes
  PageRoute
]

export function Routes() {
    return <Router paths={PATHS} />;
}

Если хотим добавить loading состояние пока прогружается страница - в registrateRoute нужно добавить поле loading передав туда или функцию или компонент

import { lazy } from 'preact/compat';

import { registrateRoute } from '$shared/router/utils';
import { Loader } from './loader';

export const PageRoute = registrateRoute({
    component: lazy(() => import('./ui')),
    pathname: '/page',
    loading: Loader, // или loading: () => {...}
});

Если нужно подгрузить данные перед тем как отобразить страницу - в registrateRoute нужно добавить поле onBeforeLoad передав туда асинхронную функцию, которая возвращает промис

import { lazy } from 'preact/compat';

import { registrateRoute } from '$shared/router/utils';
import { Loader } from './loader';

export const PageRoute = registrateRoute({
    pathname: '/',
    onBeforeLoad: async () => {
        return Promise.resolve(123);
    },
    component: lazy(() => import('./ui')),
    loading: Loader,
});

Для навигации по страницам нужно использовать компонент Link который лежит в $shared/router/link

Пример использования:

<nav>
    <Link href="/casino">to /casino</Link>
    <Link href={`/casino/${Math.floor(Math.random() * 20)}`}>to /casino/[random]</Link>
</nav>

Интеграции с разными фреймворками:

Nuxt

onMounted(() => {
    loadSript() {
        scriptTag; // ...load bundle by this script
        scriptTag.onload= () => {
            new window.IntegraionLayer(/* params */).build();
        }
        document.getElementById('integration-layer')?.appendChild(scriptTag);
    }
    loadScript();
})
<template><div id="integration-layer"></div></template>

с Nuxt все окей - проблем не возникло

Next.js

Аналогично с Nuxt, вместо onMounted используется useEffect или useLayoutEffect

Angular + Router

export class AppComponent implements AfterViewInit { // component
  title = 'angular-test';

  @ViewChild('main') mainElement!: ElementRef;

  constructor( @Inject(PLATFORM_ID) private platformId: Object) {}

  ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      
      loadScript = () => {
        // все та же логика интеграции
      }

      loadScript()
    }
  }
}

Все окей, но особенность роутера у ангуляра - сериализует url для безопасности -> ?path=/casino превращается в ?path=%2Fcasino. Но на стороне нашего казино (в роутере), когда нициализируется роутер (проставляются инит значения), мы десериализуем полученную url и все окей.

Важно помнить:

Когда мы импортиурем какую-то сущность из файла, import { a } from './module' - начинает испольняться весь файл:

// module.js
console.log('it`s module a');

function innerFunction(value) {
  console.log('inner function start work');

  return value;
}

export const a = 10;

const innerVar = innerFunction(1);

(() => { console.log('im IIFE, an im running instantly!') })();

в этом пример в консоли мы получим следующее:

it`s module a

inner function start work

im IIFE, an im running instantly!

То есть при импорте всего одной переменной у нас отработала и IIFE функция, и произошла инициализия переменной innerVar которая не имеет экспорта нарушу, и так же innerVar инициировал вызов innerFunction

Нужно не забывать, что в reatom atom так же является функцией, следовательно когда модуль будет обрабатываться, но мы не трогали атом - он так же будет проинициализирован как и innerVar c innerFunction.