@beta-gamer/react 0.1.5 → 0.1.8
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.
- package/dist/index.d.mts +1 -4
- package/dist/index.d.ts +1 -4
- package/dist/index.js +20 -9
- package/dist/index.mjs +20 -9
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -41,6 +41,7 @@ interface GameState {
|
|
|
41
41
|
|
|
42
42
|
interface BetaGamerContextValue {
|
|
43
43
|
token: string;
|
|
44
|
+
serverUrl: string;
|
|
44
45
|
session: SessionTokenPayload;
|
|
45
46
|
socket: Socket | null;
|
|
46
47
|
gameState: GameState;
|
|
@@ -85,10 +86,6 @@ declare function Timer({ player, initialSeconds, className }: TimerProps): react
|
|
|
85
86
|
interface ChessBoardProps {
|
|
86
87
|
className?: string;
|
|
87
88
|
}
|
|
88
|
-
/**
|
|
89
|
-
* The chess board — handles all game rendering and move input internally.
|
|
90
|
-
* Place this anywhere in your layout. Style the container via className.
|
|
91
|
-
*/
|
|
92
89
|
declare function ChessBoard({ className }: ChessBoardProps): react_jsx_runtime.JSX.Element | null;
|
|
93
90
|
|
|
94
91
|
interface ChessMoveHistoryProps {
|
package/dist/index.d.ts
CHANGED
|
@@ -41,6 +41,7 @@ interface GameState {
|
|
|
41
41
|
|
|
42
42
|
interface BetaGamerContextValue {
|
|
43
43
|
token: string;
|
|
44
|
+
serverUrl: string;
|
|
44
45
|
session: SessionTokenPayload;
|
|
45
46
|
socket: Socket | null;
|
|
46
47
|
gameState: GameState;
|
|
@@ -85,10 +86,6 @@ declare function Timer({ player, initialSeconds, className }: TimerProps): react
|
|
|
85
86
|
interface ChessBoardProps {
|
|
86
87
|
className?: string;
|
|
87
88
|
}
|
|
88
|
-
/**
|
|
89
|
-
* The chess board — handles all game rendering and move input internally.
|
|
90
|
-
* Place this anywhere in your layout. Style the container via className.
|
|
91
|
-
*/
|
|
92
89
|
declare function ChessBoard({ className }: ChessBoardProps): react_jsx_runtime.JSX.Element | null;
|
|
93
90
|
|
|
94
91
|
interface ChessMoveHistoryProps {
|
package/dist/index.js
CHANGED
|
@@ -70,6 +70,17 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
|
|
|
70
70
|
transports: ["websocket", "polling"]
|
|
71
71
|
});
|
|
72
72
|
setSocket(s);
|
|
73
|
+
s.on("connect_error", (err) => {
|
|
74
|
+
const msg = err.message?.toLowerCase() ?? "";
|
|
75
|
+
let reason = "Unable to connect to the game server.";
|
|
76
|
+
if (msg.includes("websocket") || msg.includes("transport")) reason = "Connection failed: server does not accept WebSocket connections.";
|
|
77
|
+
else if (msg.includes("timeout")) reason = "Connection timed out. Check your internet connection.";
|
|
78
|
+
else if (msg.includes("unauthorized") || msg.includes("401")) reason = "Connection refused: invalid or expired session token.";
|
|
79
|
+
else if (msg.includes("not found") || msg.includes("404")) reason = "Game server not found. Check your serverUrl.";
|
|
80
|
+
else if (msg.includes("cors")) reason = "Connection blocked by CORS policy.";
|
|
81
|
+
else if (err.message) reason = `Connection error: ${err.message}`;
|
|
82
|
+
alert(`[Beta Gamer] ${reason}`);
|
|
83
|
+
});
|
|
73
84
|
s.on("game:state", (state) => {
|
|
74
85
|
setGameState((prev) => ({ ...prev, ...state }));
|
|
75
86
|
});
|
|
@@ -88,7 +99,7 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
|
|
|
88
99
|
setSocket(null);
|
|
89
100
|
};
|
|
90
101
|
}, [token, serverUrl, session.game, socketPath]);
|
|
91
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetaGamerContext.Provider, { value: { token, session, socket, gameState, theme: session.theme ?? {} }, children });
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetaGamerContext.Provider, { value: { token, serverUrl, session, socket, gameState, theme: session.theme ?? {} }, children });
|
|
92
103
|
}
|
|
93
104
|
function useBetaGamer() {
|
|
94
105
|
const ctx = (0, import_react.useContext)(BetaGamerContext);
|
|
@@ -159,7 +170,7 @@ function Timer({ player, initialSeconds = 600, className }) {
|
|
|
159
170
|
var import_react3 = require("react");
|
|
160
171
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
161
172
|
function ChessBoard({ className }) {
|
|
162
|
-
const { token, session } = useBetaGamer();
|
|
173
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
163
174
|
const iframeRef = (0, import_react3.useRef)(null);
|
|
164
175
|
(0, import_react3.useEffect)(() => {
|
|
165
176
|
const iframe = iframeRef.current;
|
|
@@ -173,7 +184,7 @@ function ChessBoard({ className }) {
|
|
|
173
184
|
"iframe",
|
|
174
185
|
{
|
|
175
186
|
ref: iframeRef,
|
|
176
|
-
src: `${
|
|
187
|
+
src: `${serverUrl}/embed/chess`,
|
|
177
188
|
className,
|
|
178
189
|
style: { border: "none", width: "100%", height: "100%" },
|
|
179
190
|
allow: "autoplay",
|
|
@@ -251,7 +262,7 @@ function ChessCapturedPieces({ player, className }) {
|
|
|
251
262
|
var import_react6 = require("react");
|
|
252
263
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
253
264
|
function CheckersBoard({ className }) {
|
|
254
|
-
const { token, session } = useBetaGamer();
|
|
265
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
255
266
|
const iframeRef = (0, import_react6.useRef)(null);
|
|
256
267
|
(0, import_react6.useEffect)(() => {
|
|
257
268
|
const iframe = iframeRef.current;
|
|
@@ -261,14 +272,14 @@ function CheckersBoard({ className }) {
|
|
|
261
272
|
return () => iframe.removeEventListener("load", onLoad);
|
|
262
273
|
}, [token]);
|
|
263
274
|
if (session.game !== "checkers") return null;
|
|
264
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("iframe", { ref: iframeRef, src: `${
|
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("iframe", { ref: iframeRef, src: `${serverUrl}/embed/checkers`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Checkers" });
|
|
265
276
|
}
|
|
266
277
|
|
|
267
278
|
// src/components/connect4/index.tsx
|
|
268
279
|
var import_react7 = require("react");
|
|
269
280
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
270
281
|
function Connect4Board({ className }) {
|
|
271
|
-
const { token, session } = useBetaGamer();
|
|
282
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
272
283
|
const iframeRef = (0, import_react7.useRef)(null);
|
|
273
284
|
(0, import_react7.useEffect)(() => {
|
|
274
285
|
const iframe = iframeRef.current;
|
|
@@ -278,7 +289,7 @@ function Connect4Board({ className }) {
|
|
|
278
289
|
return () => iframe.removeEventListener("load", onLoad);
|
|
279
290
|
}, [token]);
|
|
280
291
|
if (session.game !== "connect4") return null;
|
|
281
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("iframe", { ref: iframeRef, src: `${
|
|
292
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("iframe", { ref: iframeRef, src: `${serverUrl}/embed/connect4`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Connect 4" });
|
|
282
293
|
}
|
|
283
294
|
function Connect4Score({ className }) {
|
|
284
295
|
const { gameState } = useBetaGamer();
|
|
@@ -290,7 +301,7 @@ function Connect4Score({ className }) {
|
|
|
290
301
|
var import_react8 = require("react");
|
|
291
302
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
292
303
|
function TictactoeBoard({ className }) {
|
|
293
|
-
const { token, session } = useBetaGamer();
|
|
304
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
294
305
|
const iframeRef = (0, import_react8.useRef)(null);
|
|
295
306
|
(0, import_react8.useEffect)(() => {
|
|
296
307
|
const iframe = iframeRef.current;
|
|
@@ -300,7 +311,7 @@ function TictactoeBoard({ className }) {
|
|
|
300
311
|
return () => iframe.removeEventListener("load", onLoad);
|
|
301
312
|
}, [token]);
|
|
302
313
|
if (session.game !== "tictactoe") return null;
|
|
303
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("iframe", { ref: iframeRef, src: `${
|
|
314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("iframe", { ref: iframeRef, src: `${serverUrl}/embed/tictactoe`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Tic-tac-toe" });
|
|
304
315
|
}
|
|
305
316
|
|
|
306
317
|
// src/components/subway-runner/index.tsx
|
package/dist/index.mjs
CHANGED
|
@@ -27,6 +27,17 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
|
|
|
27
27
|
transports: ["websocket", "polling"]
|
|
28
28
|
});
|
|
29
29
|
setSocket(s);
|
|
30
|
+
s.on("connect_error", (err) => {
|
|
31
|
+
const msg = err.message?.toLowerCase() ?? "";
|
|
32
|
+
let reason = "Unable to connect to the game server.";
|
|
33
|
+
if (msg.includes("websocket") || msg.includes("transport")) reason = "Connection failed: server does not accept WebSocket connections.";
|
|
34
|
+
else if (msg.includes("timeout")) reason = "Connection timed out. Check your internet connection.";
|
|
35
|
+
else if (msg.includes("unauthorized") || msg.includes("401")) reason = "Connection refused: invalid or expired session token.";
|
|
36
|
+
else if (msg.includes("not found") || msg.includes("404")) reason = "Game server not found. Check your serverUrl.";
|
|
37
|
+
else if (msg.includes("cors")) reason = "Connection blocked by CORS policy.";
|
|
38
|
+
else if (err.message) reason = `Connection error: ${err.message}`;
|
|
39
|
+
alert(`[Beta Gamer] ${reason}`);
|
|
40
|
+
});
|
|
30
41
|
s.on("game:state", (state) => {
|
|
31
42
|
setGameState((prev) => ({ ...prev, ...state }));
|
|
32
43
|
});
|
|
@@ -45,7 +56,7 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
|
|
|
45
56
|
setSocket(null);
|
|
46
57
|
};
|
|
47
58
|
}, [token, serverUrl, session.game, socketPath]);
|
|
48
|
-
return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, session, socket, gameState, theme: session.theme ?? {} }, children });
|
|
59
|
+
return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, serverUrl, session, socket, gameState, theme: session.theme ?? {} }, children });
|
|
49
60
|
}
|
|
50
61
|
function useBetaGamer() {
|
|
51
62
|
const ctx = useContext(BetaGamerContext);
|
|
@@ -116,7 +127,7 @@ function Timer({ player, initialSeconds = 600, className }) {
|
|
|
116
127
|
import { useEffect as useEffect3, useRef } from "react";
|
|
117
128
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
118
129
|
function ChessBoard({ className }) {
|
|
119
|
-
const { token, session } = useBetaGamer();
|
|
130
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
120
131
|
const iframeRef = useRef(null);
|
|
121
132
|
useEffect3(() => {
|
|
122
133
|
const iframe = iframeRef.current;
|
|
@@ -130,7 +141,7 @@ function ChessBoard({ className }) {
|
|
|
130
141
|
"iframe",
|
|
131
142
|
{
|
|
132
143
|
ref: iframeRef,
|
|
133
|
-
src: `${
|
|
144
|
+
src: `${serverUrl}/embed/chess`,
|
|
134
145
|
className,
|
|
135
146
|
style: { border: "none", width: "100%", height: "100%" },
|
|
136
147
|
allow: "autoplay",
|
|
@@ -208,7 +219,7 @@ function ChessCapturedPieces({ player, className }) {
|
|
|
208
219
|
import { useEffect as useEffect6, useRef as useRef2 } from "react";
|
|
209
220
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
210
221
|
function CheckersBoard({ className }) {
|
|
211
|
-
const { token, session } = useBetaGamer();
|
|
222
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
212
223
|
const iframeRef = useRef2(null);
|
|
213
224
|
useEffect6(() => {
|
|
214
225
|
const iframe = iframeRef.current;
|
|
@@ -218,14 +229,14 @@ function CheckersBoard({ className }) {
|
|
|
218
229
|
return () => iframe.removeEventListener("load", onLoad);
|
|
219
230
|
}, [token]);
|
|
220
231
|
if (session.game !== "checkers") return null;
|
|
221
|
-
return /* @__PURE__ */ jsx7("iframe", { ref: iframeRef, src: `${
|
|
232
|
+
return /* @__PURE__ */ jsx7("iframe", { ref: iframeRef, src: `${serverUrl}/embed/checkers`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Checkers" });
|
|
222
233
|
}
|
|
223
234
|
|
|
224
235
|
// src/components/connect4/index.tsx
|
|
225
236
|
import { useEffect as useEffect7, useRef as useRef3 } from "react";
|
|
226
237
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
227
238
|
function Connect4Board({ className }) {
|
|
228
|
-
const { token, session } = useBetaGamer();
|
|
239
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
229
240
|
const iframeRef = useRef3(null);
|
|
230
241
|
useEffect7(() => {
|
|
231
242
|
const iframe = iframeRef.current;
|
|
@@ -235,7 +246,7 @@ function Connect4Board({ className }) {
|
|
|
235
246
|
return () => iframe.removeEventListener("load", onLoad);
|
|
236
247
|
}, [token]);
|
|
237
248
|
if (session.game !== "connect4") return null;
|
|
238
|
-
return /* @__PURE__ */ jsx8("iframe", { ref: iframeRef, src: `${
|
|
249
|
+
return /* @__PURE__ */ jsx8("iframe", { ref: iframeRef, src: `${serverUrl}/embed/connect4`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Connect 4" });
|
|
239
250
|
}
|
|
240
251
|
function Connect4Score({ className }) {
|
|
241
252
|
const { gameState } = useBetaGamer();
|
|
@@ -247,7 +258,7 @@ function Connect4Score({ className }) {
|
|
|
247
258
|
import { useEffect as useEffect8, useRef as useRef4 } from "react";
|
|
248
259
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
249
260
|
function TictactoeBoard({ className }) {
|
|
250
|
-
const { token, session } = useBetaGamer();
|
|
261
|
+
const { token, serverUrl, session } = useBetaGamer();
|
|
251
262
|
const iframeRef = useRef4(null);
|
|
252
263
|
useEffect8(() => {
|
|
253
264
|
const iframe = iframeRef.current;
|
|
@@ -257,7 +268,7 @@ function TictactoeBoard({ className }) {
|
|
|
257
268
|
return () => iframe.removeEventListener("load", onLoad);
|
|
258
269
|
}, [token]);
|
|
259
270
|
if (session.game !== "tictactoe") return null;
|
|
260
|
-
return /* @__PURE__ */ jsx9("iframe", { ref: iframeRef, src: `${
|
|
271
|
+
return /* @__PURE__ */ jsx9("iframe", { ref: iframeRef, src: `${serverUrl}/embed/tictactoe`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Tic-tac-toe" });
|
|
261
272
|
}
|
|
262
273
|
|
|
263
274
|
// src/components/subway-runner/index.tsx
|