Directory

← Back

scary-cube

Rubik's Cube as web-component based on lit-element

Author

Rating

Popularity

<100

<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;
}

Compatibility

(Loading compatibility data...)

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 scary-cube - Vaadin Add-on Directory
# \ 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; } ```
Online