Initial commit

dorukeker · Dec 15, 2015 · 7d0d45c · 7d0d45c
1 parent c670728
commit 7d0d45c
Show file tree

Hide file tree

Showing 7 changed files with 224 additions and 0 deletions.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "3DTouchPrank",
+  "authors": [
+    "Doruk Eker <[email protected]>"
+  ],
+  "description": "",
+  "main": "index.html",
+  "moduleType": [],
+  "license": "MIT",
+  "homepage": "",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "howler.js": "howler#~1.1.28"
+  }
+}
diff --git a/crack.mp3 b/crack.mp3
diff --git a/crack.png b/crack.png
diff --git a/forcetouch.js b/forcetouch.js
@@ -0,0 +1,66 @@
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(function() {
+      return (root.ForceTouch = factory());
+    });
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = (root.ForceTouch = factory());
+  } else {
+    root.ForceTouch = factory();
+  }
+}(this, function() {
+
+  var ForceTouch = function() {}
+
+  ForceTouch.prototype.callback = null;
+
+  ForceTouch.prototype.startListen = function(elem){
+    elem.addEventListener('touchstart', this.onTouchStart.bind(this), false);
+    elem.addEventListener('touchmove', this.onTouchMove.bind(this), false);
+    elem.addEventListener('touchend', this.onTouchEnd.bind(this), false);
+  }
+
+  ForceTouch.prototype.stopListen = function(elem){
+    elem.removeEventListener('touchstart', this.onTouchStart.bind(this) , false);
+    elem.removeEventListener('touchmove', this.onTouchMove.bind(this) , false);
+    elem.removeEventListener('touchend', this.onTouchEnd.bind(this) , false);
+  }
+
+  ForceTouch.prototype.touch = null;
+
+  ForceTouch.prototype.onTouchStart = function(e) {
+    e.preventDefault();
+    this.checkForce(e);
+  }
+
+  ForceTouch.prototype.onTouchMove = function(e) {
+    e.preventDefault();
+    this.checkForce(e);
+  }
+
+  ForceTouch.prototype.onTouchEnd = function(e) {
+    e.preventDefault();
+    this.touch = null;
+  }
+
+  ForceTouch.prototype.checkForce = function(e) {
+    this.touch = e.touches[0];
+    setTimeout(this.refreshForceValue.bind(this), 10);
+  }
+
+  ForceTouch.prototype.refreshForceValue = function() {
+    var touchEvent = this.touch;
+    var forceValue = 0;
+    if(touchEvent) {
+      forceValue = touchEvent.force || 0;
+      setTimeout(this.refreshForceValue.bind(this), 10);
+    }else{
+      forceValue = 0;
+    }
+
+    this.callback(forceValue);
+
+  }
+
+  return ForceTouch;
+}));
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
+    <script type="text/javascript" src="bower_components/howler.js/howler.min.js"></script>
+    <script type="text/javascript" src="forcetouch.js"></script>
+
+
+  </head>
+  <body>
+    <div class="container">
+      <div class="col-xs-4">
+        <span id="label1" class="current">0.00</span>
+      </div>
+      <div class="col-xs-4">
+        <span id="label2">0.00</span>
+      </div>
+      <div class="col-xs-4">
+        <span id="label3">0.00</span>
+      </div>
+      <div class="col-xs-12">
+        <span id="button">Press Me</span>
+      </div>
+    </div>
+    <img src="crack.png" id="crack"/>
+    <script type="text/javascript" src="prank.js"></script>
+  </body>
+</html>
diff --git a/prank.js b/prank.js
@@ -0,0 +1,58 @@
+var sound = new Howl({
+  urls: ['crack.mp3']
+});
+
+
+
+$(document).ready(function(){
+  // Current index
+  var currentLabelIndex = 0;
+
+  var labels = [$('#label1'),$('#label2'),$('#label3')];
+  var tresholds = [1,1,0.8];
+
+  // Init Force Touch class
+  var forceTouch = new ForceTouch();
+  var button = document.getElementById('button')
+  forceTouch.startListen(button);
+
+  var updateLabel= function(forceValue){
+
+    // Show current force touch on the label
+    render(forceValue , labels[currentLabelIndex]);
+
+    if(forceValue >= tresholds[currentLabelIndex]){
+      if(currentLabelIndex + 1 == labels.length){
+        crack();
+      } else {
+        labels[currentLabelIndex].addClass('done');
+        labels[currentLabelIndex].removeClass('current');
+        forceTouch.callback = switchLable;
+      }
+      return;
+    }
+  }
+
+  var switchLable = function(forceValue){
+    if(forceValue == 0){
+      currentLabelIndex++;
+      forceTouch.callback = updateLabel;
+      labels[currentLabelIndex].addClass('current');
+    }
+  }
+
+  var render = function(value , label){
+    value = (value > 1)?1:value;
+    label.html(value.toFixed(2));
+  }
+
+  // Start listening for label
+  forceTouch.callback = updateLabel;
+
+  function crack(){
+    forceTouch.callback = function(){return;};
+    sound.play();
+    $('#crack').css('display','block');
+  }
+
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,45 @@
+.container{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #ccc;
+  padding: 0;
+}
+
+span{
+  background: #fff;
+  width: 100%;
+  display: block;
+  text-align: center;
+  margin-top: 15px;
+  padding: 20px 0;
+  border-radius: 10px;
+  font-size: 18px;
+  color: #ccc;
+}
+
+span.current{
+  border: 3px solid #666;
+  color: #000;
+}
+
+span.done{
+  border: 3px solid #0D8000;
+  color: #0D8000;
+  background: #D4FFD6;
+}
+
+#button{
+  margin-top: 210px;
+  color: #5A9E53;
+}
+
+#crack{
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}