Create script.js

script.js

@@ -0,0 +1,205 @@
+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';
+}