npm - react-holographic-cube - Versions diffs - 1.0.11 → 1.0.12 - Mend

react-holographic-cube 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},a.apply(null,arguments)}var r=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}];module.exports=function(t){var l,c,i=t.enablePanel,u=void 0!==i&&i,o=e.useState({items:t.items||r,initialSpeed:t.initialSpeed||30,friction:t.friction||.98,perspective:t.perspective||"1000px",showPillar:!1!==t.showPillar,pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==t.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),s=o[0],d=o[1],m=e.useState(!0),f=m[0],p=m[1],g=u?s.items:t.items||r,h=u?s.initialSpeed:t.initialSpeed||30,v=u?s.friction:t.friction||.98,E=u?s.perspective:t.perspective||"1000px",b=u?s.showPillar:!1!==t.showPillar,y=u?s.pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",N=u?s.pillarWidth:(null==(l=t.pillarSize)?void 0:l.width)||"120px",x=u?s.showResult:!1!==t.showResult,w=u?{borderWidth:s.cubeBorderWidth+"px"}:t.cubeStyle||{},C=u&&s.bgImage?"url("+s.bgImage+")":void 0,k=e.useState("idle"),S=k[0],I=k[1],P=e.useState(null),R=P[0],W=P[1],B=e.useState({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),j=B[0],M=B[1],T=e.useRef(null),L=e.useRef([]),O=e.useRef(null),U=e.useRef(0),A=e.useRef(0),F=e.useRef(0),X=e.useRef("idle"),z=function(e){var t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};e.useEffect(function(){return function(){return cancelAnimationFrame(O.current)}},[]),e.useEffect(function(){Z(0)},[g]),e.useEffect(function(){var e,t=function(){if("idle"===X.current){var n=30*(Math.random()-.5),a=30*(Math.random()-.5),r=10*(Math.random()-.5),l=30*(Math.random()-.5)-5;M({transform:"translate3d(0px, "+l+"px, 0px) rotateX("+n+"deg) rotateY("+a+"deg) rotateZ("+r+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===S?t():clearTimeout(e),function(){return clearTimeout(e)}},[S]);var q=function(){U.current+=A.current,U.current>=90&&(U.current%=90,F.current=(F.current+1)%g.length,Z(F.current)),T.current&&(T.current.style.transform="rotateX("+U.current+"deg)"),"stopping"===X.current&&(A.current*=v,A.current<.5&&(A.current=.5),A.current<=.5&&U.current<1)?G():O.current=requestAnimationFrame(q)},Y=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},Z=function(e){for(var t=0;t<4;t++){var n=z((e+t)%g.length),a=L.current[t];if(a){n.image?(a.innerText="",a.style.backgroundImage="url("+n.image+")",a.style.backgroundSize="cover",a.style.backgroundPosition="center",a.style.textShadow="none"):(a.innerText=n.content,a.style.backgroundImage="none",a.style.textShadow="0 0 20px "+n.color),a.style.borderColor=n.color,a.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var r=Y(n.color);a.style.setProperty("--face-color-rgb",r),a.style.setProperty("--face-color",n.color)}}},G=function(){T.current&&(T.current.style.transform="rotateX(0deg)");var e=z(F.current);I("idle"),X.current="idle",W(e.content),t.onWinner&&t.onWinner(e.content)},H=function(e,t){return d(function(n){var r;return a({},n,((r={})[e]=t,r))})},$=function(e,t,n){var r,l=[].concat(s.items);l[e]=a({},l[e],((r={})[t]=n,r)),H("items",l)};/*#__PURE__*/return n.default.createElement("div",{className:"rhc-container",style:t.rootStyle},/*#__PURE__*/n.default.createElement("div",{className:"rhc-stage",style:{backgroundImage:C}},/*#__PURE__*/n.default.createElement("div",{className:"scene",style:{perspective:E}},b&&/*#__PURE__*/n.default.createElement("div",{className:"light-pillar",style:{width:N,height:(null==(c=t.pillarSize)?void 0:c.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+y+" 50%, transparent 100%)"}}),/*#__PURE__*/n.default.createElement("div",{className:"cube-wrapper "+("idle"!==S?"locked":""),style:"idle"===S?j:{}},/*#__PURE__*/n.default.createElement("div",{ref:T,className:"cube "+("idle"!==S?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(e){/*#__PURE__*/return n.default.createElement("div",{key:e,className:"face "+["front","bottom","back","top"][e],ref:function(t){return L.current[e]=t},style:w})}),/*#__PURE__*/n.default.createElement("div",{className:"face left",style:w}),/*#__PURE__*/n.default.createElement("div",{className:"face right",style:w}))),/*#__PURE__*/n.default.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-overlay-controls"},x&&/*#__PURE__*/n.default.createElement("div",{className:"winner-text",style:t.resultStyle},R?"Result: "+R:"..."),/*#__PURE__*/n.default.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/n.default.createElement("button",{className:"cyber-button",onClick:function(){"idle"===X.current&&(W(null),I("spinning"),X.current="spinning",A.current=h,F.current=0,U.current=0,Z(0),q())},disabled:"idle"!==S},"Spin"),/*#__PURE__*/n.default.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===X.current&&(I("stopping"),X.current="stopping")},disabled:"spinning"!==S},"Stop")))),u&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/n.default.createElement("span",{className:"rhc-toggle-label"},f?"Hide":"Edit"),/*#__PURE__*/n.default.createElement("label",{className:"rhc-switch"},/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:f,onChange:function(e){return p(e.target.checked)}}),/*#__PURE__*/n.default.createElement("span",{className:"rhc-slider"}))),u&&f&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Environment"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("label",{className:"rhc-upload-btn"},s.bgImage?"Change Image":"Upload Background",/*#__PURE__*/n.default.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&H("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Perspective"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(s.perspective),onChange:function(e){return H("perspective",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Show Pillar"),/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:s.showPillar,onChange:function(e){return H("showPillar",e.target.checked)}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(s.pillarWidth),onChange:function(e){return H("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Color"),/*#__PURE__*/n.default.createElement("input",{type:"color",value:s.pillarColor,onChange:function(e){return H("pillarColor",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Physics"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Speed (",s.initialSpeed,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"100",value:s.initialSpeed,onChange:function(e){return H("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Friction (",s.friction,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:s.friction,onChange:function(e){return H("friction",Number(e.target.value))}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Styling"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Border Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0",max:"10",value:s.cubeBorderWidth,onChange:function(e){return H("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Items"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},s.items.map(function(e,t){/*#__PURE__*/return n.default.createElement("div",{key:t,className:"rhc-item-row"},e.image?/*#__PURE__*/n.default.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+e.image+")"},onClick:function(){return document.getElementById("item-upload-"+t).click()},title:"Click to change image"}):/*#__PURE__*/n.default.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+t).click()}},"IMG"),/*#__PURE__*/n.default.createElement("input",{id:"item-upload-"+t,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&$(e,"image",URL.createObjectURL(n))}(t,e)}}),/*#__PURE__*/n.default.createElement("input",{type:"text",value:e.content,placeholder:"Text",maxLength:4,onChange:function(e){return $(t,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/n.default.createElement("input",{type:"color",value:e.color,onChange:function(e){return $(t,"color",e.target.value)}}))}),/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){return H("items",[].concat(s.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){s.items.length>2&&H("items",s.items.slice(0,-1))}},"-"))))))};
+var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(null,arguments)}var a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}];module.exports=function(t){var l,c,i=t.enablePanel,o=void 0!==i&&i,u=e.useState({items:t.items||a,initialSpeed:t.initialSpeed||30,friction:t.friction||.98,perspective:t.perspective||"1000px",showPillar:!1!==t.showPillar,pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==t.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),s=u[0],d=u[1],m=e.useState(!0),f=m[0],p=m[1],g=o?s.items:t.items||a,h=o?s.initialSpeed:t.initialSpeed||30,v=o?s.friction:t.friction||.98,b=o?s.perspective:t.perspective||"1000px",E=o?s.showPillar:!1!==t.showPillar,y=o?s.pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",N=o?s.pillarWidth:(null==(l=t.pillarSize)?void 0:l.width)||"120px",x=o?s.showResult:!1!==t.showResult,w=o?{borderWidth:s.cubeBorderWidth+"px"}:t.cubeStyle||{},C=o&&s.bgImage?"url("+s.bgImage+")":void 0,k=C?void 0:"#000000",S=e.useState("idle"),I=S[0],P=S[1],R=e.useState(null),W=R[0],B=R[1],j=e.useState({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),M=j[0],T=j[1],L=e.useRef(null),O=e.useRef([]),U=e.useRef(null),A=e.useRef(0),F=e.useRef(0),X=e.useRef(0),z=e.useRef("idle"),q=function(e){var t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};e.useEffect(function(){return function(){return cancelAnimationFrame(U.current)}},[]),e.useEffect(function(){G(0)},[g]),e.useEffect(function(){var e,t=function(){if("idle"===z.current){var n=30*(Math.random()-.5),r=30*(Math.random()-.5),a=10*(Math.random()-.5),l=30*(Math.random()-.5)-5;T({transform:"translate3d(0px, "+l+"px, 0px) rotateX("+n+"deg) rotateY("+r+"deg) rotateZ("+a+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===I?t():clearTimeout(e),function(){return clearTimeout(e)}},[I]);var Y=function(){A.current+=F.current,A.current>=90&&(A.current%=90,X.current=(X.current+1)%g.length,G(X.current)),L.current&&(L.current.style.transform="rotateX("+A.current+"deg)"),"stopping"===z.current&&(F.current*=v,F.current<.5&&(F.current=.5),F.current<=.5&&A.current<1)?H():U.current=requestAnimationFrame(Y)},Z=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},G=function(e){for(var t=0;t<4;t++){var n=q((e+t)%g.length),r=O.current[t];if(r){n.image?(r.innerText="",r.style.backgroundImage="url("+n.image+")",r.style.backgroundSize="cover",r.style.backgroundPosition="center",r.style.textShadow="none"):(r.innerText=n.content,r.style.backgroundImage="none",r.style.textShadow="0 0 20px "+n.color),r.style.borderColor=n.color,r.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var a=Z(n.color);r.style.setProperty("--face-color-rgb",a),r.style.setProperty("--face-color",n.color)}}},H=function(){L.current&&(L.current.style.transform="rotateX(0deg)");var e=q(X.current);P("idle"),z.current="idle",B(e.content),t.onWinner&&t.onWinner(e.content)},$=function(e,t){return d(function(n){var a;return r({},n,((a={})[e]=t,a))})},D=function(e,t,n){var a,l=[].concat(s.items);l[e]=r({},l[e],((a={})[t]=n,a)),$("items",l)};/*#__PURE__*/return n.default.createElement("div",{className:"rhc-container",style:t.rootStyle},/*#__PURE__*/n.default.createElement("div",{className:"rhc-stage",style:{backgroundImage:C,backgroundColor:k}},/*#__PURE__*/n.default.createElement("div",{className:"scene",style:{perspective:b}},E&&/*#__PURE__*/n.default.createElement("div",{className:"light-pillar",style:{width:N,height:(null==(c=t.pillarSize)?void 0:c.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+y+" 50%, transparent 100%)"}}),/*#__PURE__*/n.default.createElement("div",{className:"cube-wrapper "+("idle"!==I?"locked":""),style:"idle"===I?M:{}},/*#__PURE__*/n.default.createElement("div",{ref:L,className:"cube "+("idle"!==I?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(e){/*#__PURE__*/return n.default.createElement("div",{key:e,className:"face "+["front","bottom","back","top"][e],ref:function(t){return O.current[e]=t},style:w})}),/*#__PURE__*/n.default.createElement("div",{className:"face left",style:w}),/*#__PURE__*/n.default.createElement("div",{className:"face right",style:w}))),/*#__PURE__*/n.default.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-overlay-controls"},x&&/*#__PURE__*/n.default.createElement("div",{className:"winner-text",style:t.resultStyle},W?"Result: "+W:"..."),/*#__PURE__*/n.default.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/n.default.createElement("button",{className:"cyber-button",onClick:function(){"idle"===z.current&&(B(null),P("spinning"),z.current="spinning",F.current=h,X.current=0,A.current=0,G(0),Y())},disabled:"idle"!==I},"Spin"),/*#__PURE__*/n.default.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===z.current&&(P("stopping"),z.current="stopping")},disabled:"spinning"!==I},"Stop")))),o&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/n.default.createElement("span",{className:"rhc-toggle-label"},f?"Hide":"Edit"),/*#__PURE__*/n.default.createElement("label",{className:"rhc-switch"},/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:f,onChange:function(e){return p(e.target.checked)}}),/*#__PURE__*/n.default.createElement("span",{className:"rhc-slider"}))),o&&f&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Environment"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("label",{className:"rhc-upload-btn"},s.bgImage?"Change Image":"Upload Background",/*#__PURE__*/n.default.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&$("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Perspective"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(s.perspective),onChange:function(e){return $("perspective",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Show Pillar"),/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:s.showPillar,onChange:function(e){return $("showPillar",e.target.checked)}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(s.pillarWidth),onChange:function(e){return $("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Color"),/*#__PURE__*/n.default.createElement("input",{type:"color",value:s.pillarColor,onChange:function(e){return $("pillarColor",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Physics"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Speed (",s.initialSpeed,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"100",value:s.initialSpeed,onChange:function(e){return $("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Friction (",s.friction,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:s.friction,onChange:function(e){return $("friction",Number(e.target.value))}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Styling"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Border Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0",max:"10",value:s.cubeBorderWidth,onChange:function(e){return $("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Items"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},s.items.map(function(e,t){/*#__PURE__*/return n.default.createElement("div",{key:t,className:"rhc-item-row"},e.image?/*#__PURE__*/n.default.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+e.image+")"},onClick:function(){return document.getElementById("item-upload-"+t).click()},title:"Click to change image"}):/*#__PURE__*/n.default.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+t).click()}},"IMG"),/*#__PURE__*/n.default.createElement("input",{id:"item-upload-"+t,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&D(e,"image",URL.createObjectURL(n))}(t,e)}}),/*#__PURE__*/n.default.createElement("input",{type:"text",value:e.content,placeholder:"Text",maxLength:4,onChange:function(e){return D(t,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/n.default.createElement("input",{type:"color",value:e.color,onChange:function(e){return D(t,"color",e.target.value)}}))}),/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){return $("items",[].concat(s.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){s.items.length>2&&$("items",s.items.slice(0,-1))}},"-"))))))};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div className=\"rhc-stage\" style={{ backgroundImage: activeBg }}>\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n const activeBgColor = !activeBg ? \"#000000\" : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div\n className=\"rhc-stage\"\n style={{\n backgroundImage: activeBg,\n backgroundColor: activeBgColor,\n }}\n >\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","activeBgColor","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","backgroundColor","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"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"}

package/dist/index.modern.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as r,useEffect as l}from"react";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},n.apply(null,arguments)}const a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}],c=c=>{var i,o;const{enablePanel:s=!1}=c,[m,u]=t({items:c.items||a,initialSpeed:c.initialSpeed||30,friction:c.friction||.98,perspective:c.perspective||"1000px",showPillar:!1!==c.showPillar,pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==c.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),[d,p]=t(!0),g=s?m.items:c.items||a,h=s?m.initialSpeed:c.initialSpeed||30,b=s?m.friction:c.friction||.98,E=s?m.perspective:c.perspective||"1000px",v=s?m.showPillar:!1!==c.showPillar,y=s?m.pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",f=s?m.pillarWidth:(null==(i=c.pillarSize)?void 0:i.width)||"120px",N=s?m.showResult:!1!==c.showResult,x=s?{borderWidth:`${m.cubeBorderWidth}px`}:c.cubeStyle||{},w=s&&m.bgImage?`url(${m.bgImage})`:void 0,[C,k]=t("idle"),[S,$]=t(null),[I,P]=t({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),W=r(null),R=r([]),B=r(null),j=r(0),M=r(0),T=r(0),L=r("idle"),O=e=>{const t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};l(()=>()=>cancelAnimationFrame(B.current),[]),l(()=>{F(0)},[g]),l(()=>{let e;const t=()=>{if("idle"!==L.current)return;const r=30*(Math.random()-.5),l=30*(Math.random()-.5),n=10*(Math.random()-.5),a=30*(Math.random()-.5)-5;P({transform:`translate3d(0px, ${a}px, 0px) rotateX(${r}deg) rotateY(${l}deg) rotateZ(${n}deg)`}),e=setTimeout(t,4e3+1e3*Math.random())};return"idle"===C?t():clearTimeout(e),()=>clearTimeout(e)},[C]);const U=()=>{j.current+=M.current,j.current>=90&&(j.current%=90,T.current=(T.current+1)%g.length,F(T.current)),W.current&&(W.current.style.transform=`rotateX(${j.current}deg)`),"stopping"===L.current&&(M.current*=b,M.current<.5&&(M.current=.5),M.current<=.5&&j.current<1)?X():B.current=requestAnimationFrame(U)},A=e=>{let t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(t=e.substring(1).split(""),3===t.length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),t="0x"+t.join(""),[t>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},F=e=>{for(let t=0;t<4;t++){const r=O((e+t)%g.length),l=R.current[t];if(l){r.image?(l.innerText="",l.style.backgroundImage=`url(${r.image})`,l.style.backgroundSize="cover",l.style.backgroundPosition="center",l.style.textShadow="none"):(l.innerText=r.content,l.style.backgroundImage="none",l.style.textShadow=`0 0 20px ${r.color}`),l.style.borderColor=r.color,l.style.boxShadow=`0 0 15px ${r.color}4d, inset 0 0 30px ${r.color}1a`;const e=A(r.color);l.style.setProperty("--face-color-rgb",e),l.style.setProperty("--face-color",r.color)}}},X=()=>{W.current&&(W.current.style.transform="rotateX(0deg)");const e=O(T.current);k("idle"),L.current="idle",$(e.content),c.onWinner&&c.onWinner(e.content)},z=(e,t)=>u(r=>n({},r,{[e]:t})),Y=(e,t,r)=>{const l=[...m.items];l[e]=n({},l[e],{[t]:r}),z("items",l)};/*#__PURE__*/return e.createElement("div",{className:"rhc-container",style:c.rootStyle},/*#__PURE__*/e.createElement("div",{className:"rhc-stage",style:{backgroundImage:w}},/*#__PURE__*/e.createElement("div",{className:"scene",style:{perspective:E}},v&&/*#__PURE__*/e.createElement("div",{className:"light-pillar",style:{width:f,height:(null==(o=c.pillarSize)?void 0:o.height)||"2000px",background:`linear-gradient(to bottom, transparent 0%, ${y} 50%, transparent 100%)`}}),/*#__PURE__*/e.createElement("div",{className:"cube-wrapper "+("idle"!==C?"locked":""),style:"idle"===C?I:{}},/*#__PURE__*/e.createElement("div",{ref:W,className:"cube "+("idle"!==C?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(t=>/*#__PURE__*/e.createElement("div",{key:t,className:`face ${["front","bottom","back","top"][t]}`,ref:e=>R.current[t]=e,style:x})),/*#__PURE__*/e.createElement("div",{className:"face left",style:x}),/*#__PURE__*/e.createElement("div",{className:"face right",style:x}))),/*#__PURE__*/e.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/e.createElement("div",{className:"rhc-overlay-controls"},N&&/*#__PURE__*/e.createElement("div",{className:"winner-text",style:c.resultStyle},S?`Result: ${S}`:"..."),/*#__PURE__*/e.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/e.createElement("button",{className:"cyber-button",onClick:()=>{"idle"===L.current&&($(null),k("spinning"),L.current="spinning",M.current=h,T.current=0,j.current=0,F(0),U())},disabled:"idle"!==C},"Spin"),/*#__PURE__*/e.createElement("button",{className:"cyber-button stop-btn",onClick:()=>{"spinning"===L.current&&(k("stopping"),L.current="stopping")},disabled:"spinning"!==C},"Stop")))),s&&/*#__PURE__*/e.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/e.createElement("span",{className:"rhc-toggle-label"},d?"Hide":"Edit"),/*#__PURE__*/e.createElement("label",{className:"rhc-switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:d,onChange:e=>p(e.target.checked)}),/*#__PURE__*/e.createElement("span",{className:"rhc-slider"}))),s&&d&&/*#__PURE__*/e.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Environment"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("label",{className:"rhc-upload-btn"},m.bgImage?"Change Image":"Upload Background",/*#__PURE__*/e.createElement("input",{type:"file",accept:"image/*",onChange:e=>{const t=e.target.files[0];t&&z("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Perspective"),/*#__PURE__*/e.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(m.perspective),onChange:e=>z("perspective",`${e.target.value}px`)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Show Pillar"),/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:m.showPillar,onChange:e=>z("showPillar",e.target.checked)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(m.pillarWidth),onChange:e=>z("pillarWidth",`${e.target.value}px`)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Color"),/*#__PURE__*/e.createElement("input",{type:"color",value:m.pillarColor,onChange:e=>z("pillarColor",e.target.value)})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Physics"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Speed (",m.initialSpeed,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"100",value:m.initialSpeed,onChange:e=>z("initialSpeed",Number(e.target.value))})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Friction (",m.friction,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:m.friction,onChange:e=>z("friction",Number(e.target.value))})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Styling"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Border Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0",max:"10",value:m.cubeBorderWidth,onChange:e=>z("cubeBorderWidth",e.target.value)})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Items"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},m.items.map((t,r)=>/*#__PURE__*/e.createElement("div",{key:r,className:"rhc-item-row"},t.image?/*#__PURE__*/e.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:`url(${t.image})`},onClick:()=>document.getElementById(`item-upload-${r}`).click(),title:"Click to change image"}):/*#__PURE__*/e.createElement("button",{className:"rhc-mini-btn",onClick:()=>document.getElementById(`item-upload-${r}`).click()},"IMG"),/*#__PURE__*/e.createElement("input",{id:`item-upload-${r}`,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>((e,t)=>{const r=t.target.files[0];r&&Y(e,"image",URL.createObjectURL(r))})(r,e)}),/*#__PURE__*/e.createElement("input",{type:"text",value:t.content,placeholder:"Text",maxLength:4,onChange:e=>Y(r,"content",e.target.value),style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/e.createElement("input",{type:"color",value:t.color,onChange:e=>Y(r,"color",e.target.value)}))),/*#__PURE__*/e.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:()=>z("items",[...m.items,{content:"?",color:"#fff"}])},"+"),/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:()=>{m.items.length>2&&z("items",m.items.slice(0,-1))}},"-"))))))};export{c as default};
+import e,{useState as t,useRef as r,useEffect as l}from"react";function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},n.apply(null,arguments)}const a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}],c=c=>{var i,o;const{enablePanel:s=!1}=c,[m,u]=t({items:c.items||a,initialSpeed:c.initialSpeed||30,friction:c.friction||.98,perspective:c.perspective||"1000px",showPillar:!1!==c.showPillar,pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==c.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),[d,p]=t(!0),g=s?m.items:c.items||a,h=s?m.initialSpeed:c.initialSpeed||30,b=s?m.friction:c.friction||.98,E=s?m.perspective:c.perspective||"1000px",v=s?m.showPillar:!1!==c.showPillar,y=s?m.pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",f=s?m.pillarWidth:(null==(i=c.pillarSize)?void 0:i.width)||"120px",N=s?m.showResult:!1!==c.showResult,x=s?{borderWidth:`${m.cubeBorderWidth}px`}:c.cubeStyle||{},w=s&&m.bgImage?`url(${m.bgImage})`:void 0,C=w?void 0:"#000000",[k,S]=t("idle"),[$,I]=t(null),[P,W]=t({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),R=r(null),B=r([]),j=r(null),M=r(0),T=r(0),L=r(0),O=r("idle"),U=e=>{const t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};l(()=>()=>cancelAnimationFrame(j.current),[]),l(()=>{X(0)},[g]),l(()=>{let e;const t=()=>{if("idle"!==O.current)return;const r=30*(Math.random()-.5),l=30*(Math.random()-.5),n=10*(Math.random()-.5),a=30*(Math.random()-.5)-5;W({transform:`translate3d(0px, ${a}px, 0px) rotateX(${r}deg) rotateY(${l}deg) rotateZ(${n}deg)`}),e=setTimeout(t,4e3+1e3*Math.random())};return"idle"===k?t():clearTimeout(e),()=>clearTimeout(e)},[k]);const A=()=>{M.current+=T.current,M.current>=90&&(M.current%=90,L.current=(L.current+1)%g.length,X(L.current)),R.current&&(R.current.style.transform=`rotateX(${M.current}deg)`),"stopping"===O.current&&(T.current*=b,T.current<.5&&(T.current=.5),T.current<=.5&&M.current<1)?z():j.current=requestAnimationFrame(A)},F=e=>{let t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(t=e.substring(1).split(""),3===t.length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),t="0x"+t.join(""),[t>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},X=e=>{for(let t=0;t<4;t++){const r=U((e+t)%g.length),l=B.current[t];if(l){r.image?(l.innerText="",l.style.backgroundImage=`url(${r.image})`,l.style.backgroundSize="cover",l.style.backgroundPosition="center",l.style.textShadow="none"):(l.innerText=r.content,l.style.backgroundImage="none",l.style.textShadow=`0 0 20px ${r.color}`),l.style.borderColor=r.color,l.style.boxShadow=`0 0 15px ${r.color}4d, inset 0 0 30px ${r.color}1a`;const e=F(r.color);l.style.setProperty("--face-color-rgb",e),l.style.setProperty("--face-color",r.color)}}},z=()=>{R.current&&(R.current.style.transform="rotateX(0deg)");const e=U(L.current);S("idle"),O.current="idle",I(e.content),c.onWinner&&c.onWinner(e.content)},Y=(e,t)=>u(r=>n({},r,{[e]:t})),Z=(e,t,r)=>{const l=[...m.items];l[e]=n({},l[e],{[t]:r}),Y("items",l)};/*#__PURE__*/return e.createElement("div",{className:"rhc-container",style:c.rootStyle},/*#__PURE__*/e.createElement("div",{className:"rhc-stage",style:{backgroundImage:w,backgroundColor:C}},/*#__PURE__*/e.createElement("div",{className:"scene",style:{perspective:E}},v&&/*#__PURE__*/e.createElement("div",{className:"light-pillar",style:{width:f,height:(null==(o=c.pillarSize)?void 0:o.height)||"2000px",background:`linear-gradient(to bottom, transparent 0%, ${y} 50%, transparent 100%)`}}),/*#__PURE__*/e.createElement("div",{className:"cube-wrapper "+("idle"!==k?"locked":""),style:"idle"===k?P:{}},/*#__PURE__*/e.createElement("div",{ref:R,className:"cube "+("idle"!==k?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(t=>/*#__PURE__*/e.createElement("div",{key:t,className:`face ${["front","bottom","back","top"][t]}`,ref:e=>B.current[t]=e,style:x})),/*#__PURE__*/e.createElement("div",{className:"face left",style:x}),/*#__PURE__*/e.createElement("div",{className:"face right",style:x}))),/*#__PURE__*/e.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/e.createElement("div",{className:"rhc-overlay-controls"},N&&/*#__PURE__*/e.createElement("div",{className:"winner-text",style:c.resultStyle},$?`Result: ${$}`:"..."),/*#__PURE__*/e.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/e.createElement("button",{className:"cyber-button",onClick:()=>{"idle"===O.current&&(I(null),S("spinning"),O.current="spinning",T.current=h,L.current=0,M.current=0,X(0),A())},disabled:"idle"!==k},"Spin"),/*#__PURE__*/e.createElement("button",{className:"cyber-button stop-btn",onClick:()=>{"spinning"===O.current&&(S("stopping"),O.current="stopping")},disabled:"spinning"!==k},"Stop")))),s&&/*#__PURE__*/e.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/e.createElement("span",{className:"rhc-toggle-label"},d?"Hide":"Edit"),/*#__PURE__*/e.createElement("label",{className:"rhc-switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:d,onChange:e=>p(e.target.checked)}),/*#__PURE__*/e.createElement("span",{className:"rhc-slider"}))),s&&d&&/*#__PURE__*/e.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Environment"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("label",{className:"rhc-upload-btn"},m.bgImage?"Change Image":"Upload Background",/*#__PURE__*/e.createElement("input",{type:"file",accept:"image/*",onChange:e=>{const t=e.target.files[0];t&&Y("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Perspective"),/*#__PURE__*/e.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(m.perspective),onChange:e=>Y("perspective",`${e.target.value}px`)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Show Pillar"),/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:m.showPillar,onChange:e=>Y("showPillar",e.target.checked)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(m.pillarWidth),onChange:e=>Y("pillarWidth",`${e.target.value}px`)})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Color"),/*#__PURE__*/e.createElement("input",{type:"color",value:m.pillarColor,onChange:e=>Y("pillarColor",e.target.value)})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Physics"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Speed (",m.initialSpeed,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"100",value:m.initialSpeed,onChange:e=>Y("initialSpeed",Number(e.target.value))})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Friction (",m.friction,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:m.friction,onChange:e=>Y("friction",Number(e.target.value))})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Styling"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Border Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0",max:"10",value:m.cubeBorderWidth,onChange:e=>Y("cubeBorderWidth",e.target.value)})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Items"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},m.items.map((t,r)=>/*#__PURE__*/e.createElement("div",{key:r,className:"rhc-item-row"},t.image?/*#__PURE__*/e.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:`url(${t.image})`},onClick:()=>document.getElementById(`item-upload-${r}`).click(),title:"Click to change image"}):/*#__PURE__*/e.createElement("button",{className:"rhc-mini-btn",onClick:()=>document.getElementById(`item-upload-${r}`).click()},"IMG"),/*#__PURE__*/e.createElement("input",{id:`item-upload-${r}`,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>((e,t)=>{const r=t.target.files[0];r&&Z(e,"image",URL.createObjectURL(r))})(r,e)}),/*#__PURE__*/e.createElement("input",{type:"text",value:t.content,placeholder:"Text",maxLength:4,onChange:e=>Z(r,"content",e.target.value),style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/e.createElement("input",{type:"color",value:t.color,onChange:e=>Z(r,"color",e.target.value)}))),/*#__PURE__*/e.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:()=>Y("items",[...m.items,{content:"?",color:"#fff"}])},"+"),/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:()=>{m.items.length>2&&Y("items",m.items.slice(0,-1))}},"-"))))))};export{c as default};
 //# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.modern.mjs","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div className=\"rhc-stage\" style={{ backgroundImage: activeBg }}>\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","InfiniteCube","props","_props$pillarSize","_props$pillarSize2","enablePanel","internalConfig","setInternalConfig","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","status","setStatus","winner","setWinner","driftStyle","setDriftStyle","transform","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends","handleItemEdit","idx","field","newItems","React","createElement","className","rootStyle","height","background","ref","transition","map","resultStyle","onClick","handleStart","disabled","handleStop","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","addItem","removeItem","slice"],"mappings":"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"}
1	+ {"version":3,"file":"index.modern.mjs","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n const activeBgColor = !activeBg ? \"#000000\" : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div\n className=\"rhc-stage\"\n style={{\n backgroundImage: activeBg,\n backgroundColor: activeBgColor,\n }}\n >\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","InfiniteCube","props","_props$pillarSize","_props$pillarSize2","enablePanel","internalConfig","setInternalConfig","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","activeBgColor","status","setStatus","winner","setWinner","driftStyle","setDriftStyle","transform","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends","handleItemEdit","idx","field","newItems","React","createElement","className","rootStyle","backgroundColor","height","background","ref","transition","map","resultStyle","onClick","handleStart","disabled","handleStop","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","addItem","removeItem","slice"],"mappings":"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"}

package/dist/index.module.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{useState as t,useRef as n,useEffect as r}from"react";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(null,arguments)}var a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}],c=function(c){var i,o,s=c.enablePanel,u=void 0!==s&&s,m=t({items:c.items||a,initialSpeed:c.initialSpeed||30,friction:c.friction||.98,perspective:c.perspective||"1000px",showPillar:!1!==c.showPillar,pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==c.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),d=m[0],p=m[1],g=t(!0),h=g[0],f=g[1],v=u?d.items:c.items||a,b=u?d.initialSpeed:c.initialSpeed||30,E=u?d.friction:c.friction||.98,y=u?d.perspective:c.perspective||"1000px",N=u?d.showPillar:!1!==c.showPillar,x=u?d.pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",w=u?d.pillarWidth:(null==(i=c.pillarSize)?void 0:i.width)||"120px",C=u?d.showResult:!1!==c.showResult,k=u?{borderWidth:d.cubeBorderWidth+"px"}:c.cubeStyle||{},S=u&&d.bgImage?"url("+d.bgImage+")":void 0,I=t("idle"),P=I[0],W=I[1],R=t(null),B=R[0],j=R[1],M=t({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),T=M[0],L=M[1],O=n(null),U=n([]),A=n(null),F=n(0),X=n(0),z=n(0),Y=n("idle"),Z=function(e){var t=v[e%v.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};r(function(){return function(){return cancelAnimationFrame(A.current)}},[]),r(function(){H(0)},[v]),r(function(){var e,t=function(){if("idle"===Y.current){var n=30*(Math.random()-.5),r=30*(Math.random()-.5),l=10*(Math.random()-.5),a=30*(Math.random()-.5)-5;L({transform:"translate3d(0px, "+a+"px, 0px) rotateX("+n+"deg) rotateY("+r+"deg) rotateZ("+l+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===P?t():clearTimeout(e),function(){return clearTimeout(e)}},[P]);var q=function(){F.current+=X.current,F.current>=90&&(F.current%=90,z.current=(z.current+1)%v.length,H(z.current)),O.current&&(O.current.style.transform="rotateX("+F.current+"deg)"),"stopping"===Y.current&&(X.current*=E,X.current<.5&&(X.current=.5),X.current<=.5&&F.current<1)?$():A.current=requestAnimationFrame(q)},G=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},H=function(e){for(var t=0;t<4;t++){var n=Z((e+t)%v.length),r=U.current[t];if(r){n.image?(r.innerText="",r.style.backgroundImage="url("+n.image+")",r.style.backgroundSize="cover",r.style.backgroundPosition="center",r.style.textShadow="none"):(r.innerText=n.content,r.style.backgroundImage="none",r.style.textShadow="0 0 20px "+n.color),r.style.borderColor=n.color,r.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var l=G(n.color);r.style.setProperty("--face-color-rgb",l),r.style.setProperty("--face-color",n.color)}}},$=function(){O.current&&(O.current.style.transform="rotateX(0deg)");var e=Z(z.current);W("idle"),Y.current="idle",j(e.content),c.onWinner&&c.onWinner(e.content)},D=function(e,t){return p(function(n){var r;return l({},n,((r={})[e]=t,r))})},J=function(e,t,n){var r,a=[].concat(d.items);a[e]=l({},a[e],((r={})[t]=n,r)),D("items",a)};/*#__PURE__*/return e.createElement("div",{className:"rhc-container",style:c.rootStyle},/*#__PURE__*/e.createElement("div",{className:"rhc-stage",style:{backgroundImage:S}},/*#__PURE__*/e.createElement("div",{className:"scene",style:{perspective:y}},N&&/*#__PURE__*/e.createElement("div",{className:"light-pillar",style:{width:w,height:(null==(o=c.pillarSize)?void 0:o.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+x+" 50%, transparent 100%)"}}),/*#__PURE__*/e.createElement("div",{className:"cube-wrapper "+("idle"!==P?"locked":""),style:"idle"===P?T:{}},/*#__PURE__*/e.createElement("div",{ref:O,className:"cube "+("idle"!==P?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(t){/*#__PURE__*/return e.createElement("div",{key:t,className:"face "+["front","bottom","back","top"][t],ref:function(e){return U.current[t]=e},style:k})}),/*#__PURE__*/e.createElement("div",{className:"face left",style:k}),/*#__PURE__*/e.createElement("div",{className:"face right",style:k}))),/*#__PURE__*/e.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/e.createElement("div",{className:"rhc-overlay-controls"},C&&/*#__PURE__*/e.createElement("div",{className:"winner-text",style:c.resultStyle},B?"Result: "+B:"..."),/*#__PURE__*/e.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/e.createElement("button",{className:"cyber-button",onClick:function(){"idle"===Y.current&&(j(null),W("spinning"),Y.current="spinning",X.current=b,z.current=0,F.current=0,H(0),q())},disabled:"idle"!==P},"Spin"),/*#__PURE__*/e.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===Y.current&&(W("stopping"),Y.current="stopping")},disabled:"spinning"!==P},"Stop")))),u&&/*#__PURE__*/e.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/e.createElement("span",{className:"rhc-toggle-label"},h?"Hide":"Edit"),/*#__PURE__*/e.createElement("label",{className:"rhc-switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:h,onChange:function(e){return f(e.target.checked)}}),/*#__PURE__*/e.createElement("span",{className:"rhc-slider"}))),u&&h&&/*#__PURE__*/e.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Environment"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("label",{className:"rhc-upload-btn"},d.bgImage?"Change Image":"Upload Background",/*#__PURE__*/e.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&D("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Perspective"),/*#__PURE__*/e.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(d.perspective),onChange:function(e){return D("perspective",e.target.value+"px")}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Show Pillar"),/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:d.showPillar,onChange:function(e){return D("showPillar",e.target.checked)}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(d.pillarWidth),onChange:function(e){return D("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Color"),/*#__PURE__*/e.createElement("input",{type:"color",value:d.pillarColor,onChange:function(e){return D("pillarColor",e.target.value)}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Physics"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Speed (",d.initialSpeed,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"100",value:d.initialSpeed,onChange:function(e){return D("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Friction (",d.friction,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:d.friction,onChange:function(e){return D("friction",Number(e.target.value))}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Styling"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Border Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0",max:"10",value:d.cubeBorderWidth,onChange:function(e){return D("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Items"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},d.items.map(function(t,n){/*#__PURE__*/return e.createElement("div",{key:n,className:"rhc-item-row"},t.image?/*#__PURE__*/e.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+t.image+")"},onClick:function(){return document.getElementById("item-upload-"+n).click()},title:"Click to change image"}):/*#__PURE__*/e.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+n).click()}},"IMG"),/*#__PURE__*/e.createElement("input",{id:"item-upload-"+n,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&J(e,"image",URL.createObjectURL(n))}(n,e)}}),/*#__PURE__*/e.createElement("input",{type:"text",value:t.content,placeholder:"Text",maxLength:4,onChange:function(e){return J(n,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/e.createElement("input",{type:"color",value:t.color,onChange:function(e){return J(n,"color",e.target.value)}}))}),/*#__PURE__*/e.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:function(){return D("items",[].concat(d.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:function(){d.items.length>2&&D("items",d.items.slice(0,-1))}},"-"))))))};export{c as default};
+import e,{useState as t,useRef as n,useEffect as r}from"react";function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(null,arguments)}var a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}],c=function(c){var i,o,s=c.enablePanel,u=void 0!==s&&s,m=t({items:c.items||a,initialSpeed:c.initialSpeed||30,friction:c.friction||.98,perspective:c.perspective||"1000px",showPillar:!1!==c.showPillar,pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==c.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),d=m[0],p=m[1],g=t(!0),h=g[0],f=g[1],v=u?d.items:c.items||a,b=u?d.initialSpeed:c.initialSpeed||30,E=u?d.friction:c.friction||.98,y=u?d.perspective:c.perspective||"1000px",N=u?d.showPillar:!1!==c.showPillar,x=u?d.pillarColor:c.pillarColor||"rgba(0, 247, 255, 0.1)",w=u?d.pillarWidth:(null==(i=c.pillarSize)?void 0:i.width)||"120px",C=u?d.showResult:!1!==c.showResult,k=u?{borderWidth:d.cubeBorderWidth+"px"}:c.cubeStyle||{},S=u&&d.bgImage?"url("+d.bgImage+")":void 0,I=S?void 0:"#000000",P=t("idle"),W=P[0],R=P[1],B=t(null),j=B[0],M=B[1],T=t({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),L=T[0],O=T[1],U=n(null),A=n([]),F=n(null),X=n(0),z=n(0),Y=n(0),Z=n("idle"),q=function(e){var t=v[e%v.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};r(function(){return function(){return cancelAnimationFrame(F.current)}},[]),r(function(){$(0)},[v]),r(function(){var e,t=function(){if("idle"===Z.current){var n=30*(Math.random()-.5),r=30*(Math.random()-.5),l=10*(Math.random()-.5),a=30*(Math.random()-.5)-5;O({transform:"translate3d(0px, "+a+"px, 0px) rotateX("+n+"deg) rotateY("+r+"deg) rotateZ("+l+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===W?t():clearTimeout(e),function(){return clearTimeout(e)}},[W]);var G=function(){X.current+=z.current,X.current>=90&&(X.current%=90,Y.current=(Y.current+1)%v.length,$(Y.current)),U.current&&(U.current.style.transform="rotateX("+X.current+"deg)"),"stopping"===Z.current&&(z.current*=E,z.current<.5&&(z.current=.5),z.current<=.5&&X.current<1)?D():F.current=requestAnimationFrame(G)},H=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},$=function(e){for(var t=0;t<4;t++){var n=q((e+t)%v.length),r=A.current[t];if(r){n.image?(r.innerText="",r.style.backgroundImage="url("+n.image+")",r.style.backgroundSize="cover",r.style.backgroundPosition="center",r.style.textShadow="none"):(r.innerText=n.content,r.style.backgroundImage="none",r.style.textShadow="0 0 20px "+n.color),r.style.borderColor=n.color,r.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var l=H(n.color);r.style.setProperty("--face-color-rgb",l),r.style.setProperty("--face-color",n.color)}}},D=function(){U.current&&(U.current.style.transform="rotateX(0deg)");var e=q(Y.current);R("idle"),Z.current="idle",M(e.content),c.onWinner&&c.onWinner(e.content)},J=function(e,t){return p(function(n){var r;return l({},n,((r={})[e]=t,r))})},K=function(e,t,n){var r,a=[].concat(d.items);a[e]=l({},a[e],((r={})[t]=n,r)),J("items",a)};/*#__PURE__*/return e.createElement("div",{className:"rhc-container",style:c.rootStyle},/*#__PURE__*/e.createElement("div",{className:"rhc-stage",style:{backgroundImage:S,backgroundColor:I}},/*#__PURE__*/e.createElement("div",{className:"scene",style:{perspective:y}},N&&/*#__PURE__*/e.createElement("div",{className:"light-pillar",style:{width:w,height:(null==(o=c.pillarSize)?void 0:o.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+x+" 50%, transparent 100%)"}}),/*#__PURE__*/e.createElement("div",{className:"cube-wrapper "+("idle"!==W?"locked":""),style:"idle"===W?L:{}},/*#__PURE__*/e.createElement("div",{ref:U,className:"cube "+("idle"!==W?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(t){/*#__PURE__*/return e.createElement("div",{key:t,className:"face "+["front","bottom","back","top"][t],ref:function(e){return A.current[t]=e},style:k})}),/*#__PURE__*/e.createElement("div",{className:"face left",style:k}),/*#__PURE__*/e.createElement("div",{className:"face right",style:k}))),/*#__PURE__*/e.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/e.createElement("div",{className:"rhc-overlay-controls"},C&&/*#__PURE__*/e.createElement("div",{className:"winner-text",style:c.resultStyle},j?"Result: "+j:"..."),/*#__PURE__*/e.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/e.createElement("button",{className:"cyber-button",onClick:function(){"idle"===Z.current&&(M(null),R("spinning"),Z.current="spinning",z.current=b,Y.current=0,X.current=0,$(0),G())},disabled:"idle"!==W},"Spin"),/*#__PURE__*/e.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===Z.current&&(R("stopping"),Z.current="stopping")},disabled:"spinning"!==W},"Stop")))),u&&/*#__PURE__*/e.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/e.createElement("span",{className:"rhc-toggle-label"},h?"Hide":"Edit"),/*#__PURE__*/e.createElement("label",{className:"rhc-switch"},/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:h,onChange:function(e){return f(e.target.checked)}}),/*#__PURE__*/e.createElement("span",{className:"rhc-slider"}))),u&&h&&/*#__PURE__*/e.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Environment"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("label",{className:"rhc-upload-btn"},d.bgImage?"Change Image":"Upload Background",/*#__PURE__*/e.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&J("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Perspective"),/*#__PURE__*/e.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(d.perspective),onChange:function(e){return J("perspective",e.target.value+"px")}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Show Pillar"),/*#__PURE__*/e.createElement("input",{type:"checkbox",checked:d.showPillar,onChange:function(e){return J("showPillar",e.target.checked)}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(d.pillarWidth),onChange:function(e){return J("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Pillar Color"),/*#__PURE__*/e.createElement("input",{type:"color",value:d.pillarColor,onChange:function(e){return J("pillarColor",e.target.value)}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Physics"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Speed (",d.initialSpeed,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"10",max:"100",value:d.initialSpeed,onChange:function(e){return J("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Friction (",d.friction,")"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:d.friction,onChange:function(e){return J("friction",Number(e.target.value))}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Styling"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/e.createElement("div",{className:"rhc-row"},/*#__PURE__*/e.createElement("label",null,"Border Width"),/*#__PURE__*/e.createElement("input",{type:"range",min:"0",max:"10",value:d.cubeBorderWidth,onChange:function(e){return J("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/e.createElement("section",null,/*#__PURE__*/e.createElement("h2",null,"Items"),/*#__PURE__*/e.createElement("div",{className:"rhc-control-group"},d.items.map(function(t,n){/*#__PURE__*/return e.createElement("div",{key:n,className:"rhc-item-row"},t.image?/*#__PURE__*/e.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+t.image+")"},onClick:function(){return document.getElementById("item-upload-"+n).click()},title:"Click to change image"}):/*#__PURE__*/e.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+n).click()}},"IMG"),/*#__PURE__*/e.createElement("input",{id:"item-upload-"+n,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&K(e,"image",URL.createObjectURL(n))}(n,e)}}),/*#__PURE__*/e.createElement("input",{type:"text",value:t.content,placeholder:"Text",maxLength:4,onChange:function(e){return K(n,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/e.createElement("input",{type:"color",value:t.color,onChange:function(e){return K(n,"color",e.target.value)}}))}),/*#__PURE__*/e.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:function(){return J("items",[].concat(d.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/e.createElement("button",{className:"rhc-action-btn",onClick:function(){d.items.length>2&&J("items",d.items.slice(0,-1))}},"-"))))))};export{c as default};
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.module.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div className=\"rhc-stage\" style={{ backgroundImage: activeBg }}>\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","InfiniteCube","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"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"}
1	+ {"version":3,"file":"index.module.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n const activeBgColor = !activeBg ? \"#000000\" : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div\n className=\"rhc-stage\"\n style={{\n backgroundImage: activeBg,\n backgroundColor: activeBgColor,\n }}\n >\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","InfiniteCube","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","activeBgColor","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","backgroundColor","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"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"}

package/dist/index.umd.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).reactHolographicCube=t(e.react)}(this,function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},a.apply(null,arguments)}var r=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}];return function(t){var l,c,i=t.enablePanel,o=void 0!==i&&i,u=e.useState({items:t.items||r,initialSpeed:t.initialSpeed||30,friction:t.friction||.98,perspective:t.perspective||"1000px",showPillar:!1!==t.showPillar,pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==t.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),s=u[0],d=u[1],m=e.useState(!0),f=m[0],p=m[1],g=o?s.items:t.items||r,h=o?s.initialSpeed:t.initialSpeed||30,v=o?s.friction:t.friction||.98,b=o?s.perspective:t.perspective||"1000px",E=o?s.showPillar:!1!==t.showPillar,y=o?s.pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",N=o?s.pillarWidth:(null==(l=t.pillarSize)?void 0:l.width)||"120px",x=o?s.showResult:!1!==t.showResult,w=o?{borderWidth:s.cubeBorderWidth+"px"}:t.cubeStyle||{},C=o&&s.bgImage?"url("+s.bgImage+")":void 0,k=e.useState("idle"),S=k[0],I=k[1],P=e.useState(null),R=P[0],W=P[1],j=e.useState({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),B=j[0],T=j[1],M=e.useRef(null),L=e.useRef([]),O=e.useRef(null),U=e.useRef(0),A=e.useRef(0),F=e.useRef(0),X=e.useRef("idle"),z=function(e){var t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};e.useEffect(function(){return function(){return cancelAnimationFrame(O.current)}},[]),e.useEffect(function(){Y(0)},[g]),e.useEffect(function(){var e,t=function(){if("idle"===X.current){var n=30*(Math.random()-.5),a=30*(Math.random()-.5),r=10*(Math.random()-.5),l=30*(Math.random()-.5)-5;T({transform:"translate3d(0px, "+l+"px, 0px) rotateX("+n+"deg) rotateY("+a+"deg) rotateZ("+r+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===S?t():clearTimeout(e),function(){return clearTimeout(e)}},[S]);var q=function(){U.current+=A.current,U.current>=90&&(U.current%=90,F.current=(F.current+1)%g.length,Y(F.current)),M.current&&(M.current.style.transform="rotateX("+U.current+"deg)"),"stopping"===X.current&&(A.current*=v,A.current<.5&&(A.current=.5),A.current<=.5&&U.current<1)?Z():O.current=requestAnimationFrame(q)},H=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},Y=function(e){for(var t=0;t<4;t++){var n=z((e+t)%g.length),a=L.current[t];if(a){n.image?(a.innerText="",a.style.backgroundImage="url("+n.image+")",a.style.backgroundSize="cover",a.style.backgroundPosition="center",a.style.textShadow="none"):(a.innerText=n.content,a.style.backgroundImage="none",a.style.textShadow="0 0 20px "+n.color),a.style.borderColor=n.color,a.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var r=H(n.color);a.style.setProperty("--face-color-rgb",r),a.style.setProperty("--face-color",n.color)}}},Z=function(){M.current&&(M.current.style.transform="rotateX(0deg)");var e=z(F.current);I("idle"),X.current="idle",W(e.content),t.onWinner&&t.onWinner(e.content)},G=function(e,t){return d(function(n){var r;return a({},n,((r={})[e]=t,r))})},$=function(e,t,n){var r,l=[].concat(s.items);l[e]=a({},l[e],((r={})[t]=n,r)),G("items",l)};/*#__PURE__*/return n.default.createElement("div",{className:"rhc-container",style:t.rootStyle},/*#__PURE__*/n.default.createElement("div",{className:"rhc-stage",style:{backgroundImage:C}},/*#__PURE__*/n.default.createElement("div",{className:"scene",style:{perspective:b}},E&&/*#__PURE__*/n.default.createElement("div",{className:"light-pillar",style:{width:N,height:(null==(c=t.pillarSize)?void 0:c.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+y+" 50%, transparent 100%)"}}),/*#__PURE__*/n.default.createElement("div",{className:"cube-wrapper "+("idle"!==S?"locked":""),style:"idle"===S?B:{}},/*#__PURE__*/n.default.createElement("div",{ref:M,className:"cube "+("idle"!==S?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(e){/*#__PURE__*/return n.default.createElement("div",{key:e,className:"face "+["front","bottom","back","top"][e],ref:function(t){return L.current[e]=t},style:w})}),/*#__PURE__*/n.default.createElement("div",{className:"face left",style:w}),/*#__PURE__*/n.default.createElement("div",{className:"face right",style:w}))),/*#__PURE__*/n.default.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-overlay-controls"},x&&/*#__PURE__*/n.default.createElement("div",{className:"winner-text",style:t.resultStyle},R?"Result: "+R:"..."),/*#__PURE__*/n.default.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/n.default.createElement("button",{className:"cyber-button",onClick:function(){"idle"===X.current&&(W(null),I("spinning"),X.current="spinning",A.current=h,F.current=0,U.current=0,Y(0),q())},disabled:"idle"!==S},"Spin"),/*#__PURE__*/n.default.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===X.current&&(I("stopping"),X.current="stopping")},disabled:"spinning"!==S},"Stop")))),o&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/n.default.createElement("span",{className:"rhc-toggle-label"},f?"Hide":"Edit"),/*#__PURE__*/n.default.createElement("label",{className:"rhc-switch"},/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:f,onChange:function(e){return p(e.target.checked)}}),/*#__PURE__*/n.default.createElement("span",{className:"rhc-slider"}))),o&&f&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Environment"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("label",{className:"rhc-upload-btn"},s.bgImage?"Change Image":"Upload Background",/*#__PURE__*/n.default.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&G("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Perspective"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(s.perspective),onChange:function(e){return G("perspective",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Show Pillar"),/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:s.showPillar,onChange:function(e){return G("showPillar",e.target.checked)}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(s.pillarWidth),onChange:function(e){return G("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Color"),/*#__PURE__*/n.default.createElement("input",{type:"color",value:s.pillarColor,onChange:function(e){return G("pillarColor",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Physics"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Speed (",s.initialSpeed,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"100",value:s.initialSpeed,onChange:function(e){return G("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Friction (",s.friction,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:s.friction,onChange:function(e){return G("friction",Number(e.target.value))}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Styling"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Border Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0",max:"10",value:s.cubeBorderWidth,onChange:function(e){return G("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Items"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},s.items.map(function(e,t){/*#__PURE__*/return n.default.createElement("div",{key:t,className:"rhc-item-row"},e.image?/*#__PURE__*/n.default.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+e.image+")"},onClick:function(){return document.getElementById("item-upload-"+t).click()},title:"Click to change image"}):/*#__PURE__*/n.default.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+t).click()}},"IMG"),/*#__PURE__*/n.default.createElement("input",{id:"item-upload-"+t,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&$(e,"image",URL.createObjectURL(n))}(t,e)}}),/*#__PURE__*/n.default.createElement("input",{type:"text",value:e.content,placeholder:"Text",maxLength:4,onChange:function(e){return $(t,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/n.default.createElement("input",{type:"color",value:e.color,onChange:function(e){return $(t,"color",e.target.value)}}))}),/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){return G("items",[].concat(s.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){s.items.length>2&&G("items",s.items.slice(0,-1))}},"-"))))))}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e||self).reactHolographicCube=t(e.react)}(this,function(e){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(null,arguments)}var a=[{content:"🔥",color:"#ff4d4d"},{content:"💧",color:"#4d94ff"},{content:"🌿",color:"#4dff88"},{content:"⚡",color:"#ffff4d"}];return function(t){var l,c,i=t.enablePanel,o=void 0!==i&&i,u=e.useState({items:t.items||a,initialSpeed:t.initialSpeed||30,friction:t.friction||.98,perspective:t.perspective||"1000px",showPillar:!1!==t.showPillar,pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",showResult:!1!==t.showResult,cubeBorderWidth:2,bgImage:null,pillarWidth:"120px"}),s=u[0],d=u[1],m=e.useState(!0),f=m[0],p=m[1],g=o?s.items:t.items||a,h=o?s.initialSpeed:t.initialSpeed||30,v=o?s.friction:t.friction||.98,b=o?s.perspective:t.perspective||"1000px",E=o?s.showPillar:!1!==t.showPillar,y=o?s.pillarColor:t.pillarColor||"rgba(0, 247, 255, 0.1)",N=o?s.pillarWidth:(null==(l=t.pillarSize)?void 0:l.width)||"120px",x=o?s.showResult:!1!==t.showResult,w=o?{borderWidth:s.cubeBorderWidth+"px"}:t.cubeStyle||{},C=o&&s.bgImage?"url("+s.bgImage+")":void 0,k=C?void 0:"#000000",S=e.useState("idle"),I=S[0],P=S[1],R=e.useState(null),W=R[0],j=R[1],B=e.useState({transform:"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)"}),T=B[0],M=B[1],L=e.useRef(null),O=e.useRef([]),U=e.useRef(null),A=e.useRef(0),F=e.useRef(0),X=e.useRef(0),z=e.useRef("idle"),q=function(e){var t=g[e%g.length];return"string"==typeof t?{content:t,color:"#00db46"}:{content:t.content,color:t.color||"#00db46",image:t.image}};e.useEffect(function(){return function(){return cancelAnimationFrame(U.current)}},[]),e.useEffect(function(){Z(0)},[g]),e.useEffect(function(){var e,t=function(){if("idle"===z.current){var n=30*(Math.random()-.5),r=30*(Math.random()-.5),a=10*(Math.random()-.5),l=30*(Math.random()-.5)-5;M({transform:"translate3d(0px, "+l+"px, 0px) rotateX("+n+"deg) rotateY("+r+"deg) rotateZ("+a+"deg)"}),e=setTimeout(t,4e3+1e3*Math.random())}};return"idle"===I?t():clearTimeout(e),function(){return clearTimeout(e)}},[I]);var H=function(){A.current+=F.current,A.current>=90&&(A.current%=90,X.current=(X.current+1)%g.length,Z(X.current)),L.current&&(L.current.style.transform="rotateX("+A.current+"deg)"),"stopping"===z.current&&(F.current*=v,F.current<.5&&(F.current=.5),F.current<=.5&&A.current<1)?G():U.current=requestAnimationFrame(H)},Y=function(e){var t;return/^#([A-Fa-f0-9]{3}){1,2}$/.test(e)?(3===(t=e.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),[(t="0x"+t.join(""))>>16&255,t>>8&255,255&t].join(",")):"0, 219, 70"},Z=function(e){for(var t=0;t<4;t++){var n=q((e+t)%g.length),r=O.current[t];if(r){n.image?(r.innerText="",r.style.backgroundImage="url("+n.image+")",r.style.backgroundSize="cover",r.style.backgroundPosition="center",r.style.textShadow="none"):(r.innerText=n.content,r.style.backgroundImage="none",r.style.textShadow="0 0 20px "+n.color),r.style.borderColor=n.color,r.style.boxShadow="0 0 15px "+n.color+"4d, inset 0 0 30px "+n.color+"1a";var a=Y(n.color);r.style.setProperty("--face-color-rgb",a),r.style.setProperty("--face-color",n.color)}}},G=function(){L.current&&(L.current.style.transform="rotateX(0deg)");var e=q(X.current);P("idle"),z.current="idle",j(e.content),t.onWinner&&t.onWinner(e.content)},$=function(e,t){return d(function(n){var a;return r({},n,((a={})[e]=t,a))})},D=function(e,t,n){var a,l=[].concat(s.items);l[e]=r({},l[e],((a={})[t]=n,a)),$("items",l)};/*#__PURE__*/return n.default.createElement("div",{className:"rhc-container",style:t.rootStyle},/*#__PURE__*/n.default.createElement("div",{className:"rhc-stage",style:{backgroundImage:C,backgroundColor:k}},/*#__PURE__*/n.default.createElement("div",{className:"scene",style:{perspective:b}},E&&/*#__PURE__*/n.default.createElement("div",{className:"light-pillar",style:{width:N,height:(null==(c=t.pillarSize)?void 0:c.height)||"2000px",background:"linear-gradient(to bottom, transparent 0%, "+y+" 50%, transparent 100%)"}}),/*#__PURE__*/n.default.createElement("div",{className:"cube-wrapper "+("idle"!==I?"locked":""),style:"idle"===I?T:{}},/*#__PURE__*/n.default.createElement("div",{ref:L,className:"cube "+("idle"!==I?"is-spinning":""),style:{transition:"none"}},[0,1,2,3].map(function(e){/*#__PURE__*/return n.default.createElement("div",{key:e,className:"face "+["front","bottom","back","top"][e],ref:function(t){return O.current[e]=t},style:w})}),/*#__PURE__*/n.default.createElement("div",{className:"face left",style:w}),/*#__PURE__*/n.default.createElement("div",{className:"face right",style:w}))),/*#__PURE__*/n.default.createElement("div",{className:"cube-shadow"})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-overlay-controls"},x&&/*#__PURE__*/n.default.createElement("div",{className:"winner-text",style:t.resultStyle},W?"Result: "+W:"..."),/*#__PURE__*/n.default.createElement("div",{className:"rhc-btn-group"},/*#__PURE__*/n.default.createElement("button",{className:"cyber-button",onClick:function(){"idle"===z.current&&(j(null),P("spinning"),z.current="spinning",F.current=h,X.current=0,A.current=0,Z(0),H())},disabled:"idle"!==I},"Spin"),/*#__PURE__*/n.default.createElement("button",{className:"cyber-button stop-btn",onClick:function(){"spinning"===z.current&&(P("stopping"),z.current="stopping")},disabled:"spinning"!==I},"Stop")))),o&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-toggle-wrapper"},/*#__PURE__*/n.default.createElement("span",{className:"rhc-toggle-label"},f?"Hide":"Edit"),/*#__PURE__*/n.default.createElement("label",{className:"rhc-switch"},/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:f,onChange:function(e){return p(e.target.checked)}}),/*#__PURE__*/n.default.createElement("span",{className:"rhc-slider"}))),o&&f&&/*#__PURE__*/n.default.createElement("div",{className:"rhc-sidebar"},/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Environment"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("label",{className:"rhc-upload-btn"},s.bgImage?"Change Image":"Upload Background",/*#__PURE__*/n.default.createElement("input",{type:"file",accept:"image/*",onChange:function(e){var t=e.target.files[0];t&&$("bgImage",URL.createObjectURL(t))},style:{display:"none"}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Perspective"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"500",max:"2000",step:"50",value:parseInt(s.perspective),onChange:function(e){return $("perspective",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Show Pillar"),/*#__PURE__*/n.default.createElement("input",{type:"checkbox",checked:s.showPillar,onChange:function(e){return $("showPillar",e.target.checked)}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"500",step:"10",value:parseInt(s.pillarWidth),onChange:function(e){return $("pillarWidth",e.target.value+"px")}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Pillar Color"),/*#__PURE__*/n.default.createElement("input",{type:"color",value:s.pillarColor,onChange:function(e){return $("pillarColor",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Physics"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Speed (",s.initialSpeed,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"10",max:"100",value:s.initialSpeed,onChange:function(e){return $("initialSpeed",Number(e.target.value))}})),/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Friction (",s.friction,")"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0.90",max:"0.999",step:"0.001",value:s.friction,onChange:function(e){return $("friction",Number(e.target.value))}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Styling"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},/*#__PURE__*/n.default.createElement("div",{className:"rhc-row"},/*#__PURE__*/n.default.createElement("label",null,"Border Width"),/*#__PURE__*/n.default.createElement("input",{type:"range",min:"0",max:"10",value:s.cubeBorderWidth,onChange:function(e){return $("cubeBorderWidth",e.target.value)}})))),/*#__PURE__*/n.default.createElement("section",null,/*#__PURE__*/n.default.createElement("h2",null,"Items"),/*#__PURE__*/n.default.createElement("div",{className:"rhc-control-group"},s.items.map(function(e,t){/*#__PURE__*/return n.default.createElement("div",{key:t,className:"rhc-item-row"},e.image?/*#__PURE__*/n.default.createElement("div",{className:"rhc-item-preview",style:{backgroundImage:"url("+e.image+")"},onClick:function(){return document.getElementById("item-upload-"+t).click()},title:"Click to change image"}):/*#__PURE__*/n.default.createElement("button",{className:"rhc-mini-btn",onClick:function(){return document.getElementById("item-upload-"+t).click()}},"IMG"),/*#__PURE__*/n.default.createElement("input",{id:"item-upload-"+t,type:"file",accept:"image/*",style:{display:"none"},onChange:function(e){return function(e,t){var n=t.target.files[0];n&&D(e,"image",URL.createObjectURL(n))}(t,e)}}),/*#__PURE__*/n.default.createElement("input",{type:"text",value:e.content,placeholder:"Text",maxLength:4,onChange:function(e){return D(t,"content",e.target.value)},style:{width:"50px",textAlign:"center"}}),/*#__PURE__*/n.default.createElement("input",{type:"color",value:e.color,onChange:function(e){return D(t,"color",e.target.value)}}))}),/*#__PURE__*/n.default.createElement("div",{style:{display:"flex",gap:10}},/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){return $("items",[].concat(s.items,[{content:"?",color:"#fff"}]))}},"+"),/*#__PURE__*/n.default.createElement("button",{className:"rhc-action-btn",onClick:function(){s.items.length>2&&$("items",s.items.slice(0,-1))}},"-"))))))}});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.umd.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div className=\"rhc-stage\" style={{ backgroundImage: activeBg }}>\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"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"}
1	+ {"version":3,"file":"index.umd.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./styles.css\";\n\nconst DEMO_ITEMS = [\n { content: \"🔥\", color: \"#ff4d4d\" },\n { content: \"💧\", color: \"#4d94ff\" },\n { content: \"🌿\", color: \"#4dff88\" },\n { content: \"⚡\", color: \"#ffff4d\" },\n];\n\nconst InfiniteCube = (props) => {\n // --- MASTER TOGGLE: Are we in \"Panel Mode\"? ---\n const { enablePanel = false } = props;\n\n // If panel is enabled, we use INTERNAL state.\n // If panel is disabled, we use PROPS.\n\n // Initialize internal state with props or defaults\n const [internalConfig, setInternalConfig] = useState({\n items: props.items \|\| DEMO_ITEMS,\n initialSpeed: props.initialSpeed \|\| 30,\n friction: props.friction \|\| 0.98,\n perspective: props.perspective \|\| \"1000px\",\n showPillar: props.showPillar !== false, // default true\n pillarColor: props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\",\n showResult: props.showResult !== false, // default true\n cubeBorderWidth: 2,\n bgImage: null,\n pillarWidth: \"120px\",\n });\n\n const [isPanelOpen, setIsPanelOpen] = useState(true);\n\n // Decide which source of truth to use\n const activeItems = enablePanel\n ? internalConfig.items\n : props.items \|\| DEMO_ITEMS;\n const activeSpeed = enablePanel\n ? internalConfig.initialSpeed\n : props.initialSpeed \|\| 30;\n const activeFriction = enablePanel\n ? internalConfig.friction\n : props.friction \|\| 0.98;\n const activePerspective = enablePanel\n ? internalConfig.perspective\n : props.perspective \|\| \"1000px\";\n const activeShowPillar = enablePanel\n ? internalConfig.showPillar\n : props.showPillar !== false;\n\n const activePillarColor = enablePanel\n ? internalConfig.pillarColor\n : props.pillarColor \|\| \"rgba(0, 247, 255, 0.1)\";\n const activePillarWidth = enablePanel\n ? internalConfig.pillarWidth\n : props.pillarSize?.width \|\| \"120px\";\n const activeShowResult = enablePanel\n ? internalConfig.showResult\n : props.showResult !== false;\n\n // Styles\n const activeCubeStyle = enablePanel\n ? { borderWidth: `${internalConfig.cubeBorderWidth}px` }\n : props.cubeStyle \|\| {};\n\n const activeBg =\n enablePanel && internalConfig.bgImage\n ? `url(${internalConfig.bgImage})`\n : undefined;\n\n const activeBgColor = !activeBg ? \"#000000\" : undefined;\n\n // --- ENGINE STATE ---\n const [status, setStatus] = useState(\"idle\");\n const [winner, setWinner] = useState(null);\n const [driftStyle, setDriftStyle] = useState({\n transform: \"translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)\",\n });\n\n const cubeRef = useRef(null);\n const faceRefs = useRef([]);\n const animationRef = useRef(null);\n const rotationRef = useRef(0);\n const speedRef = useRef(0);\n const listPointerRef = useRef(0);\n const statusRef = useRef(\"idle\");\n const MIN_CRAWL_SPEED = 0.5;\n\n // --- LOGIC ---\n const getItemData = (index) => {\n const rawItem = activeItems[index % activeItems.length];\n if (typeof rawItem === \"string\")\n return { content: rawItem, color: \"#00db46\" };\n return {\n content: rawItem.content,\n color: rawItem.color \|\| \"#00db46\",\n image: rawItem.image,\n };\n };\n\n useEffect(() => {\n return () => cancelAnimationFrame(animationRef.current);\n }, []);\n useEffect(() => {\n updateFaceContent(0);\n }, [activeItems]);\n\n useEffect(() => {\n let timeoutId;\n const floatRandomly = () => {\n if (statusRef.current !== \"idle\") return;\n const rX = (Math.random() - 0.5) * 30;\n const rY = (Math.random() - 0.5) * 30;\n const rZ = (Math.random() - 0.5) * 10;\n const tY = (Math.random() - 0.5) * 30 - 5;\n setDriftStyle({\n transform: `translate3d(0px, ${tY}px, 0px) rotateX(${rX}deg) rotateY(${rY}deg) rotateZ(${rZ}deg)`,\n });\n timeoutId = setTimeout(floatRandomly, 4000 + Math.random() * 1000);\n };\n if (status === \"idle\") floatRandomly();\n else clearTimeout(timeoutId);\n return () => clearTimeout(timeoutId);\n }, [status]);\n\n const handleStart = () => {\n if (statusRef.current !== \"idle\") return;\n setWinner(null);\n setStatus(\"spinning\");\n statusRef.current = \"spinning\";\n speedRef.current = activeSpeed;\n listPointerRef.current = 0;\n rotationRef.current = 0;\n updateFaceContent(0);\n loop();\n };\n\n const handleStop = () => {\n if (statusRef.current === \"spinning\") {\n setStatus(\"stopping\");\n statusRef.current = \"stopping\";\n }\n };\n\n const loop = () => {\n rotationRef.current += speedRef.current;\n if (rotationRef.current >= 90) {\n rotationRef.current %= 90;\n listPointerRef.current =\n (listPointerRef.current + 1) % activeItems.length;\n updateFaceContent(listPointerRef.current);\n }\n if (cubeRef.current)\n cubeRef.current.style.transform = `rotateX(${rotationRef.current}deg)`;\n if (statusRef.current === \"stopping\") {\n speedRef.current = activeFriction;\n if (speedRef.current < MIN_CRAWL_SPEED)\n speedRef.current = MIN_CRAWL_SPEED;\n if (speedRef.current <= MIN_CRAWL_SPEED && rotationRef.current < 1.0) {\n finishGame();\n return;\n }\n }\n animationRef.current = requestAnimationFrame(loop);\n };\n\n // Helper to convert hex to rgb string for CSS vars\n const hexToRgb = (hex) => {\n let c;\n if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n c = hex.substring(1).split(\"\");\n if (c.length === 3) {\n c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n }\n c = \"0x\" + c.join(\"\");\n return [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(\",\");\n }\n return \"0, 219, 70\"; // default fallback\n };\n\n const updateFaceContent = (startIndex) => {\n for (let i = 0; i < 4; i++) {\n const itemIndex = (startIndex + i) % activeItems.length;\n const data = getItemData(itemIndex);\n const el = faceRefs.current[i];\n if (el) {\n if (data.image) {\n el.innerText = \"\";\n el.style.backgroundImage = `url(${data.image})`;\n el.style.backgroundSize = \"cover\";\n el.style.backgroundPosition = \"center\";\n el.style.textShadow = \"none\";\n } else {\n el.innerText = data.content;\n el.style.backgroundImage = \"none\";\n el.style.textShadow = `0 0 20px ${data.color}`;\n }\n\n // standard static styles\n el.style.borderColor = data.color;\n el.style.boxShadow = `0 0 15px ${data.color}4d, inset 0 0 30px ${data.color}1a`;\n\n // CSS variable for the spinning animation\n const rgb = hexToRgb(data.color);\n el.style.setProperty(\"--face-color-rgb\", rgb);\n el.style.setProperty(\"--face-color\", data.color);\n }\n }\n };\n\n const finishGame = () => {\n if (cubeRef.current) cubeRef.current.style.transform = `rotateX(0deg)`;\n const winningData = getItemData(listPointerRef.current);\n setStatus(\"idle\");\n statusRef.current = \"idle\";\n setWinner(winningData.content);\n if (props.onWinner) props.onWinner(winningData.content);\n };\n\n // --- PANEL HANDLERS ---\n const updateConfig = (key, val) =>\n setInternalConfig((prev) => ({ ...prev, [key]: val }));\n\n const handleBgUpload = (e) => {\n const file = e.target.files[0];\n if (file) updateConfig(\"bgImage\", URL.createObjectURL(file));\n };\n\n const handleItemEdit = (idx, field, val) => {\n const newItems = [...internalConfig.items];\n newItems[idx] = { ...newItems[idx], [field]: val };\n updateConfig(\"items\", newItems);\n };\n\n const handleItemImageUpload = (idx, e) => {\n const file = e.target.files[0];\n if (file) {\n handleItemEdit(idx, \"image\", URL.createObjectURL(file));\n }\n };\n\n const addItem = () =>\n updateConfig(\"items\", [\n ...internalConfig.items,\n { content: \"?\", color: \"#fff\" },\n ]);\n const removeItem = () => {\n if (internalConfig.items.length > 2)\n updateConfig(\"items\", internalConfig.items.slice(0, -1));\n };\n\n // --- RENDER ---\n return (\n <div className=\"rhc-container\" style={props.rootStyle}>\n {/ 1. THE STAGE (Always Visible) /}\n <div\n className=\"rhc-stage\"\n style={{\n backgroundImage: activeBg,\n backgroundColor: activeBgColor,\n }}\n >\n <div className=\"scene\" style={{ perspective: activePerspective }}>\n {activeShowPillar && (\n <div\n className=\"light-pillar\"\n style={{\n width: activePillarWidth,\n height: props.pillarSize?.height \|\| \"2000px\",\n background: `linear-gradient(to bottom, transparent 0%, ${activePillarColor} 50%, transparent 100%)`,\n }}\n ></div>\n )}\n\n <div\n className={`cube-wrapper ${status !== \"idle\" ? \"locked\" : \"\"}`}\n style={status === \"idle\" ? driftStyle : {}}\n >\n <div\n ref={cubeRef}\n className={`cube ${status !== \"idle\" ? \"is-spinning\" : \"\"}`}\n style={{ transition: \"none\" }}\n >\n {[0, 1, 2, 3].map((i) => (\n <div\n key={i}\n className={`face ${[\"front\", \"bottom\", \"back\", \"top\"][i]}`}\n ref={(el) => (faceRefs.current[i] = el)}\n style={activeCubeStyle}\n ></div>\n ))}\n <div className=\"face left\" style={activeCubeStyle}></div>\n <div className=\"face right\" style={activeCubeStyle}></div>\n </div>\n </div>\n <div className=\"cube-shadow\"></div>\n </div>\n\n <div className=\"rhc-overlay-controls\">\n {activeShowResult && (\n <div className=\"winner-text\" style={props.resultStyle}>\n {winner ? `Result: ${winner}` : \"...\"}\n </div>\n )}\n <div className=\"rhc-btn-group\">\n <button\n className=\"cyber-button\"\n onClick={handleStart}\n disabled={status !== \"idle\"}\n >\n Spin\n </button>\n <button\n className=\"cyber-button stop-btn\"\n onClick={handleStop}\n disabled={status !== \"spinning\"}\n >\n Stop\n </button>\n </div>\n </div>\n </div>\n\n {/ 2.5 TOGGLE SWITCH (Only if panel is enabled) /}\n {enablePanel && (\n <div className=\"rhc-toggle-wrapper\">\n <span className=\"rhc-toggle-label\">\n {isPanelOpen ? \"Hide\" : \"Edit\"}\n </span>\n <label className=\"rhc-switch\">\n <input\n type=\"checkbox\"\n checked={isPanelOpen}\n onChange={(e) => setIsPanelOpen(e.target.checked)}\n />\n <span className=\"rhc-slider\"></span>\n </label>\n </div>\n )}\n\n {/ 2. THE SIDEBAR (Only if enabled AND open) /}\n {enablePanel && isPanelOpen && (\n <div className=\"rhc-sidebar\">\n <section>\n <h2>Environment</h2>\n <div className=\"rhc-control-group\">\n <label className=\"rhc-upload-btn\">\n {internalConfig.bgImage ? \"Change Image\" : \"Upload Background\"}\n <input\n type=\"file\"\n accept=\"image/\"\n onChange={handleBgUpload}\n style={{ display: \"none\" }}\n />\n </label>\n <div className=\"rhc-row\">\n <label>Perspective</label>\n <input\n type=\"range\"\n min=\"500\"\n max=\"2000\"\n step=\"50\"\n value={parseInt(internalConfig.perspective)}\n onChange={(e) =>\n updateConfig(\"perspective\", `${e.target.value}px`)\n }\n />\n </div>\n\n <div className=\"rhc-row\">\n <label>Show Pillar</label>\n <input\n type=\"checkbox\"\n checked={internalConfig.showPillar}\n onChange={(e) => updateConfig(\"showPillar\", e.target.checked)}\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Width</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"500\"\n step=\"10\"\n value={parseInt(internalConfig.pillarWidth)}\n onChange={(e) =>\n updateConfig(\"pillarWidth\", `${e.target.value}px`)\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Pillar Color</label>\n <input\n type=\"color\"\n value={internalConfig.pillarColor}\n onChange={(e) => updateConfig(\"pillarColor\", e.target.value)}\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Physics</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Speed ({internalConfig.initialSpeed})</label>\n <input\n type=\"range\"\n min=\"10\"\n max=\"100\"\n value={internalConfig.initialSpeed}\n onChange={(e) =>\n updateConfig(\"initialSpeed\", Number(e.target.value))\n }\n />\n </div>\n <div className=\"rhc-row\">\n <label>Friction ({internalConfig.friction})</label>\n <input\n type=\"range\"\n min=\"0.90\"\n max=\"0.999\"\n step=\"0.001\"\n value={internalConfig.friction}\n onChange={(e) =>\n updateConfig(\"friction\", Number(e.target.value))\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Styling</h2>\n <div className=\"rhc-control-group\">\n <div className=\"rhc-row\">\n <label>Border Width</label>\n <input\n type=\"range\"\n min=\"0\"\n max=\"10\"\n value={internalConfig.cubeBorderWidth}\n onChange={(e) =>\n updateConfig(\"cubeBorderWidth\", e.target.value)\n }\n />\n </div>\n </div>\n </section>\n\n <section>\n <h2>Items</h2>\n <div className=\"rhc-control-group\">\n {internalConfig.items.map((item, idx) => (\n <div key={idx} className=\"rhc-item-row\">\n {item.image ? (\n <div\n className=\"rhc-item-preview\"\n style={{ backgroundImage: `url(${item.image})` }}\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n title=\"Click to change image\"\n ></div>\n ) : (\n <button\n className=\"rhc-mini-btn\"\n onClick={() =>\n document.getElementById(`item-upload-${idx}`).click()\n }\n >\n IMG\n </button>\n )}\n <input\n id={`item-upload-${idx}`}\n type=\"file\"\n accept=\"image/*\"\n style={{ display: \"none\" }}\n onChange={(e) => handleItemImageUpload(idx, e)}\n />\n\n <input\n type=\"text\"\n value={item.content}\n placeholder=\"Text\"\n maxLength={4}\n onChange={(e) =>\n handleItemEdit(idx, \"content\", e.target.value)\n }\n style={{ width: \"50px\", textAlign: \"center\" }}\n />\n <input\n type=\"color\"\n value={item.color}\n onChange={(e) =>\n handleItemEdit(idx, \"color\", e.target.value)\n }\n />\n </div>\n ))}\n <div style={{ display: \"flex\", gap: 10 }}>\n <button className=\"rhc-action-btn\" onClick={addItem}>\n +\n </button>\n <button className=\"rhc-action-btn\" onClick={removeItem}>\n -\n </button>\n </div>\n </div>\n </section>\n </div>\n )}\n </div>\n );\n};\n\nexport default InfiniteCube;\n"],"names":["DEMO_ITEMS","content","color","props","_props$pillarSize","_props$pillarSize2","_props$enablePanel","enablePanel","_useState","useState","items","initialSpeed","friction","perspective","showPillar","pillarColor","showResult","cubeBorderWidth","bgImage","pillarWidth","internalConfig","setInternalConfig","_useState2","isPanelOpen","setIsPanelOpen","activeItems","activeSpeed","activeFriction","activePerspective","activeShowPillar","activePillarColor","activePillarWidth","pillarSize","width","activeShowResult","activeCubeStyle","borderWidth","cubeStyle","activeBg","undefined","activeBgColor","_useState3","status","setStatus","_useState4","winner","setWinner","_useState5","transform","driftStyle","setDriftStyle","cubeRef","useRef","faceRefs","animationRef","rotationRef","speedRef","listPointerRef","statusRef","getItemData","index","rawItem","length","image","useEffect","cancelAnimationFrame","current","updateFaceContent","timeoutId","floatRandomly","rX","Math","random","rY","rZ","tY","setTimeout","clearTimeout","loop","style","finishGame","requestAnimationFrame","hexToRgb","hex","c","test","substring","split","join","startIndex","i","data","el","innerText","backgroundImage","backgroundSize","backgroundPosition","textShadow","borderColor","boxShadow","rgb","setProperty","winningData","onWinner","updateConfig","key","val","prev","_extends2","_extends","handleItemEdit","idx","field","_extends3","newItems","concat","React","createElement","className","rootStyle","backgroundColor","height","background","ref","transition","map","resultStyle","onClick","disabled","type","checked","onChange","e","target","accept","file","files","URL","createObjectURL","display","min","max","step","value","parseInt","Number","item","document","getElementById","click","title","id","handleItemImageUpload","placeholder","maxLength","textAlign","gap","slice"],"mappings":"ikBAGA,IAAMA,EAAa,CACjB,CAAEC,QAAS,KAAMC,MAAO,WACxB,CAAED,QAAS,KAAMC,MAAO,WACxB,CAAED,QAAS,KAAMC,MAAO,WACxB,CAAED,QAAS,IAAKC,MAAO,mBAGJ,SAACC,GAAU,IAAAC,EAAAC,EAE9BC,EAAgCH,EAAxBI,YAAAA,OAAW,IAAAD,GAAQA,EAM3BE,EAA4CC,EAAQA,SAAC,CACnDC,MAAOP,EAAMO,OAASV,EACtBW,aAAcR,EAAMQ,cAAgB,GACpCC,SAAUT,EAAMS,UAAY,IAC5BC,YAAaV,EAAMU,aAAe,SAClCC,YAAiC,IAArBX,EAAMW,WAClBC,YAAaZ,EAAMY,aAAe,yBAClCC,YAAiC,IAArBb,EAAMa,WAClBC,gBAAiB,EACjBC,QAAS,KACTC,YAAa,UAVRC,EAAcZ,EAAEa,GAAAA,EAAiBb,EAAA,GAaxCc,EAAsCb,EAAQA,UAAC,GAAxCc,EAAWD,KAAEE,EAAcF,EAGlC,GAAMG,EAAclB,EAChBa,EAAeV,MACfP,EAAMO,OAASV,EACb0B,EAAcnB,EAChBa,EAAeT,aACfR,EAAMQ,cAAgB,GACpBgB,EAAiBpB,EACnBa,EAAeR,SACfT,EAAMS,UAAY,IAChBgB,EAAoBrB,EACtBa,EAAeP,YACfV,EAAMU,aAAe,SACnBgB,EAAmBtB,EACrBa,EAAeN,YACM,IAArBX,EAAMW,WAEJgB,EAAoBvB,EACtBa,EAAeL,YACfZ,EAAMY,aAAe,yBACnBgB,EAAoBxB,EACtBa,EAAeD,aACff,OAAAA,EAAAD,EAAM6B,iBAAN5B,EAAAA,EAAkB6B,QAAS,QACzBC,EAAmB3B,EACrBa,EAAeJ,YACM,IAArBb,EAAMa,WAGJmB,EAAkB5B,EACpB,CAAE6B,YAAgBhB,EAAeH,gBAAoB,MACrDd,EAAMkC,WAAa,CAAE,EAEnBC,EACJ/B,GAAea,EAAeF,eACnBE,EAAeF,QACtBqB,SAAAA,EAEAC,EAAiBF,OAAuBC,EAAZ,UAGlCE,EAA4BhC,EAAAA,SAAS,QAA9BiC,EAAMD,EAAA,GAAEE,EAASF,KACxBG,EAA4BnC,EAAAA,SAAS,MAA9BoC,EAAMD,KAAEE,EAASF,EACxB,GAAAG,EAAoCtC,WAAS,CAC3CuC,UAAW,wDADNC,EAAUF,KAAEG,EAAaH,EAIhC,GAAMI,EAAUC,EAAMA,OAAC,MACjBC,EAAWD,SAAO,IAClBE,EAAeF,EAAAA,OAAO,MACtBG,EAAcH,SAAO,GACrBI,EAAWJ,EAAAA,OAAO,GAClBK,EAAiBL,EAAMA,OAAC,GACxBM,EAAYN,EAAAA,OAAO,QAInBO,EAAc,SAACC,GACnB,IAAMC,EAAUpC,EAAYmC,EAAQnC,EAAYqC,QAChD,MAAuB,iBAAZD,EACF,CAAE5D,QAAS4D,EAAS3D,MAAO,WAC7B,CACLD,QAAS4D,EAAQ5D,QACjBC,MAAO2D,EAAQ3D,OAAS,UACxB6D,MAAOF,EAAQE,MAEnB,EAEAC,EAAAA,UAAU,WACR,OAAa,WAAA,OAAAC,qBAAqBX,EAAaY,QAAQ,CACzD,EAAG,IACHF,EAAAA,UAAU,WACRG,EAAkB,EACpB,EAAG,CAAC1C,IAEJuC,EAASA,UAAC,WACR,IAAII,EACEC,EAAgB,WACpB,GAA0B,SAAtBX,EAAUQ,QAAd,CACA,IAAMI,EAA6B,IAAvBC,KAAKC,SAAW,IACtBC,EAA6B,IAAvBF,KAAKC,SAAW,IACtBE,EAA6B,IAAvBH,KAAKC,SAAW,IACtBG,EAA6B,IAAvBJ,KAAKC,SAAW,IAAY,EACxCtB,EAAc,CACZF,UAAS,oBAAsB2B,EAAsBL,oBAAAA,kBAAkBG,EAAE,gBAAgBC,EAC3F,SACAN,EAAYQ,WAAWP,EAAe,IAAuB,IAAhBE,KAAKC,SAPlD,CAQF,EAGA,MAFe,SAAX9B,EAAmB2B,IAClBQ,aAAaT,qBACLS,aAAaT,EAAU,CACtC,EAAG,CAAC1B,IAEJ,IAmBMoC,EAAO,WACXvB,EAAYW,SAAWV,EAASU,QAC5BX,EAAYW,SAAW,KACzBX,EAAYW,SAAW,GACvBT,EAAeS,SACZT,EAAeS,QAAU,GAAKzC,EAAYqC,OAC7CK,EAAkBV,EAAeS,UAE/Bf,EAAQe,UACVf,EAAQe,QAAQa,MAAM/B,UAAS,WAAcO,EAAYW,QAAa,QAC9C,aAAtBR,EAAUQ,UACZV,EAASU,SAAWvC,EAChB6B,EAASU,QAtEO,KAuElBV,EAASU,QAvES,IAwEhBV,EAASU,SAxEO,IAwEuBX,EAAYW,QAAU,GAC/Dc,IAIJ1B,EAAaY,QAAUe,sBAAsBH,EAC/C,EAGMI,EAAW,SAACC,GAChB,IAAIC,EACJ,MAAI,2BAA2BC,KAAKF,IAEjB,KADjBC,EAAID,EAAIG,UAAU,GAAGC,MAAM,KACrBzB,SACJsB,EAAI,CAACA,EAAE,GAAIA,EAAE,GAAIA,EAAE,GAAIA,EAAE,GAAIA,EAAE,GAAIA,EAAE,KAGhC,EADPA,EAAI,KAAOA,EAAEI,KAAK,MACJ,GAAM,IAAMJ,GAAK,EAAK,IAAS,IAAJA,GAASI,KAAK,MAElD,YACT,EAEMrB,EAAoB,SAACsB,GACzB,IAAK,IAAIC,EAAI,EAAGA,EAAI,EAAGA,IAAK,CAC1B,IACMC,EAAOhC,GADM8B,EAAaC,GAAKjE,EAAYqC,QAE3C8B,EAAKvC,EAASa,QAAQwB,GAC5B,GAAIE,EAAI,CACFD,EAAK5B,OACP6B,EAAGC,UAAY,GACfD,EAAGb,MAAMe,gBAAyBH,OAAAA,EAAK5B,MAAK,IAC5C6B,EAAGb,MAAMgB,eAAiB,QAC1BH,EAAGb,MAAMiB,mBAAqB,SAC9BJ,EAAGb,MAAMkB,WAAa,SAEtBL,EAAGC,UAAYF,EAAK1F,QACpB2F,EAAGb,MAAMe,gBAAkB,OAC3BF,EAAGb,MAAMkB,uBAAyBN,EAAKzF,OAIzC0F,EAAGb,MAAMmB,YAAcP,EAAKzF,MAC5B0F,EAAGb,MAAMoB,sBAAwBR,EAAKzF,MAA2ByF,sBAAAA,EAAKzF,WAGtE,IAAMkG,EAAMlB,EAASS,EAAKzF,OAC1B0F,EAAGb,MAAMsB,YAAY,mBAAoBD,GACzCR,EAAGb,MAAMsB,YAAY,eAAgBV,EAAKzF,MAC5C,CACF,CACF,EAEM8E,EAAa,WACb7B,EAAQe,UAASf,EAAQe,QAAQa,MAAM/B,UAAS,iBACpD,IAAMsD,EAAc3C,EAAYF,EAAeS,SAC/CvB,EAAU,QACVe,EAAUQ,QAAU,OACpBpB,EAAUwD,EAAYrG,SAClBE,EAAMoG,UAAUpG,EAAMoG,SAASD,EAAYrG,QACjD,EAGMuG,EAAe,SAACC,EAAKC,GAAG,OAC5BrF,EAAkB,SAACsF,OAAIC,EAAA,OAAAC,EAAWF,GAAAA,IAAIC,EAAA,IAAGH,GAAMC,EAAGE,GAAA,EAAI,EAOlDE,EAAiB,SAACC,EAAKC,EAAON,GAAQO,IAAAA,EACpCC,EAAQ,GAAAC,OAAO/F,EAAeV,OACpCwG,EAASH,GAAIF,EAAA,GAAQK,EAASH,KAAIE,EAAAA,IAAGD,GAAQN,EAAGO,IAChDT,EAAa,QAASU,EACxB,eAoBA,OACEE,EAAAA,QAAAC,cAAKC,MAAAA,CAAAA,UAAU,gBAAgBvC,MAAO5E,EAAMoH,wBAE1CH,EAAAA,QAAAC,qBACEC,UAAU,YACVvC,MAAO,CACLe,gBAAiBxD,EACjBkF,gBAAiBhF,iBAGnB4E,EAAA,QAAAC,cAAKC,MAAAA,CAAAA,UAAU,QAAQvC,MAAO,CAAElE,YAAae,IAC1CC,gBACCuF,EAAA,QAAAC,cAAA,MAAA,CACEC,UAAU,eACVvC,MAAO,CACL9C,MAAOF,EACP0F,QAAwB,OAAhBpH,EAAAF,EAAM6B,iBAAU,EAAhB3B,EAAkBoH,SAAU,SACpCC,WAA0D5F,8CAAAA,4CAKhEsF,EAAAA,QAAAC,cAAA,MAAA,CACEC,UAAS,iBAA6B,SAAX5E,EAAoB,SAAW,IAC1DqC,MAAkB,SAAXrC,EAAoBO,EAAa,CAAA,gBAExCmE,EAAAA,QAAAC,qBACEM,IAAKxE,EACLmE,mBAA8B,SAAX5E,EAAoB,cAAgB,IACvDqC,MAAO,CAAE6C,WAAY,SAEpB,CAAC,EAAG,EAAG,EAAG,GAAGC,IAAI,SAACnC,gBACjB0B,OAAAA,EAAAA,QAAAC,cAAA,MAAA,CACEZ,IAAKf,EACL4B,kBAAmB,CAAC,QAAS,SAAU,OAAQ,OAAO5B,GACtDiC,IAAK,SAAC/B,GAAQ,OAAAvC,EAASa,QAAQwB,GAAKE,CAAE,EACtCb,MAAO5C,GACF,gBAETiF,EAAA,QAAAC,cAAKC,MAAAA,CAAAA,UAAU,YAAYvC,MAAO5C,iBAClCiF,UAAAC,cAAKC,MAAAA,CAAAA,UAAU,aAAavC,MAAO5C,mBAGvCiF,UAAAC,qBAAKC,UAAU,8BAGjBF,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,wBACZpF,gBACCkF,EAAA,QAAAC,cAAKC,MAAAA,CAAAA,UAAU,cAAcvC,MAAO5E,EAAM2H,aACvCjF,EAAoBA,WAAAA,EAAW,oBAGpCuE,UAAAC,cAAA,MAAA,CAAKC,UAAU,8BACbF,EAAAA,QAAAC,cACEC,SAAAA,CAAAA,UAAU,eACVS,QAtLQ,WACQ,SAAtBrE,EAAUQ,UACdpB,EAAU,MACVH,EAAU,YACVe,EAAUQ,QAAU,WACpBV,EAASU,QAAUxC,EACnB+B,EAAeS,QAAU,EACzBX,EAAYW,QAAU,EACtBC,EAAkB,GAClBW,IACF,EA6KYkD,SAAqB,SAAXtF,GACX,qBAGD0E,EAAAA,QAAAC,wBACEC,UAAU,wBACVS,QAjLO,WACS,aAAtBrE,EAAUQ,UACZvB,EAAU,YACVe,EAAUQ,QAAU,WAExB,EA6KY8D,SAAqB,aAAXtF,GACX,WAQNnC,gBACC6G,EAAAA,QAAAC,qBAAKC,UAAU,mCACbF,EAAA,QAAAC,sBAAMC,UAAU,oBACb/F,EAAc,OAAS,qBAE1B6F,EAAAA,QAAAC,uBAAOC,UAAU,2BACfF,EAAA,QAAAC,uBACEY,KAAK,WACLC,QAAS3G,EACT4G,SAAU,SAACC,GAAM,OAAA5G,EAAe4G,EAAEC,OAAOH,QAAQ,iBAEnDd,UAAAC,cAAA,OAAA,CAAMC,UAAU,iBAMrB/G,GAAegB,gBACd6F,EAAA,QAAAC,cAAKC,MAAAA,CAAAA,UAAU,4BACbF,EAAAA,QAAAC,0CACED,EAAAA,QAAAC,cAAI,KAAA,KAAA,4BACJD,EAAA,QAAAC,qBAAKC,UAAU,kCACbF,UAAAC,cAAA,QAAA,CAAOC,UAAU,kBACdlG,EAAeF,QAAU,eAAiB,iCAC3CkG,EAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,OACLK,OAAO,UACPH,SAhIO,SAACC,GACtB,IAAMG,EAAOH,EAAEC,OAAOG,MAAM,GACxBD,GAAM/B,EAAa,UAAWiC,IAAIC,gBAAgBH,GACxD,EA8HgBxD,MAAO,CAAE4D,QAAS,wBAGtBvB,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,wBACbF,EAAA,QAAAC,cAAA,QAAA,KAAO,4BACPD,EAAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,QACLW,IAAI,MACJC,IAAI,OACJC,KAAK,KACLC,MAAOC,SAAS5H,EAAeP,aAC/BsH,SAAU,SAACC,GAAC,OACV5B,EAAa,cAAkB4B,EAAEC,OAAOU,MAAS,KAAC,kBAKxD3B,EAAA,QAAAC,qBAAKC,UAAU,wBACbF,EAAAA,QAAAC,cAAA,QAAA,KAAO,4BACPD,EAAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,WACLC,QAAS9G,EAAeN,WACxBqH,SAAU,SAACC,GAAC,OAAK5B,EAAa,aAAc4B,EAAEC,OAAOH,QAAQ,kBAGjEd,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,wBACbF,EAAAA,QAAAC,cAAA,QAAA,KAAO,6BACPD,EAAAA,QAAAC,uBACEY,KAAK,QACLW,IAAI,KACJC,IAAI,MACJC,KAAK,KACLC,MAAOC,SAAS5H,EAAeD,aAC/BgH,SAAU,SAACC,GACT,OAAA5B,EAAa,cAAkB4B,EAAEC,OAAOU,MAAS,KAAC,kBAIxD3B,UAAAC,qBAAKC,UAAU,wBACbF,UAAAC,2BAAO,6BACPD,EAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,QACLc,MAAO3H,EAAeL,YACtBoH,SAAU,SAACC,GAAC,OAAK5B,EAAa,cAAe4B,EAAEC,OAAOU,MAAM,oBAMpE3B,EAAA,QAAAC,cACED,UAAAA,kBAAAA,UAAAC,cAAA,KAAA,KAAI,wBACJD,EAAAA,QAAAC,qBAAKC,UAAU,kCACbF,EAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,wBACbF,EAAA,QAAAC,cAAA,QAAA,KAAO,UAAQjG,EAAeT,aAAa,kBAC3CyG,EAAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,QACLW,IAAI,KACJC,IAAI,MACJE,MAAO3H,EAAeT,aACtBwH,SAAU,SAACC,GAAC,OACV5B,EAAa,eAAgByC,OAAOb,EAAEC,OAAOU,OAAO,kBAI1D3B,EAAAA,QAAAC,cAAA,MAAA,CAAKC,UAAU,wBACbF,EAAA,QAAAC,cAAO,QAAA,KAAA,aAAWjG,EAAeR,SAAS,kBAC1CwG,UAAAC,cAAA,QAAA,CACEY,KAAK,QACLW,IAAI,OACJC,IAAI,QACJC,KAAK,QACLC,MAAO3H,EAAeR,SACtBuH,SAAU,SAACC,GAAC,OACV5B,EAAa,WAAYyC,OAAOb,EAAEC,OAAOU,OAAO,oBAO1D3B,EAAAA,QAAAC,cACED,UAAAA,kBAAAA,EAAA,QAAAC,cAAA,KAAA,KAAI,wBACJD,UAAAC,qBAAKC,UAAU,kCACbF,EAAAA,QAAAC,qBAAKC,UAAU,wBACbF,EAAAA,QAAAC,cAAA,QAAA,KAAO,6BACPD,UAAAC,uBACEY,KAAK,QACLW,IAAI,IACJC,IAAI,KACJE,MAAO3H,EAAeH,gBACtBkH,SAAU,SAACC,GAAC,OACV5B,EAAa,kBAAmB4B,EAAEC,OAAOU,MAAM,oBAOzD3B,EAAAA,QAAAC,cACED,UAAAA,kBAAAA,EAAA,QAAAC,cAAA,KAAA,KAAI,sBACJD,EAAAA,QAAAC,qBAAKC,UAAU,qBACZlG,EAAeV,MAAMmH,IAAI,SAACqB,EAAMnC,gBAC/BK,OAAAA,EAAAA,QAAAC,cAAA,MAAA,CAAKZ,IAAKM,EAAKO,UAAU,gBACtB4B,EAAKnF,mBACJqD,EAAA,QAAAC,cACEC,MAAAA,CAAAA,UAAU,mBACVvC,MAAO,CAAEe,gBAAwBoD,OAAAA,EAAKnF,WACtCgE,QAAS,WACP,OAAAoB,SAASC,8BAA8BrC,GAAOsC,OAAO,EAEvDC,MAAM,uCAGRlC,EAAA,QAAAC,cACEC,SAAAA,CAAAA,UAAU,eACVS,QAAS,kBACPoB,SAASC,eAAc,eAAgBrC,GAAOsC,OAAO,GAExD,oBAIHjC,UAAAC,uBACEkC,GAAE,eAAiBxC,EACnBkB,KAAK,OACLK,OAAO,UACPvD,MAAO,CAAE4D,QAAS,QAClBR,SAAU,SAACC,UArPC,SAACrB,EAAKqB,GAClC,IAAMG,EAAOH,EAAEC,OAAOG,MAAM,GACxBD,GACFzB,EAAeC,EAAK,QAAS0B,IAAIC,gBAAgBH,GAErD,CAgPmCiB,CAAsBzC,EAAKqB,EAAE,iBAGhDhB,EAAAA,QAAAC,cACEY,QAAAA,CAAAA,KAAK,OACLc,MAAOG,EAAKjJ,QACZwJ,YAAY,OACZC,UAAW,EACXvB,SAAU,SAACC,GACT,OAAAtB,EAAeC,EAAK,UAAWqB,EAAEC,OAAOU,MAAM,EAEhDhE,MAAO,CAAE9C,MAAO,OAAQ0H,UAAW,yBAErCvC,EAAAA,QAAAC,cAAA,QAAA,CACEY,KAAK,QACLc,MAAOG,EAAKhJ,MACZiI,SAAU,SAACC,GACT,OAAAtB,EAAeC,EAAK,QAASqB,EAAEC,OAAOU,MAAM,IAG5C,gBAER3B,UAAAC,cAAA,MAAA,CAAKtC,MAAO,CAAE4D,QAAS,OAAQiB,IAAK,kBAClCxC,EAAA,QAAAC,cAAQC,SAAAA,CAAAA,UAAU,iBAAiBS,QArQjC,WACd,OAAAvB,EAAa,WAAOW,OACf/F,EAAeV,MAClB,CAAA,CAAET,QAAS,IAAKC,MAAO,UACvB,GAiQ+D,kBAGrDkH,EAAA,QAAAC,cAAA,SAAA,CAAQC,UAAU,iBAAiBS,QAnQ9B,WACb3G,EAAeV,MAAMoD,OAAS,GAChC0C,EAAa,QAASpF,EAAeV,MAAMmJ,MAAM,GAAI,GACzD,GAgQsE,SAUxE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-holographic-cube",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "A 3D holographic spinning cube component for React",
   "source": "src/index.js",
   "main": "dist/index.js",