Skip to content

Instantly share code, notes, and snippets.

@davidshimjs

davidshimjs/index.html

Created December 10, 2017 12:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidshimjs/02dbcfbffdf915f6d2945dbbe13a7a4d to your computer and use it in GitHub Desktop.
Save davidshimjs/02dbcfbffdf915f6d2945dbbe13a7a4d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/wapozog
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script>
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Scratchcard=e()}}(function(){return function e(t,n,r){function i(s,u){if(!n[s]){if(!t[s]){var a="function"==typeof require&&require;if(!u&&a)return a(s,!0);if(o)return o(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[s]={exports:{}};t[s][0].call(l.exports,function(e){var n=t[s][1][e];return i(n?n:e)},l,l.exports,e,t,n,r)}return n[s].exports}for(var o="function"==typeof require&&require,s=0;s<r.length;s++)i(r[s]);return i}({1:[function(e,t,n){"use strict";function r(e){this.options=i({},e,o)}var i=e("lodash.defaults");t.exports=n=r;var o={color:"silver",thickness:50};r.prototype.reset=function(e,t,n){e.fillStyle=this.options.color,e.globalCompositeOperation="source-over",e.fillRect(0,0,t,n)},r.prototype.drawPoint=function(e,t){e.fillStyle="rgba(0,0,0,1)",e.globalCompositeOperation="destination-out",e.beginPath(),e.arc(t.x,t.y,this.options.thickness/2,0,2*Math.PI),e.fill()},r.prototype.drawLine=function(e,t,n){e.lineWidth=this.options.thickness,e.lineCap="round",e.lineJoin="round",e.strokeStyle="rgba(0,0,0,1)",e.globalCompositeOperation="destination-out",e.beginPath(),e.moveTo(t.x,t.y),e.lineTo(n.x,n.y),e.stroke()},r.prototype.complete=function(e,t,n){e.fillStyle="rgba(0,0,0,1)",e.globalCompositeOperation="destination-out",e.fillRect(0,0,t,n)},r.prototype.drawLayer=function(e,t,n,r){}},{"lodash.defaults":13}],2:[function(e,t,n){"use strict";function r(e,t){function n(){return e}function r(t){t?(e=t,_(),S.addEventListener("mousedown",x,!0),S.addEventListener("touchstart",j,!0),G||E()):e&&(e=null,N.parentNode.removeChild(N),S.removeEventListener("mousedown",x,!0),S.removeEventListener("touchstart",j,!0))}function u(){return M}function f(e){M=e instanceof c?e:new c(e),g()}function h(){return N}function p(){return S}function v(){M.reset(T,S.width,S.height),H=!0,$=!1,S.style.pointerEvents=null,b()}function d(e){M.drawPoint(T,e),H=!0}function m(e,t){M.drawLine(T,e,t),H=!0}function y(){M.complete(T,S.width,S.height),H=!0,$=!0,S.style.pointerEvents="none",b()}function g(){$?M.complete(T,S.width,S.height):M.reset(T,S.width,S.height),H=!0;for(var e=0,t=z.length;e<t;e++){var n=z[e];M.drawLayer(n.ctx,n.canvas.width,n.canvas.height,e)}b()}function w(){var e=S.width,n=S.height,r=e*n;if(0===r)return 0;for(var i=0,o=T.getImageData(0,0,e,n).data,s=3,u=o.length;s<u;s+=4)o[s]>=t.threshold&&i++;return(r-i)/r}function b(){if(H){var e=J;J=w(),H=!1,J!==e&&(C.emit("progress",J),1!==J||$||y())}}function _(){var t=e.parentNode;if(!t)return void r(null);N.nextSibling!==e&&t.insertBefore(N,e);var n=o(e);if(S.width!==n.width||S.height!==n.height){S.width=n.width,S.height=n.height;for(var i=0,s=z.length;i<s;i++){var u=z[i].canvas;u.width=n.width,u.height=n.height}g()}}function E(){if(!e)return void(G=!1);k(E),G=!0,_();for(var n in B){var r=I[n],i=B[n];r?i.x===r.x&&i.y===r.y||m(r,i):d(i)}(t.realtime||0===U&&P>0)&&b(),I=B,P=U}function x(e){if(0===e.button){e.preventDefault();var t=S.getBoundingClientRect();B={mouse:{x:e.clientX-t.left,y:e.clientY-t.top}},U=1,window.addEventListener("mousemove",L,!0),window.addEventListener("mouseup",O,!0),S.removeEventListener("mousedown",x,!0),S.removeEventListener("touchstart",j,!0)}}function L(e){if(0===e.button){e.preventDefault();var t=S.getBoundingClientRect();B={mouse:{x:e.clientX-t.left,y:e.clientY-t.top}},U=1}}function O(t){0===t.button&&(t.preventDefault(),B={},U=0,window.removeEventListener("mousemove",L,!0),window.removeEventListener("mouseup",O,!0),e&&(S.addEventListener("mousedown",x,!0),S.addEventListener("touchstart",j,!0)))}function j(e){e.preventDefault(),B={},U=e.touches.length;for(var t=S.getBoundingClientRect(),n=0;n<U;n++){var r=e.touches[n];B[r.identifier]={x:r.clientX-t.left,y:r.clientY-t.top}}window.addEventListener("touchstart",A,!0),window.addEventListener("touchmove",A,!0),window.addEventListener("touchend",A,!0),S.removeEventListener("mousedown",x,!0),S.removeEventListener("touchstart",j,!0)}function A(t){if(t.preventDefault(),B={},U=t.touches.length,U>0)for(var n=S.getBoundingClientRect(),r=0;r<U;r++){var i=t.touches[r];B[i.identifier]={x:i.clientX-n.left,y:i.clientY-n.top}}else window.removeEventListener("touchstart",A,!0),window.removeEventListener("touchmove",A,!0),window.removeEventListener("touchend",A,!0),e&&(S.addEventListener("mousedown",x,!0),S.addEventListener("touchstart",j,!0))}if(i())throw new Error("Internet Explorer not supported prior to version 9");s.call(this);var C=this,S=document.createElement("canvas");if(!S.getContext)throw new Error("HTML5 canvas not supported");var T=S.getContext("2d");t=t instanceof c?a({painter:t},l):a({},t,l);var k=window.requestAnimationFrame,R=t.animationFrame;if(R&&R.request&&(k=R.request.bind(R)),!k)throw new Error("requestAnimationFrame not supported");var F=o(e);S.style.position="absolute",S.width=F.width,S.height=F.height,S.style.zIndex=t.layers+1,S.style["-webkit-tap-highlight-color"]="rgba(0,0,0,0)";var N=document.createElement("div");N.className="scratchcard",N.style.position="relative",N.style.display="inline",N.style.verticalAlign="top",N.appendChild(S);for(var z=[],D=0;D<t.layers;D++){var q=document.createElement("canvas");q.style.position="absolute",q.width=F.width,q.height=F.height,q.style.zIndex=D+1,q.style.pointerEvents="none",z.push({canvas:q,ctx:q.getContext("2d")}),N.appendChild(q)}var M=null,I={},P=0,B={},U=0,H=!1,J=null,$=!1,G=!1;this.getElement=n,this.setElement=r,this.getPainter=u,this.setPainter=f,this.getWrapper=h,this.getCanvas=p,this.reset=v,this.complete=y,this.getProgress=w,f(t.painter),e&&(e.parentNode.insertBefore(N,e),e.style.visibility="visible",S.addEventListener("mousedown",x,!0),S.addEventListener("touchstart",j,!0),E())}function i(){var e=document.createElement("div");return e.innerHTML="<!--[if lt IE 9]><i></i><![endif]-->",1===e.getElementsByTagName("i").length}function o(e){if(!e)return f;var t=e.getClientRects();if(0===t.length)return f;var n=t[0];return{width:Math.ceil(n.right)-Math.floor(n.left),height:Math.ceil(n.bottom)-Math.floor(n.top)}}var s=e("events").EventEmitter,u=e("util"),a=e("lodash.defaults"),c=r.Painter=e("./painter");t.exports=n=r;var l={threshold:255,realtime:!1,layers:0,painter:{},animationFrame:null};u.inherits(r,s);var f={width:0,height:0}},{"./painter":1,events:11,"lodash.defaults":13,util:16}],3:[function(e,t,n){"use strict";function r(e,t){t=t instanceof a?{painter:t}:o({},t),t.animationFrame instanceof s||(t.animationFrame=new s(t.animationFrame)),u.call(this,e,t)}var i=e("util"),o=e("lodash.defaults"),s=e("animation-frame"),u=e("./scratchcard"),a=e("./painter");r.Painter=a,t.exports=n=r,i.inherits(r,u)},{"./painter":1,"./scratchcard":2,"animation-frame":4,"lodash.defaults":13,util:16}],4:[function(e,t,n){t.exports=e("./lib/animation-frame")},{"./lib/animation-frame":5}],5:[function(e,t,n){"use strict";function r(e){return this instanceof r?(e||(e={}),"number"==typeof e&&(e={frameRate:e}),null!=e.useNative||(e.useNative=!0),this.options=e,this.frameRate=e.frameRate||r.FRAME_RATE,this._frameLength=1e3/this.frameRate,this._isCustomFrameRate=this.frameRate!==r.FRAME_RATE,this._timeoutId=null,this._callbacks={},this._lastTickTime=0,void(this._tickCounter=0)):new r(e)}var i=e("./native"),o=e("./now"),s=e("./performance"),u=e("./root"),a=i.request,c=i.cancel;t.exports=r,r.FRAME_RATE=60,r.shim=function(e){var t=new r(e);return u.requestAnimationFrame=function(e){return t.request(e)},u.cancelAnimationFrame=function(e){return t.cancel(e)},t},r.prototype.request=function(e){var t=this;if(++this._tickCounter,i.supported&&this.options.useNative&&!this._isCustomFrameRate)return a(e);if(!e)throw new TypeError("Not enough arguments");if(null==this._timeoutId){var n=this._frameLength+this._lastTickTime-o();n<0&&(n=0),this._timeoutId=setTimeout(function(){t._lastTickTime=o(),t._timeoutId=null,++t._tickCounter;var e=t._callbacks;t._callbacks={};for(var n in e)e[n]&&(i.supported&&t.options.useNative?a(e[n]):e[n](s.now()))},n)}return this._callbacks[this._tickCounter]=e,this._tickCounter},r.prototype.cancel=function(e){i.supported&&this.options.useNative&&c(e),delete this._callbacks[e]}},{"./native":6,"./now":7,"./performance":9,"./root":10}],6:[function(e,t,n){"use strict";var r=e("./root");try{r.top.name,r=r.top}catch(e){}n.request=r.requestAnimationFrame,n.cancel=r.cancelAnimationFrame||r.cancelRequestAnimationFrame,n.supported=!1;for(var i=["Webkit","Moz","ms","O"],o=0;o<i.length&&!n.request;o++)n.request=r[i[o]+"RequestAnimationFrame"],n.cancel=r[i[o]+"CancelAnimationFrame"]||r[i[o]+"CancelRequestAnimationFrame"];n.request&&n.request.call(null,function(){n.supported=!0})},{"./root":10}],7:[function(e,t,n){"use strict";t.exports=Date.now||function(){return(new Date).getTime()}},{}],8:[function(e,t,n){"use strict";var r=e("./now");n.navigationStart=r()},{"./now":7}],9:[function(e,t,n){"use strict";var r=e("./now"),i=e("./performance-timing"),o=e("./root");n.now=function(){return o.performance&&o.performance.now?o.performance.now():r()-i.navigationStart}},{"./now":7,"./performance-timing":8,"./root":10}],10:[function(e,t,n){var r;r="undefined"!=typeof window?window:"undefined"!=typeof self?self:this,t.exports=r},{}],11:[function(e,t,n){function r(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function i(e){return"function"==typeof e}function o(e){return"number"==typeof e}function s(e){return"object"==typeof e&&null!==e}function u(e){return void 0===e}t.exports=r,r.EventEmitter=r,r.prototype._events=void 0,r.prototype._maxListeners=void 0,r.defaultMaxListeners=10,r.prototype.setMaxListeners=function(e){if(!o(e)||e<0||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},r.prototype.emit=function(e){var t,n,r,o,a,c;if(this._events||(this._events={}),"error"===e&&(!this._events.error||s(this._events.error)&&!this._events.error.length)){if(t=arguments[1],t instanceof Error)throw t;var l=new Error('Uncaught, unspecified "error" event. ('+t+")");throw l.context=t,l}if(n=this._events[e],u(n))return!1;if(i(n))switch(arguments.length){case 1:n.call(this);break;case 2:n.call(this,arguments[1]);break;case 3:n.call(this,arguments[1],arguments[2]);break;default:o=Array.prototype.slice.call(arguments,1),n.apply(this,o)}else if(s(n))for(o=Array.prototype.slice.call(arguments,1),c=n.slice(),r=c.length,a=0;a<r;a++)c[a].apply(this,o);return!0},r.prototype.addListener=function(e,t){var n;if(!i(t))throw TypeError("listener must be a function");return this._events||(this._events={}),this._events.newListener&&this.emit("newListener",e,i(t.listener)?t.listener:t),this._events[e]?s(this._events[e])?this._events[e].push(t):this._events[e]=[this._events[e],t]:this._events[e]=t,s(this._events[e])&&!this._events[e].warned&&(n=u(this._maxListeners)?r.defaultMaxListeners:this._maxListeners,n&&n>0&&this._events[e].length>n&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace())),this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){function n(){this.removeListener(e,n),r||(r=!0,t.apply(this,arguments))}if(!i(t))throw TypeError("listener must be a function");var r=!1;return n.listener=t,this.on(e,n),this},r.prototype.removeListener=function(e,t){var n,r,o,u;if(!i(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(n=this._events[e],o=n.length,r=-1,n===t||i(n.listener)&&n.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(s(n)){for(u=o;u-- >0;)if(n[u]===t||n[u].listener&&n[u].listener===t){r=u;break}if(r<0)return this;1===n.length?(n.length=0,delete this._events[e]):n.splice(r,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},r.prototype.removeAllListeners=function(e){var t,n;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(n=this._events[e],i(n))this.removeListener(e,n);else if(n)for(;n.length;)this.removeListener(e,n[n.length-1]);return delete this._events[e],this},r.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?i(this._events[e])?[this._events[e]]:this._events[e].slice():[]},r.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(i(t))return 1;if(t)return t.length}return 0},r.listenerCount=function(e,t){return e.listenerCount(t)}},{}],12:[function(e,t,n){"function"==typeof Object.create?t.exports=function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:t.exports=function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},{}],13:[function(e,t,n){(function(e){function n(e,t,n){switch(n.length){case 0:return e.call(t);case 1:return e.call(t,n[0]);case 2:return e.call(t,n[0],n[1]);case 3:return e.call(t,n[0],n[1],n[2])}return e.apply(t,n)}function r(e){return function(t){return null==t?void 0:t[e]}}function i(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}function o(e){for(var t,n=[];!(t=e.next()).done;)n.push(t.value);return n}function s(e,t,n,r){return void 0===e||m(e,z[n])&&!D.call(r,n)?t:e}function u(e,t,n){var r=e[t];D.call(e,t)&&m(r,n)&&(void 0!==n||t in e)||(e[t]=n)}function a(e){e=null==e?e:Object(e);var t=[];for(var n in e)t.push(n);return t}function c(e,t){return t=B(void 0===t?e.length-1:t,0),function(){for(var r=arguments,i=-1,o=B(r.length-t,0),s=Array(o);++i<o;)s[i]=r[t+i];i=-1;for(var u=Array(t+1);++i<t;)u[i]=r[i];return u[t]=s,n(e,this,u)}}function l(e,t,n,r){n||(n={});for(var i=-1,o=t.length;++i<o;){var s=t[i],a=r?r(n[s],e[s],s,n,e):void 0;u(n,s,void 0===a?e[s]:a)}return n}function f(e){return c(function(t,n){var r=-1,i=n.length,o=i>1?n[i-1]:void 0,s=i>2?n[2]:void 0;for(o=e.length>3&&"function"==typeof o?(i--,o):void 0,s&&v(n[0],n[1],s)&&(o=i<3?void 0:o,i=1),t=Object(t);++r<i;){var u=n[r];u&&e(t,u,r,o)}return t})}function h(e){var t=e?e.length:void 0;return _(t)&&(H(e)||L(e)||y(e))?i(t,String):null}function p(e,t){return t=null==t?j:t,!!t&&("number"==typeof e||k.test(e))&&e>-1&&e%1==0&&e<t}function v(e,t,n){if(!E(n))return!1;var r=typeof t;return!!("number"==r?g(n)&&p(t,n.length):"string"==r&&t in n)&&m(n[t],e)}function d(e){var t=e&&e.constructor,n="function"==typeof t&&t.prototype||z;return e===n}function m(e,t){return e===t||e!==e&&t!==t}function y(e){return w(e)&&D.call(e,"callee")&&(!P.call(e,"callee")||q.call(e)==A)}function g(e){return null!=e&&_(U(e))&&!b(e)}function w(e){return x(e)&&g(e)}function b(e){var t=E(e)?q.call(e):"";return t==C||t==S}function _(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=j}function E(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function x(e){return!!e&&"object"==typeof e}function L(e){return"string"==typeof e||!H(e)&&x(e)&&q.call(e)==T}function O(e){for(var t=-1,n=d(e),r=a(e),i=r.length,o=h(e),s=!!o,u=o||[],c=u.length;++t<i;){var l=r[t];s&&("length"==l||p(l,c))||"constructor"==l&&(n||!D.call(e,l))||u.push(l)}return u}var j=9007199254740991,A="[object Arguments]",C="[object Function]",S="[object GeneratorFunction]",T="[object String]",k=/^(?:0|[1-9]\d*)$/,R="object"==typeof e&&e&&e.Object===Object&&e,F="object"==typeof self&&self&&self.Object===Object&&self,N=R||F||Function("return this")(),z=Object.prototype,D=z.hasOwnProperty,q=z.toString,M=N.Reflect,I=M?M.enumerate:void 0,P=z.propertyIsEnumerable,B=Math.max;I&&!P.call({valueOf:1},"valueOf")&&(a=function(e){return o(I(e))});var U=r("length"),H=Array.isArray,J=f(function(e,t,n,r){l(t,O(t),e,r)}),$=c(function(e){return e.push(void 0,s),n(J,void 0,e)});t.exports=$}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],14:[function(e,t,n){function r(e){if(c===setTimeout)return setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function o(){v&&h&&(v=!1,h.length?p=h.concat(p):d=-1,p.length&&s())}function s(){if(!v){var e=r(o);v=!0;for(var t=p.length;t;){for(h=p,p=[];++d<t;)h&&h[d].run();d=-1,t=p.length}h=null,v=!1,i(e)}}function u(e,t){this.fun=e,this.array=t}function a(){}var c,l,f=t.exports={};!function(){try{c=setTimeout}catch(e){c=function(){throw new Error("setTimeout is not defined")}}try{l=clearTimeout}catch(e){l=function(){throw new Error("clearTimeout is not defined")}}}();var h,p=[],v=!1,d=-1;f.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];p.push(new u(e,t)),1!==p.length||v||r(s)},u.prototype.run=function(){this.fun.apply(null,this.array)},f.title="browser",f.browser=!0,f.env={},f.argv=[],f.version="",f.versions={},f.on=a,f.addListener=a,f.once=a,f.off=a,f.removeListener=a,f.removeAllListeners=a,f.emit=a,f.binding=function(e){throw new Error("process.binding is not supported")},f.cwd=function(){return"/"},f.chdir=function(e){throw new Error("process.chdir is not supported")},f.umask=function(){return 0}},{}],15:[function(e,t,n){t.exports=function(e){return e&&"object"==typeof e&&"function"==typeof e.copy&&"function"==typeof e.fill&&"function"==typeof e.readUInt8}},{}],16:[function(e,t,n){(function(t,r){function i(e,t){var r={seen:[],stylize:s};return arguments.length>=3&&(r.depth=arguments[2]),arguments.length>=4&&(r.colors=arguments[3]),d(t)?r.showHidden=t:t&&n._extend(r,t),_(r.showHidden)&&(r.showHidden=!1),_(r.depth)&&(r.depth=2),_(r.colors)&&(r.colors=!1),_(r.customInspect)&&(r.customInspect=!0),r.colors&&(r.stylize=o),a(r,e,r.depth)}function o(e,t){var n=i.styles[t];return n?"["+i.colors[n][0]+"m"+e+"["+i.colors[n][1]+"m":e}function s(e,t){return e}function u(e){var t={};return e.forEach(function(e,n){t[e]=!0}),t}function a(e,t,r){if(e.customInspect&&t&&j(t.inspect)&&t.inspect!==n.inspect&&(!t.constructor||t.constructor.prototype!==t)){var i=t.inspect(r,e);return w(i)||(i=a(e,i,r)),i}var o=c(e,t);if(o)return o;var s=Object.keys(t),d=u(s);if(e.showHidden&&(s=Object.getOwnPropertyNames(t)),O(t)&&(s.indexOf("message")>=0||s.indexOf("description")>=0))return l(t);if(0===s.length){if(j(t)){var m=t.name?": "+t.name:"";return e.stylize("[Function"+m+"]","special")}if(E(t))return e.stylize(RegExp.prototype.toString.call(t),"regexp");if(L(t))return e.stylize(Date.prototype.toString.call(t),"date");if(O(t))return l(t)}var y="",g=!1,b=["{","}"];if(v(t)&&(g=!0,b=["[","]"]),j(t)){var _=t.name?": "+t.name:"";y=" [Function"+_+"]"}if(E(t)&&(y=" "+RegExp.prototype.toString.call(t)),L(t)&&(y=" "+Date.prototype.toUTCString.call(t)),O(t)&&(y=" "+l(t)),0===s.length&&(!g||0==t.length))return b[0]+y+b[1];if(r<0)return E(t)?e.stylize(RegExp.prototype.toString.call(t),"regexp"):e.stylize("[Object]","special");e.seen.push(t);var x;return x=g?f(e,t,r,d,s):s.map(function(n){return h(e,t,r,d,n,g)}),e.seen.pop(),p(x,y,b)}function c(e,t){if(_(t))return e.stylize("undefined","undefined");if(w(t)){var n="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(n,"string")}return g(t)?e.stylize(""+t,"number"):d(t)?e.stylize(""+t,"boolean"):m(t)?e.stylize("null","null"):void 0}function l(e){return"["+Error.prototype.toString.call(e)+"]"}function f(e,t,n,r,i){for(var o=[],s=0,u=t.length;s<u;++s)k(t,String(s))?o.push(h(e,t,n,r,String(s),!0)):o.push("");return i.forEach(function(i){i.match(/^\d+$/)||o.push(h(e,t,n,r,i,!0))}),o}function h(e,t,n,r,i,o){var s,u,c;if(c=Object.getOwnPropertyDescriptor(t,i)||{value:t[i]},c.get?u=c.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):c.set&&(u=e.stylize("[Setter]","special")),k(r,i)||(s="["+i+"]"),u||(e.seen.indexOf(c.value)<0?(u=m(n)?a(e,c.value,null):a(e,c.value,n-1),u.indexOf("\n")>-1&&(u=o?u.split("\n").map(function(e){return" "+e}).join("\n").substr(2):"\n"+u.split("\n").map(function(e){return" "+e}).join("\n"))):u=e.stylize("[Circular]","special")),_(s)){if(o&&i.match(/^\d+$/))return u;s=JSON.stringify(""+i),s.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(s=s.substr(1,s.length-2),s=e.stylize(s,"name")):(s=s.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),s=e.stylize(s,"string"))}return s+": "+u}function p(e,t,n){var r=0,i=e.reduce(function(e,t){return r++,t.indexOf("\n")>=0&&r++,e+t.replace(/\u001b\[\d\d?m/g,"").length+1},0);return i>60?n[0]+(""===t?"":t+"\n ")+" "+e.join(",\n ")+" "+n[1]:n[0]+t+" "+e.join(", ")+" "+n[1]}function v(e){return Array.isArray(e)}function d(e){return"boolean"==typeof e}function m(e){return null===e}function y(e){return null==e}function g(e){return"number"==typeof e}function w(e){return"string"==typeof e}function b(e){return"symbol"==typeof e}function _(e){return void 0===e}function E(e){return x(e)&&"[object RegExp]"===C(e)}function x(e){return"object"==typeof e&&null!==e}function L(e){return x(e)&&"[object Date]"===C(e)}function O(e){return x(e)&&("[object Error]"===C(e)||e instanceof Error)}function j(e){return"function"==typeof e}function A(e){return null===e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||"symbol"==typeof e||"undefined"==typeof e}function C(e){return Object.prototype.toString.call(e)}function S(e){return e<10?"0"+e.toString(10):e.toString(10)}function T(){var e=new Date,t=[S(e.getHours()),S(e.getMinutes()),S(e.getSeconds())].join(":");return[e.getDate(),z[e.getMonth()],t].join(" ")}function k(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var R=/%[sdj%]/g;n.format=function(e){if(!w(e)){for(var t=[],n=0;n<arguments.length;n++)t.push(i(arguments[n]));return t.join(" ")}for(var n=1,r=arguments,o=r.length,s=String(e).replace(R,function(e){if("%%"===e)return"%";if(n>=o)return e;switch(e){case"%s":return String(r[n++]);case"%d":return Number(r[n++]);case"%j":try{return JSON.stringify(r[n++])}catch(e){return"[Circular]"}default:return e}}),u=r[n];n<o;u=r[++n])s+=m(u)||!x(u)?" "+u:" "+i(u);return s},n.deprecate=function(e,i){function o(){if(!s){if(t.throwDeprecation)throw new Error(i);t.traceDeprecation?console.trace(i):console.error(i),s=!0}return e.apply(this,arguments)}if(_(r.process))return function(){return n.deprecate(e,i).apply(this,arguments)};if(t.noDeprecation===!0)return e;var s=!1;return o};var F,N={};n.debuglog=function(e){if(_(F)&&(F=t.env.NODE_DEBUG||""),e=e.toUpperCase(),!N[e])if(new RegExp("\\b"+e+"\\b","i").test(F)){var r=t.pid;N[e]=function(){var t=n.format.apply(n,arguments);console.error("%s %d: %s",e,r,t)}}else N[e]=function(){};return N[e]},n.inspect=i,i.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},i.styles={special:"cyan",number:"yellow",boolean:"yellow",undefined:"grey",null:"bold",string:"green",date:"magenta",regexp:"red"},n.isArray=v,n.isBoolean=d,n.isNull=m,n.isNullOrUndefined=y,n.isNumber=g,n.isString=w,n.isSymbol=b,n.isUndefined=_,n.isRegExp=E,n.isObject=x,n.isDate=L,n.isError=O,n.isFunction=j,n.isPrimitive=A,n.isBuffer=e("./support/isBuffer");var z=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];n.log=function(){console.log("%s - %s",T(),n.format.apply(n,arguments))},n.inherits=e("inherits"),n._extend=function(e,t){if(!t||!x(t))return e;for(var n=Object.keys(t),r=n.length;r--;)e[n[r]]=t[n[r]];return e}}).call(this,e("_process"),"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./support/isBuffer":15,_process:14,inherits:12}]},{},[3])(3)});
</script>
<style id="jsbin-css">
body {
height: 100%;
text-align: center;
margin: 50px;
}
h1 {
font-size: 17px;
font-weight: normal;
}
#desc {
display: none;
margin-top: 30px;
}
.price-container {
position: relative;
width: 300px;
height: 150px;
margin: 0 auto;
}
#price {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
font-size: 50px;
text-align: center;
line-height: 150px;
font-weight: bold;
}
#canvas {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
background-color: transparent;
}
.btn {
font-size: 30px;
padding: 0 20px;
line-height: 50px;
margin-right: 30px;
}
.btn:last-child {
margin-right: 0;
}
.button-group {
display: none;
}
</style>
</head>
<body>
<h1>당신의 2018년도 연봉은</h1>
<div class="price-container">
<div id="price">3,200만원</div>
</div>
<p id="desc">입니다. 인상률은 <span class="rate">18.5%</span> 입니다.</p>
<div class="button-group">
<button id="accept" class="btn accept">수락</button>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<button id="deny" class="btn deny">거절</button>
</div>
<script id="jsbin-javascript">
$(function () {
const element = document.querySelector('#price');
const button = document.querySelector('.button-group');
const deny = document.querySelector('#deny');
const painter = new Scratchcard.Painter({
color: '#aaa',
thickness: 35
});
// Build the scratchcard
var scratchcard;
try {
scratchcard = new Scratchcard(element, {
realtime: false,
painter: painter
});
} catch (error) {
alert(error);
throw error;
}
// Listen for progress events
scratchcard.on('progress', function onProgress(progress) {
// console.log('Progress:', progress);
if ((progress > 0.6) && (progress < 1)) {
scratchcard.complete();
$(button).show();
$('#desc').show();
}
});
$(deny).on('mouseover click', e => {
$(deny).css({
position: 'absolute',
top: Math.max(0, Math.round(Math.random() * $(window).height() - $(deny).height())) + 'px',
left: Math.max(0, Math.round(Math.random() * $(window).width() - $(deny).width())) + 'px'
});
});
$('#accept').on('click', e => {
window.alert('내년에도 열심히 해봐요!');
});
});
</script>
<script id="jsbin-source-css" type="text/css">body {
height: 100%;
text-align: center;
margin: 50px;
}
h1 {
font-size: 17px;
font-weight: normal;
}
#desc {
display: none;
margin-top: 30px;
}
.price-container {
position: relative;
width: 300px;
height: 150px;
margin: 0 auto;
}
#price {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
font-size: 50px;
text-align: center;
line-height: 150px;
font-weight: bold;
}
#canvas {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
background-color: transparent;
}
.btn {
font-size: 30px;
padding: 0 20px;
line-height: 50px;
margin-right: 30px;
}
.btn:last-child {
margin-right: 0;
}
.button-group {
display: none;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(function () {
const element = document.querySelector('#price');
const button = document.querySelector('.button-group');
const deny = document.querySelector('#deny');
const painter = new Scratchcard.Painter({
color: '#aaa',
thickness: 35
});
// Build the scratchcard
var scratchcard;
try {
scratchcard = new Scratchcard(element, {
realtime: false,
painter: painter
});
} catch (error) {
alert(error);
throw error;
}
// Listen for progress events
scratchcard.on('progress', function onProgress(progress) {
// console.log('Progress:', progress);
if ((progress > 0.6) && (progress < 1)) {
scratchcard.complete();
$(button).show();
$('#desc').show();
}
});
$(deny).on('mouseover click', e => {
$(deny).css({
position: 'absolute',
top: Math.max(0, Math.round(Math.random() * $(window).height() - $(deny).height())) + 'px',
left: Math.max(0, Math.round(Math.random() * $(window).width() - $(deny).width())) + 'px'
});
});
$('#accept').on('click', e => {
window.alert('내년에도 열심히 해봐요!');
});
});
</script></body>
</html>
Raw
jsbin.wapozog.css
body {
height: 100%;
text-align: center;
margin: 50px;
}
h1 {
font-size: 17px;
font-weight: normal;
}
#desc {
display: none;
margin-top: 30px;
}
.price-container {
position: relative;
width: 300px;
height: 150px;
margin: 0 auto;
}
#price {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
font-size: 50px;
text-align: center;
line-height: 150px;
font-weight: bold;
}
#canvas {
position: absolute;
left: 0; top: 0;
width: 300px;
height: 150px;
background-color: transparent;
}
.btn {
font-size: 30px;
padding: 0 20px;
line-height: 50px;
margin-right: 30px;
}
.btn:last-child {
margin-right: 0;
}
.button-group {
display: none;
}
Raw
jsbin.wapozog.js
$(function () {
const element = document.querySelector('#price');
const button = document.querySelector('.button-group');
const deny = document.querySelector('#deny');
const painter = new Scratchcard.Painter({
color: '#aaa',
thickness: 35
});
// Build the scratchcard
var scratchcard;
try {
scratchcard = new Scratchcard(element, {
realtime: false,
painter: painter
});
} catch (error) {
alert(error);
throw error;
}
// Listen for progress events
scratchcard.on('progress', function onProgress(progress) {
// console.log('Progress:', progress);
if ((progress > 0.6) && (progress < 1)) {
scratchcard.complete();
$(button).show();
$('#desc').show();
}
});
$(deny).on('mouseover click', e => {
$(deny).css({
position: 'absolute',
top: Math.max(0, Math.round(Math.random() * $(window).height() - $(deny).height())) + 'px',
left: Math.max(0, Math.round(Math.random() * $(window).width() - $(deny).width())) + 'px'
});
});
$('#accept').on('click', e => {
window.alert('내년에도 열심히 해봐요!');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment