@beta-gamer/angular 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +133 -0
  2. package/dist/index.d.mts +4 -0
  3. package/dist/index.d.ts +4 -0
  4. package/dist/index.js +20 -4
  5. package/dist/index.mjs +20 -4
  6. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,133 @@
1
+ # @beta-gamer/angular
2
+
3
+ Angular SDK for [Beta Gamer](https://beta-gamer.com) — embed multiplayer games into your app as standalone components. You control the layout, we handle the game logic, matchmaking, and real-time sync.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @beta-gamer/angular
9
+ ```
10
+
11
+ ## Requirements
12
+
13
+ - Angular 16+
14
+ - A Beta Gamer tenant account and API key → [beta-gamer.com](https://beta-gamer.com)
15
+
16
+ ## Quick start
17
+
18
+ **1. Create a session from your backend** (never expose your API key on the client)
19
+
20
+ ```ts
21
+ const res = await fetch('https://api.beta-gamer.com/v1/sessions', {
22
+ method: 'POST',
23
+ headers: {
24
+ 'Authorization': 'Bearer bg_live_xxxx',
25
+ 'Content-Type': 'application/json',
26
+ },
27
+ body: JSON.stringify({
28
+ game: 'chess',
29
+ matchType: 'matchmaking',
30
+ players: [{ id: 'user_123', displayName: 'Alex' }],
31
+ }),
32
+ });
33
+ const { sessionToken } = await res.json();
34
+ ```
35
+
36
+ **2. Initialise the service and render a board**
37
+
38
+ ```ts
39
+ // app.component.ts
40
+ import { Component, inject, OnInit } from '@angular/core';
41
+ import { BetaGamerService, ChessBoardComponent } from '@beta-gamer/angular';
42
+
43
+ @Component({
44
+ standalone: true,
45
+ imports: [ChessBoardComponent],
46
+ template: `<bg-chess-board style="width:100%;height:500px" />`,
47
+ })
48
+ export class AppComponent implements OnInit {
49
+ private svc = inject(BetaGamerService);
50
+
51
+ ngOnInit() {
52
+ this.svc.init('<SESSION_TOKEN>', 'https://api.beta-gamer.com');
53
+ }
54
+ }
55
+ ```
56
+
57
+ ## Service
58
+
59
+ ### `BetaGamerService`
60
+
61
+ Injectable service — call `init()` once with the session token.
62
+
63
+ ```ts
64
+ svc.init(token: string, serverUrl?: string, socketPath?: string)
65
+ ```
66
+
67
+ | Signal | Type | Description |
68
+ |--------|------|-------------|
69
+ | `svc.session` | `Signal<Session>` | Current session (game, matchType, players) |
70
+ | `svc.gameState` | `Signal<GameState>` | Live game state (status, winner, reason) |
71
+ | `svc.token` | `string` | Raw JWT session token |
72
+ | `svc.socket` | `Socket` | Raw Socket.IO socket for custom events |
73
+
74
+ ## Components
75
+
76
+ All components are standalone — import only what you need.
77
+
78
+ ### Shared (all games)
79
+
80
+ | Component | Selector | Props | Description |
81
+ |-----------|----------|-------|-------------|
82
+ | `PlayerCardComponent` | `<bg-player-card>` | `[player]` (`"self"` \| `"opponent"`) | Player name + active-turn indicator |
83
+ | `TimerComponent` | `<bg-timer>` | `[player]`, `[initialSeconds]?` | Live countdown clock |
84
+
85
+ ### Chess
86
+
87
+ | Component | Selector | Inputs | Description |
88
+ |-----------|----------|--------|-------------|
89
+ | `ChessBoardComponent` | `<bg-chess-board>` | `[serverUrl]?`, `[showAfkWarning]?` | Interactive chess board (iframe) |
90
+ | `ChessMoveHistoryComponent` | `<bg-chess-move-history>` | — | Scrollable move list |
91
+ | `ChessCapturedPiecesComponent` | `<bg-chess-captured-pieces>` | `[player]` | Captured pieces |
92
+
93
+ ### Other games
94
+
95
+ | Component | Selector | Inputs | Game |
96
+ |-----------|----------|--------|------|
97
+ | `CheckersBoardComponent` | `<bg-checkers-board>` | `[serverUrl]?`, `[showAfkWarning]?` | checkers |
98
+ | `Connect4BoardComponent` | `<bg-connect4-board>` | `[serverUrl]?`, `[showAfkWarning]?` | connect4 |
99
+ | `Connect4ScoreComponent` | `<bg-connect4-score>` | — | connect4 |
100
+ | `TictactoeBoardComponent` | `<bg-tictactoe-board>` | `[serverUrl]?`, `[showAfkWarning]?` | tictactoe |
101
+ | `SubwayRunnerGameComponent` | `<bg-subway-runner-game>` | — | subway-runner |
102
+ | `SubwayRunnerScoreComponent` | `<bg-subway-runner-score>` | — | subway-runner |
103
+ | `SubwayRunnerLivesComponent` | `<bg-subway-runner-lives>` | — | subway-runner |
104
+
105
+ > **`[showAfkWarning]`** (default `true`) — set to `false` to hide the built-in AFK countdown banner and implement your own using the `{game}:afk_warning` / `{game}:afk_warning_cleared` socket events via `svc.socket`.
106
+
107
+ ## Listening to game events
108
+
109
+ ```ts
110
+ import { inject, OnInit } from '@angular/core';
111
+ import { BetaGamerService } from '@beta-gamer/angular';
112
+
113
+ export class MyComponent implements OnInit {
114
+ private svc = inject(BetaGamerService);
115
+
116
+ ngOnInit() {
117
+ this.svc.socket.on('chess:afk_warning', ({ playerId, secondsRemaining }) => {
118
+ console.log('AFK warning for', playerId, secondsRemaining);
119
+ });
120
+ }
121
+ }
122
+ ```
123
+
124
+ ## Supported games
125
+
126
+ `chess` · `checkers` · `connect4` · `tictactoe` · `subway-runner`
127
+
128
+ ## Links
129
+
130
+ - [Documentation](https://beta-gamer.com/docs)
131
+ - [Dashboard](https://beta-gamer.com/dashboard)
132
+ - [React SDK](https://www.npmjs.com/package/@beta-gamer/react)
133
+ - [React Native SDK](https://www.npmjs.com/package/@beta-gamer/react-native)
package/dist/index.d.mts CHANGED
@@ -69,6 +69,7 @@ declare class TimerComponent implements OnInit, OnDestroy {
69
69
 
70
70
  declare class ChessBoardComponent implements AfterViewInit {
71
71
  serverUrl: string;
72
+ showAfkWarning: boolean;
72
73
  iframeRef: ElementRef<HTMLIFrameElement>;
73
74
  svc: BetaGamerService;
74
75
  get embedUrl(): string;
@@ -81,6 +82,7 @@ declare class ChessCapturedPiecesComponent {
81
82
 
82
83
  declare class CheckersBoardComponent implements AfterViewInit {
83
84
  serverUrl: string;
85
+ showAfkWarning: boolean;
84
86
  iframeRef: ElementRef<HTMLIFrameElement>;
85
87
  svc: BetaGamerService;
86
88
  get embedUrl(): string;
@@ -89,6 +91,7 @@ declare class CheckersBoardComponent implements AfterViewInit {
89
91
 
90
92
  declare class Connect4BoardComponent implements AfterViewInit {
91
93
  serverUrl: string;
94
+ showAfkWarning: boolean;
92
95
  iframeRef: ElementRef<HTMLIFrameElement>;
93
96
  svc: BetaGamerService;
94
97
  get embedUrl(): string;
@@ -104,6 +107,7 @@ declare class Connect4ScoreComponent {
104
107
 
105
108
  declare class TictactoeBoardComponent implements AfterViewInit {
106
109
  serverUrl: string;
110
+ showAfkWarning: boolean;
107
111
  iframeRef: ElementRef<HTMLIFrameElement>;
108
112
  svc: BetaGamerService;
109
113
  get embedUrl(): string;
package/dist/index.d.ts CHANGED
@@ -69,6 +69,7 @@ declare class TimerComponent implements OnInit, OnDestroy {
69
69
 
70
70
  declare class ChessBoardComponent implements AfterViewInit {
71
71
  serverUrl: string;
72
+ showAfkWarning: boolean;
72
73
  iframeRef: ElementRef<HTMLIFrameElement>;
73
74
  svc: BetaGamerService;
74
75
  get embedUrl(): string;
@@ -81,6 +82,7 @@ declare class ChessCapturedPiecesComponent {
81
82
 
82
83
  declare class CheckersBoardComponent implements AfterViewInit {
83
84
  serverUrl: string;
85
+ showAfkWarning: boolean;
84
86
  iframeRef: ElementRef<HTMLIFrameElement>;
85
87
  svc: BetaGamerService;
86
88
  get embedUrl(): string;
@@ -89,6 +91,7 @@ declare class CheckersBoardComponent implements AfterViewInit {
89
91
 
90
92
  declare class Connect4BoardComponent implements AfterViewInit {
91
93
  serverUrl: string;
94
+ showAfkWarning: boolean;
92
95
  iframeRef: ElementRef<HTMLIFrameElement>;
93
96
  svc: BetaGamerService;
94
97
  get embedUrl(): string;
@@ -104,6 +107,7 @@ declare class Connect4ScoreComponent {
104
107
 
105
108
  declare class TictactoeBoardComponent implements AfterViewInit {
106
109
  serverUrl: string;
110
+ showAfkWarning: boolean;
107
111
  iframeRef: ElementRef<HTMLIFrameElement>;
108
112
  svc: BetaGamerService;
109
113
  get embedUrl(): string;
package/dist/index.js CHANGED
@@ -199,10 +199,11 @@ var import_core4 = require("@angular/core");
199
199
  var ChessBoardComponent = class {
200
200
  constructor() {
201
201
  this.serverUrl = "https://api.beta-gamer.com";
202
+ this.showAfkWarning = true;
202
203
  this.svc = (0, import_core4.inject)(BetaGamerService);
203
204
  }
204
205
  get embedUrl() {
205
- return `${this.serverUrl}/embed/chess`;
206
+ return this.showAfkWarning ? `${this.serverUrl}/embed/chess` : `${this.serverUrl}/embed/chess?afkWarning=0`;
206
207
  }
207
208
  ngAfterViewInit() {
208
209
  const iframe = this.iframeRef?.nativeElement;
@@ -215,6 +216,9 @@ var ChessBoardComponent = class {
215
216
  __decorateClass([
216
217
  (0, import_core4.Input)()
217
218
  ], ChessBoardComponent.prototype, "serverUrl", 2);
219
+ __decorateClass([
220
+ (0, import_core4.Input)()
221
+ ], ChessBoardComponent.prototype, "showAfkWarning", 2);
218
222
  __decorateClass([
219
223
  (0, import_core4.ViewChild)("iframe")
220
224
  ], ChessBoardComponent.prototype, "iframeRef", 2);
@@ -253,10 +257,11 @@ var import_core5 = require("@angular/core");
253
257
  var CheckersBoardComponent = class {
254
258
  constructor() {
255
259
  this.serverUrl = "https://api.beta-gamer.com";
260
+ this.showAfkWarning = true;
256
261
  this.svc = (0, import_core5.inject)(BetaGamerService);
257
262
  }
258
263
  get embedUrl() {
259
- return `${this.serverUrl}/embed/checkers`;
264
+ return this.showAfkWarning ? `${this.serverUrl}/embed/checkers` : `${this.serverUrl}/embed/checkers?afkWarning=0`;
260
265
  }
261
266
  ngAfterViewInit() {
262
267
  const iframe = this.iframeRef?.nativeElement;
@@ -269,6 +274,9 @@ var CheckersBoardComponent = class {
269
274
  __decorateClass([
270
275
  (0, import_core5.Input)()
271
276
  ], CheckersBoardComponent.prototype, "serverUrl", 2);
277
+ __decorateClass([
278
+ (0, import_core5.Input)()
279
+ ], CheckersBoardComponent.prototype, "showAfkWarning", 2);
272
280
  __decorateClass([
273
281
  (0, import_core5.ViewChild)("iframe")
274
282
  ], CheckersBoardComponent.prototype, "iframeRef", 2);
@@ -289,10 +297,11 @@ var import_core6 = require("@angular/core");
289
297
  var Connect4BoardComponent = class {
290
298
  constructor() {
291
299
  this.serverUrl = "https://api.beta-gamer.com";
300
+ this.showAfkWarning = true;
292
301
  this.svc = (0, import_core6.inject)(BetaGamerService);
293
302
  }
294
303
  get embedUrl() {
295
- return `${this.serverUrl}/embed/connect4`;
304
+ return this.showAfkWarning ? `${this.serverUrl}/embed/connect4` : `${this.serverUrl}/embed/connect4?afkWarning=0`;
296
305
  }
297
306
  ngAfterViewInit() {
298
307
  const iframe = this.iframeRef?.nativeElement;
@@ -305,6 +314,9 @@ var Connect4BoardComponent = class {
305
314
  __decorateClass([
306
315
  (0, import_core6.Input)()
307
316
  ], Connect4BoardComponent.prototype, "serverUrl", 2);
317
+ __decorateClass([
318
+ (0, import_core6.Input)()
319
+ ], Connect4BoardComponent.prototype, "showAfkWarning", 2);
308
320
  __decorateClass([
309
321
  (0, import_core6.ViewChild)("iframe")
310
322
  ], Connect4BoardComponent.prototype, "iframeRef", 2);
@@ -347,10 +359,11 @@ var import_core7 = require("@angular/core");
347
359
  var TictactoeBoardComponent = class {
348
360
  constructor() {
349
361
  this.serverUrl = "https://api.beta-gamer.com";
362
+ this.showAfkWarning = true;
350
363
  this.svc = (0, import_core7.inject)(BetaGamerService);
351
364
  }
352
365
  get embedUrl() {
353
- return `${this.serverUrl}/embed/tictactoe`;
366
+ return this.showAfkWarning ? `${this.serverUrl}/embed/tictactoe` : `${this.serverUrl}/embed/tictactoe?afkWarning=0`;
354
367
  }
355
368
  ngAfterViewInit() {
356
369
  const iframe = this.iframeRef?.nativeElement;
@@ -363,6 +376,9 @@ var TictactoeBoardComponent = class {
363
376
  __decorateClass([
364
377
  (0, import_core7.Input)()
365
378
  ], TictactoeBoardComponent.prototype, "serverUrl", 2);
379
+ __decorateClass([
380
+ (0, import_core7.Input)()
381
+ ], TictactoeBoardComponent.prototype, "showAfkWarning", 2);
366
382
  __decorateClass([
367
383
  (0, import_core7.ViewChild)("iframe")
368
384
  ], TictactoeBoardComponent.prototype, "iframeRef", 2);
package/dist/index.mjs CHANGED
@@ -164,10 +164,11 @@ import { Component as Component3, Input as Input3, ViewChild, inject as inject3
164
164
  var ChessBoardComponent = class {
165
165
  constructor() {
166
166
  this.serverUrl = "https://api.beta-gamer.com";
167
+ this.showAfkWarning = true;
167
168
  this.svc = inject3(BetaGamerService);
168
169
  }
169
170
  get embedUrl() {
170
- return `${this.serverUrl}/embed/chess`;
171
+ return this.showAfkWarning ? `${this.serverUrl}/embed/chess` : `${this.serverUrl}/embed/chess?afkWarning=0`;
171
172
  }
172
173
  ngAfterViewInit() {
173
174
  const iframe = this.iframeRef?.nativeElement;
@@ -180,6 +181,9 @@ var ChessBoardComponent = class {
180
181
  __decorateClass([
181
182
  Input3()
182
183
  ], ChessBoardComponent.prototype, "serverUrl", 2);
184
+ __decorateClass([
185
+ Input3()
186
+ ], ChessBoardComponent.prototype, "showAfkWarning", 2);
183
187
  __decorateClass([
184
188
  ViewChild("iframe")
185
189
  ], ChessBoardComponent.prototype, "iframeRef", 2);
@@ -218,10 +222,11 @@ import { Component as Component4, Input as Input4, ViewChild as ViewChild2, inje
218
222
  var CheckersBoardComponent = class {
219
223
  constructor() {
220
224
  this.serverUrl = "https://api.beta-gamer.com";
225
+ this.showAfkWarning = true;
221
226
  this.svc = inject4(BetaGamerService);
222
227
  }
223
228
  get embedUrl() {
224
- return `${this.serverUrl}/embed/checkers`;
229
+ return this.showAfkWarning ? `${this.serverUrl}/embed/checkers` : `${this.serverUrl}/embed/checkers?afkWarning=0`;
225
230
  }
226
231
  ngAfterViewInit() {
227
232
  const iframe = this.iframeRef?.nativeElement;
@@ -234,6 +239,9 @@ var CheckersBoardComponent = class {
234
239
  __decorateClass([
235
240
  Input4()
236
241
  ], CheckersBoardComponent.prototype, "serverUrl", 2);
242
+ __decorateClass([
243
+ Input4()
244
+ ], CheckersBoardComponent.prototype, "showAfkWarning", 2);
237
245
  __decorateClass([
238
246
  ViewChild2("iframe")
239
247
  ], CheckersBoardComponent.prototype, "iframeRef", 2);
@@ -254,10 +262,11 @@ import { Component as Component5, Input as Input5, ViewChild as ViewChild3, inje
254
262
  var Connect4BoardComponent = class {
255
263
  constructor() {
256
264
  this.serverUrl = "https://api.beta-gamer.com";
265
+ this.showAfkWarning = true;
257
266
  this.svc = inject5(BetaGamerService);
258
267
  }
259
268
  get embedUrl() {
260
- return `${this.serverUrl}/embed/connect4`;
269
+ return this.showAfkWarning ? `${this.serverUrl}/embed/connect4` : `${this.serverUrl}/embed/connect4?afkWarning=0`;
261
270
  }
262
271
  ngAfterViewInit() {
263
272
  const iframe = this.iframeRef?.nativeElement;
@@ -270,6 +279,9 @@ var Connect4BoardComponent = class {
270
279
  __decorateClass([
271
280
  Input5()
272
281
  ], Connect4BoardComponent.prototype, "serverUrl", 2);
282
+ __decorateClass([
283
+ Input5()
284
+ ], Connect4BoardComponent.prototype, "showAfkWarning", 2);
273
285
  __decorateClass([
274
286
  ViewChild3("iframe")
275
287
  ], Connect4BoardComponent.prototype, "iframeRef", 2);
@@ -312,10 +324,11 @@ import { Component as Component6, Input as Input6, ViewChild as ViewChild4, inje
312
324
  var TictactoeBoardComponent = class {
313
325
  constructor() {
314
326
  this.serverUrl = "https://api.beta-gamer.com";
327
+ this.showAfkWarning = true;
315
328
  this.svc = inject6(BetaGamerService);
316
329
  }
317
330
  get embedUrl() {
318
- return `${this.serverUrl}/embed/tictactoe`;
331
+ return this.showAfkWarning ? `${this.serverUrl}/embed/tictactoe` : `${this.serverUrl}/embed/tictactoe?afkWarning=0`;
319
332
  }
320
333
  ngAfterViewInit() {
321
334
  const iframe = this.iframeRef?.nativeElement;
@@ -328,6 +341,9 @@ var TictactoeBoardComponent = class {
328
341
  __decorateClass([
329
342
  Input6()
330
343
  ], TictactoeBoardComponent.prototype, "serverUrl", 2);
344
+ __decorateClass([
345
+ Input6()
346
+ ], TictactoeBoardComponent.prototype, "showAfkWarning", 2);
331
347
  __decorateClass([
332
348
  ViewChild4("iframe")
333
349
  ], TictactoeBoardComponent.prototype, "iframeRef", 2);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beta-gamer/angular",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Angular SDK for Beta Gamer GaaS — composable game components",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",