New release.

Author: RobertoGonzalez

README.md

@@ -77,8 +77,36 @@ Here's an example of a retro theme (vim) with a **custom texture**:
 }
 ```
 
+
+### Creating custom designs
+
+You can now use **completely custom designs for each block**! You just link to one image for each block when creating your theme and the plugin takes care of the rest. You can even use lists of images if you want BlockRain to pick a random design for each block.
+
+**Keep in mind that the images need to follow the exact same format (rotation and width/height ratio) as [the blocks that are bundled with the custom theme](https://github.com/Aerolab/blockrain.js/tree/gh-pages/assets/blocks/custom)**.
+
+Fun fact: Now you can rotate the square!
+
+
+```js
+'custom': {
+  background: '#040304',
+  backgroundGrid: '#000',
+  complexBlocks: {
+    line:     ['assets/blocks/custom/line.png', 'assets/blocks/custom/line.png'],
+    square:   'assets/blocks/custom/square.png',
+    arrow:    'assets/blocks/custom/arrow.png',
+    rightHook:'assets/blocks/custom/rightHook.png',
+    leftHook: 'assets/blocks/custom/leftHook.png',
+    rightZag: 'assets/blocks/custom/rightZag.png',
+    leftZag:  'assets/blocks/custom/leftZag.png'
+  }
+}
+```
+
+
 ### Available themes:
 
+* custom **NEW!**
 * candy
 * modern
 * retro

assets/blocks/individual/arrow.png assets/blocks/custom/arrow.png

@@ -1,8 +1,11 @@
 {
   "name": "blockrain",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Add a game of tetris to your site",
   "main": "dist/blockrain.jquery.min.js",
+  "dependencies": {
+    "jquery": "~1.11.3"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/Aerolab/blockrain.js.git"

assets/blocks/individual/leftHook.png assets/blocks/custom/leftHook.png

@@ -77,8 +77,36 @@ Here's an example of a retro theme (vim) with a **custom texture**:
 }
 ```
 
+
+### Creating custom designs
+
+You can now use **completely custom designs for each block**! You just link to one image for each block when creating your theme and the plugin takes care of the rest. You can even use lists of images if you want BlockRain to pick a random design for each block.
+
+**Keep in mind that the images need to follow the exact same format (rotation and width/height ratio) as [the blocks that are bundled with the custom theme](https://github.com/Aerolab/blockrain.js/tree/gh-pages/assets/blocks/custom)**.
+
+Fun fact: Now you can rotate the square!
+
+
+```js
+'custom': {
+  background: '#040304',
+  backgroundGrid: '#000',
+  complexBlocks: {
+    line:     ['assets/blocks/custom/line.png', 'assets/blocks/custom/line.png'],
+    square:   'assets/blocks/custom/square.png',
+    arrow:    'assets/blocks/custom/arrow.png',
+    rightHook:'assets/blocks/custom/rightHook.png',
+    leftHook: 'assets/blocks/custom/leftHook.png',
+    rightZag: 'assets/blocks/custom/rightZag.png',
+    leftZag:  'assets/blocks/custom/leftZag.png'
+  }
+}
+```
+
+
 ### Available themes:
 
+* custom **NEW!**
 * candy
 * modern
 * retro

assets/blocks/individual/leftZag.png assets/blocks/custom/leftZag.png

@@ -7,6 +7,70 @@
   line-height: 140%;
 }
 
+/* Touch Controls */
+.blockrain-touch {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  display: block;
+  border-radius: 100%;
+  border: 1px solid white;
+  background: rgba(255,255,255,0.2);
+  z-index: 10;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  line-height: 50px;
+  text-align: center;
+}
+.blockrain-touch:active {
+  background: rgba(255,255,255,0.3);
+}
+
+.blockrain-touch-left {
+  left: -60px;
+  bottom: 10px;
+}
+.blockrain-touch-left::after {
+  content: "<";
+}
+.blockrain-touch-right {
+  right: -60px;
+  bottom: 10px;
+}
+.blockrain-touch-right::after {
+  content: ">";
+}
+
+.blockrain-touch-rotate-left {
+  left: -60px;
+  bottom: 80px;
+}
+.blockrain-touch-rotate-left::after {
+  content: "<o";
+}
+
+.blockrain-touch-rotate-right {
+  right: -60px;
+  bottom: 80px;
+}
+.blockrain-touch-rotate-right::after {
+  content: "o>";
+}
+
+.blockrain-touch-drop {
+  left: 50%;
+  margin-left: -25px;
+  bottom: -60px;
+}
+.blockrain-touch-drop::after {
+  content: ".";
+}
+
 /* Buttons */
 .blockrain-btn {
   position: relative;