@betorigami/game-ui-shared 2.1.0 → 3.0.0

package/README.md

@@ -10,7 +10,7 @@ The Lit components, controllers, translations, wire types and game-module regist
 import { GameComponent, RequiredContext, localeContext, getTranslation } from '@betorigami/game-ui-shared';
 ```
 
-Elements read the game context through `RequiredContext`, one per slice they need (`localeContext`, `sessionContext`, `limitsContext`, `servicesContext`, `skinContext`, `preferencesContext`, `layoutContext`, `walletContext`), all provided by `<origami-game-provider-wrapper>`. Reading a slice outside the wrapper throws. Elements whose styles use `data-is-desktop` add the `@desktopAttribute` decorator. Tests give an element its slices with `provideTestContexts` and change them with `updateTestContexts`.
+Elements read the game context through `RequiredContext`, one per slice they need (`localeContext`, `sessionContext`, `limitsContext`, `servicesContext`, `skinContext`, `preferencesContext`, `layoutContext`, `walletContext`), all provided by `<origami-game-provider-wrapper>`. Reading a slice outside the wrapper throws. Desktop and mobile styles go in `${desktopContainerQuery} { … }` and `${mobileContainerQuery} { … }` blocks, after the base rules they override; both query the `game-layout` container the wrapper provides. Tests give an element its slices with `provideTestContexts` and change them with `updateTestContexts`.
 
 A game contributes itself through a `GameUiModule`:
 

package/dist/components/shared/GameProviderWrapper.d.ts

@@ -17,7 +17,7 @@ export declare class GameProviderWrapper extends OrigamiElement {
     maxPayout: number;
     minBet: number;
     maxBet: number;
-    edge: 1 | 2 | 3 | 8 | 4;
+    edge: 1 | 2 | 3 | 4 | 8;
     showCurrencyAsText: boolean;
     footerPosition: 'ABOVE' | 'BELOW';
     logoUrl: string | null;
@@ -70,7 +70,8 @@ export declare class GameProviderWrapper extends OrigamiElement {
     private showMaxBetButton;
     private volume;
     private instantBetEnabled;
-    private mainWidth;
+    private documentClientWidth;
+    private documentClientHeight;
     private publicKey;
     private scale;
     language: Language;
@@ -107,10 +108,10 @@ export declare class GameProviderWrapper extends OrigamiElement {
     updateVolume(volume: number): void;
     updateInstantBetEnabled(enabled: boolean): void;
     updateAutobetNumberOfBets(numberOfBets: number): void;
-    updateMainWidth(width: number): void;
+    updateClientSize(width: number, height: number): void;
     updateBetAmount(newAmount: Big): void;
     updateBalance(newAmount: Big): void;
-    private _boundCalculateScale;
+    private handleResize;
     private setupResizeObserver;
     private cleanupResizeObserver;
     private calculateScale;

package/dist/components/shared/context/slices/layout.context.d.ts

@@ -1,7 +1,8 @@
-export declare const DESKTOP_MIN_WIDTH = 768;
 export type LayoutContextType = {
     isDesktop: boolean;
     scale: number;
+    clientWidth: number;
+    clientHeight: number;
 };
 export declare const DEFAULT_LAYOUT_CONTEXT: LayoutContextType;
 export declare const layoutContext: {

package/dist/index.d.ts

@@ -67,7 +67,6 @@ export * from './components/shared/Toggle/Toggle';
 export * from './components/shared/Tooltip/Tooltip.styles';
 export * from './components/shared/Tooltip/Tooltip';
 export * from './components/shared/context/required-context';
-export * from './components/shared/context/desktop-attribute';
 export * from './components/shared/context/provide-test-contexts';
 export * from './components/shared/context/slices/layout.context';
 export * from './components/shared/context/slices/limits.context';
@@ -109,6 +108,7 @@ export * from './shared/cards/card.utils';
 export * from './shared/chip-state.utils';
 export * from './shared/component.styles';
 export * from './shared/constants';
+export * from './shared/container-queries.styles';
 export * from './shared/create-api-factory';
 export * from './shared/event-map';
 export * from './shared/format-monetary-amount';