Merge branch 'dev' into gh-pages

Aerolab · Sep 29, 2015 · 3f1f74f · 3f1f74f
2 parents b370d1d + 8151d3b
commit 3f1f74f
Show file tree

Hide file tree

Showing 28 changed files with 1,601 additions and 519 deletions.
diff --git a/README.md b/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

diff --git a/assets/blocks/custom/arrow.png b/assets/blocks/custom/arrow.png
diff --git a/assets/blocks/custom/leftHook.png b/assets/blocks/custom/leftHook.png
diff --git a/assets/blocks/custom/leftZag.png b/assets/blocks/custom/leftZag.png
diff --git a/assets/blocks/custom/line.png b/assets/blocks/custom/line.png
diff --git a/assets/blocks/custom/rightHook.png b/assets/blocks/custom/rightHook.png
diff --git a/assets/blocks/custom/rightZag.png b/assets/blocks/custom/rightZag.png
diff --git a/assets/blocks/custom/square.png b/assets/blocks/custom/square.png
diff --git a/bower.json b/bower.json
@@ -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"

diff --git a/demo.html b/demo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+
+  <title>Blockrain.js - A Tetris game in HTML5 + Javascript (with autoplay!)</title>
+
+  <meta name="description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
+  <meta name="keywords" content="js, jquery, game, plugin, html5, tetris" />
+  <meta name="robots" content="INDEX, FOLLOW" />
+  <meta name="author" content="Aerolab" />
+
+  <!-- Facebook Stuff -->
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="Blockrain.js" />
+  <meta property="og:title" content="Blockrain.js - a Tetris game in HTML5 + Javascript" />
+  <meta property="og:description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
+  <meta property="og:image" content="http://aerolab.github.io/blockrain.js/assets/images/social-card.png" />
+  <meta property="og:url" content="http://aerolab.github.io/blockrain.js" />
+  <meta property="fb:app_id" content="344819049029949" />
+
+  <!-- Twitter Stuff -->
+  <meta property="twitter:card" content="summary" />
+  <meta property="twitter:site" content="@aerolab" />
+  <meta property="twitter:title" content="Blockrain.js - a Tetris game in HTML5 + Javascript" />
+  <meta property="twitter:description" content="Blockrain.js lets you embed the classic Tetris game on your website" />
+  <meta property="twitter:image" content="http://aerolab.github.io/blockrain.js/assets/images/social-card.png" />
+  <meta property="twitter:url" content="http://aerolab.github.io/blockrain.js" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
+  <link rel="shortcut icon" href="assets/images/favicon.png">
+
+  <link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="assets/css/style.css">
+  <link rel="stylesheet" href="src/blockrain.css">
+
+</head>
+<body>
+
+
+<section id="examples">
+
+  <header>
+    <h1>Check out the demo</h1>
+  </header>
+
+  <article id="example-slider">
+    <div class="example">
+      <div class="game" id="tetris-demo"></div>
+      <div class="game" id="tetris-demo-2"></div>
+    </div>
+  </article>
+
+</section>
+
+<script src="assets/js/jquery-1.11.1.min.js"></script>
+<script src="src/blockrain.jquery.libs.js"></script>
+<script src="src/blockrain.jquery.src.js"></script>
+<script src="src/blockrain.jquery.themes.js"></script>
+
+<script>
+
+  var $demo = $('#tetris-demo').blockrain({
+    speed: 100,
+    theme: 'individual',
+    autoplay: true
+  });
+
+  var $demo2 = $('#tetris-demo-2').blockrain({
+    speed: 100,
+    theme: 'individual',
+    autoplay: true
+  });
+
+</script>
+
+</body>
+</html>
diff --git a/dist/README.md b/dist/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

diff --git a/dist/assets/blocks/custom/arrow.png b/dist/assets/blocks/custom/arrow.png
diff --git a/dist/assets/blocks/custom/leftHook.png b/dist/assets/blocks/custom/leftHook.png
diff --git a/dist/assets/blocks/custom/leftZag.png b/dist/assets/blocks/custom/leftZag.png
diff --git a/dist/assets/blocks/custom/line.png b/dist/assets/blocks/custom/line.png
diff --git a/dist/assets/blocks/custom/rightHook.png b/dist/assets/blocks/custom/rightHook.png
diff --git a/dist/assets/blocks/custom/rightZag.png b/dist/assets/blocks/custom/rightZag.png
diff --git a/dist/assets/blocks/custom/square.png b/dist/assets/blocks/custom/square.png
diff --git a/dist/blockrain.css b/dist/blockrain.css
@@ -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;