@sabbir1055/drag-drop-puzzle/build/index.js

drag and drop puzzle game

!function(){"use strict";var e={554:function(e,t,n){var r=n(645),a=n.n(r)()((function(e){return e[1]}));a.push([e.id,"#puzzleMain div {\r\n    position:relative;\r\n    float: left;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n#puzzleMain {\r\n    background:black;\r\n    margin:auto;\r\n    padding: 0 !important;\r\n}\r\n\r\n#drag4,\r\n#drag5,\r\n#drag6,\r\n#drag7,\r\n#drag8,\r\n#drag9,\r\n#drag10,\r\n#drag11,\r\n#drag12 {\r\n    height: 200px;\r\n    width: 200px;\r\n    display: inline-block;\r\n}\r\n",""]),t.Z=a},645:function(e){e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(r)for(var o=0;o<this.length;o++){var i=this[o][0];null!=i&&(a[i]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);r&&a[u[0]]||(n&&(u[2]?u[2]="".concat(n," and ").concat(u[2]):u[2]=n),t.push(u))}},t}},379:function(e,t,n){var r,a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),o=[];function i(e){for(var t=-1,n=0;n<o.length;n++)if(o[n].identifier===e){t=n;break}return t}function c(e,t){for(var n={},r=[],a=0;a<e.length;a++){var c=e[a],u=t.base?c[0]+t.base:c[0],l=n[u]||0,d="".concat(u," ").concat(l);n[u]=l+1;var s=i(d),f={css:c[1],media:c[2],sourceMap:c[3]};-1!==s?(o[s].references++,o[s].updater(f)):o.push({identifier:d,updater:g(f,t),references:1}),r.push(d)}return r}function u(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(t)}return t}var l,d=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function s(e,t,n,r){var a=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=d(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function f(e,t,n){var r=n.css,a=n.media,o=n.sourceMap;if(a?e.setAttribute("media",a):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function g(e,t){var n,r,a;if(t.singleton){var o=v++;n=p||(p=u(t)),r=s.bind(null,n,o,!1),a=s.bind(null,n,o,!0)}else n=u(t),r=f.bind(null,n,t),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else a()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var n=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var a=i(n[r]);o[a].references--}for(var u=c(e,t),l=0;l<n.length;l++){var d=i(n[l]);0===o[d].references&&(o[d].updater(),o.splice(d,1))}n=u}}}}},t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){n.r(r),n.d(r,{default:function(){return v}});var e=require("react"),t=n.n(e),a=n(379),o=n.n(a),i=n(554);function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e,t,n,r,a,o,i){try{var c=e[o](i),u=c.value}catch(e){return void n(e)}c.done?t(u):Promise.resolve(u).then(r,a)}function s(e){return function(){var t=this,n=arguments;return new Promise((function(r,a){var o=e.apply(t,n);function i(e){d(o,r,a,i,c,"next",e)}function c(e){d(o,r,a,i,c,"throw",e)}i(void 0)}))}}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,a=!1,o=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){a=!0,o=e}finally{try{r||null==c.return||c.return()}finally{if(a)throw o}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}(e,t)||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.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function v(n){var r=n.width,a=void 0===r?600:r,o=n.height,i=void 0===o?600:o,c=n.XLength,l=void 0===c?4:c,d=n.YLength,p=void 0===d?4:d,v=n.imgUrl,g=void 0===v?"":v,m=n.parentClass,h=n.childClass,y=n.getResult,b=f((0,e.useState)([]),2),x=b[0],w=b[1],S=f((0,e.useState)([]),2),O=S[0],j=S[1],E=function(){var e=new Image;e.onload=function(){var t,n,r=-l,o=[];for(t=0;t>r;t--)for(n=0;n>r;n--)o.push({style:{backgroundPosition:"".concat(a/l*n,"px ").concat(i/p*t,"px"),backgroundImage:"url('".concat(e.src,"')"),width:a/l,height:i/p,backgroundSize:"".concat(a,"px ").concat(i,"px")},id:M()});var c=[].concat(o);w(o),j(c.sort((function(){return Math.random()-.5})))},e.src=g},M=function(){var e=(new Date).getTime();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){var n=(e+16*Math.random())%16|0;return e=Math.floor(e/16),("x"==t?n:3&n|8).toString(16)}))},T=function(e){e.preventDefault()},k=function(e){var t={text:e.target.id,parentNode:e.target.parentElement.id};e.dataTransfer.setData("text",JSON.stringify(t))},P=function(){var e=s(regeneratorRuntime.mark((function e(t){var n,r,a,o,i,c;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t.preventDefault(),!(n=t.dataTransfer.getData("text")?JSON.parse(t.dataTransfer.getData("text")):null)){e.next=15;break}if(r=t.target.parentElement.id,a=n.parentNode,o=(new XMLSerializer).serializeToString(document.getElementById(t.target.id)),!(i=(new XMLSerializer).serializeToString(document.getElementById(n.text)))||!a){e.next=15;break}return document.getElementById(a).innerHTML=o,document.getElementById(r).innerHTML=i,c=document.querySelectorAll('*[id*=div] *[id*="drag"]'),e.next=13,c.forEach((function(e){e.addEventListener("dragstart",(function(e){k(e)}))}));case 13:e.sent,D();case 15:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),D=function(){var e=s(regeneratorRuntime.mark((function e(){var t,n,r;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=0,n=0,r=document.querySelectorAll('*[id*=div] *[id*="drag"]'),e.next=4,r.forEach((function(e){x[t].id===e.dataset.index&&(n+=1),t++}));case 4:e.sent,t=0,y(n===l*p?"success":"keep trying");case 7:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return(0,e.useEffect)(s(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:E(),D();case 2:case"end":return e.stop()}}),e)}))),[1]),t().createElement(t().Fragment,null,t().createElement("div",{id:"puzzleMain",style:{width:a,height:i}},O.length?O.map((function(e,n){return t().createElement("div",{id:"div"+(n+1),className:m,onDrop:P,onDragOver:T,key:n,style:{width:a/l,height:i/p}},t().createElement("div",{id:"drag"+(n+1),className:h,draggable:!0,onDragStart:k,style:u({},e.style),"data-index":e.id}))})):null))}o()(i.Z,{insert:"head",singleton:!1}),i.Z.locals}(),module.exports=r}();