(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["4c492844"],{"37c4":function(t,n,e){"use strict";var i=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("q-card",{staticClass:"column col-12 text-center"},[e("q-card-section",{staticClass:"bg-primary text-white"},[e("div",{staticClass:"text-h6"},[t.atStart?e("span",[t._v(" Welcome! ")]):t._e(),t.atStart||null==t.expression?t._e():e("span",[t._v(" Try "),e("b",[t._v(t._s(t.expression))])]),t.atStart||null!=t.expression?t._e():e("span",[t._v(" You are ready for the next level! ")])]),e("div",{staticClass:"text-subtitle2"},[t.atStart?e("span",[t._v(" Click start when you are ready to begin. ")]):t._e(),t.atStart||null==t.expression?t._e():e("span",[t._v(" "+t._s(t.feedback)+" ")]),t.atStart||null!=t.expression?t._e():e("span",[t._v(" Amazing!  ")])])]),e("q-card-actions",{attrs:{align:"around"}},[t.atStart?e("q-btn",{staticStyle:{width:"100%"},attrs:{"no-caps":"",color:"secondary"},on:{click:function(n){return t.start()}}},[t._v("Start")]):t._e(),t.atStart||null==t.expression?t._e():e("q-btn",{staticStyle:{width:"100%"},attrs:{"no-caps":"",icon:"fas fa-check",color:"secondary"},on:{click:function(n){return t.done()}}}),t.atStart||null!=t.expression?t._e():e("q-btn",{staticStyle:{width:"100%"},attrs:{"no-caps":"",color:"secondary"},on:{click:function(n){return t.go()}}},[t._v("Go")])],1),e("q-card-section",{staticClass:"col"},[e("EelCanvas",{ref:"whiteboard",attrs:{active:t.isCanvasActive},on:{animationcomplete:function(n){return t.demoComplete()}}})],1)],1)},s=[],a=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("canvas",{ref:"mainCanvas",staticStyle:{"touch-action":"none"},attrs:{"touch-action":"none",id:"mainCanvas"}})},o=[];e("6c7b");function r(t){return Math.pow(h(t),.5)}function h(t){return t.x*t.x+t.y*t.y}function c(t,n){return{x:t.x-n.x,y:t.y-n.y}}function u(t){var n={x:0,y:0},e={x:0,y:0};return null!==t&&t.length>0&&(n=t.reduce((function(t,n){return{x:Math.min(t.x,n.x),y:Math.min(t.y,n.y)}})),e=t.reduce((function(t,n){return{x:Math.max(t.x,n.x),y:Math.max(t.y,n.y)}}))),{h:e.y-n.y,w:e.x-n.x,ar:(e.x-n.x)/(e.y-n.y),c:{x:.5*(n.x+e.x),y:.5*(n.y+e.y)},min:n,max:e}}function d(t,n){for(var e=t.slice(0,t.length),i=e.length-n,s=e.length/i,a=e.length-1;a>0;a-=s){var o=Math.floor(a);"start"!==e[o].type&&"end"!==e[o].type&&"critical"!==e[o].type&&e.splice(o,1)}return e}function l(t){var n=t.length;return t.map((function(t,e,i){if(e>n-2)return 0;var s=c(i[e+1],t);return r(s)})).reduce((function(t,n){return t+n}))}function p(t,n){return t.map((function(t){return{x:t.x+n.x,y:t.y+n.y,type:t.type}}))}function f(t,n){return t.map((function(t){return{x:t.x*n,y:t.y*n,type:t.type}}))}var v=5/85,m=5/85,y=30/85,x=55/85,g=80/85,b={name:"EelCanvas",props:{active:Boolean},data:function(){return{recordedPoints:[]}},mounted:function(){this.canvas=this.$refs.mainCanvas,this.context=this.canvas.getContext("2d"),this.configureListeners(),this.clear()},methods:{onResize:function(){this.canvas},record:function(){this.recordedPoints=[],this.isRecording=!0},getRecording:function(){return this.isRecording=!1,{boundary:this.boundary,path:this.recordedPoints}},configureSize:function(){var t=1;if(this.canvas.style.width="100%",this.canvas.style.height="98%",null!==this.aspectRatio&&0!==this.aspectRatio){var n=this.canvas.clientWidth/this.canvas.clientHeight;if(n<this.aspectRatio){var e=.92*this.canvas.clientWidth/this.aspectRatio,i=e/(x-m);this.canvas.style.height="".concat(i,"px")}}this.canvas.width=this.canvas.clientWidth*t,this.canvas.height=this.canvas.clientHeight*t,this.configureGuidelines()},configureGuidelines:function(){this.boundary={top:0,ascenderLine:this.canvas.height*v,capLine:this.canvas.height*m,meanLine:this.canvas.height*y,baseLine:this.canvas.height*x,beardLine:this.canvas.height*g,bottom:this.canvas.height}},configureListeners:function(){var t=this;this.canvas.addEventListener("mousedown",(function(n){return t.handleMouseDown(n)}),!1),this.canvas.addEventListener("mousemove",(function(n){return t.handleMouseMove(n)}),!1),this.canvas.addEventListener("mouseup",(function(n){return t.handleMouseUp(n)}),!1),this.canvas.addEventListener("mouseleave",(function(n){return t.handleMouseLeave(n)}),!1),this.canvas.addEventListener("touchstart",(function(n){return t.handleTouchDown(n)}),!1),this.canvas.addEventListener("touchmove",(function(n){return t.handleTouchMove(n)}),!0),this.canvas.addEventListener("touchend",(function(n){return t.handleTouchUp(n)}),!1),this.canvas.addEventListener("touchcancel",(function(n){return t.handleTouchLeave(n)}),!1)},getMousePoint:function(t){var n=this.canvas.getBoundingClientRect();return{x:t.clientX-n.left,y:t.clientY-n.top}},getTouchPoint:function(t){var n=this.canvas.getBoundingClientRect();return{x:t.targetTouches[0].clientX-n.left,y:t.targetTouches[0].clientY-n.top}},handleMouseDown:function(t){!this.isAnimating&&this.active&&this.startDraw(this.getMousePoint(t))},handleTouchDown:function(t){t.preventDefault(),!this.isAnimating&&this.active&&this.startDraw(this.getTouchPoint(t))},startDraw:function(t){this.setStrokeStyle("USER"),this.drawing=!0,t.type="start",this.prevPoint=t,this.segmentDraw(t)},handleMouseMove:function(t){this.drawing&&this.segmentDraw(this.getMousePoint(t))},handleTouchMove:function(t){this.drawing&&this.segmentDraw(this.getTouchPoint(t))},segmentDraw:function(t){this.paintLine(this.prevPoint,t),this.isRecording&&this.recordedPoints.push(t),this.prevPoint=t},handleMouseUp:function(t){this.endDraw(this.prevPoint)},handleTouchUp:function(t){this.endDraw(this.prevPoint)},endDraw:function(t){t&&(t.type="end",this.segmentDraw(t)),this.drawing=!1},handleMouseLeave:function(t){this.drawing=!1},handleTouchLeave:function(t){this.drawing=!1},setStrokeStyle:function(t){this.context.lineCap="round",this.context.strokeStyle="#072A40",this.context.setLineDash([]),"USER"===t?(this.context.strokeStyle="#178CA4",this.context.lineWidth=15):"EEL"===t?(this.context.strokeStyle="#18B7BE",this.context.lineWidth=8):"START_CIRCLE"===t?(this.context.strokeStyle="white",this.context.fillStyle="#5A8100",this.context.lineWidth=2):"END_CIRCLE"===t?(this.context.strokeStyle="white",this.context.fillStyle="#B74803",this.context.lineWidth=2):"CAP_LINE"===t||"BASE_LINE"===t?this.context.lineWidth=6:"MEAN_LINE"===t?(this.context.lineWidth=3,this.context.setLineDash([.04*this.canvas.width,.02875*this.canvas.width])):"BEARD_LINE"===t&&(this.context.lineWidth=3)},paintLine:function(t,n){this.context.beginPath(),this.context.moveTo(t.x,t.y),this.context.lineTo(n.x,n.y),this.context.stroke()},paintCircle:function(t,n){this.context.beginPath(),this.context.arc(t.x,t.y,n,0,2*Math.PI,!1),this.context.fill(),this.context.stroke()},clear:function(){this.configureSize(),this.canvas.style.background="#F9F7F0",this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.setStrokeStyle("CAP_LINE"),this.paintLine({x:0,y:this.boundary.capLine},{x:this.canvas.width,y:this.boundary.capLine}),this.setStrokeStyle("BASE_LINE"),this.paintLine({x:0,y:this.boundary.baseLine},{x:this.canvas.width,y:this.boundary.baseLine}),this.setStrokeStyle("BEARD_LINE"),this.paintLine({x:0,y:this.boundary.beardLine},{x:this.canvas.width,y:this.boundary.beardLine}),this.setStrokeStyle("MEAN_LINE"),this.paintLine({x:0,y:this.boundary.meanLine},{x:this.canvas.width,y:this.boundary.meanLine}),this.setStrokeStyle("USER")},setAspectRatio:function(t){this.aspectRatio=u(t.path).ar},fit:function(t){var n=t.boundary.baseLine-t.boundary.capLine,e=this.boundary.baseLine-this.boundary.capLine,i=f(t.path,e/n),s=u(i);return i=p(i,{x:.5*this.canvas.width-s.c.x,y:0}),i},draw:function(t,n){var e=this;this.setAspectRatio(t),this.clear();var i=this.fit(t);(!i||i.length<0||"Freeform"===n)&&setTimeout((function(){e.$emit("animationcomplete")}),1200),this.animationSegment=0,this.animationPoints=i;var s=3e3;this.timePerPoint=s/this.animationPoints.length,"Pattern"===n&&(this.animationPoints=i.filter((function(t){return"start"===t.type||"end"===t.type})),this.timePerPoint=400),this.then=Date.now(),this.now=Date.now(),this.isAnimating=!0,this.animate()},animate:function(){this.isAnimating&&window.requestAnimationFrame(this.animate),this.now=Date.now();var t=this.now-this.then;if(t>this.timePerPoint){if(this.then=this.now,this.animationSegment>=this.animationPoints.length)this.setStrokeStyle("USER"),this.isAnimating=!1,this.$emit("animationcomplete");else if("start"===this.animationPoints[this.animationSegment].type)this.setStrokeStyle("START_CIRCLE"),this.paintCircle(this.animationPoints[this.animationSegment],13);else if("end"===this.animationPoints[this.animationSegment].type)this.setStrokeStyle("END_CIRCLE"),this.paintCircle(this.animationPoints[this.animationSegment],13);else{this.setStrokeStyle("EEL");var n=this.animationPoints[this.animationSegment+1]||this.animationPoints[this.animationSegment];this.paintLine(this.animationPoints[this.animationSegment],n)}this.animationSegment++}}}},w=b,S=e("2877"),L=e("fe09"),E=Object(S["a"])(w,a,o,!1,null,null,null),P=E.exports;function C(t){var n=100,e=t.boundary.baseLine-t.boundary.capLine,i=n/e,s={top:t.boundary.top*i,ascenderLine:t.boundary.ascenderLine*i,capLine:t.boundary.capLine*i,meanLine:t.boundary.meanLine*i,baseLine:t.boundary.baseLine*i,beardLine:t.boundary.beardLine*i,bottom:t.boundary.bottom*i},a=f(t.path,i),o=u(a),r=p(a,{x:-1*o.min.x,y:0});return{letter:t.letter,boundary:s,path:r}}function _(t){for(var n=15,e=t.map((function(t){return C(t)})),i=[],s="",a=0;a<e.length;a++){var o=u(i).max.x+n||0,r=p(e[a].path,{x:o,y:0});i=i.concat(r),s+=e[a].letter}return{letter:s,boundary:e[0].boundary,path:i}}function M(t,n){var e=C(t),i=C(n);return k(e.path,i.path)&&R(e.path,i.path,"start")&&R(e.path,i.path,"end")&&A(e.path,i.path)}function k(t,n){var e=t.length||0,i=n.length||0;if(e<10||i<10)return!1;e>i?t=d(t,i):n=d(n,e);var s=l(t),a=l(n),o=Math.abs(s-a)/s;return!(o>.125)}function R(t,n,e){for(var i=t.filter((function(t){return t.type===e})),s=n.filter((function(t){return t.type===e})),a=u(t),o=Math.max(a.w,a.h),h=0;h<i.length;h++){for(var d=o,l=0;l<s.length;l++){var p=c(i[h],s[l]),f=r(p);d=Math.min(d,f)}var v=d/o;if(v>.1)return!1}return!0}function A(t,n){var e=u(t),i=u(n),s=Math.max(e.w,e.h),a=Math.abs(e.w-i.w)/s;if(a>.125)return!1;var o=Math.abs(e.h-i.h)/s;if(o>.125)return!1;var r=Math.abs(e.c.x-i.c.x)/s;if(r>.1)return!1;var h=Math.abs(e.c.y-i.c.y)/s;return!(h>.1)}E.options.components=Object.assign({QResizeObserver:L["p"]},E.options.components||{});var D={name:"EelPractice",components:{EelCanvas:P},data:function(){return{isCanvasActive:!1,atStart:!0,feedback:"Have fun!"}},computed:{expression:{get:function(){return this.$store.state.common.expression}}},methods:{start:function(){this.atStart=!1,this.$store.dispatch("common/startPractice"),this.refresh()},done:function(){var t=this.$refs.whiteboard.getRecording(),n={success:this.validateSuccess(),expression:this.expression,pattern:{expression:this.expression,dimensions:t.dimensions,path:t.path}};n.success?this.feedback="Great job!":this.feedback="Try again!",this.$store.dispatch("common/practiceAttempted",n),this.refresh()},refresh:function(){this.$refs.whiteboard.clear(),this.demonstrateExpression()},generatePattern:function(){for(var t=[],n=0;n<this.expression.length;n++){var e=this.$store.state.common.patterns[this.expression[n]];e&&t.push(e)}return _(t)},validateSuccess:function(){for(var t=this.$refs.whiteboard.getRecording(),n=0;n<this.expression.length;n++)if(!M(this.generatePattern(),t))return!1;return!0},demonstrateExpression:function(){if(this.expression&&this.expression.length>0){var t=this.generatePattern();this.$refs.whiteboard.draw(t,this.$store.state.common.user.technique)}},demoComplete:function(t){this.feedback="Begin",this.$refs.whiteboard.record(),this.isCanvasActive=!0},go:function(){this.$store.dispatch("common/completedTechnique")}}},T=D,$=Object(S["a"])(T,i,s,!1,null,null,null);n["a"]=$.exports;$.options.components=Object.assign({QCard:L["b"],QCardSection:L["d"],QCardActions:L["c"],QBtn:L["a"]},$.options.components||{})},d345:function(t,n,e){"use strict";e.r(n);var i=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("q-page",{staticClass:"row items-stretch",attrs:{padding:""}},[e("EelPractice")],1)},s=[],a=e("37c4"),o={name:"PageWord",components:{EelPractice:a["a"]},created:function(){this.$store.dispatch("common/changeLevel","word")}},r=o,h=e("2877"),c=e("fe09"),u=Object(h["a"])(r,i,s,!1,null,null,null);n["default"]=u.exports;u.options.components=Object.assign({QPage:c["n"]},u.options.components||{})}}]);