@3rg0n/breakout404-react 0.6.0 → 0.6.1
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/README.md +108 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# @3rg0n/breakout404-react
|
|
2
|
+
|
|
3
|
+
React component for [Breakout404](https://github.com/3rg0n/breakout404) — a customizable 404 page game where visitors destroy blocks arranged to spell "404".
|
|
4
|
+
|
|
5
|
+
**[Live Demo](https://3rg0n.github.io/breakout404/)** · **[Try the 404 page](https://3rg0n.github.io/breakout404/play)**
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @3rg0n/breakout404-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Requires React 17 or newer (`react` and `react-dom` are peer dependencies). [`@3rg0n/breakout404-core`](https://www.npmjs.com/package/@3rg0n/breakout404-core) is bundled as a dependency — you don't need to install it separately.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Next.js App Router
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
// app/not-found.tsx
|
|
21
|
+
'use client';
|
|
22
|
+
|
|
23
|
+
import { Breakout404 } from '@3rg0n/breakout404-react';
|
|
24
|
+
|
|
25
|
+
export default function NotFound() {
|
|
26
|
+
return (
|
|
27
|
+
<div style={{ width: '100vw', height: '100vh' }}>
|
|
28
|
+
<Breakout404
|
|
29
|
+
difficulty="medium"
|
|
30
|
+
showScore
|
|
31
|
+
onComplete={() => console.log('Game complete!')}
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The `'use client'` directive is required — the game renders to a canvas and needs the browser.
|
|
39
|
+
|
|
40
|
+
### Next.js Pages Router
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
// pages/404.tsx
|
|
44
|
+
import { Breakout404 } from '@3rg0n/breakout404-react';
|
|
45
|
+
|
|
46
|
+
export default function NotFound() {
|
|
47
|
+
return (
|
|
48
|
+
<div style={{ width: '100vw', height: '100vh' }}>
|
|
49
|
+
<Breakout404 difficulty="medium" redirectUrl="/" />
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Sizing
|
|
56
|
+
|
|
57
|
+
The component renders a `div` that fills its parent, so give the parent an explicit size. Style it directly with `className` or `style`:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Breakout404 className="my-game" style={{ height: '60vh' }} />
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Props
|
|
64
|
+
|
|
65
|
+
`Breakout404Props` extends `Breakout404Options` from the core package, plus `className` and `style`.
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
|------|------|---------|-------------|
|
|
69
|
+
| `theme` | `Partial<Breakout404Theme>` | See core docs | Customize colors and fonts |
|
|
70
|
+
| `difficulty` | `'easy' \| 'medium' \| 'hard'` | `'medium'` | Game difficulty |
|
|
71
|
+
| `showScore` | `boolean` | `true` | Show score and lives |
|
|
72
|
+
| `onComplete` | `() => void` | - | Called when all blocks are destroyed |
|
|
73
|
+
| `onBlockDestroyed` | `(remaining: number) => void` | - | Called when a block is destroyed |
|
|
74
|
+
| `redirectUrl` | `string` | - | URL to redirect to after completion (http/https/relative only) |
|
|
75
|
+
| `redirectDelay` | `number` | `2000` | Delay before redirect (ms) |
|
|
76
|
+
| `logger` | `Breakout404Logger` | - | Structured logger for game lifecycle events |
|
|
77
|
+
| `className` | `string` | - | Class applied to the container `div` |
|
|
78
|
+
| `style` | `React.CSSProperties` | - | Inline styles for the container `div` |
|
|
79
|
+
|
|
80
|
+
### Prop updates
|
|
81
|
+
|
|
82
|
+
Changing `difficulty`, `theme`, `showScore`, `redirectUrl`, `redirectDelay`, or `logger` re-applies to the running game without recreating it. `onComplete` and `onBlockDestroyed` are held in a ref, so you can pass inline arrow functions without forcing the game to rebuild — the game always calls the latest version.
|
|
83
|
+
|
|
84
|
+
The instance is created once on mount and `destroy()`d on unmount, so listeners and animation frames are cleaned up correctly under Strict Mode and Fast Refresh.
|
|
85
|
+
|
|
86
|
+
## Re-exports
|
|
87
|
+
|
|
88
|
+
Everything public from the core package is re-exported, so you don't need a second import:
|
|
89
|
+
|
|
90
|
+
```ts
|
|
91
|
+
import {
|
|
92
|
+
defaultTheme,
|
|
93
|
+
mergeTheme,
|
|
94
|
+
isValidRedirectUrl,
|
|
95
|
+
DIFFICULTY_SETTINGS,
|
|
96
|
+
step,
|
|
97
|
+
type Breakout404Theme,
|
|
98
|
+
type GameEvent,
|
|
99
|
+
} from '@3rg0n/breakout404-react';
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Security
|
|
103
|
+
|
|
104
|
+
`redirectUrl` is validated — only `http:`, `https:`, and relative paths are accepted; `javascript:`, `data:` and similar are rejected. See the [threat model](https://github.com/3rg0n/breakout404/blob/master/THREAT_MODEL.md).
|
|
105
|
+
|
|
106
|
+
## License
|
|
107
|
+
|
|
108
|
+
[MIT](https://github.com/3rg0n/breakout404/blob/master/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@3rg0n/breakout404-react",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "React component for Breakout404 - a Breakout-style 404 page game",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react-dom": ">=17.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@3rg0n/breakout404-core": "0.6.
|
|
35
|
+
"@3rg0n/breakout404-core": "0.6.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@types/react": "^18.3.28",
|