@beta-gamer/angular 0.1.2 → 0.1.3

package/dist/index.js

@@ -48,9 +48,8 @@ module.exports = __toCommonJS(index_exports);
 var import_core = require("@angular/core");
 var import_socket = require("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, "/");
@@ -61,20 +60,33 @@ var BetaGamerService = class {
   constructor() {
     this._socket = null;
     this._token = "";
+    /** Decoded session token payload — null until `init()` is called */
     this.session = (0, import_core.signal)(null);
+    /** Live game state updated by server events */
     this.gameState = (0, import_core.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 = (0, import_socket.io)(`${serverUrl}/${payload.game}`, {
       auth: { token },
       path: socketPath,
@@ -149,7 +161,7 @@ var TimerComponent = class {
   constructor() {
     this.player = "self";
     this.initialSeconds = 600;
-    this.seconds = this.initialSeconds;
+    this.seconds = 600;
     this.interval = null;
     this.svc = (0, import_core3.inject)(BetaGamerService);
   }
@@ -160,20 +172,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([
@@ -194,36 +203,93 @@ TimerComponent = __decorateClass([
   })
 ], TimerComponent);
 
-// src/components/chess/index.ts
+// src/components/chess/ChessBoardComponent.ts
+var import_core5 = require("@angular/core");
+
+// src/components/shared/EmbedBoardBase.ts
 var import_core4 = require("@angular/core");
-var ChessBoardComponent = class {
+var EmbedBoardBase = class {
   constructor() {
     this.serverUrl = "https://api.beta-gamer.com";
-    this.showAfkWarning = true;
+    this.onLeave = new import_core4.EventEmitter();
     this.svc = (0, import_core4.inject)(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([
   (0, import_core4.Input)()
-], ChessBoardComponent.prototype, "serverUrl", 2);
+], EmbedBoardBase.prototype, "serverUrl", 2);
 __decorateClass([
-  (0, import_core4.Input)()
-], ChessBoardComponent.prototype, "showAfkWarning", 2);
+  (0, import_core4.Output)()
+], EmbedBoardBase.prototype, "onLeave", 2);
 __decorateClass([
   (0, import_core4.ViewChild)("iframe")
-], ChessBoardComponent.prototype, "iframeRef", 2);
+], EmbedBoardBase.prototype, "iframeRef", 2);
+EmbedBoardBase = __decorateClass([
+  (0, import_core4.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([
+  (0, import_core5.Input)()
+], ChessBoardComponent.prototype, "showAfkWarning", 2);
+__decorateClass([
+  (0, import_core5.Input)()
+], ChessBoardComponent.prototype, "showCoords", 2);
+__decorateClass([
+  (0, import_core5.Input)()
+], ChessBoardComponent.prototype, "showLastMove", 2);
+__decorateClass([
+  (0, import_core5.Input)()
+], ChessBoardComponent.prototype, "showLegalMoves", 2);
+__decorateClass([
+  (0, import_core5.Input)()
+], ChessBoardComponent.prototype, "orientation", 2);
 ChessBoardComponent = __decorateClass([
-  (0, import_core4.Component)({
+  (0, import_core5.Component)({
     selector: "bg-chess-board",
     standalone: true,
     template: `
@@ -233,19 +299,25 @@ ChessBoardComponent = __decorateClass([
   `
   })
 ], ChessBoardComponent);
+
+// src/components/chess/ChessMoveHistoryComponent.ts
+var import_core6 = require("@angular/core");
 var ChessMoveHistoryComponent = class {
 };
 ChessMoveHistoryComponent = __decorateClass([
-  (0, import_core4.Component)({
+  (0, import_core6.Component)({
     selector: "bg-chess-move-history",
     standalone: true,
     template: `<div data-role="move-history"></div>`
   })
 ], ChessMoveHistoryComponent);
+
+// src/components/chess/ChessCapturedPiecesComponent.ts
+var import_core7 = require("@angular/core");
 var ChessCapturedPiecesComponent = class {
 };
 ChessCapturedPiecesComponent = __decorateClass([
-  (0, import_core4.Component)({
+  (0, import_core7.Component)({
     selector: "bg-chess-captured-pieces",
     standalone: true,
     template: `<div data-role="captured-pieces"></div>`
@@ -253,35 +325,33 @@ ChessCapturedPiecesComponent = __decorateClass([
 ], ChessCapturedPiecesComponent);
 
 // src/components/checkers/index.ts
-var import_core5 = require("@angular/core");
-var CheckersBoardComponent = class {
+var import_core8 = require("@angular/core");
+var CheckersBoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = (0, import_core5.inject)(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([
-  (0, import_core5.Input)()
-], CheckersBoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  (0, import_core5.Input)()
+  (0, import_core8.Input)()
 ], CheckersBoardComponent.prototype, "showAfkWarning", 2);
 __decorateClass([
-  (0, import_core5.ViewChild)("iframe")
-], CheckersBoardComponent.prototype, "iframeRef", 2);
+  (0, import_core8.Input)()
+], CheckersBoardComponent.prototype, "showLastMove", 2);
+__decorateClass([
+  (0, import_core8.Input)()
+], CheckersBoardComponent.prototype, "orientation", 2);
 CheckersBoardComponent = __decorateClass([
-  (0, import_core5.Component)({
+  (0, import_core8.Component)({
     selector: "bg-checkers-board",
     standalone: true,
     template: `
@@ -292,36 +362,24 @@ CheckersBoardComponent = __decorateClass([
   })
 ], CheckersBoardComponent);
 
-// src/components/connect4/index.ts
-var import_core6 = require("@angular/core");
-var Connect4BoardComponent = class {
+// src/components/connect4/Connect4BoardComponent.ts
+var import_core9 = require("@angular/core");
+var Connect4BoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = (0, import_core6.inject)(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([
-  (0, import_core6.Input)()
-], Connect4BoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  (0, import_core6.Input)()
+  (0, import_core9.Input)()
 ], Connect4BoardComponent.prototype, "showAfkWarning", 2);
-__decorateClass([
-  (0, import_core6.ViewChild)("iframe")
-], Connect4BoardComponent.prototype, "iframeRef", 2);
 Connect4BoardComponent = __decorateClass([
-  (0, import_core6.Component)({
+  (0, import_core9.Component)({
     selector: "bg-connect4-board",
     standalone: true,
     template: `
@@ -331,9 +389,12 @@ Connect4BoardComponent = __decorateClass([
   `
   })
 ], Connect4BoardComponent);
+
+// src/components/connect4/Connect4ScoreComponent.ts
+var import_core10 = require("@angular/core");
 var Connect4ScoreComponent = class {
   constructor() {
-    this.svc = (0, import_core6.inject)(BetaGamerService);
+    this.svc = (0, import_core10.inject)(BetaGamerService);
   }
   get scores() {
     const s = this.svc.gameState()?.scores ?? {};
@@ -341,7 +402,7 @@ var Connect4ScoreComponent = class {
   }
 };
 Connect4ScoreComponent = __decorateClass([
-  (0, import_core6.Component)({
+  (0, import_core10.Component)({
     selector: "bg-connect4-score",
     standalone: true,
     template: `
@@ -355,35 +416,23 @@ Connect4ScoreComponent = __decorateClass([
 ], Connect4ScoreComponent);
 
 // src/components/tictactoe/index.ts
-var import_core7 = require("@angular/core");
-var TictactoeBoardComponent = class {
+var import_core11 = require("@angular/core");
+var TictactoeBoardComponent = class extends EmbedBoardBase {
   constructor() {
-    this.serverUrl = "https://api.beta-gamer.com";
+    super(...arguments);
     this.showAfkWarning = true;
-    this.svc = (0, import_core7.inject)(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([
-  (0, import_core7.Input)()
-], TictactoeBoardComponent.prototype, "serverUrl", 2);
-__decorateClass([
-  (0, import_core7.Input)()
+  (0, import_core11.Input)()
 ], TictactoeBoardComponent.prototype, "showAfkWarning", 2);
-__decorateClass([
-  (0, import_core7.ViewChild)("iframe")
-], TictactoeBoardComponent.prototype, "iframeRef", 2);
 TictactoeBoardComponent = __decorateClass([
-  (0, import_core7.Component)({
+  (0, import_core11.Component)({
     selector: "bg-tictactoe-board",
     standalone: true,
     template: `
@@ -394,12 +443,12 @@ TictactoeBoardComponent = __decorateClass([
   })
 ], TictactoeBoardComponent);
 
-// src/components/subway-runner/index.ts
-var import_core8 = require("@angular/core");
+// src/components/subway-runner/SubwayRunnerGameComponent.ts
+var import_core12 = require("@angular/core");
 var SubwayRunnerGameComponent = class {
   constructor() {
     this.serverUrl = "https://api.beta-gamer.com";
-    this.svc = (0, import_core8.inject)(BetaGamerService);
+    this.svc = (0, import_core12.inject)(BetaGamerService);
   }
   get embedUrl() {
     return `${this.serverUrl}/embed/subway-runner`;
@@ -413,13 +462,13 @@ var SubwayRunnerGameComponent = class {
   }
 };
 __decorateClass([
-  (0, import_core8.Input)()
+  (0, import_core12.Input)()
 ], SubwayRunnerGameComponent.prototype, "serverUrl", 2);
 __decorateClass([
-  (0, import_core8.ViewChild)("iframe")
+  (0, import_core12.ViewChild)("iframe")
 ], SubwayRunnerGameComponent.prototype, "iframeRef", 2);
 SubwayRunnerGameComponent = __decorateClass([
-  (0, import_core8.Component)({
+  (0, import_core12.Component)({
     selector: "bg-subway-runner",
     standalone: true,
     template: `
@@ -429,31 +478,37 @@ SubwayRunnerGameComponent = __decorateClass([
   `
   })
 ], SubwayRunnerGameComponent);
+
+// src/components/subway-runner/SubwayRunnerScoreComponent.ts
+var import_core13 = require("@angular/core");
 var SubwayRunnerScoreComponent = class {
   constructor() {
-    this.svc = (0, import_core8.inject)(BetaGamerService);
+    this.svc = (0, import_core13.inject)(BetaGamerService);
   }
   get score() {
     return this.svc.gameState()?.score ?? 0;
   }
 };
 SubwayRunnerScoreComponent = __decorateClass([
-  (0, import_core8.Component)({
+  (0, import_core13.Component)({
     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
+var import_core14 = require("@angular/core");
 var SubwayRunnerLivesComponent = class {
   constructor() {
-    this.svc = (0, import_core8.inject)(BetaGamerService);
+    this.svc = (0, import_core14.inject)(BetaGamerService);
   }
   get lives() {
     return this.svc.gameState()?.lives ?? 0;
   }
 };
 SubwayRunnerLivesComponent = __decorateClass([
-  (0, import_core8.Component)({
+  (0, import_core14.Component)({
     selector: "bg-subway-runner-lives",
     standalone: true,
     template: `<div data-role="lives"><span data-role="lives-value">{{ lives }}</span></div>`