text: class Measurable{setWidth(t){this.width=t}setLength(t){this.length=t}getWidthPercentageOfLength(){return(this.width-this.length)/this.length*100+100}getLengthPercentageOfWidth(){return(this.length-this.width)/this.width*100+100}setFillDimensions(t,e){var a=e,h=a*this.getWidthPercentageOfLength()/100;return h>t&&(a=(h=t)*this.getLengthPercentageOfWidth()/100),this.pxWidth=h,this.pxLength=a,{width:h,length:a}}}class Canvas{constructor(t){this.app=t,this.c=document.getElementById("canvas"),this.ctx=this.c.getContext("2d")}draw(){this.ctx.clearRect(0,0,this.c.width,this.c.height),this.drawArea(),this.drawBoards()}drawBoards(){this.ctx.beginPath(),this.ctx.lineWidth="1",this.ctx.strokeStyle="#8c5c2e";let t=0,e=0,a=this.app.board.getWidth(this.app.area),h=this.app.board.getLength(this.app.area),i=this.app.board.getLength(this.app.area),s=!1,r=!1,n=0;for(;t<=this.app.area.pxWidth;){for(;e<=this.app.area.pxLength&&(r=!1,!0===s?(h=i-h-this.app.board.getBlade(this.app.area),s=!1):(n+=1,e+(h=i)>=this.app.area.pxLength&&(h=this.app.area.pxLength-e,s=!0,r=!0)),this.ctx.rect(t,e,a,h),this.ctx.stroke(),e+=h,!0!==r););e=0,t+=a+this.app.board.getGap(this.app.area)}this.app.board.count=n}drawArea(){var t=this.app.area.setFillDimensions(this.c.width,this.c.height);this.ctx.fillStyle="#ce9c6a",this.ctx.fillRect(0,0,t.width,t.length)}setDimensions(){this.c.height=this.c.clientHeight,this.c.width=this.c.clientWidth}}class Area extends Measurable{}class Board extends Measurable{getLengthPercentage(t){return(this.length-t)/t*100+100}getWidthPercentage(t){return(this.width-t)/t*100+100}getGapPercentage(t){return(this.gap-t)/t*100+100}getBladePercentage(t){return(this.blade-t)/t*100+100}getLength(t){var e=this.getLengthPercentage(t.length);return t.pxLength/100*e}getWidth(t){var e=this.getWidthPercentage(t.width);return t.pxWidth/100*e}getGap(t){var e=this.getGapPercentage(t.width);return t.pxWidth/100*e}setGap(t){this.gap=t}getBlade(t){var e=this.getBladePercentage(t.length);return t.pxLength/100*e}setBlade(t){this.blade=t}}class App{constructor(){this.area=new Area,this.board=new Board,this.canvas=new Canvas(this)}setBladeWidth(t){this.bladeWidth=t}init(){this.canvas.setDimensions()}}var app=new App;$(function(){app.area.setWidth($("#decking-area-width").val()),app.area.setLength($("#decking-area-length").val()),app.board.setWidth($("#decking-board-width").val()),app.board.setLength($("#decking-board-length").val()),app.board.setGap($("#decking-board-gap").val()),app.board.setBlade($("#blade-cutting-width").val()),app.init(),app.canvas.draw(),$("#actual-number").text(app.board.count),$("#purchase-number").text(Math.floor(1.3*app.board.count)),$(".form-control").on("change",function(t){switch(t.target.id){case"decking-area-width":app.area.setWidth(t.target.value);break;case"decking-area-length":app.area.setLength(t.target.value);break;case"decking-board-width":app.board.setWidth(t.target.value);break;case"decking-board-length":app.board.setLength(t.target.value);break;case"decking-board-gap":app.board.setGap(t.target.value);break;case"blade-cutting-width":app.board.setBlade(t.target.value)}app.canvas.draw(),$("#actual-number").text(app.board.count),$("#purchase-number").text(Math.floor(1.3*app.board.count))})}),window.onresize=function(t){app.canvas.setDimensions(),app.canvas.draw()};