edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333

v1-com-officielle/cutter/cutter.css

@@ -29,9 +29,9 @@ body, html {
 }
 
 body {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: auto;
 }
 
 :root {
@@ -54,15 +54,40 @@ body > *{
   padding: 15px;
 }
 
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
+  100%  { color: var(--accent-color);}
+}
+
+/*===================Layout*/
 #welcome-panel {
   text-align: center;
 }
 
+#welcome-panel strong{
+  font-family:'lineal';
+  font-weight: normal;
+  font-size: 22.2px;
+}
+
 h1 {
     font-family: 'lineal', sans-serif;
     font-weight: bolder;
 }
 
+h2{
+  font-family: 'pressStart2P';
+  font-size: 13.12px;
+  font-weight: normal;
+  animation: blink 1.61s infinite;
+}
+
 #ui-canvas {
   display: block;
   height: 1350px;
@@ -70,3 +95,18 @@ h1 {
   margin-left: auto;
   margin-right: auto;
 }
+
+canvas{
+  max-width: 100%;
+}
+
+#cutter-panel{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3.33px;
+  margin-top: 13.12px;
+}
+
+#download{
+  margin: 7.77px;
+}

v1-com-officielle/cutter/cutter.js

@@ -1,42 +1,47 @@
-const CANVAS = document.getElementById("ui-canvas")
-const UI_CUTTER = new Image(CANVAS)
 const FORM = document.getElementById("cutter-form")
-
-async function updateFromForm(){
-    let data = new FormData(FORM)
-
-    let image = data.get("image")
-    if(image.size > 0){
-        if(UI_CUTTER.currentImageFile != image){
-            await UI_CUTTER.setImage(image)
-            UI_CUTTER.clearGlitch()
-        }
-    } else {
-        UI_CUTTER.clearImage()
-    }
-
-    document.getElementById("welcome-panel").hidden = image.size > 0
-    document.getElementById("glitch-panel").hidden = image.size == 0
-
-    UI_CUTTER.render()
-}
+const BUTTON = document.getElementById("download")
+const IMAGE = new Image()
+let rowCount
+let maxCount
 
 FORM.addEventListener("submit", e => {
         e.preventDefault()
-        updateFromForm()
+        const data = new FormData(FORM)
+        IMAGE.src = URL.createObjectURL(data.get('image'))
+        rowCount = data.get('rows')
+        console.log('ça marche :', data)
     })
 
-FORM.addEventListener("reset", e => {
-        FORM.elements["image"].value = ""
-        updateFromForm()
-    })
-
-document.getElementById("download-btn").addEventListener("click", async e => {
-    e.preventDefault();
-    let data = await UI_CUTTER.toBlob("image/jpeg", 1);
-    let a = document.createElement('a')
-    a.href = URL.createObjectURL(data)
-    a.download = UI_CUTTER.currentImageFile.name
-    a.click()
-    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+IMAGE.addEventListener('load', e => {
+    document.getElementById('cutter-panel').replaceChildren()
+    for(let i = 0; i<rowCount; i++){
+        for (let j = 0; j<3; j++){
+            let e = document.createElement('canvas')
+            e.width = 1080
+            e.height = 1350
+            let context = e.getContext('2d')
+            context.fillStyle = 'black'
+            context.drawImage(IMAGE,
+                j*(1080*0.94), i*1350,
+                1080*0.94, 1350,
+                1080*0.03, 0,
+                1080*0.94, 1350
+            )
+            document.getElementById('cutter-panel').append(e)
+        }
+    }
+})
+
+BUTTON.addEventListener('click', e => {
+    let imgList = document.querySelectorAll('canvas')
+    maxCount = imgList.length
+    for (let [i, img] of imgList.entries()){
+        img.toBlob(b => {
+            let aEl = document.createElement('a')
+            let index = maxCount - i
+            aEl.href = URL.createObjectURL(b)
+            aEl.download = 'img-' + index + '.jpg'
+            aEl.click()
+        },'image/jpeg',1)
+    }
 })

v1-com-officielle/cutter/index.html

@@ -7,21 +7,22 @@
     <title>Insta Ninja</title>
 </head>
 <body>
-
     <form id="cutter-form">
         <div id="welcome-panel">
             <h1>Insta Ninja</h1>
-            <p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
-
-            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" />
+            <h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
+            <p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
+              il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
+              Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
+              Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
+              il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
+                <input type="number" name="rows" value="2" min="1">
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
+            <button>Cut !</button>
         </div>
-        <div id="cutter-panel" hidden>
-            <canvas id="ui-canvas"></canvas>
-            <nav>
-                <button type="reset">Reset</button>
-                <button type="button" id="download-btn">Télécharger</button>
-            </nav>
+        <div id="cutter-panel">
         </div>
+        <button id="download">Télécharger !</button>
     </form>
 
     <script type="module" src="cutter.js"></script>

v1-com-officielle/src/data/peopleData.js

@@ -10,10 +10,12 @@ function idAndDate(str){
 function titleAndContent(str){
   let data = str.split(" :");
   let title = "NO_TITLE";
+  let contentData = [""];
   if (data.length > 1){
     title = data[0];
+  } else {
+    contentData = data[0].split('<br>').filter(e => e);
   }
-  let contentData = [""];
   if (data[1]){
     contentData = data[1].split('<br>').filter(e => e);
   }
@@ -87,7 +89,14 @@ export async function loadPeopleData() {
   for (const user of pData){
     const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
     if (pouet){
-      description[user.name] = pouet.account.note;
+      let descData = pouet.account.note.split('<br>').filter(e => e);
+      if(descData.length > 0){
+          for (let line of descData){
+          description[user.name] += '\n' + line;
+        }
+      } else {
+        description[user.name] = 'NO DESCRIPTION'
+      }
     }
   }
 

v1-com-officielle/src/indieComponents/DonationPannel.vue

@@ -20,10 +20,14 @@
         </button>
       </div>
       <div class="windowContent">
-          <p>On a besoin de ton aide ! <br><br> Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>
+            Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
+            Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
+            Chaque don compte, vraiment.<br><br>
+            Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
+          </p>
           <div id="linkRow">
-            <a href="#" class="textBtnStyle">Lydia</a>
-            <a href="#" class="textBtnStyle">Paypal</a>
+            <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
           </div>
       </div>
     </div>
@@ -75,7 +79,7 @@
   }
 
   #linkRow .textBtnStyle{
-    width: 40%;
+    width: 77.7%;
     height: 50px;
     margin-bottom: 16.1px;
   }