Delete script.js

script.js

@@ -1,205 +0,0 @@
-let images = [];
-let gridOrder = [];
-
-function loadImages() {
-  const files = document.getElementById('imageInput').files;
-  const preview = document.getElementById('preview');
-  const layout = document.getElementById('layout').value;
-  images = [];
-  gridOrder = [];
-  preview.innerHTML = '';
-
-  if (files.length === 0) {
-    alert('Drop some pics first!');
-    return;
-  }
-
-  let gridConfig;
-  if (layout === 'random') {
-    const rows = Math.ceil(Math.sqrt(files.length));
-    const cols = Math.ceil(files.length / rows);
-    gridConfig = { rows, cols, slots: Array(rows * cols).fill({ w: 1, h: 1 }) };
-  } else if (layout === 'jagged4') {
-    gridConfig = {
-      rows: 2,
-      cols: 3,
-      slots: [
-        { w: 2, h: 1 }, { w: 1, h: 1 }, { w: 0, h: 0 }, // Top: wide, narrow, skip
-        { w: 1, h: 1 }, { w: 1, h: 1 }, { w: 1, h: 1 }  // Bottom: three even
-      ]
-    };
-  } else if (layout === 'split6') {
-    gridConfig = {
-      rows: 3,
-      cols: 3,
-      slots: [
-        { w: 1, h: 2 }, { w: 2, h: 1 }, { w: 0, h: 0 }, // Left tall, top wide, skip
-        { w: 0, h: 0 }, { w: 1, h: 1 }, { w: 1, h: 1 }, // Skip, two small
-        { w: 1, h: 1 }, { w: 1, h: 1 }, { w: 0, h: 0 }  // Bottom two, skip
-      ]
-    };
-  } else if (layout === 'chaos5') {
-    gridConfig = {
-      rows: 3,
-      cols: 2,
-      slots: [
-        { w: 1, h: 1 }, { w: 1, h: 2 }, // Small, tall
-        { w: 1, h: 1 }, { w: 0, h: 0 }, // Small, skip
-        { w: 2, h: 1 }, { w: 0, h: 0 }  // Wide, skip
-      ]
-    };
-  } else {
-    const [rows, cols] = layout.split('x').map(Number);
-    gridConfig = { rows, cols, slots: Array(rows * cols).fill({ w: 1, h: 1 }) };
-  }
-
-  const maxSlots = gridConfig.slots.filter(s => s.w > 0 && s.h > 0).length;
-  Array.from(files).slice(0, maxSlots).forEach((file, index) => {
-    const img = new Image();
-    img.onload = () => {
-      images.push({ img, width: img.width, height: img.height, id: index });
-      gridOrder.push(index);
-      updatePreview();
-      setupGrid(gridConfig);
-    };
-    img.src = URL.createObjectURL(file);
-  });
-}
-
-function updatePreview() {
-  const preview = document.getElementById('preview');
-  preview.innerHTML = '';
-  images.forEach((image) => {
-    const imgElement = document.createElement('img');
-    imgElement.src = image.img.src;
-    imgElement.draggable = true;
-    imgElement.dataset.id = image.id;
-    imgElement.addEventListener('dragstart', (e) => {
-      e.dataTransfer.setData('text/plain', image.id);
-    });
-    preview.appendChild(imgElement);
-  });
-}
-
-function setupGrid(config) {
-  const gridPreview = document.getElementById('gridPreview');
-  gridPreview.innerHTML = '';
-  gridPreview.style.display = 'grid';
-  gridPreview.style.gridTemplateColumns = `repeat(${config.cols}, 80px)`;
-  gridPreview.style.gridTemplateRows = `repeat(${config.rows}, 80px)`;
-
-  config.slots.forEach((slot, index) => {
-    if (slot.w > 0 && slot.h > 0) {
-      const div = document.createElement('div');
-      div.className = 'grid-slot';
-      div.style.gridColumn = `span ${slot.w}`;
-      div.style.gridRow = `span ${slot.h}`;
-      div.style.width = `${slot.w * 80}px`;
-      div.style.height = `${slot.h * 80}px`;
-      div.dataset.index = index;
-      div.addEventListener('dragover', (e) => e.preventDefault());
-      div.addEventListener('drop', (e) => {
-        e.preventDefault();
-        const id = parseInt(e.dataTransfer.getData('text/plain'));
-        gridOrder[config.slots.filter((s, i) => i <= index && s.w > 0 && s.h > 0).length - 1] = id;
-        updateGrid(config);
-      });
-      gridPreview.appendChild(div);
-    }
-  });
-  updateGrid(config);
-  document.getElementById('generateBtn').style.display = 'block';
-}
-
-function updateGrid(config) {
-  const slots = document.querySelectorAll('.grid-slot');
-  let slotIndex = 0;
-  slots.forEach((slot) => {
-    slot.innerHTML = '';
-    const imageId = gridOrder[slotIndex];
-    if (imageId !== undefined) {
-      const image = images.find(img => img.id === imageId);
-      if (image) {
-        const imgElement = document.createElement('img');
-        imgElement.src = image.img.src;
-        slot.appendChild(imgElement);
-      }
-    }
-    slotIndex++;
-  });
-}
-
-function createTiles() {
-  const layout = document.getElementById('layout').value;
-  const canvas = document.getElementById('canvas');
-  const ctx = canvas.getContext('2d');
-
-  let gridConfig;
-  if (layout === 'random') {
-    const rows = Math.ceil(Math.sqrt(images.length));
-    const cols = Math.ceil(images.length / rows);
-    gridConfig = { rows, cols, slots: Array(rows * cols).fill({ w: 1, h: 1 }) };
-  } else if (layout === 'jagged4') {
-    gridConfig = {
-      rows: 2,
-      cols: 3,
-      slots: [
-        { w: 2, h: 1 }, { w: 1, h: 1 }, { w: 0, h: 0 },
-        { w: 1, h: 1 }, { w: 1, h: 1 }, { w: 1, h: 1 }
-      ]
-    };
-  } else if (layout === 'split6') {
-    gridConfig = {
-      rows: 3,
-      cols: 3,
-      slots: [
-        { w: 1, h: 2 }, { w: 2, h: 1 }, { w: 0, h: 0 },
-        { w: 0, h: 0 }, { w: 1, h: 1 }, { w: 1, h: 1 },
-        { w: 1, h: 1 }, { w: 1, h: 1 }, { w: 0, h: 0 }
-      ]
-    };
-  } else if (layout === 'chaos5') {
-    gridConfig = {
-      rows: 3,
-      cols: 2,
-      slots: [
-        { w: 1, h: 1 }, { w: 1, h: 2 },
-        { w: 1, h: 1 }, { w: 0, h: 0 },
-        { w: 2, h: 1 }, { w: 0, h: 0 }
-      ]
-    };
-  } else {
-    const [rows, cols] = layout.split('x').map(Number);
-    gridConfig = { rows, cols, slots: Array(rows * cols).fill({ w: 1, h: 1 }) };
-  }
-
-  const maxWidth = Math.max(...images.map(img => img.width));
-  const maxHeight = Math.max(...images.map(img => img.height));
-  canvas.width = gridConfig.cols * maxWidth;
-  canvas.height = gridConfig.rows * maxHeight;
-  canvas.style.display = 'block';
-
-  let slotIndex = 0;
-  gridConfig.slots.forEach((slot, index) => {
-    if (slot.w > 0 && slot.h > 0) {
-      const imageId = gridOrder[slotIndex];
-      if (imageId !== undefined) {
-        const image = images.find(img => img.id === imageId);
-        if (image) {
-          const x = (index % gridConfig.cols) * maxWidth;
-          const y = Math.floor(index / gridConfig.cols) * maxHeight;
-          ctx.drawImage(image.img, x, y, image.width, image.height);
-        }
-      }
-      slotIndex++;
-    }
-  });
-
-  updateDownloadLink(canvas);
-}
-
-function updateDownloadLink(canvas) {
-  const downloadLink = document.getElementById('download');
-  downloadLink.href = canvas.toDataURL('image/png');
-  downloadLink.style.display = 'block';
-}