Пакет для более удобной работы с Yandex Games из Svelte.
GamesProvider представляет собой компонент, который занимается инициализацией SDK. Также он получает объект игрока и настраивает хранилище. В случае отсутствия YaGames в глобальном объекте window, что значит, что игра запущена вне платформы Яндекс Игр используется «запасной вариант» SDK, при котором сохранение данных происходит в localStorage. SDK сохраняется в контекст и может быть получен функцией useGames(). Помимо этого в GamesProvider можно передать функцию обратного вызова onBeforeLoaded — вызывается после вызова YaGames.init() и передаёт объект SDK в качестве параметра, и onGamesObject — вызывается в самый последний момент, и завершает процесс загрузки.
Кроме того, пропсами options и storage можно настроить аргументы, передаваемые в YaGames.init и в SDK.getPlayer.
<script lang="ts">
import { GamesProvider } from 'svelte-yagames';
</script>
<GamesProvider
onBeforeLoaded={function (SDK) {
// SDK Яндекс Игр
// Здесь можно установить язык игре, обратившись к `SDK.environment.i18n.lang`, и т.д.
}}
onGamesObject={function (games) {
// games — объект, который возвращает функция `useGames()`, обратиться к SDK Яндекс Игр можно по ключу `sdk`,
// также в объекте есть `player` — результат функции `SDK.getPlayer`, и `authorized` — авторизован ли игрок,
// помимо этого имеется `data` и `stats` — обёртки над `player.setData()`, `player.getData()`, и `player.setStats()`, `player.getStats()` соответственно,
// но с запасным вариантом сохранения в `localStorage`.
// Здесь можно настроить что-то, что зависит от объекта games, при этом игра ещё не будет показана
}}
>
<svelte:fragment slot="loading">
Показывается, пока не произошла полная загрузка
</svelte:fragment>
<svelte:fragment slot="error" let:error>
Если произошла ошибка при загрузке, показывается этот экран. Ошибка: {error}
</svelte:fragment>
Здесь отображается основная игра
</GamesProvider>createReactive — функция для удобной работы с данными игрока. Вместо ручного вызова games.data.set({ данные }) изменение стора приводит к их сохранению. По-умолчанию данные сохраняются раз в 750 миллисекунд при их изменении.
<script lang="ts" context="module">
import { GamesProvider, createReactive } from 'svelte-yagames';
/**
* Если произойдёт ошибка при загрузке данных или если данных на сервере нет, то будут использоваться переданные параметры
*/
const { init, data, stats } = createReactive({
data: {
/**
* Предметы игрока. Меняется не так часто, и представляет из себя массив, поэтому используется `data`
*/
items: []
},
stats: {
/**
* Счёт игрока. Меняется часто, поэтому рекомендуется использовать `stats`
*/
score: 0
}
});
/**
* Экспортируем для использования в других компонентах
*/
export { data, stats };
</script>
<script lang="ts">
</script>
<GamesProvider
onGamesObject={async function (games) {
/**
* Инициализируем. Важно не пропустить `await`, т.к. без него загрузка данных произойдёт позже загрузки, которую предоставляет GamesProvider
*/
await init(games);
}}
>
<button
type="button"
on:click={function() {
$stats.score ;
}}
>
Счёт: {$stats.score}
</button>
<button
type="button"
on:click={function () {
/**
* Если предмета нет, и счёт больше цены
*/
if (!$data.items.includes('Плащ') && $stats.score >= 5) {
/**
* Просто изменяем стор, сохранение произойдёт автоматически
*/
$data.items = [...$data.items, 'Плащ'];
$stats.score -= 5;
}
}}
>
Купить Плащ
</button>
</GamesProvider>Экспортируются некоторые полезные экшены, которые могут быть полезны при разработке игры.
clickOutside— нажатие вне элемента.enterClickOne— запрет вызоваon:clickбольше, чем один раз, при зажатой клавишеEnter. Позволяет предотвратить, например, накрутку показателей в кликерах.events— экшн от AlexxNB. Экшн позволяет передавать в компонент все слушатели событий.image— экшн запрещает перетаскивать картинку, и открывать контекстное меню на ней (длинное удержание на экране).
Используемые в проекте утилиты экспортируются
isEmpty— проверяет, пустой ли объект.isEmpty({ a: 1 }) // false, аisEmpty({}) // true.throttle— функция throttle. Используется версия с сайта learn.javascript.ru.