diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e6bc11f --- /dev/null +++ b/bower.json @@ -0,0 +1,22 @@ +{ + "name": "3DTouchPrank", + "authors": [ + "Doruk Eker " + ], + "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 new file mode 100644 index 0000000..5488e90 Binary files /dev/null and b/crack.mp3 differ diff --git a/crack.png b/crack.png new file mode 100644 index 0000000..c2ae6df Binary files /dev/null and b/crack.png differ diff --git a/forcetouch.js b/forcetouch.js new file mode 100644 index 0000000..c015e72 --- /dev/null +++ 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 new file mode 100644 index 0000000..285756d --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + +
+
+ 0.00 +
+
+ 0.00 +
+
+ 0.00 +
+
+ Press Me +
+
+ + + + diff --git a/prank.js b/prank.js new file mode 100644 index 0000000..a9bd71c --- /dev/null +++ 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 new file mode 100644 index 0000000..ce7bc8c --- /dev/null +++ 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; +}