@thewhateverapp/tile-sdk 0.17.6 → 0.17.7
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.
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
* This component creates an Excalibur Engine imperatively and provides
|
|
5
5
|
* it via React context for game development.
|
|
6
6
|
*
|
|
7
|
+
* IMPORTANT: This component is NOT SSR-safe. Excalibur.js requires browser APIs.
|
|
8
|
+
* The component automatically handles SSR by rendering a loading placeholder
|
|
9
|
+
* until the client-side code is ready.
|
|
10
|
+
*
|
|
7
11
|
* @example
|
|
8
12
|
* ```tsx
|
|
9
13
|
* import { ExcaliburGame, useEngine, useGameLoop } from '@thewhateverapp/tile-sdk/excalibur';
|
|
@@ -43,7 +47,6 @@
|
|
|
43
47
|
* ```
|
|
44
48
|
*/
|
|
45
49
|
import React, { type ReactNode } from 'react';
|
|
46
|
-
import { Engine, DisplayMode, type Scene } from 'excalibur';
|
|
47
50
|
export { Actor, Vector, Color, Engine, Scene, Timer, Trigger, Label } from 'excalibur';
|
|
48
51
|
export { Sprite, SpriteSheet, Animation, AnimationStrategy, AnimationDirection, Graphic, GraphicsGroup, Rectangle, Circle, Polygon, Line, Text, Font, Canvas, ImageFiltering, ImageWrapping, } from 'excalibur';
|
|
49
52
|
export { ImageSource, Sound, Loader, DefaultLoader, Resource, Gif, } from 'excalibur';
|
|
@@ -67,11 +70,11 @@ export declare const GAME_HEIGHT = 1920;
|
|
|
67
70
|
/**
|
|
68
71
|
* Hook to get the Excalibur Engine
|
|
69
72
|
*/
|
|
70
|
-
export declare function useEngine(): Engine | null;
|
|
73
|
+
export declare function useEngine(): import('excalibur').Engine | null;
|
|
71
74
|
/**
|
|
72
75
|
* Hook to get the current scene
|
|
73
76
|
*/
|
|
74
|
-
export declare function useScene(): Scene | null;
|
|
77
|
+
export declare function useScene(): import('excalibur').Scene | null;
|
|
75
78
|
/**
|
|
76
79
|
* useGameLoop - Run a callback every frame
|
|
77
80
|
*
|
|
@@ -88,7 +91,7 @@ export interface ExcaliburGameProps {
|
|
|
88
91
|
/** Background color (CSS color string, default: black) */
|
|
89
92
|
backgroundColor?: string;
|
|
90
93
|
/** Display mode (default: FitContainerAndFill - scales to fill container) */
|
|
91
|
-
displayMode?: DisplayMode;
|
|
94
|
+
displayMode?: import('excalibur').DisplayMode;
|
|
92
95
|
/** Game options */
|
|
93
96
|
options?: {
|
|
94
97
|
antialiasing?: boolean;
|
|
@@ -98,13 +101,16 @@ export interface ExcaliburGameProps {
|
|
|
98
101
|
/** Whether game is paused */
|
|
99
102
|
paused?: boolean;
|
|
100
103
|
/** Callback when Engine is ready */
|
|
101
|
-
onMount?: (engine: Engine) => void;
|
|
104
|
+
onMount?: (engine: import('excalibur').Engine) => void;
|
|
102
105
|
}
|
|
103
106
|
/**
|
|
104
107
|
* ExcaliburGame - Main wrapper component for Excalibur.js games
|
|
105
108
|
*
|
|
106
109
|
* Creates an Excalibur Engine and provides it via context.
|
|
107
110
|
* Children can use useEngine() to access the engine and add actors/entities.
|
|
111
|
+
*
|
|
112
|
+
* This component handles SSR gracefully by rendering a loading placeholder
|
|
113
|
+
* until the client-side Excalibur engine is ready.
|
|
108
114
|
*/
|
|
109
115
|
export declare function ExcaliburGame({ children, width, height, backgroundColor, displayMode, options, paused, onMount, }: ExcaliburGameProps): React.JSX.Element;
|
|
110
116
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExcaliburGame.d.ts","sourceRoot":"","sources":["../../src/react/ExcaliburGame.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"ExcaliburGame.d.ts","sourceRoot":"","sources":["../../src/react/ExcaliburGame.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
* This component creates an Excalibur Engine imperatively and provides
|
|
6
6
|
* it via React context for game development.
|
|
7
7
|
*
|
|
8
|
+
* IMPORTANT: This component is NOT SSR-safe. Excalibur.js requires browser APIs.
|
|
9
|
+
* The component automatically handles SSR by rendering a loading placeholder
|
|
10
|
+
* until the client-side code is ready.
|
|
11
|
+
*
|
|
8
12
|
* @example
|
|
9
13
|
* ```tsx
|
|
10
14
|
* import { ExcaliburGame, useEngine, useGameLoop } from '@thewhateverapp/tile-sdk/excalibur';
|
|
@@ -44,7 +48,20 @@
|
|
|
44
48
|
* ```
|
|
45
49
|
*/
|
|
46
50
|
import React, { createContext, useContext, useRef, useEffect, useState, useCallback, } from 'react';
|
|
47
|
-
|
|
51
|
+
// SSR detection - Excalibur requires browser APIs
|
|
52
|
+
const isBrowser = typeof window !== 'undefined';
|
|
53
|
+
// Only import Excalibur on the client side
|
|
54
|
+
// These will be undefined during SSR
|
|
55
|
+
let Engine;
|
|
56
|
+
let DisplayMode;
|
|
57
|
+
let ExColor;
|
|
58
|
+
if (isBrowser) {
|
|
59
|
+
// Dynamic require on client only
|
|
60
|
+
const ex = require('excalibur');
|
|
61
|
+
Engine = ex.Engine;
|
|
62
|
+
DisplayMode = ex.DisplayMode;
|
|
63
|
+
ExColor = ex.Color;
|
|
64
|
+
}
|
|
48
65
|
// Re-export Excalibur classes for convenience
|
|
49
66
|
// Core
|
|
50
67
|
export { Actor, Vector, Color, Engine, Scene, Timer, Trigger, Label } from 'excalibur';
|
|
@@ -123,20 +140,38 @@ export function useGameLoop(callback, enabled = true) {
|
|
|
123
140
|
*
|
|
124
141
|
* Creates an Excalibur Engine and provides it via context.
|
|
125
142
|
* Children can use useEngine() to access the engine and add actors/entities.
|
|
143
|
+
*
|
|
144
|
+
* This component handles SSR gracefully by rendering a loading placeholder
|
|
145
|
+
* until the client-side Excalibur engine is ready.
|
|
126
146
|
*/
|
|
127
|
-
export function ExcaliburGame({ children, width = GAME_WIDTH, height = GAME_HEIGHT, backgroundColor = '#000000', displayMode
|
|
147
|
+
export function ExcaliburGame({ children, width = GAME_WIDTH, height = GAME_HEIGHT, backgroundColor = '#000000', displayMode, options = {}, paused = false, onMount, }) {
|
|
128
148
|
const containerRef = useRef(null);
|
|
129
149
|
const engineRef = useRef(null);
|
|
130
150
|
const updateCallbacksRef = useRef(new Set());
|
|
131
151
|
const [isReady, setIsReady] = useState(false);
|
|
152
|
+
// SSR guard - render loading placeholder on server
|
|
153
|
+
if (!isBrowser || !Engine || !DisplayMode || !ExColor) {
|
|
154
|
+
return (React.createElement("div", { style: {
|
|
155
|
+
width: '100%',
|
|
156
|
+
height: '100dvh',
|
|
157
|
+
overflow: 'hidden',
|
|
158
|
+
backgroundColor,
|
|
159
|
+
display: 'flex',
|
|
160
|
+
alignItems: 'center',
|
|
161
|
+
justifyContent: 'center'
|
|
162
|
+
} },
|
|
163
|
+
React.createElement("div", { style: { color: '#fff', fontSize: '18px' } }, "Loading game...")));
|
|
164
|
+
}
|
|
165
|
+
// Use default display mode (must be after SSR check since DisplayMode is undefined on server)
|
|
166
|
+
const resolvedDisplayMode = displayMode ?? DisplayMode.FitContainerAndFill;
|
|
132
167
|
// Create Excalibur Engine
|
|
133
168
|
useEffect(() => {
|
|
134
|
-
if (!containerRef.current)
|
|
169
|
+
if (!containerRef.current || !Engine || !ExColor)
|
|
135
170
|
return;
|
|
136
171
|
const engine = new Engine({
|
|
137
172
|
width,
|
|
138
173
|
height,
|
|
139
|
-
displayMode,
|
|
174
|
+
displayMode: resolvedDisplayMode,
|
|
140
175
|
backgroundColor: ExColor.fromHex(backgroundColor),
|
|
141
176
|
canvasElementId: undefined,
|
|
142
177
|
antialiasing: options.antialiasing ?? true,
|