diff --git a/index.38af9c04.css b/index.38af9c04.css new file mode 100644 index 0000000..f8defe0 --- /dev/null +++ b/index.38af9c04.css @@ -0,0 +1,2 @@ +*{box-sizing:border-box}body{justify-content:center;align-items:center;min-height:100vh;display:flex}.clickable{cursor:pointer}.lens{border-radius:50%}.absolute{position:absolute}#eye-ball{background-color:#352d6a;flex-shrink:0;justify-content:center;align-self:center;align-items:center;width:300px;height:300px;display:flex;position:relative;transform:translate(30px)}svg{pointer-events:none;transform:translate(-150px,-79px)}path{fill:#ff7dff;pointer-events:visibleFill}#box{background-color:#ff7dff;width:210px;height:210px}#lens-one{background-color:#ff1493;width:200px;height:200px;transform:translate(-100px,-96px)}#lens-two{background-color:#0c0c46;width:180px;height:180px;transform:translate(-90px,-77px)}#lens-three{background-color:#c1de30;width:110px;height:110px;transform:translate(-55px,-55px)}#iris-one{background-color:#20008c;width:90px;height:90px;transform:translate(-45px,-38px)}#iris-two{background-color:red;width:24px;height:24px;transform:translate(-12px,-12px)}#iris-three{background-color:#adff2f;width:18px;height:18px;transform:translate(-9px,-9px)}#iris-four{background-color:pink;width:14px;height:14px;transform:translate(-7px,-7px)}#iris-five{background-color:#87ceeb;width:10px;height:10px;transform:translate(-5px,-6px)}#iris-six{background-color:#00008b;width:4px;height:4px;transform:translate(-2px,-2px)}#reflex-one{background-color:#ff0;width:32px;height:32px;transform:translate(8px,8px)}#reflex-two{background-color:#ff0;width:46px;height:46px;transform:translate(-45px,-45px)}button{cursor:pointer;background-color:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:4px;display:flex;position:relative;overflow:hidden}button:hover{background-color:#f2f2f2}img{width:25px;height:25px}#menu{flex-direction:column;display:flex;transform:translate(40px,-150px)}button span{opacity:0;background-color:#0003;border-radius:8px;width:40px;height:40px;animation:1s ripple;position:absolute}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(10)}}.active{background-color:#ececec}.active:hover{background-color:#e2e2e2} +/*# sourceMappingURL=index.38af9c04.css.map */ diff --git a/index.38af9c04.css.map b/index.38af9c04.css.map new file mode 100644 index 0000000..4e95445 --- /dev/null +++ b/index.38af9c04.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,wBAIA,6EAOA,0BAIA,wBAIA,4BAIA,+LAaA,0DAKA,6CAKA,uDAMA,8FAOA,6FAOA,+FAOA,2FAOA,uFAOA,2FAOA,uFAOA,0FAOA,uFAOA,sFAOA,0FAOA,4MAeA,sCAIA,2BAKA,0EAMA,4HAUA,oFAWA,iCAIA","sources":["index.38af9c04.css","src/css/style.css"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\nbody {\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n display: flex;\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.lens {\n border-radius: 50%;\n}\n\n.absolute {\n position: absolute;\n}\n\n#eye-ball {\n background-color: #352d6a;\n flex-shrink: 0;\n justify-content: center;\n align-self: center;\n align-items: center;\n width: 300px;\n height: 300px;\n display: flex;\n position: relative;\n transform: translateX(30px);\n}\n\nsvg {\n pointer-events: none;\n transform: translate(-150px, -79px);\n}\n\npath {\n fill: #ff7dff;\n pointer-events: visibleFill;\n}\n\n#box {\n background-color: #ff7dff;\n width: 210px;\n height: 210px;\n}\n\n#lens-one {\n background-color: #ff1493;\n width: 200px;\n height: 200px;\n transform: translate(-100px, -96px);\n}\n\n#lens-two {\n background-color: #0c0c46;\n width: 180px;\n height: 180px;\n transform: translate(-90px, -77px);\n}\n\n#lens-three {\n background-color: #c1de30;\n width: 110px;\n height: 110px;\n transform: translate(-55px, -55px);\n}\n\n#iris-one {\n background-color: #20008c;\n width: 90px;\n height: 90px;\n transform: translate(-45px, -38px);\n}\n\n#iris-two {\n background-color: red;\n width: 24px;\n height: 24px;\n transform: translate(-12px, -12px);\n}\n\n#iris-three {\n background-color: #adff2f;\n width: 18px;\n height: 18px;\n transform: translate(-9px, -9px);\n}\n\n#iris-four {\n background-color: pink;\n width: 14px;\n height: 14px;\n transform: translate(-7px, -7px);\n}\n\n#iris-five {\n background-color: #87ceeb;\n width: 10px;\n height: 10px;\n transform: translate(-5px, -6px);\n}\n\n#iris-six {\n background-color: #00008b;\n width: 4px;\n height: 4px;\n transform: translate(-2px, -2px);\n}\n\n#reflex-one {\n background-color: #ff0;\n width: 32px;\n height: 32px;\n transform: translate(8px, 8px);\n}\n\n#reflex-two {\n background-color: #ff0;\n width: 46px;\n height: 46px;\n transform: translate(-45px, -45px);\n}\n\nbutton {\n cursor: pointer;\n background-color: #fff;\n border: none;\n border-radius: 8px;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n margin-bottom: 4px;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\nbutton:hover {\n background-color: #f2f2f2;\n}\n\nimg {\n width: 25px;\n height: 25px;\n}\n\n#menu {\n flex-direction: column;\n display: flex;\n transform: translate(40px, -150px);\n}\n\nbutton span {\n opacity: 0;\n background-color: #0003;\n border-radius: 8px;\n width: 40px;\n height: 40px;\n animation: 1s ripple;\n position: absolute;\n}\n\n@keyframes ripple {\n from {\n opacity: 1;\n transform: scale(0);\n }\n\n to {\n opacity: 0;\n transform: scale(10);\n }\n}\n\n.active {\n background-color: #ececec;\n}\n\n.active:hover {\n background-color: #e2e2e2;\n}\n\n/*# sourceMappingURL=index.38af9c04.css.map */\n","* {\n box-sizing: border-box;\n}\n\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.lens {\n border-radius: 50%;\n}\n\n.absolute {\n position: absolute;\n}\n\n#eye-ball {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n flex-shrink: 0;\n position: relative;\n width: 300px;\n height: 300px;\n background-color: rgb(53, 45, 106);\n transform: translateX(30px);\n}\n\nsvg {\n pointer-events: none;\n transform: translate(-150px, -79px);\n}\n\npath {\n fill: rgb(255, 125, 255);\n pointer-events: visibleFill;\n}\n\n#box {\n width: 210px;\n height: 210px;\n background-color: rgb(255, 125, 255);\n}\n\n#lens-one {\n width: 200px;\n height: 200px;\n transform: translate(-100px, -96px);\n background-color: deeppink;\n}\n\n#lens-two {\n width: 180px;\n height: 180px;\n transform: translate(-90px, -77px);\n background-color: rgb(12, 12, 70);\n}\n\n#lens-three {\n width: 110px;\n height: 110px;\n transform: translate(-55px, -55px);\n background-color: rgb(193, 222, 48);\n}\n\n#iris-one {\n width: 90px;\n height: 90px;\n transform: translate(-45px, -38px);\n background-color: rgb(32, 0, 140);\n}\n\n#iris-two {\n width: 24px;\n height: 24px;\n transform: translate(-12px, -12px);\n background-color: red;\n}\n\n#iris-three {\n width: 18px;\n height: 18px;\n transform: translate(-9px, -9px);\n background-color: greenyellow;\n}\n\n#iris-four {\n width: 14px;\n height: 14px;\n transform: translate(-7px, -7px);\n background-color: pink;\n}\n\n#iris-five {\n width: 10px;\n height: 10px;\n transform: translate(-5px, -6px);\n background-color: skyblue;\n}\n\n#iris-six {\n width: 4px;\n height: 4px;\n transform: translate(-2px, -2px);\n background-color: darkblue;\n}\n\n#reflex-one {\n width: 32px;\n height: 32px;\n transform: translate(8px, 8px);\n background-color: yellow;\n}\n\n#reflex-two {\n width: 46px;\n height: 46px;\n transform: translate(-45px, -45px);\n background-color: yellow;\n}\n\nbutton {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin-bottom: 4px;\n border: none;\n background-color: white;\n position: relative;\n overflow: hidden;\n}\n\nbutton:hover {\n background-color: rgb(242, 242, 242);\n}\n\nimg {\n height: 25px;\n width: 25px;\n}\n\n#menu {\n display: flex;\n flex-direction: column;\n transform: translate(40px, -150px);\n}\n\nbutton span {\n position: absolute;\n border-radius: 8px;\n background-color: rgba(0, 0, 0, 0.2);\n width: 40px;\n height: 40px;\n animation: ripple 1s;\n opacity: 0;\n}\n\n@keyframes ripple {\n from {\n opacity: 1;\n transform: scale(0);\n }\n to {\n opacity: 0;\n transform: scale(10);\n }\n}\n\n.active {\n background-color: rgb(236, 236, 236);\n}\n\n.active:hover {\n background-color: rgb(226, 226, 226);\n}\n"],"names":[],"version":3,"file":"index.38af9c04.css.map"} \ No newline at end of file diff --git a/index.b686b208.css b/index.b686b208.css deleted file mode 100644 index 996adc5..0000000 --- a/index.b686b208.css +++ /dev/null @@ -1,2 +0,0 @@ -*{box-sizing:border-box}body{justify-content:center;align-items:center;min-height:100vh;display:flex}.clickable{cursor:pointer}.lens{border-radius:50%}.absolute{position:absolute}#eye-ball{background-color:#352d6a;flex-shrink:0;justify-content:center;align-self:center;align-items:center;width:300px;height:300px;display:flex;position:relative}svg{pointer-events:none;transform:translate(-150px,-79px)}path{fill:#ff7dff;pointer-events:visibleFill}#box{background-color:#ff7dff;width:210px;height:210px}#lens-one{background-color:#ff1493;width:200px;height:200px;transform:translate(-100px,-96px)}#lens-two{background-color:#0c0c46;width:180px;height:180px;transform:translate(-90px,-77px)}#lens-three{background-color:#c1de30;width:110px;height:110px;transform:translate(-55px,-55px)}#iris-one{background-color:#20008c;width:90px;height:90px;transform:translate(-45px,-38px)}#iris-two{background-color:red;width:24px;height:24px;transform:translate(-12px,-12px)}#iris-three{background-color:#adff2f;width:18px;height:18px;transform:translate(-9px,-9px)}#iris-four{background-color:pink;width:14px;height:14px;transform:translate(-7px,-7px)}#iris-five{background-color:#87ceeb;width:10px;height:10px;transform:translate(-5px,-6px)}#iris-six{background-color:#00008b;width:4px;height:4px;transform:translate(-2px,-2px)}#reflex-one{background-color:#ff0;width:32px;height:32px;transform:translate(8px,8px)}#reflex-two{background-color:#ff0;width:46px;height:46px;transform:translate(-45px,-45px)} -/*# sourceMappingURL=index.b686b208.css.map */ diff --git a/index.b686b208.css.map b/index.b686b208.css.map deleted file mode 100644 index 237db4a..0000000 --- a/index.b686b208.css.map +++ /dev/null @@ -1 +0,0 @@ -{"mappings":"ACAA,wBAIA,6EAOA,0BAIA,wBAIA,4BAIA,qKAYA,0DAKA,6CAKA,uDAMA,8FAOA,6FAOA,+FAOA,2FAOA,uFAOA,2FAOA,uFAOA,0FAOA,uFAOA,sFAOA","sources":["index.b686b208.css","src/css/style.css"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\nbody {\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n display: flex;\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.lens {\n border-radius: 50%;\n}\n\n.absolute {\n position: absolute;\n}\n\n#eye-ball {\n background-color: #352d6a;\n flex-shrink: 0;\n justify-content: center;\n align-self: center;\n align-items: center;\n width: 300px;\n height: 300px;\n display: flex;\n position: relative;\n}\n\nsvg {\n pointer-events: none;\n transform: translate(-150px, -79px);\n}\n\npath {\n fill: #ff7dff;\n pointer-events: visibleFill;\n}\n\n#box {\n background-color: #ff7dff;\n width: 210px;\n height: 210px;\n}\n\n#lens-one {\n background-color: #ff1493;\n width: 200px;\n height: 200px;\n transform: translate(-100px, -96px);\n}\n\n#lens-two {\n background-color: #0c0c46;\n width: 180px;\n height: 180px;\n transform: translate(-90px, -77px);\n}\n\n#lens-three {\n background-color: #c1de30;\n width: 110px;\n height: 110px;\n transform: translate(-55px, -55px);\n}\n\n#iris-one {\n background-color: #20008c;\n width: 90px;\n height: 90px;\n transform: translate(-45px, -38px);\n}\n\n#iris-two {\n background-color: red;\n width: 24px;\n height: 24px;\n transform: translate(-12px, -12px);\n}\n\n#iris-three {\n background-color: #adff2f;\n width: 18px;\n height: 18px;\n transform: translate(-9px, -9px);\n}\n\n#iris-four {\n background-color: pink;\n width: 14px;\n height: 14px;\n transform: translate(-7px, -7px);\n}\n\n#iris-five {\n background-color: #87ceeb;\n width: 10px;\n height: 10px;\n transform: translate(-5px, -6px);\n}\n\n#iris-six {\n background-color: #00008b;\n width: 4px;\n height: 4px;\n transform: translate(-2px, -2px);\n}\n\n#reflex-one {\n background-color: #ff0;\n width: 32px;\n height: 32px;\n transform: translate(8px, 8px);\n}\n\n#reflex-two {\n background-color: #ff0;\n width: 46px;\n height: 46px;\n transform: translate(-45px, -45px);\n}\n\n/*# sourceMappingURL=index.b686b208.css.map */\n","* {\n box-sizing: border-box;\n}\n\nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n}\n\n.clickable {\n cursor: pointer;\n}\n\n.lens {\n border-radius: 50%;\n}\n\n.absolute {\n position: absolute;\n}\n\n#eye-ball {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n flex-shrink: 0;\n position: relative;\n width: 300px;\n height: 300px;\n background-color: rgb(53, 45, 106);\n}\n\nsvg {\n pointer-events: none;\n transform: translate(-150px, -79px);\n}\n\npath {\n fill: rgb(255, 125, 255);\n pointer-events: visibleFill;\n}\n\n#box {\n width: 210px;\n height: 210px;\n background-color: rgb(255, 125, 255);\n}\n\n#lens-one {\n width: 200px;\n height: 200px;\n transform: translate(-100px, -96px);\n background-color: deeppink;\n}\n\n#lens-two {\n width: 180px;\n height: 180px;\n transform: translate(-90px, -77px);\n background-color: rgb(12, 12, 70);\n}\n\n#lens-three {\n width: 110px;\n height: 110px;\n transform: translate(-55px, -55px);\n background-color: rgb(193, 222, 48);\n}\n\n#iris-one {\n width: 90px;\n height: 90px;\n transform: translate(-45px, -38px);\n background-color: rgb(32, 0, 140);\n}\n\n#iris-two {\n width: 24px;\n height: 24px;\n transform: translate(-12px, -12px);\n background-color: red;\n}\n\n#iris-three {\n width: 18px;\n height: 18px;\n transform: translate(-9px, -9px);\n background-color: greenyellow;\n}\n\n#iris-four {\n width: 14px;\n height: 14px;\n transform: translate(-7px, -7px);\n background-color: pink;\n}\n\n#iris-five {\n width: 10px;\n height: 10px;\n transform: translate(-5px, -6px);\n background-color: skyblue;\n}\n\n#iris-six {\n width: 4px;\n height: 4px;\n transform: translate(-2px, -2px);\n background-color: darkblue;\n}\n\n#reflex-one {\n width: 32px;\n height: 32px;\n transform: translate(8px, 8px);\n background-color: yellow;\n}\n\n#reflex-two {\n width: 46px;\n height: 46px;\n transform: translate(-45px, -45px);\n background-color: yellow;\n}\n"],"names":[],"version":3,"file":"index.b686b208.css.map"} \ No newline at end of file diff --git a/index.c7212a4f.js b/index.c7212a4f.js new file mode 100644 index 0000000..a2b5da3 --- /dev/null +++ b/index.c7212a4f.js @@ -0,0 +1,2 @@ +let e,t,l;const o=()=>{let e=[,,,].fill(0).map(()=>0|Math.floor(255*Math.random()));return`rgb(${e.join(",")})`},n=e=>{let t=document.getElementById("box"),l=document.querySelector("path");null!==t&&null!==l&&(t.style.backgroundColor=e,l.style.fill=e)},r=e=>{let t=document.getElementById("reflex-one"),l=document.getElementById("reflex-two");null!==t&&null!==l&&(t.style.backgroundColor=e,l.style.backgroundColor=e)},a=e=>{if(void 0===e)return;let t=document.getElementById(e.target);switch(e.target){case"box":case"path":n(e.color);break;case"reflex-one":case"reflex-two":r(e.color);break;default:if(null===t)return;t.style.backgroundColor=e.color}},c=[];let d=c.length-1,u=!0,i=!1;const s=()=>{d+=1},m=()=>{d<0||(a(c[d]),d-=1)},g=()=>{d>c.length-1||(a(c[d]),d+=1)},f=()=>{let e=()=>{u||i||!(c.length>0)||(console.log(c.length),a(c.pop()),t=setTimeout(e,l=Math.max(l-100,100)))};e()},h=e=>{u=e},b=()=>{i=!i},p=()=>{u||i||(clearTimeout(e),clearTimeout(t),l=1e3,e=setTimeout(()=>{f()},5e3))},y=e=>{c.push(e)},k=e=>{if(e instanceof HTMLElement){let t=window.getComputedStyle(e);y({target:e.id,color:t.backgroundColor}),s()}if(e instanceof SVGElement){let t=window.getComputedStyle(e);y({target:e.id,color:t.fill}),s()}};let E=0;const w=e=>{0!==c.length&&(E=Math.floor(e/window.innerWidth*c.length),a(c[E]))};let x=!1;const v=e=>{let t=document.createElement("span");t.classList.add("ripple"),e.appendChild(t),setTimeout(()=>{t.remove()},600)};document.addEventListener("mousedown",()=>{x=!0,h(!0)}),document.addEventListener("mouseup",()=>{x=!1,h(!1)}),document.addEventListener("mousemove",e=>{x&&w(e.clientX)}),document.addEventListener("click",e=>{if(p(),null===e.target)return;let t=e.target;if(!t.matches(".clickable"))return;let l=o();switch(t.id){case"box":case"path":k(t),n(l);break;case"reflex-one":case"reflex-two":k(t),r(l);break;default:k(t),t.style.backgroundColor=l}}),document.querySelectorAll("button").forEach(e=>{e.addEventListener("click",e=>{let t=e.currentTarget;v(t),"pause"===t.id&&(t.classList.toggle("active"),b()),"redo"===t.id&&g(),"undo"===t.id&&m()})}); +//# sourceMappingURL=index.c7212a4f.js.map diff --git a/index.c7212a4f.js.map b/index.c7212a4f.js.map new file mode 100644 index 0000000..d050889 --- /dev/null +++ b/index.c7212a4f.js.map @@ -0,0 +1 @@ +{"mappings":"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","sources":["","src/ts/index.ts","src/modules/index.ts","src/modules/generateBackgroundColor.ts","src/modules/colorSVG.ts","src/modules/colorReflection.ts","src/modules/handleClickableElement.ts","src/modules/recordColorChange.ts","src/modules/rewindColors.ts","src/modules/applyColorFromStep.ts","src/modules/scrollThroughSteps.ts","src/modules/handleMenuButtons.ts","src/modules/addRippleEffect.ts"],"sourcesContent":["const $0badc424dcc51d88$var$RANGE = 255;\nconst $0badc424dcc51d88$var$MODEL = \"rgb\";\nconst $0badc424dcc51d88$export$b2c9790f7b509997 = ()=>{\n const color = Array(3).fill(0).map(()=>Math.floor(Math.random() * $0badc424dcc51d88$var$RANGE) | 0);\n return `${$0badc424dcc51d88$var$MODEL}(${color.join(\",\")})`;\n};\n\n\nconst $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e = (color)=>{\n const box = document.getElementById(\"box\");\n const path = document.querySelector(\"path\");\n if (box === null || path === null) return;\n box.style.backgroundColor = color;\n path.style.fill = color;\n};\n\n\nconst $c170ef335cfad920$export$64e2b6bc85b3cd29 = (color)=>{\n const reflexOne = document.getElementById(\"reflex-one\");\n const reflexTwo = document.getElementById(\"reflex-two\");\n if (reflexOne === null || reflexTwo === null) return;\n reflexOne.style.backgroundColor = color;\n reflexTwo.style.backgroundColor = color;\n};\n\n\n\n\n\n\n\nconst $967393d0aa96b631$export$7aba65b795f139f4 = (step)=>{\n if (step === undefined) return;\n const element = document.getElementById(step.target);\n switch(step.target){\n case \"box\":\n case \"path\":\n (0, $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e)(step.color);\n break;\n case \"reflex-one\":\n case \"reflex-two\":\n (0, $c170ef335cfad920$export$64e2b6bc85b3cd29)(step.color);\n break;\n default:\n if (element === null) return;\n element.style.backgroundColor = step.color;\n }\n};\n\n\nconst $1e9ea166a574d843$export$be3f796aed065412 = [];\nlet $1e9ea166a574d843$var$stepIndex = $1e9ea166a574d843$export$be3f796aed065412.length - 1;\nconst $1e9ea166a574d843$var$DELAY = 1000;\nconst $1e9ea166a574d843$var$TIMEOUT = 5000;\nlet $1e9ea166a574d843$var$idleTime;\nlet $1e9ea166a574d843$var$interval;\nlet $1e9ea166a574d843$var$stopRewind = true;\nlet $1e9ea166a574d843$var$pauseRewind = false;\nlet $1e9ea166a574d843$var$initialDelay;\nconst $1e9ea166a574d843$export$a45c7487058a2158 = ()=>{\n $1e9ea166a574d843$var$stepIndex = $1e9ea166a574d843$var$stepIndex + 1;\n};\nconst $1e9ea166a574d843$export$318446a8b1951b31 = ()=>{\n if ($1e9ea166a574d843$var$stepIndex < 0) return;\n (0, $967393d0aa96b631$export$7aba65b795f139f4)($1e9ea166a574d843$export$be3f796aed065412[$1e9ea166a574d843$var$stepIndex]);\n $1e9ea166a574d843$var$stepIndex = $1e9ea166a574d843$var$stepIndex - 1;\n};\nconst $1e9ea166a574d843$export$b7af608b77385ef8 = ()=>{\n if ($1e9ea166a574d843$var$stepIndex > $1e9ea166a574d843$export$be3f796aed065412.length - 1) return;\n (0, $967393d0aa96b631$export$7aba65b795f139f4)($1e9ea166a574d843$export$be3f796aed065412[$1e9ea166a574d843$var$stepIndex]);\n $1e9ea166a574d843$var$stepIndex = $1e9ea166a574d843$var$stepIndex + 1;\n};\nconst $1e9ea166a574d843$var$rewind = ()=>{\n const removeStep = ()=>{\n if ($1e9ea166a574d843$var$stopRewind || $1e9ea166a574d843$var$pauseRewind) return;\n if ($1e9ea166a574d843$export$be3f796aed065412.length > 0) {\n console.log($1e9ea166a574d843$export$be3f796aed065412.length);\n const removedStep = $1e9ea166a574d843$export$be3f796aed065412.pop();\n (0, $967393d0aa96b631$export$7aba65b795f139f4)(removedStep);\n $1e9ea166a574d843$var$initialDelay = Math.max($1e9ea166a574d843$var$initialDelay - 100, 100);\n $1e9ea166a574d843$var$interval = setTimeout(removeStep, $1e9ea166a574d843$var$initialDelay);\n }\n };\n removeStep();\n};\nconst $1e9ea166a574d843$export$9a0fc3cbe62daaef = (arg)=>{\n $1e9ea166a574d843$var$stopRewind = arg;\n};\nconst $1e9ea166a574d843$export$5cea818fbf8f0718 = ()=>{\n $1e9ea166a574d843$var$pauseRewind = !$1e9ea166a574d843$var$pauseRewind;\n};\nconst $1e9ea166a574d843$export$148d61ea341bbff7 = ()=>{\n if ($1e9ea166a574d843$var$stopRewind || $1e9ea166a574d843$var$pauseRewind) return;\n clearTimeout($1e9ea166a574d843$var$idleTime);\n clearTimeout($1e9ea166a574d843$var$interval);\n $1e9ea166a574d843$var$initialDelay = $1e9ea166a574d843$var$DELAY;\n $1e9ea166a574d843$var$idleTime = setTimeout(()=>{\n $1e9ea166a574d843$var$rewind();\n }, $1e9ea166a574d843$var$TIMEOUT);\n};\n\n\nconst $3ee857463697fb16$var$pushStep = (step)=>{\n (0, $1e9ea166a574d843$export$be3f796aed065412).push(step);\n};\nconst $3ee857463697fb16$export$1a2bcf970dbb3bd = (target)=>{\n if (target instanceof HTMLElement) {\n const computedStyle = window.getComputedStyle(target);\n $3ee857463697fb16$var$pushStep({\n target: target.id,\n color: computedStyle.backgroundColor\n });\n (0, $1e9ea166a574d843$export$a45c7487058a2158)();\n }\n if (target instanceof SVGElement) {\n const computedStyle = window.getComputedStyle(target);\n $3ee857463697fb16$var$pushStep({\n target: target.id,\n color: computedStyle.fill\n });\n (0, $1e9ea166a574d843$export$a45c7487058a2158)();\n }\n};\n\n\n\n\n\nlet $4f9eb3434b4304f2$var$scrollIndex = 0;\nconst $4f9eb3434b4304f2$export$10e0292f57246bb5 = (mousePositionX)=>{\n if ((0, $1e9ea166a574d843$export$be3f796aed065412).length === 0) return;\n $4f9eb3434b4304f2$var$scrollIndex = Math.floor(mousePositionX / window.innerWidth * (0, $1e9ea166a574d843$export$be3f796aed065412).length);\n (0, $967393d0aa96b631$export$7aba65b795f139f4)((0, $1e9ea166a574d843$export$be3f796aed065412)[$4f9eb3434b4304f2$var$scrollIndex]);\n};\n\n\nlet $9cfe05c3c3a9492e$var$isScroll = false;\nconst $9cfe05c3c3a9492e$export$a1e04f038db6e793 = ()=>{\n document.addEventListener(\"mousedown\", ()=>{\n $9cfe05c3c3a9492e$var$isScroll = true;\n (0, $1e9ea166a574d843$export$9a0fc3cbe62daaef)(true);\n });\n document.addEventListener(\"mouseup\", ()=>{\n $9cfe05c3c3a9492e$var$isScroll = false;\n (0, $1e9ea166a574d843$export$9a0fc3cbe62daaef)(false);\n });\n document.addEventListener(\"mousemove\", (evt)=>{\n if (!$9cfe05c3c3a9492e$var$isScroll) return;\n (0, $4f9eb3434b4304f2$export$10e0292f57246bb5)(evt.clientX);\n });\n document.addEventListener(\"click\", (evt)=>{\n (0, $1e9ea166a574d843$export$148d61ea341bbff7)();\n if (evt.target === null) return;\n const target = evt.target;\n if (!target.matches(\".clickable\")) return;\n const color = (0, $0badc424dcc51d88$export$b2c9790f7b509997)();\n switch(target.id){\n case \"box\":\n case \"path\":\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n (0, $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e)(color);\n break;\n case \"reflex-one\":\n case \"reflex-two\":\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n (0, $c170ef335cfad920$export$64e2b6bc85b3cd29)(color);\n break;\n default:\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n target.style.backgroundColor = color;\n }\n });\n};\n\n\n\nconst $25b79fa7abfd1975$export$fdeef9d50cf3aad4 = (button)=>{\n const ripple = document.createElement(\"span\");\n ripple.classList.add(\"ripple\");\n button.appendChild(ripple);\n setTimeout(()=>{\n ripple.remove();\n }, 600);\n};\n\n\n\nconst $f64d77fee1981755$export$8d62b7069b5615c2 = ()=>{\n document.querySelectorAll(\"button\").forEach((button)=>{\n button.addEventListener(\"click\", (evt)=>{\n const button = evt.currentTarget;\n (0, $25b79fa7abfd1975$export$fdeef9d50cf3aad4)(button);\n if (button.id === \"pause\") {\n button.classList.toggle(\"active\");\n (0, $1e9ea166a574d843$export$5cea818fbf8f0718)();\n }\n if (button.id === \"redo\") (0, $1e9ea166a574d843$export$b7af608b77385ef8)();\n if (button.id === \"undo\") (0, $1e9ea166a574d843$export$318446a8b1951b31)();\n });\n });\n};\n\n\n\n\n(()=>{\n (0, $9cfe05c3c3a9492e$export$a1e04f038db6e793)();\n (0, $f64d77fee1981755$export$8d62b7069b5615c2)();\n})();\n\n\n//# sourceMappingURL=index.c7212a4f.js.map\n","import { handleClickableElement, handleMenuButtons } from '../modules';\n\n((): void => {\n handleClickableElement();\n handleMenuButtons();\n})();\n","export * from './generateBackgroundColor';\nexport * from './colorSVG';\nexport * from './colorReflection';\nexport * from './handleClickableElement';\nexport * from './recordColorChange';\nexport * from './handleMenuButtons';\n","const RANGE = 255;\nconst MODEL = 'rgb';\n\nexport const generateBackgroundColor = (): string => {\n const color = Array(3)\n .fill(0)\n .map(() => Math.floor(Math.random() * RANGE) | 0);\n return `${MODEL}(${color.join(',')})`;\n};\n","export const colorSVG = (color: string): void => {\n const box = document.getElementById('box');\n const path = document.querySelector('path');\n\n if (box === null || path === null) return;\n\n box.style.backgroundColor = color;\n path.style.fill = color;\n};\n","export const colorReflection = (color: string): void => {\n const reflexOne = document.getElementById('reflex-one');\n const reflexTwo = document.getElementById('reflex-two');\n\n if (reflexOne === null || reflexTwo === null) return;\n\n reflexOne.style.backgroundColor = color;\n reflexTwo.style.backgroundColor = color;\n};\n","import { generateBackgroundColor } from './generateBackgroundColor';\nimport { colorSVG } from './colorSVG';\nimport { colorReflection } from './colorReflection';\nimport { recordColorChange } from './recordColorChange';\nimport { resetTimer, setStopRewind } from './rewindColors';\nimport { scrollThroughSteps } from './scrollThroughSteps';\n\nlet isScroll = false;\n\ntype ClickableElement = HTMLElement & { id: string };\n\nexport const handleClickableElement = (): void => {\n document.addEventListener('mousedown', (): void => {\n isScroll = true;\n setStopRewind(true);\n });\n\n document.addEventListener('mouseup', (): void => {\n isScroll = false;\n setStopRewind(false);\n });\n\n document.addEventListener('mousemove', (evt) => {\n if (!isScroll) return;\n scrollThroughSteps(evt.clientX);\n });\n\n document.addEventListener('click', (evt): void => {\n resetTimer();\n if (evt.target === null) return;\n\n const target = evt.target as ClickableElement;\n if (!target.matches('.clickable')) return;\n\n const color = generateBackgroundColor();\n\n switch (target.id) {\n case 'box':\n case 'path':\n recordColorChange(target);\n colorSVG(color);\n break;\n\n case 'reflex-one':\n case 'reflex-two':\n recordColorChange(target);\n colorReflection(color);\n break;\n\n default:\n recordColorChange(target);\n target.style.backgroundColor = color;\n }\n });\n};\n","import { type StepType, steps, updateStepIndex } from './rewindColors';\n\nconst pushStep = (step: StepType): void => {\n steps.push(step);\n};\n\nexport const recordColorChange = (target: Element): void => {\n if (target instanceof HTMLElement) {\n const computedStyle = window.getComputedStyle(target);\n pushStep({\n target: target.id,\n color: computedStyle.backgroundColor,\n });\n updateStepIndex();\n }\n if (target instanceof SVGElement) {\n const computedStyle = window.getComputedStyle(target);\n pushStep({\n target: target.id,\n color: computedStyle.fill,\n });\n updateStepIndex();\n }\n};\n","import { applyColorFromStep } from './applyColorFromStep';\n\nexport type StepType = {\n target: string;\n color: string;\n};\n\nexport const steps: StepType[] = [];\nlet stepIndex = steps.length - 1;\n\nconst DELAY = 1000;\nconst TIMEOUT = 5000;\n\nlet idleTime: NodeJS.Timeout;\nlet interval: NodeJS.Timeout;\nlet stopRewind = true;\nlet pauseRewind = false;\nlet initialDelay: number;\n\nexport const updateStepIndex = (): void => {\n stepIndex = stepIndex + 1;\n};\n\nexport const undoColorChange = (): void => {\n if (stepIndex < 0) return;\n applyColorFromStep(steps[stepIndex]);\n stepIndex = stepIndex - 1;\n};\n\nexport const redoColorChange = (): void => {\n if (stepIndex > steps.length - 1) return;\n applyColorFromStep(steps[stepIndex]);\n stepIndex = stepIndex + 1;\n};\n\nconst rewind = (): void => {\n const removeStep = (): void => {\n if (stopRewind || pauseRewind) return;\n if (steps.length > 0) {\n console.log(steps.length);\n const removedStep = steps.pop();\n applyColorFromStep(removedStep);\n\n initialDelay = Math.max(initialDelay - 100, 100);\n\n interval = setTimeout(removeStep, initialDelay);\n }\n };\n removeStep();\n};\n\nexport const setStopRewind = (arg: boolean): void => {\n stopRewind = arg;\n};\n\nexport const setPauseRewind = (): void => {\n pauseRewind = !pauseRewind;\n};\n\nexport const resetTimer = (): void => {\n if (stopRewind || pauseRewind) return;\n clearTimeout(idleTime);\n clearTimeout(interval);\n initialDelay = DELAY;\n idleTime = setTimeout(() => {\n rewind();\n }, TIMEOUT);\n};\n","import { colorReflection } from './colorReflection';\nimport { colorSVG } from './colorSVG';\nimport type { StepType } from './rewindColors';\n\nexport const applyColorFromStep = (step: StepType | undefined): void => {\n if (step === undefined) return;\n\n const element = document.getElementById(step.target);\n\n switch (step.target) {\n case 'box':\n case 'path':\n colorSVG(step.color);\n break;\n\n case 'reflex-one':\n case 'reflex-two':\n colorReflection(step.color);\n break;\n\n default:\n if (element === null) return;\n element.style.backgroundColor = step.color;\n }\n};\n","import { applyColorFromStep } from './applyColorFromStep';\nimport { steps } from './rewindColors';\n\nlet scrollIndex = 0;\n\nexport const scrollThroughSteps = (mousePositionX: number): void => {\n if (steps.length === 0) return;\n scrollIndex = Math.floor((mousePositionX / window.innerWidth) * steps.length);\n applyColorFromStep(steps[scrollIndex]);\n};\n","import { addRippleEffect } from './addRippleEffect';\nimport {\n redoColorChange,\n setPauseRewind,\n undoColorChange,\n} from './rewindColors';\n\nexport const handleMenuButtons = (): void => {\n document.querySelectorAll('button').forEach((button) => {\n button.addEventListener('click', (evt) => {\n const button = evt.currentTarget as HTMLButtonElement;\n addRippleEffect(button);\n\n if (button.id === 'pause') {\n button.classList.toggle('active');\n setPauseRewind();\n }\n if (button.id === 'redo') {\n redoColorChange();\n }\n if (button.id === 'undo') {\n undoColorChange();\n }\n });\n });\n};\n","export const addRippleEffect = (button: HTMLButtonElement): void => {\n const ripple = document.createElement('span');\n ripple.classList.add('ripple');\n button.appendChild(ripple);\n setTimeout(() => {\n ripple.remove();\n }, 600);\n};\n"],"names":["$1e9ea166a574d843$var$idleTime","$1e9ea166a574d843$var$interval","$1e9ea166a574d843$var$initialDelay","$0badc424dcc51d88$export$b2c9790f7b509997","color","Array","fill","map","Math","floor","random","join","$1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e","box","document","getElementById","path","querySelector","style","backgroundColor","$c170ef335cfad920$export$64e2b6bc85b3cd29","reflexOne","reflexTwo","$967393d0aa96b631$export$7aba65b795f139f4","step","undefined","element","target","$1e9ea166a574d843$export$be3f796aed065412","$1e9ea166a574d843$var$stepIndex","length","$1e9ea166a574d843$var$stopRewind","$1e9ea166a574d843$var$pauseRewind","$1e9ea166a574d843$export$a45c7487058a2158","$1e9ea166a574d843$export$318446a8b1951b31","$1e9ea166a574d843$export$b7af608b77385ef8","$1e9ea166a574d843$var$rewind","removeStep","console","log","pop","setTimeout","max","$1e9ea166a574d843$export$9a0fc3cbe62daaef","arg","$1e9ea166a574d843$export$5cea818fbf8f0718","$1e9ea166a574d843$export$148d61ea341bbff7","clearTimeout","$3ee857463697fb16$var$pushStep","push","$3ee857463697fb16$export$1a2bcf970dbb3bd","HTMLElement","computedStyle","window","getComputedStyle","id","SVGElement","$4f9eb3434b4304f2$var$scrollIndex","$4f9eb3434b4304f2$export$10e0292f57246bb5","mousePositionX","innerWidth","$9cfe05c3c3a9492e$var$isScroll","$25b79fa7abfd1975$export$fdeef9d50cf3aad4","button","ripple","createElement","classList","add","appendChild","remove","addEventListener","evt","clientX","matches","querySelectorAll","forEach","currentTarget","toggle"],"version":3,"file":"index.c7212a4f.js.map"} \ No newline at end of file diff --git a/index.e425b0de.js b/index.e425b0de.js deleted file mode 100644 index d7ea299..0000000 --- a/index.e425b0de.js +++ /dev/null @@ -1,2 +0,0 @@ -let e,t,l;const o=()=>{let e=[,,,].fill(0).map(()=>0|Math.floor(255*Math.random()));return`rgb(${e.join(",")})`},n=e=>{let t=document.getElementById("box"),l=document.querySelector("path");null!==t&&null!==l&&(t.style.backgroundColor=e,l.style.fill=e)},r=e=>{let t=document.getElementById("reflex-one"),l=document.getElementById("reflex-two");null!==t&&null!==l&&(t.style.backgroundColor=e,l.style.backgroundColor=e)},a=e=>{b.push(e)},c=e=>{if(e instanceof HTMLElement){let t=window.getComputedStyle(e);a({target:e.id,color:t.backgroundColor})}if(e instanceof SVGElement){let t=window.getComputedStyle(e);a({target:e.id,color:t.fill})}},d=e=>{if(void 0===e)return;let t=document.getElementById(e.target);switch(e.target){case"box":case"path":n(e.color);break;case"reflex-one":case"reflex-two":r(e.color);break;default:if(null===t)return;t.style.backgroundColor=e.color}};let u=!0;const i=()=>{let e=()=>{!u&&b.length>0&&(console.log(b.length),d(b.pop()),t=setTimeout(e,l=Math.max(l-100,100)))};e()},s=e=>{u=e},m=()=>{u||(clearTimeout(e),clearTimeout(t),l=1e3,e=setTimeout(()=>{i()},5e3))};let g=0;const f=e=>{0!==b.length&&(g=Math.floor(e/window.innerWidth*b.length),d(b[g]))};let h=!1;const b=[];document.addEventListener("mousedown",()=>{h=!0,s(!0)}),document.addEventListener("mouseup",()=>{h=!1,s(!1)}),document.addEventListener("mousemove",e=>{h&&f(e.clientX)}),document.addEventListener("click",e=>{if(m(),null===e.target)return;let t=e.target;if(!t.matches(".clickable"))return;let l=o();switch(t.id){case"box":case"path":c(t),n(l);break;case"reflex-one":case"reflex-two":c(t),r(l);break;default:c(t),t.style.backgroundColor=l}}); -//# sourceMappingURL=index.e425b0de.js.map diff --git a/index.e425b0de.js.map b/index.e425b0de.js.map deleted file mode 100644 index d1959c0..0000000 --- a/index.e425b0de.js.map +++ /dev/null @@ -1 +0,0 @@ -{"mappings":"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","sources":["","src/ts/index.ts","src/modules/index.ts","src/modules/generateBackgroundColor.ts","src/modules/colorSVG.ts","src/modules/colorReflection.ts","src/modules/handleClickableElement.ts","src/modules/recordColorChange.ts","src/modules/rewindColors.ts","src/modules/applyColorFromStep.ts","src/modules/scrollThroughSteps.ts"],"sourcesContent":["const $0badc424dcc51d88$var$RANGE = 255;\nconst $0badc424dcc51d88$var$MODEL = \"rgb\";\nconst $0badc424dcc51d88$export$b2c9790f7b509997 = ()=>{\n const color = Array(3).fill(0).map(()=>Math.floor(Math.random() * $0badc424dcc51d88$var$RANGE) | 0);\n return `${$0badc424dcc51d88$var$MODEL}(${color.join(\",\")})`;\n};\n\n\nconst $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e = (color)=>{\n const box = document.getElementById(\"box\");\n const path = document.querySelector(\"path\");\n if (box === null || path === null) return;\n box.style.backgroundColor = color;\n path.style.fill = color;\n};\n\n\nconst $c170ef335cfad920$export$64e2b6bc85b3cd29 = (color)=>{\n const reflexOne = document.getElementById(\"reflex-one\");\n const reflexTwo = document.getElementById(\"reflex-two\");\n if (reflexOne === null || reflexTwo === null) return;\n reflexOne.style.backgroundColor = color;\n reflexTwo.style.backgroundColor = color;\n};\n\n\n\n\n\n\nconst $3ee857463697fb16$var$pushStep = (step)=>{\n (0, $9cfe05c3c3a9492e$export$be3f796aed065412).push(step);\n};\nconst $3ee857463697fb16$export$1a2bcf970dbb3bd = (target)=>{\n if (target instanceof HTMLElement) {\n const computedStyle = window.getComputedStyle(target);\n $3ee857463697fb16$var$pushStep({\n target: target.id,\n color: computedStyle.backgroundColor\n });\n }\n if (target instanceof SVGElement) {\n const computedStyle = window.getComputedStyle(target);\n $3ee857463697fb16$var$pushStep({\n target: target.id,\n color: computedStyle.fill\n });\n }\n};\n\n\n\n\n\nconst $967393d0aa96b631$export$7aba65b795f139f4 = (step)=>{\n if (step === undefined) return;\n const element = document.getElementById(step.target);\n switch(step.target){\n case \"box\":\n case \"path\":\n (0, $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e)(step.color);\n break;\n case \"reflex-one\":\n case \"reflex-two\":\n (0, $c170ef335cfad920$export$64e2b6bc85b3cd29)(step.color);\n break;\n default:\n if (element === null) return;\n element.style.backgroundColor = step.color;\n }\n};\n\n\nconst $1e9ea166a574d843$var$DELAY = 1000;\nconst $1e9ea166a574d843$var$TIMEOUT = 5000;\nlet $1e9ea166a574d843$var$idleTime;\nlet $1e9ea166a574d843$var$interval;\nlet $1e9ea166a574d843$var$stopRewind = true;\nlet $1e9ea166a574d843$var$initialDelay;\nconst $1e9ea166a574d843$var$rewind = ()=>{\n const removeStep = ()=>{\n if ($1e9ea166a574d843$var$stopRewind) return;\n if ((0, $9cfe05c3c3a9492e$export$be3f796aed065412).length > 0) {\n console.log((0, $9cfe05c3c3a9492e$export$be3f796aed065412).length);\n const removedStep = (0, $9cfe05c3c3a9492e$export$be3f796aed065412).pop();\n (0, $967393d0aa96b631$export$7aba65b795f139f4)(removedStep);\n $1e9ea166a574d843$var$initialDelay = Math.max($1e9ea166a574d843$var$initialDelay - 100, 100);\n $1e9ea166a574d843$var$interval = setTimeout(removeStep, $1e9ea166a574d843$var$initialDelay);\n }\n };\n removeStep();\n};\nconst $1e9ea166a574d843$export$9a0fc3cbe62daaef = (arg)=>{\n $1e9ea166a574d843$var$stopRewind = arg;\n};\nconst $1e9ea166a574d843$export$148d61ea341bbff7 = ()=>{\n if ($1e9ea166a574d843$var$stopRewind) return;\n clearTimeout($1e9ea166a574d843$var$idleTime);\n clearTimeout($1e9ea166a574d843$var$interval);\n $1e9ea166a574d843$var$initialDelay = $1e9ea166a574d843$var$DELAY;\n $1e9ea166a574d843$var$idleTime = setTimeout(()=>{\n $1e9ea166a574d843$var$rewind();\n }, $1e9ea166a574d843$var$TIMEOUT);\n};\n\n\n\n\nlet $4f9eb3434b4304f2$var$scrollIndex = 0;\nconst $4f9eb3434b4304f2$export$10e0292f57246bb5 = (mousePositionX)=>{\n if ((0, $9cfe05c3c3a9492e$export$be3f796aed065412).length === 0) return;\n $4f9eb3434b4304f2$var$scrollIndex = Math.floor(mousePositionX / window.innerWidth * (0, $9cfe05c3c3a9492e$export$be3f796aed065412).length);\n (0, $967393d0aa96b631$export$7aba65b795f139f4)((0, $9cfe05c3c3a9492e$export$be3f796aed065412)[$4f9eb3434b4304f2$var$scrollIndex]);\n};\n\n\nlet $9cfe05c3c3a9492e$var$isScroll = false;\nconst $9cfe05c3c3a9492e$export$be3f796aed065412 = [];\nconst $9cfe05c3c3a9492e$export$a1e04f038db6e793 = ()=>{\n document.addEventListener(\"mousedown\", ()=>{\n $9cfe05c3c3a9492e$var$isScroll = true;\n (0, $1e9ea166a574d843$export$9a0fc3cbe62daaef)(true);\n });\n document.addEventListener(\"mouseup\", ()=>{\n $9cfe05c3c3a9492e$var$isScroll = false;\n (0, $1e9ea166a574d843$export$9a0fc3cbe62daaef)(false);\n });\n document.addEventListener(\"mousemove\", (evt)=>{\n if (!$9cfe05c3c3a9492e$var$isScroll) return;\n (0, $4f9eb3434b4304f2$export$10e0292f57246bb5)(evt.clientX);\n });\n document.addEventListener(\"click\", (evt)=>{\n (0, $1e9ea166a574d843$export$148d61ea341bbff7)();\n if (evt.target === null) return;\n const target = evt.target;\n if (!target.matches(\".clickable\")) return;\n const color = (0, $0badc424dcc51d88$export$b2c9790f7b509997)();\n switch(target.id){\n case \"box\":\n case \"path\":\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n (0, $1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e)(color);\n break;\n case \"reflex-one\":\n case \"reflex-two\":\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n (0, $c170ef335cfad920$export$64e2b6bc85b3cd29)(color);\n break;\n default:\n (0, $3ee857463697fb16$export$1a2bcf970dbb3bd)(target);\n target.style.backgroundColor = color;\n }\n });\n};\n\n\n\n\n\n(()=>{\n (0, $9cfe05c3c3a9492e$export$a1e04f038db6e793)();\n})();\n\n\n//# sourceMappingURL=index.e425b0de.js.map\n","import { handleClickableElement } from '../modules';\n\n((): void => {\n handleClickableElement();\n})();\n","export * from './generateBackgroundColor';\nexport * from './colorSVG';\nexport * from './colorReflection';\nexport * from './handleClickableElement';\nexport * from './recordColorChange';\n","const RANGE = 255;\nconst MODEL = 'rgb';\n\nexport const generateBackgroundColor = (): string => {\n const color = Array(3)\n .fill(0)\n .map(() => Math.floor(Math.random() * RANGE) | 0);\n return `${MODEL}(${color.join(',')})`;\n};\n","export const colorSVG = (color: string): void => {\n const box = document.getElementById('box');\n const path = document.querySelector('path');\n\n if (box === null || path === null) return;\n\n box.style.backgroundColor = color;\n path.style.fill = color;\n};\n","export const colorReflection = (color: string): void => {\n const reflexOne = document.getElementById('reflex-one');\n const reflexTwo = document.getElementById('reflex-two');\n\n if (reflexOne === null || reflexTwo === null) return;\n\n reflexOne.style.backgroundColor = color;\n reflexTwo.style.backgroundColor = color;\n};\n","import { generateBackgroundColor } from './generateBackgroundColor';\nimport { colorSVG } from './colorSVG';\nimport { colorReflection } from './colorReflection';\nimport { recordColorChange } from './recordColorChange';\nimport { resetTimer, setStopRewind } from './rewindColors';\nimport { scrollThroughSteps } from './scrollThroughSteps';\n\nexport type StepType = {\n target: string;\n color: string;\n};\n\nlet isScroll = false;\nexport const steps: StepType[] = [];\n\ntype ClickableElement = HTMLElement & { id: string };\n\nexport const handleClickableElement = (): void => {\n document.addEventListener('mousedown', (): void => {\n isScroll = true;\n setStopRewind(true);\n });\n\n document.addEventListener('mouseup', (): void => {\n isScroll = false;\n setStopRewind(false);\n });\n\n document.addEventListener('mousemove', (evt) => {\n if (!isScroll) return;\n scrollThroughSteps(evt.clientX);\n });\n\n document.addEventListener('click', (evt): void => {\n resetTimer();\n if (evt.target === null) return;\n\n const target = evt.target as ClickableElement;\n if (!target.matches('.clickable')) return;\n\n const color = generateBackgroundColor();\n\n switch (target.id) {\n case 'box':\n case 'path':\n recordColorChange(target);\n colorSVG(color);\n break;\n\n case 'reflex-one':\n case 'reflex-two':\n recordColorChange(target);\n colorReflection(color);\n break;\n\n default:\n recordColorChange(target);\n target.style.backgroundColor = color;\n }\n });\n};\n","import { type StepType, steps } from './handleClickableElement';\n\nconst pushStep = (step: StepType): void => {\n steps.push(step);\n};\n\nexport const recordColorChange = (target: Element): void => {\n if (target instanceof HTMLElement) {\n const computedStyle = window.getComputedStyle(target);\n pushStep({\n target: target.id,\n color: computedStyle.backgroundColor,\n });\n }\n if (target instanceof SVGElement) {\n const computedStyle = window.getComputedStyle(target);\n pushStep({\n target: target.id,\n color: computedStyle.fill,\n });\n }\n};\n","import { steps } from './handleClickableElement';\nimport { applyColorFromStep } from './applyColorFromStep';\n\nconst DELAY = 1000;\nconst TIMEOUT = 5000;\n\nlet idleTime: NodeJS.Timeout;\nlet interval: NodeJS.Timeout;\nlet stopRewind = true;\nlet initialDelay: number;\n\nconst rewind = (): void => {\n const removeStep = (): void => {\n if (stopRewind) return;\n if (steps.length > 0) {\n console.log(steps.length);\n const removedStep = steps.pop();\n applyColorFromStep(removedStep);\n\n initialDelay = Math.max(initialDelay - 100, 100);\n\n interval = setTimeout(removeStep, initialDelay);\n }\n };\n removeStep();\n};\n\nexport const setStopRewind = (arg: boolean): void => {\n stopRewind = arg;\n};\n\nexport const resetTimer = (): void => {\n if (stopRewind) return;\n clearTimeout(idleTime);\n clearTimeout(interval);\n initialDelay = DELAY;\n idleTime = setTimeout(() => {\n rewind();\n }, TIMEOUT);\n};\n","import { colorReflection } from './colorReflection';\nimport { colorSVG } from './colorSVG';\nimport type { StepType } from './handleClickableElement';\n\nexport const applyColorFromStep = (step: StepType | undefined): void => {\n if (step === undefined) return;\n\n const element = document.getElementById(step.target);\n\n switch (step.target) {\n case 'box':\n case 'path':\n colorSVG(step.color);\n break;\n\n case 'reflex-one':\n case 'reflex-two':\n colorReflection(step.color);\n break;\n\n default:\n if (element === null) return;\n element.style.backgroundColor = step.color;\n }\n};\n","import { applyColorFromStep } from './applyColorFromStep';\nimport { steps } from './handleClickableElement';\n\nlet scrollIndex = 0;\n\nexport const scrollThroughSteps = (mousePositionX: number): void => {\n if (steps.length === 0) return;\n scrollIndex = Math.floor((mousePositionX / window.innerWidth) * steps.length);\n applyColorFromStep(steps[scrollIndex]);\n};\n"],"names":["$1e9ea166a574d843$var$idleTime","$1e9ea166a574d843$var$interval","$1e9ea166a574d843$var$initialDelay","$0badc424dcc51d88$export$b2c9790f7b509997","color","Array","fill","map","Math","floor","random","join","$1a30d7dd78ed78bd$export$76dc85c2c2ffbe9e","box","document","getElementById","path","querySelector","style","backgroundColor","$c170ef335cfad920$export$64e2b6bc85b3cd29","reflexOne","reflexTwo","$3ee857463697fb16$var$pushStep","step","$9cfe05c3c3a9492e$export$be3f796aed065412","push","$3ee857463697fb16$export$1a2bcf970dbb3bd","target","HTMLElement","computedStyle","window","getComputedStyle","id","SVGElement","$967393d0aa96b631$export$7aba65b795f139f4","undefined","element","$1e9ea166a574d843$var$stopRewind","$1e9ea166a574d843$var$rewind","removeStep","length","console","log","pop","setTimeout","max","$1e9ea166a574d843$export$9a0fc3cbe62daaef","arg","$1e9ea166a574d843$export$148d61ea341bbff7","clearTimeout","$4f9eb3434b4304f2$var$scrollIndex","$4f9eb3434b4304f2$export$10e0292f57246bb5","mousePositionX","innerWidth","$9cfe05c3c3a9492e$var$isScroll","addEventListener","evt","clientX","matches"],"version":3,"file":"index.e425b0de.js.map"} \ No newline at end of file diff --git a/index.html b/index.html index 1dc237f..3ada0da 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -👁
\ No newline at end of file +👁
\ No newline at end of file diff --git a/square-arrow-left-svgrepo-com.b2eab796.svg b/square-arrow-left-svgrepo-com.b2eab796.svg new file mode 100644 index 0000000..f56c68b --- /dev/null +++ b/square-arrow-left-svgrepo-com.b2eab796.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/square-arrow-right-svgrepo-com.d6154a74.svg b/square-arrow-right-svgrepo-com.d6154a74.svg new file mode 100644 index 0000000..10ced56 --- /dev/null +++ b/square-arrow-right-svgrepo-com.d6154a74.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/square-pause-svgrepo-com.98f027d3.svg b/square-pause-svgrepo-com.98f027d3.svg new file mode 100644 index 0000000..e667b5f --- /dev/null +++ b/square-pause-svgrepo-com.98f027d3.svg @@ -0,0 +1 @@ + \ No newline at end of file