@beta-gamer/angular 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -13,9 +13,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 import { Injectable, signal } from "@angular/core";
 import { io } from "socket.io-client";
 function decodeToken(token) {
-  if (!token || typeof token !== "string") {
+  if (!token || typeof token !== "string")
     throw new Error("@beta-gamer/angular: token is required and must be a string");
-  }
   const parts = token.split(".");
   if (parts.length < 2) throw new Error("@beta-gamer/angular: invalid session token format");
   const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
@@ -26,20 +25,33 @@ var BetaGamerService = class {
   constructor() {
     this._socket = null;
     this._token = "";
+    /** Decoded session token payload — null until `init()` is called */
     this.session = signal(null);
+    /** Live game state updated by server events */
     this.gameState = signal({ status: "pending", players: [] });
   }
   get token() {
     return this._token;
   }
+  /** The active socket.io connection — available after `init()` with `connectSocket=true` */
   get socket() {
     return this._socket;
   }
-  init(token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io") {
+  /**
+   * @description Initialises the service with a session token.
+   * Decodes the token, sets up reactive state, and optionally connects the socket.
+   *
+   * @param token - JWT session token from your backend
+   * @param serverUrl - Base URL of the Beta Gamer server
+   * @param socketPath - socket.io path (default `/socket.io`)
+   * @param connectSocket - Set false to skip socket connection (e.g. for SSR or testing)
+   */
+  init(token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io", connectSocket = true) {
     this._token = token;
     const payload = decodeToken(token);
     this.session.set(payload);
     this.gameState.set({ status: "pending", players: payload.players });
+    if (!connectSocket) return;
     const s = io(`${serverUrl}/${payload.game}`, {
       auth: { token },
       path: socketPath,
@@ -114,7 +126,7 @@ var TimerComponent = class {
   constructor() {
     this.player = "self";
     this.initialSeconds = 600;
-    this.seconds = this.initialSeconds;
+    this.seconds = 600;
     this.interval = null;
     this.svc = inject2(BetaGamerService);
   }
@@ -125,20 +137,17 @@ var TimerComponent = class {
   }
   ngOnInit() {
     this.seconds = this.initialSeconds;
-    const socket = this.svc["_socket"];
-    if (socket) {
-      socket.on("game:clock", (clocks) => {
-        if (clocks[this.player] !== void 0) this.seconds = clocks[this.player];
-      });
-    }
+    this.svc.socket?.on("game:clock", (clocks) => {
+      if (clocks[this.player] !== void 0) this.seconds = clocks[this.player];
+    });
     this.interval = setInterval(() => {
-      if (this.svc.gameState().status === "active") {
+      if (this.svc.gameState().status === "active")
         this.seconds = Math.max(0, this.seconds - 1);
-      }
     }, 1e3);
   }
   ngOnDestroy() {
     if (this.interval) clearInterval(this.interval);
+    this.svc.socket?.off("game:clock");
   }
 };
 __decorateClass([
@@ -159,34 +168,91 @@ TimerComponent = __decorateClass([
   })
 ], TimerComponent);
 
-// src/components/chess/index.ts
-import { Component as Component3, Input as Input3, ViewChild, inject as inject3 } from "@angular/core";
-var ChessBoardComponent = class {
+// src/components/chess/ChessBoardComponent.ts
+import { Component as Component3, Input as Input4 } from "@angular/core";
+
+// src/components/shared/EmbedBoardBase.ts
+import { Directive, Input as Input3, Output, EventEmitter, ViewChild, inject as inject3 } from "@angular/core";
+var EmbedBoardBase = class {
   constructor() {
     this.serverUrl = "https://api.beta-gamer.com";
-    this.showAfkWarning = true;
+    this.onLeave = new EventEmitter();
     this.svc = inject3(BetaGamerService);
-  }
-  get embedUrl() {
-    return this.showAfkWarning ? `${this.serverUrl}/embed/chess` : `${this.serverUrl}/embed/chess?afkWarning=0`;
+    this.messageHandler = (e) => {
+      try {
+        const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
+        if (data?.type === "bg:leave") this.onLeave.emit();
+      } catch {
+      }
+    };
   }
   ngAfterViewInit() {
+    window.addEventListener("message", this.messageHandler);
     const iframe = this.iframeRef?.nativeElement;
     if (!iframe) return;
     iframe.addEventListener("load", () => {
       iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
     });
   }
+  ngOnDestroy() {
+    window.removeEventListener("message", this.messageHandler);
+  }
+  /** Builds a query string from a params object, omitting undefined values */
+  buildQuery(params) {
+    const p = new URLSearchParams();
+    for (const [k, v] of Object.entries(params)) if (v !== void 0) p.set(k, v);
+    const qs = p.toString();
+    return qs ? "?" + qs : "";
+  }
 };
 __decorateClass([
   Input3()
-], ChessBoardComponent.prototype, "serverUrl", 2);
+], EmbedBoardBase.prototype, "serverUrl", 2);
 __decorateClass([
-  Input3()
-], ChessBoardComponent.prototype, "showAfkWarning", 2);
+  Output()
+], EmbedBoardBase.prototype, "onLeave", 2);
 __decorateClass([
   ViewChild("iframe")
-], ChessBoardComponent.prototype, "iframeRef", 2);
+], EmbedBoardBase.prototype, "iframeRef", 2);
+EmbedBoardBase = __decorateClass([
+  Directive()
+], EmbedBoardBase);
+
+// src/components/chess/ChessBoardComponent.ts
+var ChessBoardComponent = class extends EmbedBoardBase {
+  constructor() {
+    super(...arguments);
+    this.showAfkWarning = true;
+    this.showCoords = true;
+    this.showLastMove = true;
+    this.showLegalMoves = true;
+    this.orientation = "auto";
+  }
+  get embedUrl() {
+    return this.serverUrl + "/embed/chess" + this.buildQuery({
+      afkWarning: !this.showAfkWarning ? "0" : void 0,
+      showCoords: !this.showCoords ? "0" : void 0,
+      showLastMove: !this.showLastMove ? "0" : void 0,
+      showLegalMoves: !this.showLegalMoves ? "0" : void 0,
+      orientation: this.orientation !== "auto" ? this.orientation : void 0
+    });
+  }
+};
+__decorateClass([
+  Input4()
+], ChessBoardComponent.prototype, "showAfkWarning", 2);
+__decorateClass([
+  Input4()
+], ChessBoardComponent.prototype, "showCoords", 2);
+__decorateClass([
+  Input4()
+], ChessBoardComponent.prototype, "showLastMove", 2);
+__decorateClass([
+  Input4()
+], ChessBoardComponent.prototype, "showLegalMoves", 2);
+__decorateClass([
+  Input4()
+], ChessBoardComponent.prototype, "orientation", 2);
 ChessBoardComponent = __decorateClass([
   Component3({
     selector: "bg-chess-board",
@@ -198,19 +264,25 @@ ChessBoardComponent = __decorateClass([
   `
   })
 ], ChessBoardComponent);
+
+// src/components/chess/ChessMoveHistoryComponent.ts
+import { Component as Component4 } from "@angular/core";
 var ChessMoveHistoryComponent = class {
 };
 ChessMoveHistoryComponent = __decorateClass([
-  Component3({
+  Component4({
     selector: "bg-chess-move-history",
     standalone: true,
     template: `<div data-role="move-history"></div>`
   })
 ], ChessMoveHistoryComponent);
+
+// src/components/chess/ChessCapturedPiecesComponent.ts
+import { Component as Component5 } from "@angular/core";
 var ChessCapturedPiecesComponent = class {
 };
 ChessCapturedPiecesComponent = __decorateClass([
-  Component3({
+  Component5({
     selector: "bg-chess-captured-pieces",
     standalone: true,
     template: `<div data-role="captured-pieces"></div>`
@@ -218,35 +290,33 @@ ChessCapturedPiecesComponent = __decorateClass([
 ], ChessCapturedPiecesComponent);
 
 // src/components/checkers/index.ts
-import { Component as Component4, Input as Input4, ViewChild as ViewChild2, inject as inject4 } from "@angular/core";
-var CheckersBoardComponent = class {
+import { Component as Component6, Input as Input5 } from "@angular/core";
+var CheckersBoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = inject4(BetaGamerService);
+    this.showLastMove = true;
+    this.orientation = "auto";
   }
   get embedUrl() {
-    return this.showAfkWarning ? `${this.serverUrl}/embed/checkers` : `${this.serverUrl}/embed/checkers?afkWarning=0`;
-  }
-  ngAfterViewInit() {
-    const iframe = this.iframeRef?.nativeElement;
-    if (!iframe) return;
-    iframe.addEventListener("load", () => {
-      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    return this.serverUrl + "/embed/checkers" + this.buildQuery({
+      afkWarning: !this.showAfkWarning ? "0" : void 0,
+      showLastMove: !this.showLastMove ? "0" : void 0,
+      orientation: this.orientation !== "auto" ? this.orientation : void 0
     });
   }
 };
 __decorateClass([
-  Input4()
-], CheckersBoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  Input4()
+  Input5()
 ], CheckersBoardComponent.prototype, "showAfkWarning", 2);
 __decorateClass([
-  ViewChild2("iframe")
-], CheckersBoardComponent.prototype, "iframeRef", 2);
+  Input5()
+], CheckersBoardComponent.prototype, "showLastMove", 2);
+__decorateClass([
+  Input5()
+], CheckersBoardComponent.prototype, "orientation", 2);
 CheckersBoardComponent = __decorateClass([
-  Component4({
+  Component6({
     selector: "bg-checkers-board",
     standalone: true,
     template: `
@@ -257,36 +327,24 @@ CheckersBoardComponent = __decorateClass([
   })
 ], CheckersBoardComponent);
 
-// src/components/connect4/index.ts
-import { Component as Component5, Input as Input5, ViewChild as ViewChild3, inject as inject5 } from "@angular/core";
-var Connect4BoardComponent = class {
+// src/components/connect4/Connect4BoardComponent.ts
+import { Component as Component7, Input as Input6 } from "@angular/core";
+var Connect4BoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = inject5(BetaGamerService);
   }
   get embedUrl() {
-    return this.showAfkWarning ? `${this.serverUrl}/embed/connect4` : `${this.serverUrl}/embed/connect4?afkWarning=0`;
-  }
-  ngAfterViewInit() {
-    const iframe = this.iframeRef?.nativeElement;
-    if (!iframe) return;
-    iframe.addEventListener("load", () => {
-      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    return this.serverUrl + "/embed/connect4" + this.buildQuery({
+      afkWarning: !this.showAfkWarning ? "0" : void 0
     });
   }
 };
 __decorateClass([
-  Input5()
-], Connect4BoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  Input5()
+  Input6()
 ], Connect4BoardComponent.prototype, "showAfkWarning", 2);
-__decorateClass([
-  ViewChild3("iframe")
-], Connect4BoardComponent.prototype, "iframeRef", 2);
 Connect4BoardComponent = __decorateClass([
-  Component5({
+  Component7({
     selector: "bg-connect4-board",
     standalone: true,
     template: `
@@ -296,9 +354,12 @@ Connect4BoardComponent = __decorateClass([
   `
   })
 ], Connect4BoardComponent);
+
+// src/components/connect4/Connect4ScoreComponent.ts
+import { Component as Component8, inject as inject4 } from "@angular/core";
 var Connect4ScoreComponent = class {
   constructor() {
-    this.svc = inject5(BetaGamerService);
+    this.svc = inject4(BetaGamerService);
   }
   get scores() {
     const s = this.svc.gameState()?.scores ?? {};
@@ -306,7 +367,7 @@ var Connect4ScoreComponent = class {
   }
 };
 Connect4ScoreComponent = __decorateClass([
-  Component5({
+  Component8({
     selector: "bg-connect4-score",
     standalone: true,
     template: `
@@ -320,35 +381,23 @@ Connect4ScoreComponent = __decorateClass([
 ], Connect4ScoreComponent);
 
 // src/components/tictactoe/index.ts
-import { Component as Component6, Input as Input6, ViewChild as ViewChild4, inject as inject6 } from "@angular/core";
-var TictactoeBoardComponent = class {
+import { Component as Component9, Input as Input7 } from "@angular/core";
+var TictactoeBoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = inject6(BetaGamerService);
   }
   get embedUrl() {
-    return this.showAfkWarning ? `${this.serverUrl}/embed/tictactoe` : `${this.serverUrl}/embed/tictactoe?afkWarning=0`;
-  }
-  ngAfterViewInit() {
-    const iframe = this.iframeRef?.nativeElement;
-    if (!iframe) return;
-    iframe.addEventListener("load", () => {
-      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    return this.serverUrl + "/embed/tictactoe" + this.buildQuery({
+      afkWarning: !this.showAfkWarning ? "0" : void 0
     });
   }
 };
 __decorateClass([
-  Input6()
-], TictactoeBoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  Input6()
+  Input7()
 ], TictactoeBoardComponent.prototype, "showAfkWarning", 2);
-__decorateClass([
-  ViewChild4("iframe")
-], TictactoeBoardComponent.prototype, "iframeRef", 2);
 TictactoeBoardComponent = __decorateClass([
-  Component6({
+  Component9({
     selector: "bg-tictactoe-board",
     standalone: true,
     template: `
@@ -359,12 +408,12 @@ TictactoeBoardComponent = __decorateClass([
   })
 ], TictactoeBoardComponent);
 
-// src/components/subway-runner/index.ts
-import { Component as Component7, Input as Input7, ViewChild as ViewChild5, inject as inject7 } from "@angular/core";
+// src/components/subway-runner/SubwayRunnerGameComponent.ts
+import { Component as Component10, Input as Input8, ViewChild as ViewChild2, inject as inject5 } from "@angular/core";
 var SubwayRunnerGameComponent = class {
   constructor() {
     this.serverUrl = "https://api.beta-gamer.com";
-    this.svc = inject7(BetaGamerService);
+    this.svc = inject5(BetaGamerService);
   }
   get embedUrl() {
     return `${this.serverUrl}/embed/subway-runner`;
@@ -378,13 +427,13 @@ var SubwayRunnerGameComponent = class {
   }
 };
 __decorateClass([
-  Input7()
+  Input8()
 ], SubwayRunnerGameComponent.prototype, "serverUrl", 2);
 __decorateClass([
-  ViewChild5("iframe")
+  ViewChild2("iframe")
 ], SubwayRunnerGameComponent.prototype, "iframeRef", 2);
 SubwayRunnerGameComponent = __decorateClass([
-  Component7({
+  Component10({
     selector: "bg-subway-runner",
     standalone: true,
     template: `
@@ -394,21 +443,27 @@ SubwayRunnerGameComponent = __decorateClass([
   `
   })
 ], SubwayRunnerGameComponent);
+
+// src/components/subway-runner/SubwayRunnerScoreComponent.ts
+import { Component as Component11, inject as inject6 } from "@angular/core";
 var SubwayRunnerScoreComponent = class {
   constructor() {
-    this.svc = inject7(BetaGamerService);
+    this.svc = inject6(BetaGamerService);
   }
   get score() {
     return this.svc.gameState()?.score ?? 0;
   }
 };
 SubwayRunnerScoreComponent = __decorateClass([
-  Component7({
+  Component11({
     selector: "bg-subway-runner-score",
     standalone: true,
     template: `<div data-role="score"><span data-role="score-value">{{ score }}</span></div>`
   })
 ], SubwayRunnerScoreComponent);
+
+// src/components/subway-runner/SubwayRunnerLivesComponent.ts
+import { Component as Component12, inject as inject7 } from "@angular/core";
 var SubwayRunnerLivesComponent = class {
   constructor() {
     this.svc = inject7(BetaGamerService);
@@ -418,7 +473,7 @@ var SubwayRunnerLivesComponent = class {
   }
 };
 SubwayRunnerLivesComponent = __decorateClass([
-  Component7({
+  Component12({
     selector: "bg-subway-runner-lives",
     standalone: true,
     template: `<div data-role="lives"><span data-role="lives-value">{{ lives }}</span></div>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beta-gamer/angular",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Angular SDK for Beta Gamer GaaS — composable game components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",