Lapita12

async function elUp(selector) {
  try {
    var html = await (await fetch(location.href)).text();
    var newdoc = new DOMParser().parseFromString(html, 'text/html');
    var chat = document.querySelector(selector);
    chat.outerHTML = newdoc.querySelector(selector).outerHTML;
    
    chat = document.querySelector(selector);
    chat.scrollTop = chat.scrollHeight;

    return true;
  } catch(err) {return false;}
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const random = new Set();

while (random.size < 3) {
  let number = getRandomInt(1, 5);
  random.add(number);
}

console.log(Array.from(random));

document.addEventListener('DOMContentLoaded', () => {
  const submenuItem = document.querySelectorAll(".header .menu-item-has-children");
  const menuBody = document.querySelector(".sub-menu");

  submenuItem.forEach((item) => {
    item.addEventListener('click', handlerItem);

    // слушаем клик вне меню
    document.addEventListener("click", function (e) {
      const target = e.target;
      const its_menu = target == menuBody || menuBody.contains(target);
      const its_btnMenu = target == menuBody;
      const menu_is_active = item.classList.contains("--show");

      if (!its_menu && !its_btnMenu && menu_is_active) {
        item.classList.toggle("--show");
      }
    });

    // слушаем скролл
    document.addEventListener("scroll", function () {
      //убираем класс если произошел скролл
      item.classList.remove("--show");
    });
  });

  function handlerItem(e) {
    if (e.target.classList.contains('sub-menu-link') || e.target.closest('.sub-menu-link')) {
      // если нажата ссылка в подменю, то предотвращаем действие по умолчанию только для нее
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    this.classList.toggle("--show");
  }
});

function drawPixelatedImage(image, pixelSize) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const pixelImage = document.createElement('canvas');
    pixelImage.width = pixelSize;
    pixelImage.height = pixelSize;
    const pixelCtx = pixelImage.getContext('2d');
    pixelCtx.imageSmoothingEnabled = false;
    pixelCtx.drawImage(canvas, 0, 0, pixelSize, pixelSize);

    const resizedImage = document.createElement('canvas');
    resizedImage.width = canvas.width; 
    resizedImage.height = canvas.height;
    const resizedCtx = resizedImage.getContext('2d');
    resizedCtx.imageSmoothingEnabled = false;
    for (let x = 0; x < canvas.width; x += pixelSize) {
        for (let y = 0; y < canvas.height; y += pixelSize) {
            resizedCtx.drawImage(pixelImage, x, y, pixelSize, pixelSize, x, y, pixelSize, pixelSize);
        }
    }

    return resizedImage.toDataURL('image/png');
}

function createImageMap(image) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixelMap = [];

    for (let i = 0; i < imageData.data.length; i += 4) {
        const red = imageData.data[i];
        const green = imageData.data[i + 1];
        const blue = imageData.data[i + 2];
        const alpha = imageData.data[i + 3];

        if (alpha === 0) {
            pixelMap.push(null);
        } else {
            pixelMap.push({ r: red, g: green, b: blue });
        }
    }

    return pixelMap;
}

function markSectorsWithIcons(image, pixelSize) {
    const pixelatedImage = drawPixelatedImage(image, pixelSize);
    const pixelMap = createImageMap(image);

    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    const resizedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const resizedData = resizedImageData.data;

    for (let x = 0; x < canvas.width; x += pixelSize) {
        for (let y = 0; y < canvas.height; y += pixelSize) {
            const dataIndex = (y * canvas.width + x) * 4;
            const pixelColor = pixelMap[dataIndex / 4];
            const markerImage = getMarkerImage(pixelColor);

            if (markerImage) {
                const pixelImage = new Image();
                pixelImage.src = markerImage;
                ctx.drawImage(pixelImage, x, y, pixelSize, pixelSize);
            }
        }
    }

    return canvas.toDataURL('image/png');
}

function getMarkerImage(color) {
    // здесь вы можете создать и возвращать нужный значок на основе цвета пикселя
}

import React, { useState, useEffect } from 'react';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    // вместо data.data используйте свой набор данных
    const data = { data: ['file1', 'file2', 'file3'] };
    const newElements = [];
    for (let i = 0; i < data.data.length; i++) {
      newElements.push(<Uploaded_file button_name={data.data[i]} key={i}></Uploaded_file>);
    }
    setElements(newElements);
  }, []);

  return (
    <div>
      {elements}
    </div>
  );
}

export default App;

function installWeather(props) {
  const request = new Promise((resolve, reject) => {
    console.log('Запрос данных на сервер...')
    fetch('https://api.openweathermap.org/data/2.5/weather?q=LVIV&units=metric&APPID=5d066958a60d315387d9492393935c19')
      .then(response => {
        if (response.ok) {
          return resolve(response.json());
        } else {
          reject('Что-то пошло нет так');
        }
      });
  });
  
  return request
    .then(data => {
      return (
        <div className='wrapper'>
          <div className='container'>
            <h1 className="place" id="place">City: {data.name}</h1>
            <p className="temp" id="temp"></p>
            <p className="pressure" id="pressure"></p>
            <p className="description" id="description"></p>
            <p className="humidity" id="humidity"></p>
            <p className="speed" id="speed"></p>
            <p className="degree" id="degree"></p>
            <img className="image" id="image" src="" alt="clouds" title="Weather"/>
          </div>
        </div>
      )
    })
}

export default installWeather;

let zSpacing = -1000,
  lastPos = zSpacing / 5,
  $frames = document.getElementsByClassName('frame'),
  frames = Array.from($frames),
  zVals = [];

const lastFrame = $frames[$frames.length - 1];
const lastFrameHeight = lastFrame.offsetHeight;
const lastFrameTop = lastFrame.offsetTop;

window.onscroll = function() {
  let top = document.documentElement.scrollTop,
    delta = lastPos - top
  lastPos = top

  frames.forEach(function(n, i) {
    zVals.push((i * zSpacing) + zSpacing)
    zVals[i] += delta * -5.5
    let frame = frames[i],
      transform = `translateZ(${zVals[i]}px)`,
    opacity = zVals[i] < Math.abs(zSpacing) / 1.8 ? 1 : 0
    
    frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity};`);
  });

  if (top + window.innerHeight >= lastFrameTop + lastFrameHeight) {
    window.scrollTo(0, lastFrameTop);
  }
};

window.scrollTo(0, 1);

let soundbutton = document.querySelector('.soundbutton'),
    audio = document.querySelector('.audio')

soundbutton.addEventListener('click', e =>{
  soundbutton.classList.toggle('paused')
  audio.paused ? audio.play() : audio.pause()
})

window.onfocus = function(){
  soundbutton.classList.contains('paused') ? audio.pause() : audio.play()
}

window.onblur = function() {
  audio.pause()
}