scary-cube
Rubik's Cube as web-component based on lit-element
<scary-cube>
Rubik's Cube implemented as web component based on lit-element.
Needs to be sized (best by fitting it into a parent element) to correctly display and scale.
Orientation of cube can be changed with mouse and touch gestures.
Moves need to be performed using the addMove or addMoves methods, using SiGN notation.
Colors of the cube can be changed using the following custom CSS properties, matching the sides of the cube
scary-cube {
--cube-color-u: white;
--cube-color-d: yellow;
--cube-color-f: green;
--cube-color-b: #3333FF;
--cube-color-l: orange;
--cube-color-r: red;
}
Additionaly the speed of the move animations can be adjusted with the --cube-speed parameter
scary-cube {
--cube-speed: 0.4s;
}
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/lit-element#^0.6.1
- @polymer/polymer#^3.0.0
- resize-observer-polyfill#^1.5.0
- Released
- 2018-10-05
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
scary-cube - Vaadin Add-on Directory
Rubik's Cube as web-component based on lit-element
View on GitHub
scary-cube version 1.0.0
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
scary-cube version 1.0.1
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
scary-cube version 1.0.2
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
scary-cube version 1.0.3
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 1.0.4
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 1.0.5
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 1.0.6
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 1.0.7
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.2
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.5 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.4
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.6 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.5
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.6 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.6
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.6 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.7
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.6 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0-dev.8
### Dependencies
* @polymer/lit-element#>=0.6.0-dev.6 <2.0.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.0.0
### Dependencies
* @polymer/lit-element#^0.6.0
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0
scary-cube version 2.1.0
### Dependencies
* @polymer/lit-element#^0.6.1
* @polymer/polymer#^3.0.0
* resize-observer-polyfill#^1.5.0