@beta-gamer/angular 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,129 @@
+import * as _socket_io_component_emitter from '@socket.io/component-emitter';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, OnInit, AfterViewInit, ElementRef } from '@angular/core';
+import { Socket } from 'socket.io-client';
+
+type GameType = 'chess' | 'checkers' | 'connect4' | 'tictactoe' | 'subway-runner';
+type MatchType = 'matchmaking' | 'private' | 'bot';
+type SessionMode = 'live' | 'test' | 'training';
+type SessionStatus = 'pending' | 'active' | 'ended';
+interface SessionPlayer {
+    id: string;
+    displayName: string;
+}
+interface SessionTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    boardLight?: string;
+    boardDark?: string;
+    fontFamily?: string;
+    [key: string]: string | undefined;
+}
+interface SessionTokenPayload {
+    sessionId: string;
+    game: GameType;
+    mode: SessionMode;
+    matchType: MatchType;
+    tenantId: string;
+    players: SessionPlayer[];
+    roomCode: string | null;
+    theme: SessionTheme;
+    exp: number;
+}
+interface GameState {
+    status: SessionStatus;
+    players: SessionPlayer[];
+    currentTurn?: string;
+    winner?: string | null;
+    reason?: string;
+}
+
+declare class BetaGamerService implements OnDestroy {
+    private _socket;
+    private _token;
+    readonly session: _angular_core.WritableSignal<SessionTokenPayload | null>;
+    readonly gameState: _angular_core.WritableSignal<GameState>;
+    get token(): string;
+    get socket(): Socket<_socket_io_component_emitter.DefaultEventsMap, _socket_io_component_emitter.DefaultEventsMap> | null;
+    init(token: string, serverUrl?: string, socketPath?: string): void;
+    ngOnDestroy(): void;
+}
+
+declare class PlayerCardComponent {
+    player: 'self' | 'opponent';
+    private svc;
+    get displayName(): string;
+    get isActive(): boolean;
+}
+
+declare class TimerComponent implements OnInit, OnDestroy {
+    player: 'self' | 'opponent';
+    initialSeconds: number;
+    seconds: number;
+    private interval;
+    private svc;
+    get formatted(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}
+
+declare class ChessBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class ChessMoveHistoryComponent {
+}
+declare class ChessCapturedPiecesComponent {
+}
+
+declare class CheckersBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+
+declare class Connect4BoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class Connect4ScoreComponent {
+    svc: BetaGamerService;
+    get scores(): {
+        id: string;
+        score: unknown;
+    }[];
+}
+
+declare class TictactoeBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+
+declare class SubwayRunnerGameComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class SubwayRunnerScoreComponent {
+    svc: BetaGamerService;
+    get score(): any;
+}
+declare class SubwayRunnerLivesComponent {
+    svc: BetaGamerService;
+    get lives(): any;
+}
+
+export { BetaGamerService, CheckersBoardComponent, ChessBoardComponent, ChessCapturedPiecesComponent, ChessMoveHistoryComponent, Connect4BoardComponent, Connect4ScoreComponent, type GameState, type GameType, type MatchType, PlayerCardComponent, type SessionMode, type SessionPlayer, type SessionStatus, type SessionTheme, type SessionTokenPayload, SubwayRunnerGameComponent, SubwayRunnerLivesComponent, SubwayRunnerScoreComponent, TictactoeBoardComponent, TimerComponent };

package/dist/index.d.ts

@@ -0,0 +1,129 @@
+import * as _socket_io_component_emitter from '@socket.io/component-emitter';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, OnInit, AfterViewInit, ElementRef } from '@angular/core';
+import { Socket } from 'socket.io-client';
+
+type GameType = 'chess' | 'checkers' | 'connect4' | 'tictactoe' | 'subway-runner';
+type MatchType = 'matchmaking' | 'private' | 'bot';
+type SessionMode = 'live' | 'test' | 'training';
+type SessionStatus = 'pending' | 'active' | 'ended';
+interface SessionPlayer {
+    id: string;
+    displayName: string;
+}
+interface SessionTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    boardLight?: string;
+    boardDark?: string;
+    fontFamily?: string;
+    [key: string]: string | undefined;
+}
+interface SessionTokenPayload {
+    sessionId: string;
+    game: GameType;
+    mode: SessionMode;
+    matchType: MatchType;
+    tenantId: string;
+    players: SessionPlayer[];
+    roomCode: string | null;
+    theme: SessionTheme;
+    exp: number;
+}
+interface GameState {
+    status: SessionStatus;
+    players: SessionPlayer[];
+    currentTurn?: string;
+    winner?: string | null;
+    reason?: string;
+}
+
+declare class BetaGamerService implements OnDestroy {
+    private _socket;
+    private _token;
+    readonly session: _angular_core.WritableSignal<SessionTokenPayload | null>;
+    readonly gameState: _angular_core.WritableSignal<GameState>;
+    get token(): string;
+    get socket(): Socket<_socket_io_component_emitter.DefaultEventsMap, _socket_io_component_emitter.DefaultEventsMap> | null;
+    init(token: string, serverUrl?: string, socketPath?: string): void;
+    ngOnDestroy(): void;
+}
+
+declare class PlayerCardComponent {
+    player: 'self' | 'opponent';
+    private svc;
+    get displayName(): string;
+    get isActive(): boolean;
+}
+
+declare class TimerComponent implements OnInit, OnDestroy {
+    player: 'self' | 'opponent';
+    initialSeconds: number;
+    seconds: number;
+    private interval;
+    private svc;
+    get formatted(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}
+
+declare class ChessBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class ChessMoveHistoryComponent {
+}
+declare class ChessCapturedPiecesComponent {
+}
+
+declare class CheckersBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+
+declare class Connect4BoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class Connect4ScoreComponent {
+    svc: BetaGamerService;
+    get scores(): {
+        id: string;
+        score: unknown;
+    }[];
+}
+
+declare class TictactoeBoardComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+
+declare class SubwayRunnerGameComponent implements AfterViewInit {
+    serverUrl: string;
+    iframeRef: ElementRef<HTMLIFrameElement>;
+    svc: BetaGamerService;
+    get embedUrl(): string;
+    ngAfterViewInit(): void;
+}
+declare class SubwayRunnerScoreComponent {
+    svc: BetaGamerService;
+    get score(): any;
+}
+declare class SubwayRunnerLivesComponent {
+    svc: BetaGamerService;
+    get lives(): any;
+}
+
+export { BetaGamerService, CheckersBoardComponent, ChessBoardComponent, ChessCapturedPiecesComponent, ChessMoveHistoryComponent, Connect4BoardComponent, Connect4ScoreComponent, type GameState, type GameType, type MatchType, PlayerCardComponent, type SessionMode, type SessionPlayer, type SessionStatus, type SessionTheme, type SessionTokenPayload, SubwayRunnerGameComponent, SubwayRunnerLivesComponent, SubwayRunnerScoreComponent, TictactoeBoardComponent, TimerComponent };

package/dist/index.js

@@ -0,0 +1,461 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BetaGamerService: () => BetaGamerService,
+  CheckersBoardComponent: () => CheckersBoardComponent,
+  ChessBoardComponent: () => ChessBoardComponent,
+  ChessCapturedPiecesComponent: () => ChessCapturedPiecesComponent,
+  ChessMoveHistoryComponent: () => ChessMoveHistoryComponent,
+  Connect4BoardComponent: () => Connect4BoardComponent,
+  Connect4ScoreComponent: () => Connect4ScoreComponent,
+  PlayerCardComponent: () => PlayerCardComponent,
+  SubwayRunnerGameComponent: () => SubwayRunnerGameComponent,
+  SubwayRunnerLivesComponent: () => SubwayRunnerLivesComponent,
+  SubwayRunnerScoreComponent: () => SubwayRunnerScoreComponent,
+  TictactoeBoardComponent: () => TictactoeBoardComponent,
+  TimerComponent: () => TimerComponent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/service/BetaGamerService.ts
+var import_core = require("@angular/core");
+var import_socket = require("socket.io-client");
+function decodeToken(token) {
+  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, "/");
+  const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+  return JSON.parse(atob(padded));
+}
+var BetaGamerService = class {
+  constructor() {
+    this._socket = null;
+    this._token = "";
+    this.session = (0, import_core.signal)(null);
+    this.gameState = (0, import_core.signal)({ status: "pending", players: [] });
+  }
+  get token() {
+    return this._token;
+  }
+  get socket() {
+    return this._socket;
+  }
+  init(token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io") {
+    this._token = token;
+    const payload = decodeToken(token);
+    this.session.set(payload);
+    this.gameState.set({ status: "pending", players: payload.players });
+    const s = (0, import_socket.io)(`${serverUrl}/${payload.game}`, {
+      auth: { token },
+      path: socketPath,
+      transports: ["websocket", "polling"]
+    });
+    this._socket = s;
+    s.on("connect_error", (err) => {
+      const msg = err.message?.toLowerCase() ?? "";
+      let reason = "Unable to connect to the game server.";
+      if (msg.includes("websocket") || msg.includes("transport")) reason = "Connection failed: server does not accept WebSocket connections.";
+      else if (msg.includes("timeout")) reason = "Connection timed out. Check your internet connection.";
+      else if (msg.includes("unauthorized") || msg.includes("401")) reason = "Connection refused: invalid or expired session token.";
+      else if (msg.includes("not found") || msg.includes("404")) reason = "Game server not found. Check your serverUrl.";
+      else if (msg.includes("cors")) reason = "Connection blocked by CORS policy.";
+      else if (err.message) reason = `Connection error: ${err.message}`;
+      window.alert(`[Beta Gamer] ${reason}`);
+    });
+    s.on("game:state", (state) => {
+      this.gameState.update((prev) => ({ ...prev, ...state }));
+    });
+    s.on("game:over", ({ winner, reason }) => {
+      this.gameState.update((prev) => ({ ...prev, status: "ended", winner, reason }));
+    });
+  }
+  ngOnDestroy() {
+    this._socket?.disconnect();
+    this._socket = null;
+  }
+};
+BetaGamerService = __decorateClass([
+  (0, import_core.Injectable)()
+], BetaGamerService);
+
+// src/components/PlayerCard.ts
+var import_core2 = require("@angular/core");
+var PlayerCardComponent = class {
+  constructor() {
+    this.player = "self";
+    this.svc = (0, import_core2.inject)(BetaGamerService);
+  }
+  get displayName() {
+    const players = this.svc.session()?.players ?? [];
+    return (this.player === "self" ? players[0] : players[1])?.displayName ?? "";
+  }
+  get isActive() {
+    const players = this.svc.session()?.players ?? [];
+    const p = this.player === "self" ? players[0] : players[1];
+    return p ? this.svc.gameState().currentTurn === p.id : false;
+  }
+};
+__decorateClass([
+  (0, import_core2.Input)()
+], PlayerCardComponent.prototype, "player", 2);
+PlayerCardComponent = __decorateClass([
+  (0, import_core2.Component)({
+    selector: "bg-player-card",
+    standalone: true,
+    template: `
+    <div [attr.data-active]="isActive" [attr.data-player]="player">
+      <span data-role="display-name">{{ displayName }}</span>
+      @if (isActive) {
+        <span data-role="turn-indicator" aria-label="Your turn"></span>
+      }
+    </div>
+  `
+  })
+], PlayerCardComponent);
+
+// src/components/Timer.ts
+var import_core3 = require("@angular/core");
+var TimerComponent = class {
+  constructor() {
+    this.player = "self";
+    this.initialSeconds = 600;
+    this.seconds = this.initialSeconds;
+    this.interval = null;
+    this.svc = (0, import_core3.inject)(BetaGamerService);
+  }
+  get formatted() {
+    const m = Math.floor(this.seconds / 60).toString().padStart(2, "0");
+    const s = (this.seconds % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+  }
+  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.interval = setInterval(() => {
+      if (this.svc.gameState().status === "active") {
+        this.seconds = Math.max(0, this.seconds - 1);
+      }
+    }, 1e3);
+  }
+  ngOnDestroy() {
+    if (this.interval) clearInterval(this.interval);
+  }
+};
+__decorateClass([
+  (0, import_core3.Input)()
+], TimerComponent.prototype, "player", 2);
+__decorateClass([
+  (0, import_core3.Input)()
+], TimerComponent.prototype, "initialSeconds", 2);
+TimerComponent = __decorateClass([
+  (0, import_core3.Component)({
+    selector: "bg-timer",
+    standalone: true,
+    template: `
+    <div [attr.data-player]="player" [attr.data-low]="seconds < 30">
+      <span data-role="clock">{{ formatted }}</span>
+    </div>
+  `
+  })
+], TimerComponent);
+
+// src/components/chess/index.ts
+var import_core4 = require("@angular/core");
+var ChessBoardComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = (0, import_core4.inject)(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/chess`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  (0, import_core4.Input)()
+], ChessBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  (0, import_core4.ViewChild)("iframe")
+], ChessBoardComponent.prototype, "iframeRef", 2);
+ChessBoardComponent = __decorateClass([
+  (0, import_core4.Component)({
+    selector: "bg-chess-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'chess') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Chess" allow="autoplay"></iframe>
+    }
+  `
+  })
+], ChessBoardComponent);
+var ChessMoveHistoryComponent = class {
+};
+ChessMoveHistoryComponent = __decorateClass([
+  (0, import_core4.Component)({
+    selector: "bg-chess-move-history",
+    standalone: true,
+    template: `<div data-role="move-history"></div>`
+  })
+], ChessMoveHistoryComponent);
+var ChessCapturedPiecesComponent = class {
+};
+ChessCapturedPiecesComponent = __decorateClass([
+  (0, import_core4.Component)({
+    selector: "bg-chess-captured-pieces",
+    standalone: true,
+    template: `<div data-role="captured-pieces"></div>`
+  })
+], ChessCapturedPiecesComponent);
+
+// src/components/checkers/index.ts
+var import_core5 = require("@angular/core");
+var CheckersBoardComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = (0, import_core5.inject)(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/checkers`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  (0, import_core5.Input)()
+], CheckersBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  (0, import_core5.ViewChild)("iframe")
+], CheckersBoardComponent.prototype, "iframeRef", 2);
+CheckersBoardComponent = __decorateClass([
+  (0, import_core5.Component)({
+    selector: "bg-checkers-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'checkers') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Checkers"></iframe>
+    }
+  `
+  })
+], CheckersBoardComponent);
+
+// src/components/connect4/index.ts
+var import_core6 = require("@angular/core");
+var Connect4BoardComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = (0, import_core6.inject)(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/connect4`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  (0, import_core6.Input)()
+], Connect4BoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  (0, import_core6.ViewChild)("iframe")
+], Connect4BoardComponent.prototype, "iframeRef", 2);
+Connect4BoardComponent = __decorateClass([
+  (0, import_core6.Component)({
+    selector: "bg-connect4-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'connect4') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Connect 4"></iframe>
+    }
+  `
+  })
+], Connect4BoardComponent);
+var Connect4ScoreComponent = class {
+  constructor() {
+    this.svc = (0, import_core6.inject)(BetaGamerService);
+  }
+  get scores() {
+    const s = this.svc.gameState()?.scores ?? {};
+    return Object.entries(s).map(([id, score]) => ({ id, score }));
+  }
+};
+Connect4ScoreComponent = __decorateClass([
+  (0, import_core6.Component)({
+    selector: "bg-connect4-score",
+    standalone: true,
+    template: `
+    <div data-role="score">
+      @for (entry of scores; track entry.id) {
+        <span [attr.data-player]="entry.id" data-role="score-value">{{ entry.score }}</span>
+      }
+    </div>
+  `
+  })
+], Connect4ScoreComponent);
+
+// src/components/tictactoe/index.ts
+var import_core7 = require("@angular/core");
+var TictactoeBoardComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = (0, import_core7.inject)(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/tictactoe`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  (0, import_core7.Input)()
+], TictactoeBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  (0, import_core7.ViewChild)("iframe")
+], TictactoeBoardComponent.prototype, "iframeRef", 2);
+TictactoeBoardComponent = __decorateClass([
+  (0, import_core7.Component)({
+    selector: "bg-tictactoe-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'tictactoe') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Tic-tac-toe"></iframe>
+    }
+  `
+  })
+], TictactoeBoardComponent);
+
+// src/components/subway-runner/index.ts
+var import_core8 = require("@angular/core");
+var SubwayRunnerGameComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = (0, import_core8.inject)(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/subway-runner`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  (0, import_core8.Input)()
+], SubwayRunnerGameComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  (0, import_core8.ViewChild)("iframe")
+], SubwayRunnerGameComponent.prototype, "iframeRef", 2);
+SubwayRunnerGameComponent = __decorateClass([
+  (0, import_core8.Component)({
+    selector: "bg-subway-runner",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'subway-runner') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Subway Runner"></iframe>
+    }
+  `
+  })
+], SubwayRunnerGameComponent);
+var SubwayRunnerScoreComponent = class {
+  constructor() {
+    this.svc = (0, import_core8.inject)(BetaGamerService);
+  }
+  get score() {
+    return this.svc.gameState()?.score ?? 0;
+  }
+};
+SubwayRunnerScoreComponent = __decorateClass([
+  (0, import_core8.Component)({
+    selector: "bg-subway-runner-score",
+    standalone: true,
+    template: `<div data-role="score"><span data-role="score-value">{{ score }}</span></div>`
+  })
+], SubwayRunnerScoreComponent);
+var SubwayRunnerLivesComponent = class {
+  constructor() {
+    this.svc = (0, import_core8.inject)(BetaGamerService);
+  }
+  get lives() {
+    return this.svc.gameState()?.lives ?? 0;
+  }
+};
+SubwayRunnerLivesComponent = __decorateClass([
+  (0, import_core8.Component)({
+    selector: "bg-subway-runner-lives",
+    standalone: true,
+    template: `<div data-role="lives"><span data-role="lives-value">{{ lives }}</span></div>`
+  })
+], SubwayRunnerLivesComponent);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BetaGamerService,
+  CheckersBoardComponent,
+  ChessBoardComponent,
+  ChessCapturedPiecesComponent,
+  ChessMoveHistoryComponent,
+  Connect4BoardComponent,
+  Connect4ScoreComponent,
+  PlayerCardComponent,
+  SubwayRunnerGameComponent,
+  SubwayRunnerLivesComponent,
+  SubwayRunnerScoreComponent,
+  TictactoeBoardComponent,
+  TimerComponent
+});

package/dist/index.mjs

@@ -0,0 +1,425 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/service/BetaGamerService.ts
+import { Injectable, signal } from "@angular/core";
+import { io } from "socket.io-client";
+function decodeToken(token) {
+  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, "/");
+  const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+  return JSON.parse(atob(padded));
+}
+var BetaGamerService = class {
+  constructor() {
+    this._socket = null;
+    this._token = "";
+    this.session = signal(null);
+    this.gameState = signal({ status: "pending", players: [] });
+  }
+  get token() {
+    return this._token;
+  }
+  get socket() {
+    return this._socket;
+  }
+  init(token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io") {
+    this._token = token;
+    const payload = decodeToken(token);
+    this.session.set(payload);
+    this.gameState.set({ status: "pending", players: payload.players });
+    const s = io(`${serverUrl}/${payload.game}`, {
+      auth: { token },
+      path: socketPath,
+      transports: ["websocket", "polling"]
+    });
+    this._socket = s;
+    s.on("connect_error", (err) => {
+      const msg = err.message?.toLowerCase() ?? "";
+      let reason = "Unable to connect to the game server.";
+      if (msg.includes("websocket") || msg.includes("transport")) reason = "Connection failed: server does not accept WebSocket connections.";
+      else if (msg.includes("timeout")) reason = "Connection timed out. Check your internet connection.";
+      else if (msg.includes("unauthorized") || msg.includes("401")) reason = "Connection refused: invalid or expired session token.";
+      else if (msg.includes("not found") || msg.includes("404")) reason = "Game server not found. Check your serverUrl.";
+      else if (msg.includes("cors")) reason = "Connection blocked by CORS policy.";
+      else if (err.message) reason = `Connection error: ${err.message}`;
+      window.alert(`[Beta Gamer] ${reason}`);
+    });
+    s.on("game:state", (state) => {
+      this.gameState.update((prev) => ({ ...prev, ...state }));
+    });
+    s.on("game:over", ({ winner, reason }) => {
+      this.gameState.update((prev) => ({ ...prev, status: "ended", winner, reason }));
+    });
+  }
+  ngOnDestroy() {
+    this._socket?.disconnect();
+    this._socket = null;
+  }
+};
+BetaGamerService = __decorateClass([
+  Injectable()
+], BetaGamerService);
+
+// src/components/PlayerCard.ts
+import { Component, Input, inject } from "@angular/core";
+var PlayerCardComponent = class {
+  constructor() {
+    this.player = "self";
+    this.svc = inject(BetaGamerService);
+  }
+  get displayName() {
+    const players = this.svc.session()?.players ?? [];
+    return (this.player === "self" ? players[0] : players[1])?.displayName ?? "";
+  }
+  get isActive() {
+    const players = this.svc.session()?.players ?? [];
+    const p = this.player === "self" ? players[0] : players[1];
+    return p ? this.svc.gameState().currentTurn === p.id : false;
+  }
+};
+__decorateClass([
+  Input()
+], PlayerCardComponent.prototype, "player", 2);
+PlayerCardComponent = __decorateClass([
+  Component({
+    selector: "bg-player-card",
+    standalone: true,
+    template: `
+    <div [attr.data-active]="isActive" [attr.data-player]="player">
+      <span data-role="display-name">{{ displayName }}</span>
+      @if (isActive) {
+        <span data-role="turn-indicator" aria-label="Your turn"></span>
+      }
+    </div>
+  `
+  })
+], PlayerCardComponent);
+
+// src/components/Timer.ts
+import { Component as Component2, Input as Input2, inject as inject2 } from "@angular/core";
+var TimerComponent = class {
+  constructor() {
+    this.player = "self";
+    this.initialSeconds = 600;
+    this.seconds = this.initialSeconds;
+    this.interval = null;
+    this.svc = inject2(BetaGamerService);
+  }
+  get formatted() {
+    const m = Math.floor(this.seconds / 60).toString().padStart(2, "0");
+    const s = (this.seconds % 60).toString().padStart(2, "0");
+    return `${m}:${s}`;
+  }
+  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.interval = setInterval(() => {
+      if (this.svc.gameState().status === "active") {
+        this.seconds = Math.max(0, this.seconds - 1);
+      }
+    }, 1e3);
+  }
+  ngOnDestroy() {
+    if (this.interval) clearInterval(this.interval);
+  }
+};
+__decorateClass([
+  Input2()
+], TimerComponent.prototype, "player", 2);
+__decorateClass([
+  Input2()
+], TimerComponent.prototype, "initialSeconds", 2);
+TimerComponent = __decorateClass([
+  Component2({
+    selector: "bg-timer",
+    standalone: true,
+    template: `
+    <div [attr.data-player]="player" [attr.data-low]="seconds < 30">
+      <span data-role="clock">{{ formatted }}</span>
+    </div>
+  `
+  })
+], TimerComponent);
+
+// src/components/chess/index.ts
+import { Component as Component3, Input as Input3, ViewChild, inject as inject3 } from "@angular/core";
+var ChessBoardComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = inject3(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/chess`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  Input3()
+], ChessBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  ViewChild("iframe")
+], ChessBoardComponent.prototype, "iframeRef", 2);
+ChessBoardComponent = __decorateClass([
+  Component3({
+    selector: "bg-chess-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'chess') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Chess" allow="autoplay"></iframe>
+    }
+  `
+  })
+], ChessBoardComponent);
+var ChessMoveHistoryComponent = class {
+};
+ChessMoveHistoryComponent = __decorateClass([
+  Component3({
+    selector: "bg-chess-move-history",
+    standalone: true,
+    template: `<div data-role="move-history"></div>`
+  })
+], ChessMoveHistoryComponent);
+var ChessCapturedPiecesComponent = class {
+};
+ChessCapturedPiecesComponent = __decorateClass([
+  Component3({
+    selector: "bg-chess-captured-pieces",
+    standalone: true,
+    template: `<div data-role="captured-pieces"></div>`
+  })
+], 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 {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = inject4(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/checkers`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  Input4()
+], CheckersBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  ViewChild2("iframe")
+], CheckersBoardComponent.prototype, "iframeRef", 2);
+CheckersBoardComponent = __decorateClass([
+  Component4({
+    selector: "bg-checkers-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'checkers') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Checkers"></iframe>
+    }
+  `
+  })
+], 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 {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = inject5(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/connect4`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  Input5()
+], Connect4BoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  ViewChild3("iframe")
+], Connect4BoardComponent.prototype, "iframeRef", 2);
+Connect4BoardComponent = __decorateClass([
+  Component5({
+    selector: "bg-connect4-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'connect4') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Connect 4"></iframe>
+    }
+  `
+  })
+], Connect4BoardComponent);
+var Connect4ScoreComponent = class {
+  constructor() {
+    this.svc = inject5(BetaGamerService);
+  }
+  get scores() {
+    const s = this.svc.gameState()?.scores ?? {};
+    return Object.entries(s).map(([id, score]) => ({ id, score }));
+  }
+};
+Connect4ScoreComponent = __decorateClass([
+  Component5({
+    selector: "bg-connect4-score",
+    standalone: true,
+    template: `
+    <div data-role="score">
+      @for (entry of scores; track entry.id) {
+        <span [attr.data-player]="entry.id" data-role="score-value">{{ entry.score }}</span>
+      }
+    </div>
+  `
+  })
+], 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 {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = inject6(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/tictactoe`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  Input6()
+], TictactoeBoardComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  ViewChild4("iframe")
+], TictactoeBoardComponent.prototype, "iframeRef", 2);
+TictactoeBoardComponent = __decorateClass([
+  Component6({
+    selector: "bg-tictactoe-board",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'tictactoe') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Tic-tac-toe"></iframe>
+    }
+  `
+  })
+], TictactoeBoardComponent);
+
+// src/components/subway-runner/index.ts
+import { Component as Component7, Input as Input7, ViewChild as ViewChild5, inject as inject7 } from "@angular/core";
+var SubwayRunnerGameComponent = class {
+  constructor() {
+    this.serverUrl = "https://api.beta-gamer.com";
+    this.svc = inject7(BetaGamerService);
+  }
+  get embedUrl() {
+    return `${this.serverUrl}/embed/subway-runner`;
+  }
+  ngAfterViewInit() {
+    const iframe = this.iframeRef?.nativeElement;
+    if (!iframe) return;
+    iframe.addEventListener("load", () => {
+      iframe.contentWindow?.postMessage({ type: "bg:init", token: this.svc.token }, "*");
+    });
+  }
+};
+__decorateClass([
+  Input7()
+], SubwayRunnerGameComponent.prototype, "serverUrl", 2);
+__decorateClass([
+  ViewChild5("iframe")
+], SubwayRunnerGameComponent.prototype, "iframeRef", 2);
+SubwayRunnerGameComponent = __decorateClass([
+  Component7({
+    selector: "bg-subway-runner",
+    standalone: true,
+    template: `
+    @if (svc.session()?.game === 'subway-runner') {
+      <iframe #iframe [src]="embedUrl" style="border:none;width:100%;height:100%" title="Subway Runner"></iframe>
+    }
+  `
+  })
+], SubwayRunnerGameComponent);
+var SubwayRunnerScoreComponent = class {
+  constructor() {
+    this.svc = inject7(BetaGamerService);
+  }
+  get score() {
+    return this.svc.gameState()?.score ?? 0;
+  }
+};
+SubwayRunnerScoreComponent = __decorateClass([
+  Component7({
+    selector: "bg-subway-runner-score",
+    standalone: true,
+    template: `<div data-role="score"><span data-role="score-value">{{ score }}</span></div>`
+  })
+], SubwayRunnerScoreComponent);
+var SubwayRunnerLivesComponent = class {
+  constructor() {
+    this.svc = inject7(BetaGamerService);
+  }
+  get lives() {
+    return this.svc.gameState()?.lives ?? 0;
+  }
+};
+SubwayRunnerLivesComponent = __decorateClass([
+  Component7({
+    selector: "bg-subway-runner-lives",
+    standalone: true,
+    template: `<div data-role="lives"><span data-role="lives-value">{{ lives }}</span></div>`
+  })
+], SubwayRunnerLivesComponent);
+export {
+  BetaGamerService,
+  CheckersBoardComponent,
+  ChessBoardComponent,
+  ChessCapturedPiecesComponent,
+  ChessMoveHistoryComponent,
+  Connect4BoardComponent,
+  Connect4ScoreComponent,
+  PlayerCardComponent,
+  SubwayRunnerGameComponent,
+  SubwayRunnerLivesComponent,
+  SubwayRunnerScoreComponent,
+  TictactoeBoardComponent,
+  TimerComponent
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@beta-gamer/angular",
+  "version": "0.1.1",
+  "description": "Angular SDK for Beta Gamer GaaS — composable game components",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external @angular/core --external @angular/common --external rxjs --external socket.io-client",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external @angular/core --external @angular/common --external rxjs --external socket.io-client --watch"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=16",
+    "@angular/core": ">=16",
+    "rxjs": ">=7"
+  },
+  "dependencies": {
+    "socket.io-client": "^4.8.1"
+  },
+  "devDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "rxjs": "^7.8.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acetennyson/beta-gamer-sdk"
+  },
+  "license": "MIT"
+}