css-template_04

				
					  document.addEventListener("DOMContentLoaded", function () {
        function enterParty() {
          const imgPieces = ["image01.png", "image02.png"];
          var randomPiece = 0;
          var stopParty = 0;

          function deleteImgContent() {
            var imgElements = document.querySelectorAll(".grid-item");

            imgElements.forEach(function (imgElement) {
              imgElement.innerHTML = "";
            });

            if (stopParty === 1) {
              clearInterval(addPiecesInterval);
              clearInterval(deletePiecesInterval);
              stopParty = 0;
            }
          }

          function addImgPiece() {
            var randomNumber = Math.floor(Math.random() * 106);

            for (let i = 0; i < 1; i++) {
              var cell = document.getElementById(randomNumber);
              var body = document.body;
              var bodyStyle = window.getComputedStyle(body);
              var bodyBgColor = bodyStyle.backgroundColor;
              if (bodyBgColor === "rgb(240, 216, 168)") {
                stopParty = 1;
                deleteImgContent();
                return;
              }

              var images = document.createElement("img");
              randomPiece = randomPiece === 0 ? 1 : 0;
              images.src = imgPieces[randomPiece];
              cell.style.display = "flex";
              cell.style.justifyContent = "center";
              cell.style.alignItems = "center";
              cell.appendChild(images);
              images.classList.add("imgFilter");
            }
          }

          addImgPiece();

          var addPiecesInterval = setInterval(addImgPiece, 500);
          var deletePiecesInterval = setInterval(deleteImgContent, 10000);
        }

        enterParty();
        //վերը նշվածն ապահովում է նկարների հայտնվել կորչելը՝ մինչ լամպի ակտիվացումը։
        
        
        
        
        
        
//այստեղից սկսվում է լամպին վերաբերող js կոդը։
        var _a = window.gsap,
          registerPlugin = _a.registerPlugin,
          set = _a.set,
          to = _a.to,
          timeline = _a.timeline,
          MorphSVGPlugin = window.MorphSVGPlugin,
          Draggable = window.Draggable;
        registerPlugin(MorphSVGPlugin);
        // Used to calculate distance of "tug"
        var startX;
        var startY;
        var AUDIO = {
          CLICK: new Audio("https://assets.codepen.io/605876/click.mp3"),
        };
        var STATE = {
          ON: false,
        };
        var CORD_DURATION = 0.1;
        var CORDS = document.querySelectorAll(".toggle-scene__cord");
        var HIT = document.querySelector(".toggle-scene__hit-spot");
        var DUMMY = document.querySelector(".toggle-scene__dummy-cord");
        var DUMMY_CORD = document.querySelector(
          ".toggle-scene__dummy-cord line"
        );
        var PROXY = document.createElement("div");
        // set init position
        var ENDX = DUMMY_CORD.getAttribute("x2");
        var ENDY = DUMMY_CORD.getAttribute("y2");
        var RESET = function () {
          set(PROXY, {
            x: ENDX,
            y: ENDY,
          });
        };
        RESET();
        var CORD_TL = timeline({
          paused: true,
          onStart: function () {
            STATE.ON = !STATE.ON;
            set(document.documentElement, {
              "--on": STATE.ON ? 1 : 0,
            });
            set([DUMMY, HIT], {
              display: "none",
            });
            set(CORDS[0], {
              display: "block",
            });
            AUDIO.CLICK.play();



//այս հատվածն ապահովում է լամպի անջատման կամ ակտիվացման դեպքում ակտիվացվող ֆունկցիաները։
            var computedStyle = getComputedStyle(document.documentElement);
            var onValue = computedStyle.getPropertyValue("--on");
            if (onValue == 0) {
              container_for_cockroaches_delete();
              startPartyBAckgr();
              enterParty();
            } else if (onValue == 1) {
              stopPartyBAckgr();
              container_for_cockroaches();
            }
            
            
            
          },
          onComplete: function () {
            set([DUMMY, HIT], {
              display: "block",
            });
            set(CORDS[0], {
              display: "none",
            });
            RESET();
          },
        });
        for (var i = 1; i < CORDS.length; i++) {
          CORD_TL.add(
            to(CORDS[0], {
              morphSVG: CORDS[i],
              duration: CORD_DURATION,
              repeat: 1,
              yoyo: true,
            })
          );
        }
        Draggable.create(PROXY, {
          trigger: HIT,
          type: "x,y",
          onPress: function (e) {
            startX = e.x;
            startY = e.y;
          },
          onDrag: function () {
            set(DUMMY_CORD, {
              attr: {
                x2: this.x,
                y2: this.y,
              },
            });
          },
          onRelease: function (e) {
            var DISTX = Math.abs(e.x - startX);
            var DISTY = Math.abs(e.y - startY);
            var TRAVELLED = Math.sqrt(DISTX * DISTX + DISTY * DISTY);
            to(DUMMY_CORD, {
              attr: {
                x2: ENDX,
                y2: ENDY,
              },
              duration: CORD_DURATION,
              onComplete: function () {
                if (TRAVELLED > 50) {
                  CORD_TL.restart();
                } else {
                  RESET();
                }
              },
            });
          },
        });


//ջնջում է կոնտեյների հիմնական ֆոնի նկարը լամպի ակտիվացումից հետո։
        function stopPartyBAckgr() {
          var bodyBackgr = document.querySelector("body");
          bodyBackgr.style.backgroundImage = "url('')";
        }
        
        
//վերադարձնում է կոնտեյների հիմնական ֆոնի նկարը լամպի անջատելուց հետո։
        function startPartyBAckgr() {
          var bodyBackgr = document.querySelector("body");
          bodyBackgr.style.backgroundImage = "url('disco_backgrr.gif')";
        }


//պատրաստում է կոնտեյներ և ապահովում բլոկների տեղաշարժման անիմացիան լամպի ակտիվացումից հետո։
        function container_for_cockroaches() {
          var gridContainer = document.getElementById(
            "gridContainer_cockroaches"
          );

          gridContainer.style.display = "grid";
          gridContainer.style.gridTemplateColumns = "repeat(8, 100px)";
          gridContainer.style.gridTemplateRows = "repeat(4, 100px)";
          gridContainer.style.columnGap = "60px";
          gridContainer.style.rowGap = "60px";
          gridContainer.style.position = "absolute";
          gridContainer.style.zIndex = "100";
          gridContainer.style.visibility = "hidden";

          const gridItems = [];
          const cockches = ["cocrosches.png", "cocrosches-2.png"];
          var randomImg = 0;

          // Generate grid items
          for (let i = 0; i < 8 * 4; i++) {
            const gridItem = document.createElement("div");
            gridItem.classList.add("grid-item-coaches");
            gridItem.setAttribute("id", i);
            var images = document.createElement("img");
            images.style.width = "200px";
            randomImg = randomImg === 0 ? 1 : 0;
            images.src = cockches[randomImg];
            gridItem.appendChild(images);
            images.classList.add("img_coshes_item");
            gridContainer.appendChild(gridItem);
            gridItems.push(gridItem);
          }


          const windowHeight = window.innerHeight;
          const windowWidth = window.innerWidth;

          setTimeout(function () {
            gridContainer.style.visibility = "visible";
            gridItems.forEach((item) => {
              let randomX, randomY;
              const side = Math.floor(Math.random() * 4); // 0 - top, 1 - right, 2 - bottom, 3 - left

              switch (side) {
                case 0: // top
                  randomX = Math.random() * windowWidth;
                  randomY = -1000;
                  break;
                case 1: // right
                  randomX = windowWidth;
                  randomY = Math.random() * windowHeight;
                  break;
                case 2: // bottom
                  randomX = Math.random() * windowWidth;
                  randomY = windowHeight;
                  break;
                case 3: // left
                  randomX = -2000;
                  randomY = Math.random() * windowHeight;
                  break;
              }

              item.style.transitionDuration = "4s";
              item.style.transform = `translate(${randomX}px, ${randomY}px)`;
            });
          }, 10);
        }
        
        
//ջնջում է այն կոնտեյների պարունակությունը, որը պատրաստվել էր լամպի ակտիվացումից հետո։
        function container_for_cockroaches_delete() {
          var gridContainer = document.getElementById(
            "gridContainer_cockroaches"
          );
          gridContainer.innerHTML = "";
        }
      });