react-rubiks-cube 0.1.0 → 0.1.2
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 +45 -2
- package/package.json +8 -3
package/README.md
CHANGED
|
@@ -7,9 +7,13 @@
|
|
|
7
7
|
It scrambles and solves itself in an endless loop, tumbles gently in 3D, and — when you click it — opens a fullscreen playground where you can drag faces to turn them or drive it with Rubik's-notation buttons. Fully themeable, ~8 kB gzipped, zero configuration to drop in.
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/react-rubiks-cube)
|
|
10
|
-
[](
|
|
10
|
+
[](https://github.com/chahe-dridi/cubex/blob/master/LICENSE)
|
|
11
11
|
[](https://github.com/chahe-dridi/cubex/stargazers)
|
|
12
12
|
|
|
13
|
+
### [▶ Live demo](https://cubex-fawn-xi.vercel.app)
|
|
14
|
+
|
|
15
|
+
<a href="https://cubex-fawn-xi.vercel.app"><img src="https://raw.githubusercontent.com/chahe-dridi/cubex/master/.github/media/hero.gif" alt="Three cubex cubes, in the brand, classic and a custom purple palette, scrambling and solving themselves while they tumble in 3D" width="760"></a>
|
|
16
|
+
|
|
13
17
|
[Features](#features) · [Install](#install) · [Quick start](#quick-start) · [Props](#props) · [Theming](#theming) · [Advanced](#advanced)
|
|
14
18
|
|
|
15
19
|
**Like it? [⭐ Star the repo](https://github.com/chahe-dridi/cubex) — it genuinely helps others find it.**
|
|
@@ -27,6 +31,12 @@ It scrambles and solves itself in an endless loop, tumbles gently in 3D, and —
|
|
|
27
31
|
- 🧩 **Composable** — use the one-line `<RubiksCube />`, or drop the underlying scenes into your own `<Canvas>`.
|
|
28
32
|
- 🔒 **TypeScript** — full typings included.
|
|
29
33
|
|
|
34
|
+
### Click a cube to play with it
|
|
35
|
+
|
|
36
|
+
<img src="https://raw.githubusercontent.com/chahe-dridi/cubex/master/.github/media/playground.gif" alt="The fullscreen playground: the cube turns as the R, U, F, L and D notation buttons are pressed in the control panel" width="560">
|
|
37
|
+
|
|
38
|
+
Drag a face to turn a slice, orbit to look around, or use the Rubik's-notation buttons. Left alone, it undoes your moves and solves itself.
|
|
39
|
+
|
|
30
40
|
## Install
|
|
31
41
|
|
|
32
42
|
```bash
|
|
@@ -173,8 +183,41 @@ cd cubex
|
|
|
173
183
|
npm install
|
|
174
184
|
npm run dev # runs the interactive demo in example/
|
|
175
185
|
npm run build # builds the library into dist/
|
|
186
|
+
npm run media # re-records the README GIFs (needs Chrome; run build:demo first)
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Roadmap & contributing
|
|
190
|
+
|
|
191
|
+
Contributions are very welcome — the repo has a set of scoped issues to pick from:
|
|
192
|
+
|
|
193
|
+
- 🟢 **Good first issues** — [more built-in palettes](https://github.com/chahe-dridi/cubex/issues/7), [`prefers-reduced-motion` support](https://github.com/chahe-dridi/cubex/issues/1), [a preview GIF](https://github.com/chahe-dridi/cubex/issues/3)
|
|
194
|
+
- ✨ **Features** — [imperative `scramble()`/`solve()` API](https://github.com/chahe-dridi/cubex/issues/4), [keyboard controls](https://github.com/chahe-dridi/cubex/issues/5), [NxN cubes](https://github.com/chahe-dridi/cubex/issues/6)
|
|
195
|
+
|
|
196
|
+
See all [open issues](https://github.com/chahe-dridi/cubex/issues). Grab one, comment to claim it, then follow the flow below.
|
|
197
|
+
|
|
198
|
+
### Branching model
|
|
199
|
+
|
|
200
|
+
| Branch | Role |
|
|
201
|
+
| --------- | ------------------------------------------------------------------- |
|
|
202
|
+
| `master` | Stable / release branch. This is what npm publishes and what `npm install github:chahe-dridi/cubex` pulls. Never push straight to it. |
|
|
203
|
+
| `dev` | Integration branch. All work lands here first and is tested together. |
|
|
204
|
+
| `feat/*` | Your working branch, one per issue. |
|
|
205
|
+
|
|
206
|
+
**All pull requests target `dev`, not `master`.** Once changes on `dev` are tested and stable, a maintainer merges `dev → master` and cuts a release.
|
|
207
|
+
|
|
208
|
+
```bash
|
|
209
|
+
# 1. Branch off dev
|
|
210
|
+
git checkout dev && git pull
|
|
211
|
+
git checkout -b feat/reduced-motion # e.g. issue #1
|
|
212
|
+
|
|
213
|
+
# 2. Do the work, then push
|
|
214
|
+
git push -u origin feat/reduced-motion
|
|
215
|
+
|
|
216
|
+
# 3. Open a PR into dev
|
|
176
217
|
```
|
|
177
218
|
|
|
219
|
+
See [CONTRIBUTING.md](https://github.com/chahe-dridi/cubex/blob/master/CONTRIBUTING.md) for the full guide.
|
|
220
|
+
|
|
178
221
|
## Support
|
|
179
222
|
|
|
180
223
|
If cubex saved you some time or just made you smile:
|
|
@@ -187,4 +230,4 @@ Every star and share is genuinely appreciated. 🙏
|
|
|
187
230
|
|
|
188
231
|
## License
|
|
189
232
|
|
|
190
|
-
[MIT](
|
|
233
|
+
[MIT](https://github.com/chahe-dridi/cubex/blob/master/LICENSE) © chahe-dridi
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-rubiks-cube",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A beautiful, self-solving 3D Rubik's Cube React component — auto scramble/solve loop, drag-to-turn interaction, and a fully themeable palette. Built on react-three-fiber.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -46,8 +46,10 @@
|
|
|
46
46
|
"scripts": {
|
|
47
47
|
"dev": "vite",
|
|
48
48
|
"build": "vite build",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
49
|
+
"build:demo": "vite build --config vite.demo.config.js",
|
|
50
|
+
"preview": "vite preview --config vite.demo.config.js",
|
|
51
|
+
"prepare": "vite build",
|
|
52
|
+
"media": "node scripts/readme-media.mjs"
|
|
51
53
|
},
|
|
52
54
|
"peerDependencies": {
|
|
53
55
|
"@react-three/drei": ">=9.0.0",
|
|
@@ -62,6 +64,9 @@
|
|
|
62
64
|
"@react-three/fiber": "^8.18.0",
|
|
63
65
|
"@vitejs/plugin-react": "^4.3.1",
|
|
64
66
|
"framer-motion": "^11.3.0",
|
|
67
|
+
"gifenc": "^1.0.3",
|
|
68
|
+
"pngjs": "^7.0.0",
|
|
69
|
+
"puppeteer-core": "^25.16.0",
|
|
65
70
|
"react": "^18.3.1",
|
|
66
71
|
"react-dom": "^18.3.1",
|
|
67
72
|
"three": "^0.186.1",
|