Add dropdown for selecting reaction images

Author: nukeop

src/dropdown.ts

@@ -0,0 +1,24 @@
+import { ReactionImage } from '.';
+
+export const createDropdown = (
+  box: Element,
+  reactionImages: ReactionImage[]
+) => { 
+  const dropdown = document.createElement('select');
+  dropdown.textContent = reactionImages[0].name;
+  reactionImages.forEach(image => {
+    const option = document.createElement('option');
+    option.textContent = image.name;
+    option.value = image.name;
+    dropdown.appendChild(option);
+  });
+
+  dropdown.onchange = (e: Event) => {
+    let target = e.target as HTMLSelectElement;
+    let selectedImage = reactionImages[target.selectedIndex];
+    console.log(selectedImage)
+    window.selectedReactionImage = selectedImage.src;
+  }
+
+  box.append(dropdown);
+}

src/index.ts

@@ -1,46 +1,70 @@
 import { replaceQRSubmit } from './quickReply';
+import { createDropdown } from './dropdown';
 
 import cryingWojak from '../assets/crying_wojak.png';
+import cryingSoyjak from '../assets/crying_soyjak.jpg';
+import npcWojak from '../assets/npc_wojak.png';
 
 const quoteColor = '#789922';
 const bgColor = '#ffffff';
+const font = '40px Arial';
+
+const imageWidth = 600;
+
+export type ReactionImage = {
+  name: string;
+  src: string;
+};
+
+const reactionImages: ReactionImage[] = [
+  { name: 'Crying Wojak', src: cryingWojak },
+  { name: 'Crying Soyjak', src: cryingSoyjak },
+  { name: 'NPC Wojak', src: npcWojak }
+];
 
 declare global {
-  interface Window { imageData: string; }
+  interface Window { 
+    imageData: string; 
+    selectedReactionImage: string;
+  }
   interface QR {
     submit: Function;
     xhr: any;
   }
 }
 window.imageData = '';
+window.selectedReactionImage = cryingWojak;
 
-const onButtonClick = (postText: string) => {
+const onButtonClick = (postText: string, button: Element) => {
   const image = new Image();
 
-  image.src = cryingWojak as unknown as string;
+  image.src = window.selectedReactionImage;
 
   const canvas = document.createElement('canvas');
   image.onload = () => {
-    canvas.width = image.width;
-    canvas.height = image.height + 100;
+    const imageHeight = imageWidth * (image.height / image.width);
+    canvas.width = imageWidth;
+    canvas.height = imageHeight + 100;
     const ctx = canvas.getContext('2d');
 
-    ctx.font = '48px serif';
-    let lines = countLines(ctx, postText, image.width);
+    ctx.font = font;
+    let lines = countLines(ctx, postText, imageWidth);
     canvas.height = canvas.height + (lines + 2) * 48;
 
     ctx.fillStyle = bgColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-    ctx.font = '48px serif';
+    ctx.font = font;
     ctx.fillStyle = quoteColor;
-    wrapText(ctx, postText, 0, image.height + 100, image.width, 48);
+    wrapText(ctx, postText, 0, imageHeight + 100, imageWidth, 48);
 
     ctx.imageSmoothingEnabled = false;
-    ctx.drawImage(image, 0, 0);
+    ctx.drawImage(image, 0, 0, imageWidth, imageHeight);
 
     let data = canvas.toDataURL();
     window.imageData = data;
+
+    button.textContent = 'Wojakified'
   };
 }
 
@@ -53,7 +77,7 @@ const wrapText = (context: CanvasRenderingContext2D, text: string, x: number, y:
     var metrics = context.measureText(testLine);
     var testWidth = metrics.width;
     if (testWidth > maxWidth && n > 0) {
-      context.font = '48px serif';
+      context.font = font;
       context.fillStyle = quoteColor;
 
       context.fillText(line, x, y);
@@ -84,41 +108,44 @@ const countLines = (context: CanvasRenderingContext2D, text: string, maxWidth: n
   return linesN;
 }
 
-const b64toBlob = (b64Data: string, contentType='', sliceSize=512) => {
+const b64toBlob = (b64Data: string, contentType = '', sliceSize = 512) => {
   const byteCharacters = atob(b64Data);
   const byteArrays = [];
 
   for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-  const slice = byteCharacters.slice(offset, offset + sliceSize);
+    const slice = byteCharacters.slice(offset, offset + sliceSize);
 
-  const byteNumbers = new Array(slice.length);
-  for (let i = 0; i < slice.length; i++) {
-    byteNumbers[i] = slice.charCodeAt(i);
-  }
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
 
-  const byteArray = new Uint8Array(byteNumbers);
-  byteArrays.push(byteArray);
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
   }
 
-  const blob = new Blob(byteArrays, {type: contentType});
+  const blob = new Blob(byteArrays, { type: contentType });
   return blob;
 };
 
 const setFile = (t: any) => { //type of t is hidden somewhere in the minified QR code 
-  if(window.imageData) {
+  if (window.imageData) {
     console.log('test', t)
     t.set("upfile", new File([b64toBlob(window.imageData.substring(22))], "you.png"));
     window.imageData = null;
   }
 };
 
-const createButton = (box: Element, postText: string, buttonText: string, onClick: (text: string) => void) => {
-  const button = document.createElement('button', {
-
-  });
+const createButton = (
+  box: Element,
+  postText: string,
+  buttonText: string,
+  onClick: (text: string, button: Element) => void
+) => {
+  const button = document.createElement('button', {});
   button.textContent = buttonText;
   button.setAttribute('style', 'cursor: pointer;');
-  button.addEventListener("click", e => { e.preventDefault(), onClick(`>${postText}`); });
+  button.addEventListener("click", e => { e.preventDefault(), onClick(`>${postText}`, button); });
   box.append(button);
 }
 
@@ -135,6 +162,7 @@ const findPosts = () => {
     if (box) {
       const postText = boxWT.getElementsByTagName('blockquote')[0].innerText;
       createButton(box, postText, 'Wojakify', onButtonClick);
+      createDropdown(box, reactionImages);
     }
   }
 }

src/quickReply.js

@@ -1,5 +1,5 @@
 export const replaceQRSubmit = setFile => {
-let QR = window.QR;
+  let QR = window.QR;
   QR.submit = function (e) {
     var t;
     QR.hidePostError(),

src/retard.js

@@ -5,6 +5,10 @@
     "module": "commonjs",
     "target": "es5",
     "allowJs": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "typeRoots": [
+      "typings",
+      "node_modules/@types"
+    ]
   }
 }