scratch-box-js/build/scratcher.min.js

Create scratch card in browser.

!function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=8)}([function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e){function n(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}t.exports=function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e,n){var i=n(3),r=n(4),a=n(5),s=n(7);t.exports=function(t,e){return i(t)||r(t,e)||a(t,e)||s()},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e){t.exports=function(t){if(Array.isArray(t))return t},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e){t.exports=function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,a=[],s=!0,o=!1;try{for(n=n.call(t);!(s=(i=n.next()).done)&&(a.push(i.value),!e||a.length!==e);s=!0);}catch(t){o=!0,r=t}finally{try{s||null==n.return||n.return()}finally{if(o)throw r}}return a}},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e,n){var i=n(6);t.exports=function(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e){t.exports=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},t.exports.default=t.exports,t.exports.__esModule=!0},function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return d}));var i=n(2),r=n.n(i),a=n(0),s=n.n(a),o=n(1),h=n.n(o),u=function(){function t(e){s()(this,t),this.parentWidth=0,this.parentHeight=0,this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.bgImage=e}return h()(t,[{key:"centerImageBounds",value:function(t){var e,n;return t.height/t.width<this.parentHeight/this.parentWidth?(n=this.parentHeight,e=t.width/t.height*n):n=(e=this.parentWidth)*(t.height/t.width),{width:e,height:n,x:(this.parentWidth-e)/2,y:(this.parentHeight-n)/2}}},{key:"draw",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.parentWidth!==t||this.parentHeight!==e||!1!==n){this.canvas.width=this.parentWidth=t,this.canvas.height=this.parentHeight=e;var i=this.centerImageBounds(this.bgImage),r=i.x,a=i.y,s=i.width,o=i.height;this.ctx.drawImage(this.bgImage,r,a,s,o),this.ctx.save()}}}]),t}(),c=function(){function t(e,n,i,r){s()(this,t),this.brush=e,this.brushSize=n||150,this.canvas=document.createElement("canvas"),this.canvas.width=i,this.canvas.height=r,this.parentWidth=0,this.parentHeight=0,this.ctx=this.canvas.getContext("2d")}return h()(t,[{key:"checkPercent",value:function(){for(var t=0,e=this.canvas.width*this.canvas.height,n=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height).data,i=3;i<n.length;i+=128)n[i]>0&&t++;return t/(e/32)}},{key:"draw",value:function(t,e){var n=t*this.canvas.width,i=e*this.canvas.height;this.ctx.drawImage(this.brush,n-this.brushSize/2,i-this.brushSize/2,this.brushSize,this.brushSize),this.ctx.save()}}]),t}(),d=function(){function t(e){s()(this,t),this.canvas=e.canvas,this.percentToFinish=e.percentToFinish||1,this.brushSize=e.brushSize||150,this.ASSETS={background:e.scratchImageSrc,brush:e.brushImageSrc},this.ctx=this.canvas.getContext("2d"),this.images={background:"",brush:""},this.inputDown=this.inputDownHandler.bind(this),this.inputMove=this.inputMoveHandler.bind(this),this.inputUp=this.inputUpHandler.bind(this)}return h()(t,[{key:"init",value:function(){var t=this;return new Promise((function(e){t.canvas.addEventListener("mousedown",t.inputDown),t.canvas.addEventListener("mousemove",t.inputMove),t.canvas.addEventListener("mouseup",t.inputUp),t.canvas.addEventListener("touchstart",t.inputDown),t.canvas.addEventListener("touchmove",t.inputMove),t.canvas.addEventListener("touchend",t.inputUp),t.canvas.width=t.canvas.offsetWidth,t.canvas.height=t.canvas.offsetHeight,t.renderWidth=0,t.renderHeight=0,t.resize=t.resizeHandler.bind(t),t.resize(),window.addEventListener("resize",t.resize),t.loadImages().then((function(){t.loaded=!0,t.background=new u(t.images.background),t.mask=new c(t.images.brush,t.brushSize,t.canvas.width,t.canvas.height),t.background.draw(t.renderWidth,t.renderHeight),t.render()})),e()}))}},{key:"resizeHandler",value:function(){var t=window.innerHeight/window.innerWidth;this.renderWidth=Math.min(1400,window.innerWidth),this.renderHeight=this.renderWidth*t,this.canvas.width=this.renderWidth,this.canvas.height=this.renderHeight,this.loaded&&(this.draw(),this.background.draw(this.renderWidth,this.renderHeight))}},{key:"loadImages",value:function(){var t=this;return new Promise((function(e){t.totalLoaded=0;var n=Object.entries(t.ASSETS);t.assetCount=n.length;for(var i=0,a=n;i<a.length;i++){var s=r()(a[i],2),o=s[0],h=s[1];t.images[o]=new Image,t.images[o].src=h,t.images[o].onload=function(){t.totalLoaded++,t.totalLoaded===t.assetCount&&e()}}}))}},{key:"draw",value:function(){this.ctx.drawImage(this.background.canvas,0,0),this.ctx.globalCompositeOperation="destination-out",this.ctx.drawImage(this.mask.canvas,0,0),this.ctx.globalCompositeOperation="destination-over"}},{key:"render",value:function(){this.raf=requestAnimationFrame(this.render.bind(this)),this.resize(),this.draw()}},{key:"handleInput",value:function(t,e){if(t){var n=(t.clientX-e.offsetLeft)/e.offsetWidth,i=(t.clientY-e.offsetTop)/e.offsetHeight;if(this.mask.draw(n,i),this.mask.checkPercent()>this.percentToFinish){var r=new Event("scratcher.complete");this.canvas.dispatchEvent(r)}}}},{key:"inputDownHandler",value:function(t){this.drawing=!0,t.preventDefault();var e="touchstart"===t.type?t.touches[0]:t,n=e.target;this.handleInput(e,n)}},{key:"inputMoveHandler",value:function(t){if(!1!==this.drawing){t.preventDefault();var e="touchmove"===t.type?t.touches[0]:t,n=e.target;this.handleInput(e,n)}}},{key:"inputUpHandler",value:function(){this.drawing=!1}}]),t}()}]);