text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-40a08c3e"],{"0063":function(e,t,s){"use strict";s.d(t,"a",(function(){return r}));class r{constructor(e,t,s){this.width=0,this.height=0,this.context=e,this.width=t,this.height=s}draw(){this.context.fillStyle="#ffffff",this.context.fillRect(0,0,this.width,this.height)}}},"0b30":function(e,t,s){"use strict";s.d(t,"a",(function(){return r}));class r{static div(e,t){return(e-e%t)/t}static randomIntByInterval(e,t){return Math.floor(e+Math.random()*(t+1-e))}static getDistance(e,t,s,r){return Math.sqrt(Math.pow(t-e,2)+Math.pow(r-s,2))}static createMatrix(e,t){const s=[];while(t--)s.push(new Array(e).fill(0));return s}static getMouseCoordinates(e){const t=e.target&&e.target.getBoundingClientRect(),s=e.clientX-t.left,r=e.clientY-t.top;return{x:s,y:r}}static loadImage(e){return new Promise((t,s)=>{const r=new Image;r.onload=()=>{t(r)},r.onerror=s,r.src=e})}static drawImageOnCanvas(e,t,s,r,i){this.loadImage("./tank.png").then(n=>{e.drawImage(n,t,s,r,i)}).catch(e=>{console.error("Error: in the method drawImageOnCanvas loading went wrong",e)})}static checkCollisionRectOfCircle(e,t){return e.x<t.x+t.getRadius&&e.x+e.getWidth>t.x-t.getRadius&&e.y<t.y+t.getRadius&&e.y+e.getHeight>t.y-t.getRadius}static checkCollisionRectOfRect(e,t){return e.x<t.x+t.getWidth&&e.x+e.getWidth>t.x&&e.y<t.y+t.getHeight&&e.y+e.getHeight>t.y}static applyMixins(e,t){t.forEach(t=>{Object.getOwnPropertyNames(t.prototype).forEach(s=>{e.prototype[s]=t.prototype[s]})})}}},"16c2":function(e,t,s){"use strict";var r=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"message"},[s("p",{class:["message__p",e.styleState]},[e._v(e._s(e.message))])])},i=[],n=s("9ab4"),c=s("60a3");let a=class extends c["c"]{get styleState(){let e="message--primary";return this.state&&("error"===this.state&&(e="message--error"),"over"===this.state&&(e="message--over")),e}};Object(n["a"])([Object(c["b"])()],a.prototype,"message",void 0),Object(n["a"])([Object(c["b"])()],a.prototype,"state",void 0),a=Object(n["a"])([c["a"]],a);var o=a,h=o,u=s("2877"),l=Object(u["a"])(h,r,i,!1,null,null,null);t["a"]=l.exports},"50aa":function(e,t,s){"use strict";var r,i,n,c,a,o,h,u,l,g,d;s.d(t,"h",(function(){return r})),s.d(t,"j",(function(){return i})),s.d(t,"g",(function(){return n})),s.d(t,"b",(function(){return c})),s.d(t,"d",(function(){return a})),s.d(t,"a",(function(){return o})),s.d(t,"c",(function(){return h})),s.d(t,"f",(function(){return u})),s.d(t,"e",(function(){return l})),s.d(t,"i",(function(){return g})),s.d(t,"k",(function(){return d})),function(e){e[e["LEFT"]=37]="LEFT",e[e["RIGHT"]=39]="RIGHT",e[e["UP"]=38]="UP",e[e["DOWN"]=40]="DOWN"}(r||(r={})),function(e){e[e["START"]=0]="START",e[e["PLAY"]=1]="PLAY",e[e["OVER"]=2]="OVER"}(i||(i={})),function(e){e[e["RESTART"]=82]="RESTART",e[e["Q"]=81]="Q",e[e["W"]=87]="W",e[e["SPACE"]=32]="SPACE"}(n||(n={})),function(e){e[e["WIDTH"]=800]="WIDTH",e[e["HEIGHT"]=400]="HEIGHT"}(c||(c={})),function(e){e[e["WIDTH"]=640]="WIDTH",e[e["HEIGHT"]=640]="HEIGHT",e[e["SCALE_COEFFICIENT"]=20]="SCALE_COEFFICIENT"}(a||(a={})),function(e){e[e["WIDTH"]=800]="WIDTH",e[e["HEIGHT"]=720]="HEIGHT"}(o||(o={})),function(e){e[e["WIDTH"]=800]="WIDTH",e[e["HEIGHT"]=600]="HEIGHT"}(h||(h={})),function(e){e[e["WIDTH"]=450]="WIDTH",e[e["HEIGHT"]=450]="HEIGHT"}(u||(u={})),function(e){e[e["WIDTH"]=320]="WIDTH",e[e["HEIGHT"]=540]="HEIGHT",e[e["SCALE_COEFFICIENT"]=20]="SCALE_COEFFICIENT"}(l||(l={})),function(e){e[e["FIRST"]=0]="FIRST",e[e["SECOND"]=1]="SECOND",e[e["AI"]=2]="AI"}(g||(g={})),function(e){e[e["SLOW"]=8]="SLOW",e[e["MIDDLE"]=14]="MIDDLE",e[e["FAST"]=20]="FAST"}(d||(d={}))},"5e5c":function(e,t,s){"use strict";s.r(t);var r=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"tetris"},[s("Scores",{attrs:{scores:e.getScores}}),s("canvas",{ref:"game"}),e.isMessage?s("Message",{attrs:{message:e.getMessage,state:e.getStyleOfMessage}}):e._e(),s("button",{staticClass:"btn-outline btn-outline--restart",attrs:{type:"button"},on:{click:function(t){return e.restart()}}},[e._v("Restart")])],1)},i=[],n=s("9ab4"),c=s("65d9"),a=s.n(c),o=s("0b30"),h=s("50aa"),u=s("87fe"),l=s("0063"),g=s("7cc2");const d=[[0,0,0],[1,1,1],[0,1,0]],f=[[2,2],[2,2]],v=[[0,3,0],[0,3,0],[0,3,3]],P=[[0,4,0],[0,4,0],[4,4,0]],p=[[0,5,0,0],[0,5,0,0],[0,5,0,0],[0,5,0,0]],C=[[0,6,6],[6,6,0],[0,0,0]],_=[[7,7,0],[0,7,7],[0,0,0]],b=[null,"#9c27b0","#ffeb3b","#ff9800","#2196f3","#00bcd4","#4caf50","#f44336"];function E(e){switch(e){case"T":return d;case"O":return f;case"L":return v;case"I":return p;case"J":return P;case"S":return C;case"Z":return _}}function I(e,t,s){t.forEach((t,r)=>{t.forEach((t,i)=>{0!==t&&(e.fillStyle=b[t],e.fillRect(i+s.x,r+s.y,1,1))})})}var m=s("16c2"),T=s("b6ab");let S=class extends(Object(c["mixins"])(g["a"])){constructor(){super(),this.loop=0,this.arena=[],this.currentPiece=[],this.lastTime=0,this.dropCounter=0,this.dropInterval=1e3,this.currentPiecePosX=0,this.currentPiecePosY=0,this.scaleContextValue=h["e"].SCALE_COEFFICIENT,this.scores=[],this.player=new u["a"]}run(){!1!==this._initInstance()&&this.start()}update(e=0){this.board.draw(),I(this.context,this.arena,{x:0,y:0}),I(this.context,this.currentPiece,{x:this.currentPiecePosX,y:this.currentPiecePosY});const t=e-this.lastTime;this.lastTime=e,this.dropCounter+=t,this.dropCounter>this.dropInterval&&this._dropCurrentPiece(),this.isOver||(this.loop=requestAnimationFrame(this.update))}start(){this.update()}stop(){this.loop&&(cancelAnimationFrame(this.loop),this.globalState=h["j"].OVER,this.canvas.removeEventListener("keydown",this.keyListener))}restart(){this._reset()}mounted(){this.run()}get getScores(){return this.scores=[{message:"Previous score",value:this.previousScore},{message:"Current score",value:this.currentScore},{message:"Best result",value:this.bestScore},{message:"Lives",value:this.lives}],this.scores}get previousScore(){return this.player.getPreviousScore}get currentScore(){return this.player.getScore}get bestScore(){return this.player.getBest}get lives(){return this.player.getLives}_reset(){this.clearContext(),this.currentPiecePosY=0,this.board.draw(),this.arena.forEach(e=>e.fill(0)),I(this.context,this.arena,{x:0,y:0}),this.player.scoreToZero()}_over(){this.player.subtractLive(1),this._reset(),this.player.getLives<=0&&(this.stop(),this._setMessage("The game is over","over"))}_initInstance(){if(!1===this.isInitCanvas){if(!1===this._initCanvas(h["e"].WIDTH,h["e"].HEIGHT))return!1;this.context.scale(this.scaleContextValue,this.scaleContextValue)}return this.keyListener=e=>{this._handleKey(e)},this.canvas.addEventListener("keydown",this.keyListener),this.globalState=h["j"].PLAY,this.board=new l["a"](this.context,this.width,this.height),this.arena=o["a"].createMatrix(this.width/this.scaleContextValue,this.height/this.scaleContextValue),this._generatePiece(),!0}_generatePiece(){const e="ILJOTSZ";this.currentPiece=E(e[e.length*Math.random()|0]),this.currentPiecePosY=0,this.currentPiecePosX=(this.arena[0].length/2|0)-(this.currentPiece[0].length/2|0),this._checkCollision()&&this._over()}_dropCurrentPiece(){this.currentPiecePosY++,this._checkCollision()&&(this.currentPiecePosY--,this._mergePieceWithArena(),this._generatePiece(),this._clearRows()),this.dropCounter=0}_clearRows(){e:for(let e=this.arena.length-1;e>0;e--){for(const s of this.arena[e])if(0===s)continue e;const t=this.arena.splice(e,1)[0].fill(0);this.arena.unshift(t),e++,this.player.addScore(1)}}_checkCollision(){const e=this.arena,t=this.currentPiece;for(let s=0;s<t.length;s++)for(let r=0;r<t[s].length;r++)if(0!==t[s][r]&&0!==(e[s+this.currentPiecePosY]&&e[s+this.currentPiecePosY][r+this.currentPiecePosX]))return!0;return!1}_mergePieceWithArena(){this.currentPiece.forEach((e,t)=>{e.forEach((e,s)=>{0!==e&&(this.arena[t+this.currentPiecePosY][s+this.currentPiecePosX]=e)})})}_moveCurrentPiece(e){this.currentPiecePosX+=e,this._checkCollision()&&(this.currentPiecePosX-=e)}_rotateCurrentPiece(e){let t=1;const s=this.currentPiecePosX;this._rotatePiece(e);while(this._checkCollision())if(this.currentPiecePosX+=t,t=-(t+(t>0?1:-1)),t>this.currentPiece[0].length)return this._rotatePiece(-e),void(this.currentPiecePosX=s)}_rotatePiece(e){const t=this.currentPiece;for(let s=0;s<t.length;s++)for(let e=0;e<s;e++)[t[s][e],t[e][s]]=[t[e][s],t[s][e]];e>0?t.forEach(e=>e.reverse()):t.reverse()}_handleKey(e){e.keyCode===h["g"].RESTART&&(this.globalState=h["j"].OVER,this.restart()),e.keyCode===h["h"].LEFT&&this._moveCurrentPiece(-1),e.keyCode===h["h"].RIGHT&&this._moveCurrentPiece(1),e.keyCode===h["h"].DOWN&&this._dropCurrentPiece(),e.keyCode===h["g"].Q&&this._rotateCurrentPiece(1),e.keyCode===h["g"].W&&this._rotateCurrentPiece(-1)}};S=Object(n["a"])([a()({components:{Scores:T["a"],Message:m["a"]}})],S);var y=S,x=y,O=s("2877"),H=Object(O["a"])(x,r,i,!1,null,null,null);t["default"]=H.exports},"7cc2":function(e,t,s){"use strict";var r=s("9ab4"),i=s("60a3"),n=s("50aa");class c{constructor(e,t,s){this.canvas=e,this.ctx=this.canvas.getContext("2d"),this.canvas.width=t,this.canvas.height=s,this.canvas.setAttribute("tabindex","1"),this.canvas.focus()}addEventListener(e,t){this.canvas.addEventListener(e,t)}removeEventListener(e,t){this.canvas.removeEventListener(e,t)}get context(){return this.ctx}}let a=class extends i["c"]{constructor(){super(...arguments),this.canvas=null,this.width=0,this.height=0,this.globalState=n["j"].START,this.isInitCanvas=!1,this.message="",this.styleOfMessage=""}_initCanvas(e,t){return!!this.$refs.game&&(this.width=e,this.height=t,this.canvas=new c(this.$refs.game,e,t),this.context=this.canvas.context,this.isInitCanvas=!0,!0)}clearContext(){this.isInitCanvas&&(this.context.save(),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.context.restore())}get isOver(){return this.globalState===n["j"].OVER}get getMessage(){return this.message}get getStyleOfMessage(){return this.styleOfMessage}get isMessage(){return this.isOver&&""!==this.message}_resetMessage(){this.message="",this.styleOfMessage=""}_setMessage(e,t){this.message=e,this.styleOfMessage=t}};a=Object(r["a"])([i["a"]],a);t["a"]=a},"87fe":function(e,t,s){"use strict";s.d(t,"a",(function(){return i}));var r=s("b049");class i{constructor(e="default name",t=3){this.name="",this.lives=0,this.score=new r["a"],this.name=e,this.lives=t}addLive(e){this.lives+=e}subtractLive(e){e<0&&(e=Math.abs(e)),this.lives-e<0||(this.lives-=e)}addScore(e){this.score.increase(e)}subtractScore(e){this.score.decrease(e)}scoreToZero(){this.score.reset()}get getLives(){return this.lives}get getName(){return this.name}get getScore(){return this.score.getScore}get getPreviousScore(){return this.score.getPreviousScore}get getBest(){return this.score.getBest}}},b049:function(e,t,s){"use strict";s.d(t,"a",(function(){return r}));class r{constructor(){this.previousScore=0,this.score=0,this.best=0}increase(e){e=Math.abs(e),this.score+=e,this._updatePreviousScore(),this._updateBest()}decrease(e){e<0&&(e=Math.abs(e)),this.score-e<0||(this.score-=e,this._updatePreviousScore())}reset(){this.score=0}get getScore(){return this.score}get getPreviousScore(){return this.previousScore}get getBest(){return this.best}_updatePreviousScore(){this.previousScore=this.score}_updateBest(){this.score>this.best&&(this.best=this.score)}}},b6ab:function(e,t,s){"use strict";var r=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"scores"},e._l(e.scores,(function(t,r){return s("p",{key:r,staticClass:"scores__p",class:e.colors[r]},[e._v("\n    "+e._s(t.message)+" - "+e._s(t.value)+"\n  ")])})),0)},i=[],n=s("9ab4"),c=s("60a3");let a=class extends c["c"]{constructor(){super(...arguments),this.colors=["scores--color-scarlet","scores--color-turquoise","scores--color-light-blue"]}};Object(n["a"])([Object(c["b"])({default:[]})],a.prototype,"scores",void 0),a=Object(n["a"])([c["a"]],a);var o=a,h=o,u=s("2877"),l=Object(u["a"])(h,r,i,!1,null,null,null);t["a"]=l.exports}}]);
  //# sourceMappingURL=chunk-40a08c3e.972ba527.js.map