https://github.com/kunukn/cube-two
Rubiks Cube 2x2 on web platform
https://github.com/kunukn/cube-two
Last synced: 6 months ago
JSON representation
Rubiks Cube 2x2 on web platform
- Host: GitHub
- URL: https://github.com/kunukn/cube-two
- Owner: kunukn
- License: mit
- Created: 2016-10-27T11:42:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-23T09:20:22.000Z (over 8 years ago)
- Last Synced: 2024-11-25T15:52:25.085Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.54 MB
- Stars: 16
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Cube Two
## Pocket Cube - Rubiks Cube 2x2x2 on web platform
## Demo
http://codepen.io/kunukn/pen/EgzJdR/
## Browser support
| 
| 
| 
|
|
| 
|
|:---:|:---:|:---:|:---:|:---:|:---:|
| 50+ ✅ | 40+ ✅ | 9+ ✅ | 40+ ✅ | 12+ ✅ | ⛔ |
## Getting started
```
You need nodejs
npm install
npm start
start a browser and go to http://localhost:3456/
```
## Configuration
```javascript
var imgPath = 'http://your-cdn-url/image.svg';
var cubetwo = new window.CubeTwo({
cubeComponent: document.getElementById('cubetwo-component-1'), /* required */
isTapEnabled: true, /* default: true */
isRotateAnimationEnabled: true, /* default: true */
borderOnTheCube: true, /* default: true */
backgroundBlendModeOnTheCube: 'multiply',
/* e.g. screen, difference, normal, default: multiply */
backfaceVisibilityHiddenOnTheCube: false, /* default: false */
transition: 'transform cubic-bezier(0.4, 0.0, 0.2, 1) 190ms', /* optional */
backgroundImages: { /* optional */
u: imgPath,
d: imgPath,
f: imgPath,
b: imgPath,
r: imgPath,
l: imgPath,
},
backgroundColors: { /* optional */
u: 'rgba(255, 255, 255, .9)',
d: 'rgba(255, 213, 0, .9)',
f: 'rgba(0, 158, 96, .9)',
b: 'rgba(0, 81, 186, .9)',
r: 'rgba(196, 30, 58, .9)',
l: 'rgba(255, 88, 0, .9)',
backface: 'transparent',
},
cubeSize: { /* optional */
value: 25,
unit: 'vmin',
}
});
/* optional callbacks */
cubetwo.addCallbackForEvent('init', function(eventname, payload){});
cubetwo.addCallbackForEvent('statechange', function(eventname, payload){});
cubetwo.addCallbackForEvent('beforerotate', function(eventname, payload){});
cubetwo.addCallbackForEvent('afterrotate', function(eventname, payload){});
cubetwo.addCallbackForEvent('issolved', function(eventname, payload){});
/* required */
cubetwo.init();
```
## Edge browser support
To support Edge browser you must set a specific cube size, e.g.
```javascript
var cubetwo = new window.CubeTwo({
cubeComponent: document.getElementById('cubetwo-component-1'),
cubeSize: {
value: 80,
unit: 'px',
}
});
```
## Bugs
* Safari - transform-origin in z axis seems buggy, this has been avoided by not using it.
* Firefox - glitchy cube display, it has 3D order issue
* Edge - vmin and 3d doesn't work properly.